AI Squishy Blob - Poke the Jelly Creature

This sketch creates an interactive squishy blob creature with springy physics and googly eyes that follow your cursor. The blob responds to mouse clicks by squishing and deforming, and it's drawn with a pastel gradient background. Each vertex of the blob has individual physics simulation, creating a soft, jiggly appearance.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Vertex animationSpring physicsDistance-based forcesParametric shapesEye trackingCanvas gradientsVelocity and accelerationCircular motionMouse interaction

🔄 Code Flow

Code flow showing setup, draw, draweyes, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> canvas-setup[Canvas Creation] setup --> vertex-initialization[Vertex Array Initialization] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-setup href "#sub-canvas-setup" click vertex-initialization href "#sub-vertex-initialization" draw --> gradient-background[Pastel Gradient Background] draw --> blob-movement[Blob Center Movement with Spring Physics] draw --> vertex-animation[Vertex Physics and Animation] draw --> draweyes[drawEyes] click draw href "#fn-draw" click gradient-background href "#sub-gradient-background" click blob-movement href "#sub-blob-movement" click vertex-animation href "#sub-vertex-animation" click draweyes href "#fn-draweyes" vertex-animation --> mouse-repulsion[Mouse Proximity Repulsion] vertex-animation --> spring-restoration[Spring Force and Damping] click mouse-repulsion href "#sub-mouse-repulsion" click spring-restoration href "#sub-spring-restoration" draweyes --> look-direction[Calculate Look Direction] draweyes --> eye-positioning[Eye Size and Position Calculations] draweyes --> eye-drawing-loop[Draw Both Eyes] click look-direction href "#sub-look-direction" click eye-positioning href "#sub-eye-positioning" click eye-drawing-loop href "#sub-eye-drawing-loop" windowresized[windowResized] --> resizeCanvas[Resize Canvas] click windowresized href "#fn-windowresized" click resizeCanvas href "#sub-resizeCanvas"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It initializes the canvas size, disables strokes for smooth shapes, and sets up arrays that store information about each of the 24 vertices that make up the blob. The 'n' variable (24) determines how many vertices the blob has - more vertices create a smoother blob.

function setup(){
  createCanvas(windowWidth,windowHeight);
  noStroke();
  cx=width/2;cy=height/2;
  for(let i=0;i<n;i++){ang[i]=TWO_PI*i/n;offX[i]=offY[i]=vX[i]=vY[i]=0;}
}

🔧 Subcomponents:

function-call Canvas Creation createCanvas(windowWidth,windowHeight);

Creates a canvas that fills the entire browser window

for-loop Vertex Array Initialization for(let i=0;i<n;i++){ang[i]=TWO_PI*i/n;offX[i]=offY[i]=vX[i]=vY[i]=0;}

Sets up 24 vertices evenly spaced in a circle and initializes their physics arrays

Line by Line:

