AI Inverse Kinematics Tentacle - Snake Chain Animation Mesmerizing snake-like chain that follows yo

function setup() {
  createCanvas(windowWidth, windowHeight);

  segLength = min(width, height) / (numSegments + 3);

  // Initialize all segments at center
  for (let i = 0; i < numSegments; i++) {
    baseX[i] = width / 2;
    baseY[i] = height / 2;
    endX[i] = width / 2;
    endY[i] = height / 2;
    angles[i] = 0;
  }

  // Gradient: purple (head) → cyan (tail)
  headColor = color(180, 80, 255);
  tailColor = color(0, 255, 255);

  strokeCap(ROUND);

  // Start target in the center
  targetX = width / 2;
  targetY = height / 2;
}

function draw() {
  background(5, 3, 20); // dark, slightly bluish background

  const time = frameCount * 0.03;

  // Small organic wobble applied to the *target* itself
  const wobbleRadius = segLength * 0.3;
  const wobbleX = cos(time) * wobbleRadius;
  const wobbleY = sin(time * 1.3) * wobbleRadius;

  // Smoothly follow the mouse (low-pass filter)
  const followSpeed = 0.15;
  const desiredX = mouseX + wobbleX;
  const desiredY = mouseY + wobbleY;

  targetX = lerp(targetX, desiredX, followSpeed);
  targetY = lerp(targetY, desiredY, followSpeed);

  // Update IK chain so that the first segment's end follows targetX/Y
  updateTentacle(targetX, targetY);

  // Draw segments from tail → head so head is on top
  drawTentacle();
}

function updateTentacle(tx, ty) {
  // Head segment follows the (smoothed + wobbly) target
  let currentTargetX = tx;
  let currentTargetY = ty;

  for (let i = 0; i < numSegments; i++) {
    dragSegment(i, currentTargetX, currentTargetY);

    // The base of this segment becomes the target for the next one
    currentTargetX = baseX[i];
    currentTargetY = baseY[i];
  }
}

function dragSegment(i, tx, ty) {
  const dx = tx - baseX[i];
  const dy = ty - baseY[i];

  let a = atan2(dy, dx);

  // Per-segment wavy oscillation (snake-like)
  const wobblePhase = frameCount * 0.08 + i * 0.5;
  const wobbleAmount = 0.35; // radians (~20 degrees)
  a += sin(wobblePhase) * wobbleAmount;

  angles[i] = a;

  // The end of this segment should be exactly at (tx, ty)
  endX[i] = tx;
  endY[i] = ty;

  // Compute base position from end position and angle
  baseX[i] = tx - cos(a) * segLength;
  baseY[i] = ty - sin(a) * segLength;
}

function drawTentacle() {
  noFill();

  for (let i = numSegments - 1; i >= 0; i--) {
    const t = i / (numSegments - 1); // 0 = head, 1 = tail

    // Gradient from headColor (purple) to tailColor (cyan)
    const c = lerpColor(headColor, tailColor, t);
    stroke(c);

    // Thicker at head, thinner at tail
    const sw = lerp(18, 4, t);
    strokeWeight(sw);

    // Draw each segment as a line from base to end
    // line(): https://p5js.org/reference/#/p5/line
    line(baseX[i], baseY[i], endX[i], endY[i]);
  }

  // Glowing head "tip"
  noStroke();
  fill(headColor);
  const headRadius = 24;
  circle(endX[0], endY[0], headRadius); // circle(): https://p5js.org/reference/#/p5/circle
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

  // Recompute segment length to fit new window
  segLength = min(width, height) / (numSegments + 3);

  // Re-center tentacle so resize doesn't break it
  for (let i = 0; i < numSegments; i++) {
    baseX[i] = width / 2;
    baseY[i] = height / 2;
    endX[i] = width / 2;
    endY[i] = height / 2;
    angles[i] = 0;
  }

  targetX = width / 2;
  targetY = height / 2;
}