JSFiddle - React, Tailwind, and code Playground

by patcon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>
<canvas id="world"></canvas>

JavaScript

const { Engine, Render, Runner, Bodies, Body, Events, Composite } = Matter;

// ---- Configuration ----
const ACTIVATION_RADIUS = 150;
const ATTRACTION_STRENGTH = 0.02;  // stronger base
const FRICTION_AIR = 0.12;         // higher damping to settle faster
const IS_SENSOR = true;
const STOP_THRESHOLD = 0.01;       // slightly higher stop threshold
const CLOSE_DISTANCE = 5;

const MOUSE_BEND_THRESHOLD = 0.2;
const MOUSE_BEND_STRENGTH = 0.003;

// ---- Engine & World ----
const engine = Engine.create();
engine.gravity.x = 0;
engine.gravity.y = 0;
const world = engine.world;

// ---- Renderer (portrait) ----
const canvasWidth = 300;
const canvasHeight = 450;

const render = Render.create({
  canvas: document.getElementById("world"),
  engine,
  options: { width: canvasWidth, height: canvasHeight, wireframes: false, background: "#000" }
});
Render.run(render);
Runner.run(Runner.create(), engine);

// ---- Static Targets ----
// Red: bottom-left
const targetRed = Bodies.circle(75, canvasHeight - 75, 20, { 
  isStatic: true, isSensor: IS_SENSOR, render: { fillStyle: "#ff5555" } 
});
// Green: top-right
const targetGreen = Bodies.circle(canvasWidth - 75, 75, 20, { 
  isStatic: true, isSensor: IS_SENSOR, render: { fillStyle: "#55ff55" } 
});
// Purple: bottom-right
const targetPurple = Bodies.circle(canvasWidth - 75, canvasHeight - 75, 20, { 
  isStatic: true, isSensor: IS_SENSOR, render: { fillStyle: "#FFEA00" } 
});
// Fallback: middle, white
const targetFallback = Bodies.circle(canvasWidth / 2 + 25, canvasHeight / 2 + 50, 25, { 
  isStatic: true, isSensor: true, render: { fillStyle: "#000" } 
});

Composite.add(world, [targetRed, targetGreen, targetPurple, targetFallback]);

// ---- Dynamic Agent ----
const agent = Bodies.circle(150, canvasHeight - 200, 15, { 
  frictionAir: FRICTION_AIR, render: { fillStyle: "#ffffff" } 
});
Composite.add(world, agent);

// ---- Mouse Tracking ----
const mouse = { x: null, y:...