🤖 AI
Here’s a complete IK tentacle sketch with 15 connected segments that smoothly follow the mouse, with a purple→cyan gradient, organic oscillation, and a dark background.
---
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IK Tentacle - p5.js</title>
<link rel="stylesheet" href="style.css" />
<!-- p5.js v1.11.3 -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
```
```css
/* style.css */
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #050311; /* fallback dark background */
}
canvas {
display: block;
}
```
```js
// sketch.js
// Inverse Kinematics Tentacle
// Inspired by p5.js IK examples: https://p5js.org/examples/simulate-inverse-kinematics.html
let numSegments = 15;
let segLength;
let baseX = [];
let baseY = [];
let endX = [];
let endY = [];
let angles = [];
let headColor;
let tailColor;
let targetX;
let targetY;
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];
}
}
// Inverse kinematics step for one segment:
// Make this segment's end sit at (tx, ty), preserving segLength.
// Adds a slight per-segment oscillation to angle for organic motion.
// Uses atan2, cos, sin from p5.js core: https://p5js.org/reference/#/p5/atan2
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;
}
```
You can tweak:
- `numSegments` for longer/shorter tentacle
- `segLength` formula for overall size
- `wobbleAmount`, `wobbleRadius`, and `followSpeed` for more/less “liquid” movement
- `headColor` / `tailColor` for different gradients
If you’d like trailing “light-painting” paths instead of a fully cleared frame, I can show you how to change the background call to use alpha for that effect.
