Lizard Follows Cursor

Overview: Lizard Follows Cursor

This project is an interactive animation that features a procedurally generated, multi-legged creature (a "lizard") that follows the user's mouse cursor across the screen. Instead of using pre-made images, the project uses math and physics to calculate how the body, tail, and legs should move, resulting in a fluid, organic motion known as inverse kinematics.

The project works by defining a hierarchy of parts. At the top is the Creature class, which handles the physics of moving toward the mouse, including acceleration, friction, and rotation. Attached to the creature is a long chain of Segment objects that form the spine and tail. Each segment is programmed to stay a specific distance from its "parent" segment, creating a trailing effect as the head moves.

document.addEventListener("mousemove", function(event) {
  Input.mouse.x = event.clientX;
  Input.mouse.y = event.clientY;
});

This event listener constantly updates the mouse coordinates so the creature knows exactly where to travel.

The legs are managed by a specialized LegSystem. Unlike the body segments that simply follow one another, the legs have "stepping" logic. A leg stays planted in one spot until the creature's body moves too far away; once a threshold is reached, the leg quickly swings forward to a new "goal" position to catch up. This mimics how real animals walk and prevents the legs from simply dragging behind the body.

class Segment {
  constructor(parent, size, angle, range, stiffness) {
    this.parent = parent; 
    this.size = size; 
    this.absAngle = parent.absAngle + angle;
    // ... logic to calculate position based on parent
  }
}

The Segment class is the fundamental building block used to construct the spine, ribs, and limbs by connecting pieces together in a chain.

Everything is rendered onto an HTML5 Canvas element that fills the entire browser window. The animation runs on a timer that clears the screen and redraws the creature every 33 milliseconds. This high-speed refreshing, combined with the physics calculations, creates the illusion of a living, skeletal organism reacting in real-time to the user's input.

setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  critter.follow(Input.mouse.x, Input.mouse.y);
}, 33);

This loop is the "heartbeat" of the project, clearing the canvas and recalculating the creature's position roughly 30 times per second.