createCanvas(windowWidth,windowHeight);: Creates a canvas that matches the full browser window size, allowing the blob to be responsive
noStroke();: Removes outlines from shapes so the blob has a smooth, filled appearance
cx=width/2;cy=height/2;: Sets the blob's center position to the middle of the canvas (cx and cy are center coordinates)
for(let i=0;i<n;i++){: Loops through all 24 vertices to initialize their properties
ang[i]=TWO_PI*i/n;: Calculates the angle for each vertex (TWO_PI is 360 degrees, so vertices are evenly spaced around a circle)
offX[i]=offY[i]=vX[i]=vY[i]=0;: Initializes offset positions and velocities to zero for each vertex

`draw()`

draw() is the main animation loop that runs 60 times per second. It handles three main things: drawing the background gradient, updating the blob's center position with spring physics, and updating each vertex's position based on mouse interaction and spring forces. The vertex physics create the 'squishy' effect - each vertex can move independently, and spring forces pull them back to their resting positions.

function draw(){
  let ctx=drawingContext,g=ctx.createLinearGradient(0,0,0,height);
  g.addColorStop(0,"#ffe4f5");g.addColorStop(1,"#d5d4ff");
  ctx.save();ctx.fillStyle=g;ctx.fillRect(0,0,width,height);ctx.restore();
  baseR=min(width,height)*0.18;
  let tx=mouseIsPressed?mouseX:width/2,ty=mouseIsPressed?mouseY:height/2;
  vx+=(tx-cx)*0.05;vy+=(ty-cy)*0.05;vx*=0.85;vy*=0.85;cx+=vx;cy+=vy;
  fill(130,210,255,190);
  beginShape();
  for(let i=0;i<n;i++){
    let r=baseR+sin(frameCount*0.08+i*0.5)*4;
    let bx=cx+cos(ang[i])*r,by=cy+sin(ang[i])*r;
    let px=bx+offX[i],py=by+offY[i];
    let d=max(1,dist(mouseX,mouseY,px,py));
    if(d<120){
      let f=(120-d)*0.03,dx=(px-mouseX)/d,dy=(py-mouseY)/d;
      vX[i]+=dx*f;vY[i]+=dy*f;
    }
    vX[i]+= -offX[i]*0.15;vY[i]+= -offY[i]*0.15;
    vX[i]*=0.8;vY[i]*=0.8;offX[i]+=vX[i];offY[i]+=vY[i];
    vertex(bx+offX[i],by+offY[i]);
  }
  endShape(CLOSE);
  drawEyes();
}

🔧 Subcomponents:

calculation Pastel Gradient Background

let ctx=drawingContext,g=ctx.createLinearGradient(0,0,0,height); g.addColorStop(0,"#ffe4f5");g.addColorStop(1,"#d5d4ff");

Creates a smooth gradient from pink to purple that fills the background each frame

calculation Blob Center Movement with Spring Physics

let tx=mouseIsPressed?mouseX:width/2,ty=mouseIsPressed?mouseY:height/2; vx+=(tx-cx)*0.05;vy+=(ty-cy)*0.05;vx*=0.85;vy*=0.85;cx+=vx;cy+=vy;

Makes the blob follow the mouse when clicked, using spring physics for smooth movement

for-loop Vertex Physics and Animation for(let i=0;i<n;i++){...}

Updates each vertex's position based on mouse proximity, spring forces, and damping

conditional Mouse Proximity Repulsion if(d<120){ let f=(120-d)*0.03,dx=(px-mouseX)/d,dy=(py-mouseY)/d; vX[i]+=dx*f;vY[i]+=dy*f; }

Pushes vertices away from the mouse cursor when they get close, creating the poking effect

calculation Spring Force and Damping vX[i]+= -offX[i]*0.15;vY[i]+= -offY[i]*0.15; vX[i]*=0.8;vY[i]*=0.8;

Pulls vertices back toward their resting positions and slows them down for bouncy physics

Line by Line:

let ctx=drawingContext,g=ctx.createLinearGradient(0,0,0,height);: Accesses the canvas drawing context and creates a gradient that goes from top (0) to bottom (height)
g.addColorStop(0,"#ffe4f5");g.addColorStop(1,"#d5d4ff");: Sets the gradient colors: pink at the top (0) and purple at the bottom (1, which is 100%)
ctx.save();ctx.fillStyle=g;ctx.fillRect(0,0,width,height);ctx.restore();: Saves the current drawing state, applies the gradient, fills the entire canvas with it, then restores the state
baseR=min(width,height)*0.18;: Calculates the blob's base radius as 18% of the smaller dimension (width or height), making it responsive to window size
let tx=mouseIsPressed?mouseX:width/2,ty=mouseIsPressed?mouseY:height/2;: Sets target position: if mouse is pressed, target is the mouse position; otherwise, target is the center of the canvas
vx+=(tx-cx)*0.05;vy+=(ty-cy)*0.05;: Calculates acceleration toward the target position (spring force) - the blob is attracted to the target
vx*=0.85;vy*=0.85;: Applies damping (friction) by reducing velocity each frame, making movement smooth and bouncy
cx+=vx;cy+=vy;: Updates the blob's center position by adding the velocity
fill(130,210,255,190);: Sets the blob's fill color to light blue with slight transparency (alpha=190)
beginShape();: Starts drawing a shape made of vertices
let r=baseR+sin(frameCount*0.08+i*0.5)*4;: Creates a pulsing radius for each vertex using sine wave - the blob subtly expands and contracts
let bx=cx+cos(ang[i])*r,by=cy+sin(ang[i])*r;: Calculates the base position of each vertex using polar coordinates (angle and radius)
let px=bx+offX[i],py=by+offY[i];: Gets the final vertex position by adding the offset (which changes due to physics)
let d=max(1,dist(mouseX,mouseY,px,py));: Calculates distance from mouse to vertex, with minimum of 1 to avoid division by zero
if(d<120){: Checks if the vertex is within 120 pixels of the mouse (the interaction radius)
let f=(120-d)*0.03,dx=(px-mouseX)/d,dy=(py-mouseY)/d;: Calculates repulsion force (stronger when closer) and direction away from mouse
vX[i]+=dx*f;vY[i]+=dy*f;: Adds the repulsion force to the vertex's velocity, pushing it away from the mouse
vX[i]+= -offX[i]*0.15;vY[i]+= -offY[i]*0.15;: Applies a spring force that pulls the vertex back toward its resting position (negative offset means pull back)
vX[i]*=0.8;vY[i]*=0.8;: Applies damping to slow down the vertex movement, making it settle smoothly
offX[i]+=vX[i];offY[i]+=vY[i];: Updates the vertex offset by adding its velocity
vertex(bx+offX[i],by+offY[i]);: Adds a vertex to the shape at the calculated position
endShape(CLOSE);: Finishes the shape and closes it by connecting the last vertex back to the first
drawEyes();: Calls the function that draws the googly eyes

`drawEyes()`

drawEyes() creates googly eyes that track the mouse cursor. It normalizes the direction vector from the blob to the mouse, then uses this direction to position the pupils. The pupils move within the white part of the eye, creating a convincing eye-tracking effect. The eyes are positioned symmetrically using the s variable (-1 for left, 1 for right).

function drawEyes(){
  let lookX=mouseX-cx,lookY=mouseY-cy,mag=sqrt(lookX*lookX+lookY*lookY)||1;
  lookX/=mag;lookY/=mag;
  let eyeOffsetX=baseR*0.35,eyeOffsetY=-baseR*0.2,eyeR=baseR*0.18,pupilR=eyeR*0.45,shift=eyeR*0.35;
  fill(255);for(let s of[-1,1]){
    let ex=cx+eyeOffsetX*s,ey=cy+eyeOffsetY;
    ellipse(ex,ey,eyeR*2,eyeR*2);
    fill(40);circle(ex+lookX*shift,ey+lookY*shift,pupilR*2);fill(255);
  }
}

🔧 Subcomponents:

calculation Calculate Look Direction let lookX=mouseX-cx,lookY=mouseY-cy,mag=sqrt(lookX*lookX+lookY*lookY)||1; lookX/=mag;lookY/=mag;

Calculates the normalized direction vector from blob center to mouse (used for pupil tracking)

calculation Eye Size and Position Calculations let eyeOffsetX=baseR*0.35,eyeOffsetY=-baseR*0.2,eyeR=baseR*0.18,pupilR=eyeR*0.45,shift=eyeR*0.35;

Calculates all the proportions for eyes and pupils based on the blob's base radius

for-loop Draw Both Eyes for(let s of[-1,1]){ ... }

Draws two eyes by looping with s=-1 (left eye) and s=1 (right eye)

Line by Line:

let lookX=mouseX-cx,lookY=mouseY-cy,mag=sqrt(lookX*lookX+lookY*lookY)||1;: Calculates the vector from blob center to mouse and its magnitude (distance). The ||1 ensures magnitude is at least 1 to avoid division by zero
lookX/=mag;lookY/=mag;: Normalizes the look direction vector so it has length 1 - this creates a unit direction vector
let eyeOffsetX=baseR*0.35,eyeOffsetY=-baseR*0.2,eyeR=baseR*0.18,pupilR=eyeR*0.45,shift=eyeR*0.35;: Calculates proportional sizes: eyes are 35% of base radius apart horizontally, 20% up from center, eye radius is 18% of base radius, pupils are 45% of eye radius, and pupils shift 35% of eye radius toward the mouse
fill(255);for(let s of[-1,1]){: Sets fill to white and loops twice: once with s=-1 (left eye) and once with s=1 (right eye)
let ex=cx+eyeOffsetX*s,ey=cy+eyeOffsetY;: Calculates eye position: x varies by s (left or right), y is fixed above the blob center
ellipse(ex,ey,eyeR*2,eyeR*2);: Draws the white part of the eye (sclera) as a circle with diameter eyeR*2
fill(40);circle(ex+lookX*shift,ey+lookY*shift,pupilR*2);: Changes fill to dark gray and draws the pupil, offset in the direction of the mouse by the shift amount
fill(255);: Resets fill back to white for the next iteration of the loop

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. By calling resizeCanvas(), we ensure the blob always fills the entire window properly, making the sketch responsive to window size changes.

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

Line by Line:

resizeCanvas(windowWidth,windowHeight);: Resizes the canvas to match the new window dimensions whenever the browser window is resized

📦 Key Variables

n number

The number of vertices that make up the blob's shape (24 creates a smooth circle)

let n=24;

cx, cy number

The center x and y coordinates of the blob - where the blob is positioned on the canvas

let cx, cy; cx=width/2; cy=height/2;

vx, vy number

The velocity (speed and direction) of the blob's center - controls how fast it moves toward the mouse

let vx=0, vy=0;

baseR number

The base radius of the blob - calculated each frame as 18% of the smaller window dimension

baseR=min(width,height)*0.18;

ang array

Array storing the angle for each vertex around the circle (0 to TWO_PI, evenly spaced)

let ang=[]; ang[0]=0; ang[1]=TWO_PI/24;

offX, offY array

Arrays storing the x and y offset of each vertex from its resting position - these change due to physics simulation

let offX=[], offY=[]; offX[0]=0; offY[0]=0;

vX, vY array

Arrays storing the velocity (speed and direction) of each vertex - used to calculate how fast vertices move

let vX=[], vY=[]; vX[0]=0; vY[0]=0;

🧪 Try This!

Experiment with the code by making these changes:

Change the value of 'n' from 24 to 12 or 36 to see how vertex count affects the blob's smoothness. Fewer vertices = more angular, more vertices = smoother.
Modify the gradient colors in the draw() function: change "#ffe4f5" to "#ff6b9d" and "#d5d4ff" to "#4ecdc4" to create a pink-to-teal gradient instead.
Increase the repulsion force by changing the 0.03 value in the line 'let f=(120-d)*0.03' to 0.05 or 0.08 to make the blob squish more dramatically when you poke it.
Change the spring constant by modifying the 0.15 value in 'vX[i]+= -offX[i]*0.15' to 0.25 to make the blob snap back to shape faster, or 0.08 to make it jigglier.
Adjust the damping value from 0.8 to 0.9 (less damping) or 0.7 (more damping) in 'vX[i]*=0.8' to make the blob bouncier or more sluggish.
Change the eye color by modifying 'fill(40)' to 'fill(255,0,0)' to give the blob red pupils instead of dark gray.
Increase the interaction radius from 120 to 200 pixels in the line 'if(d<120)' to make the blob respond to mouse movement from farther away.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() - gradient creation

The gradient is recreated every frame even though it never changes. This wastes CPU cycles.

💡 Create the gradient once in setup() and store it in a variable, then reuse it in draw(). Move the gradient code to setup() and store it as a global variable like 'let bgGradient;'

BUG drawEyes() - normalization

If the mouse is exactly at the blob center, mag becomes 0, and the ||1 fallback prevents division by zero but the pupils won't move. This is minor but could be improved.

💡 The current code handles this adequately with ||1, but for clarity you could write: 'let mag=dist(0,0,lookX,lookY); if(mag===0) mag=1;' for explicit handling.

STYLE sketch.js - variable naming

Variable names are very short (cx, cy, vx, vy, bx, by, px, py, tx, ty) which makes the code harder to read for beginners. Single-letter names are cryptic.

💡 Rename variables to be more descriptive: 'cx' → 'centerX', 'vx' → 'velocityX', 'bx' → 'baseX', 'tx' → 'targetX', etc. This makes the code self-documenting.

FEATURE draw() - blob color

The blob color is hardcoded as light blue. It would be more interactive if the color changed based on user input.

💡 Add color variation based on mouse position or time: 'let hue = map(mouseX, 0, width, 200, 250); fill(hue, 210, 255, 190);' (requires colorMode(HSB) in setup)

FEATURE draw() - mouse repulsion

The blob only responds to proximity but doesn't have visual feedback when clicked. A brief color flash would enhance interactivity.

💡 Add a visual response to clicks: 'if(mouseIsPressed) fill(255, 150, 200, 190); else fill(130, 210, 255, 190);' to make the blob turn pink when poked.

Preview

Code flow diagram showing the structure of AI Squishy Blob - Poke the Jelly Creature - Code flow showing setup, draw, draweyes, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview