AI Voronoi Crystals - Stained Glass Tessellation Beautiful crystal formations using Voronoi diagram

This sketch creates a beautiful Voronoi diagram visualization with animated crystal formations and stained-glass effects. Twenty seed points drift across the canvas, and the Voronoi algorithm divides the space into colored cells that pulse gently, creating an organic, glowing crystal-like appearance. Clicking adds new seeds to the formation.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Voronoi diagramsComputational geometryHalf-plane clippingVector mathAnimation with deltaTimeHSB color modePolygon clippingInteractive mouse inputCanvas resizingPulsing animation

🔄 Code Flow

Code flow showing setup, draw, createseed, updateseeds, computevoronoicells, clippolygonwithhalfplane, isinsidehalfplane, segmentbisectorintersection, drawcellfill, drawcelledges, mousepressed, 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 --> color-mode-setup[HSB Color Mode] setup --> seed-initialization-loop[Initial Seed Creation] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-setup href "#sub-canvas-setup" click color-mode-setup href "#sub-color-mode-setup" click seed-initialization-loop href "#sub-seed-initialization-loop" draw --> background-clear[Background Clear] draw --> seed-update[Seed Position Update] draw --> voronoi-computation[Voronoi Computation] draw --> cell-fill-loop[Cell Fill Loop] draw --> cell-edges-draw[Cell Edges] click draw href "#fn-draw" click background-clear href "#sub-background-clear" click seed-update href "#sub-seed-update" click voronoi-computation href "#sub-voronoi-computation" click cell-fill-loop href "#sub-cell-fill-loop" click cell-edges-draw href "#sub-cell-edges-draw" seed-update --> position-update-loop[Position Update Loop] position-update-loop --> horizontal-bounce[Horizontal Boundary Bounce] position-update-loop --> vertical-bounce[Vertical Boundary Bounce] seed-update --> deltatime-normalization[DeltaTime Normalization] seed-update --> velocity-vector[Random Velocity Vector] seed-update --> seed-object-return[Seed Object Creation] click position-update-loop href "#sub-position-update-loop" click horizontal-bounce href "#sub-horizontal-bounce" click vertical-bounce href "#sub-vertical-bounce" click deltatime-normalization href "#sub-deltatime-normalization" click velocity-vector href "#sub-velocity-vector" click seed-object-return href "#sub-seed-object-return" voronoi-computation --> bbox-initialization[Bounding Box Creation] voronoi-computation --> outer-seed-loop[Outer Seed Loop] outer-seed-loop --> polygon-copy[Polygon Initialization] outer-seed-loop --> inner-seed-loop[Inner Seed Loop] inner-seed-loop --> bisector-calculation[Perpendicular Bisector] inner-seed-loop --> polygon-clipping[Half-Plane Clipping] click bbox-initialization href "#sub-bbox-initialization" click outer-seed-loop href "#sub-outer-seed-loop" click polygon-copy href "#sub-polygon-copy" click inner-seed-loop href "#sub-inner-seed-loop" click bisector-calculation href "#sub-bisector-calculation" click polygon-clipping href "#sub-polygon-clipping" cell-fill-loop --> pulse-calculation[Pulsing Brightness] cell-fill-loop --> fill-setup[Fill Color Setup] cell-fill-loop --> polygon-drawing[Polygon Drawing] click pulse-calculation href "#sub-pulse-calculation" click fill-setup href "#sub-fill-setup" click polygon-drawing href "#sub-polygon-drawing" cell-edges-draw --> push-pop-context[Graphics State Management] cell-edges-draw --> soft-glow-loop[Soft Outer Glow] cell-edges-draw --> sharp-outline-loop[Sharp Inner Outline] click push-pop-context href "#sub-push-pop-context" click soft-glow-loop href "#sub-soft-glow-loop" click sharp-outline-loop href "#sub-sharp-outline-loop" mousepressed[mousePressed] --> canvas-bounds-check[Canvas Bounds Check] mousepressed --> seed-creation[New Seed Creation] click mousepressed href "#fn-mousepressed" click canvas-bounds-check href "#sub-canvas-bounds-check" click seed-creation href "#sub-seed-creation" windowresized[windowResized] --> canvas-resize[Canvas Resize] windowresized --> seed-constraint-loop[Seed Position Constraint] click windowresized href "#fn-windowresized" click canvas-resize href "#sub-canvas-resize" click seed-constraint-loop href "#sub-seed-constraint-loop"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It initializes the canvas, sets up color mode for beautiful HSB colors, and populates the initial 20 seed points that will drift around and form the Voronoi diagram.

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 1);
  noStroke();

  for (let i = 0; i < INITIAL_SEEDS; i++) {
    seeds.push(createSeed(random(width), random(height)));
  }
}

🔧 Subcomponents:

function-call Canvas Creation createCanvas(windowWidth, windowHeight)

Creates a canvas that fills the entire window

function-call HSB Color Mode colorMode(HSB, 360, 100, 100, 1)

Sets color mode to HSB (Hue, Saturation, Brightness) for easier color control in the crystal effect

for-loop Initial Seed Creation for (let i = 0; i < INITIAL_SEEDS; i++) { seeds.push(createSeed(random(width), random(height))); }

Creates 20 seed points at random positions that will become the centers of Voronoi cells

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that matches the full window dimensions, allowing the sketch to fill the entire screen
colorMode(HSB, 360, 100, 100, 1): Switches to HSB color mode where hue ranges 0-360, saturation 0-100, brightness 0-100, and alpha 0-1. This makes it easier to create harmonious colors
noStroke(): Disables stroke outlines by default, though strokes are added later in drawCellEdges()
for (let i = 0; i < INITIAL_SEEDS; i++): Loops 20 times (INITIAL_SEEDS constant) to create the initial crystal formation
seeds.push(createSeed(random(width), random(height))): Creates a new seed object at a random position and adds it to the seeds array

`draw()`

draw() runs 60 times per second and is the main animation loop. Each frame, it updates seed positions, recalculates the Voronoi diagram, and redraws everything with pulsing colors and glowing edges.

function draw() {
  background(0, 0, 5);

  updateSeeds();

  const cells = computeVoronoiCells(seeds);

  const time = millis() / 1000;

  for (const cell of cells) {
    drawCellFill(cell, time);
  }

  drawCellEdges(cells);
}

🔧 Subcomponents:

function-call Background Clear background(0, 0, 5)

Clears the canvas each frame with a very dark gray color to create the stained-glass effect

function-call Seed Position Update updateSeeds()

Moves all seed points and handles bouncing at canvas edges

function-call Voronoi Computation const cells = computeVoronoiCells(seeds)

Calculates the Voronoi cells for the current seed positions using half-plane clipping

for-loop Cell Fill Loop for (const cell of cells) { drawCellFill(cell, time); }

Draws the colored interior of each Voronoi cell with pulsing animation

function-call Cell Edges drawCellEdges(cells)

Draws the glowing white outlines around each cell

Line by Line:

background(0, 0, 5): Fills the entire canvas with a very dark gray (hue 0, saturation 0, brightness 5) to create the dark stained-glass background
updateSeeds(): Updates the position of each seed point based on its velocity and handles bouncing off canvas edges
const cells = computeVoronoiCells(seeds): Computes the Voronoi diagram for the current seed positions, returning an array of cell objects containing vertices
const time = millis() / 1000: Gets the current time in seconds since the sketch started, used for pulsing animation
for (const cell of cells) { drawCellFill(cell, time); }: Loops through each Voronoi cell and fills it with a color that pulses based on the current time
drawCellEdges(cells): Draws the glowing white edges around all cells to create the stained-glass outline effect

`createSeed(x, y)`

createSeed() is a factory function that creates a seed object with all the properties needed for animation. The golden angle ensures colors are always visually distinct and harmonious, and the random pulse offset makes the animation feel organic and less synchronized.

function createSeed(x, y) {
  const hue = (seedCounter * 137.508) % 360;
  seedCounter++;

  const angleVec = p5.Vector.random2D();
  const speed = random(0.15, 0.35);
  angleVec.mult(speed);

  return {
    pos: createVector(x, y),
    vel: angleVec,
    hue: hue,
    pulseOffset: random(TWO_PI)
  };
}

🔧 Subcomponents:

calculation Golden Angle Hue Distribution const hue = (seedCounter * 137.508) % 360

Uses the golden angle (137.508°) to distribute hues evenly around the color wheel for visually distinct seed colors

calculation Random Velocity Vector const angleVec = p5.Vector.random2D(); const speed = random(0.15, 0.35); angleVec.mult(speed)

Creates a random direction vector and scales it to a random speed between 0.15 and 0.35 pixels per frame

calculation Seed Object Creation return { pos: createVector(x, y), vel: angleVec, hue: hue, pulseOffset: random(TWO_PI) }

Returns an object containing position, velocity, hue, and pulse phase offset for the seed

Line by Line:

const hue = (seedCounter * 137.508) % 360: Multiplies seedCounter by 137.508 (the golden angle) and uses modulo 360 to keep the hue in the 0-360 range. This creates evenly-spaced, harmonious colors
seedCounter++: Increments the global seedCounter so the next seed gets a different hue
const angleVec = p5.Vector.random2D(): Creates a random 2D vector with length 1 pointing in a random direction
const speed = random(0.15, 0.35): Generates a random speed between 0.15 and 0.35 pixels per frame for gentle, slow drifting
angleVec.mult(speed): Multiplies the direction vector by the speed to create the final velocity vector
pulseOffset: random(TWO_PI): Assigns a random phase offset (0 to 2π) so each seed's pulsing animation starts at a different point in the cycle

`updateSeeds()`

updateSeeds() handles animation physics. Using deltaTime makes the animation smooth and consistent regardless of frame rate. The bounce logic creates a contained, organic drifting effect where seeds gently bounce off the canvas edges.

function updateSeeds() {
  const dt = deltaTime / 16.67;

  for (const s of seeds) {
    s.pos.x += s.vel.x * dt;
    s.pos.y += s.vel.y * dt;

    if (s.pos.x < 0) {
      s.pos.x = 0;
      s.vel.x *= -1;
    } else if (s.pos.x > width) {
      s.pos.x = width;
      s.vel.x *= -1;
    }

    if (s.pos.y < 0) {
      s.pos.y = 0;
      s.vel.y *= -1;
    } else if (s.pos.y > height) {
      s.pos.y = height;
      s.vel.y *= -1;
    }
  }
}

🔧 Subcomponents:

calculation DeltaTime Normalization const dt = deltaTime / 16.67

Normalizes deltaTime to approximately 1 at 60fps, making animation frame-rate independent

for-loop Position Update Loop for (const s of seeds) { s.pos.x += s.vel.x * dt; s.pos.y += s.vel.y * dt; }

Updates each seed's position by adding its velocity multiplied by the normalized time delta

conditional Horizontal Boundary Bounce if (s.pos.x < 0) { s.pos.x = 0; s.vel.x *= -1; } else if (s.pos.x > width) { s.pos.x = width; s.vel.x *= -1; }

Detects when a seed hits the left or right edge and bounces it back by reversing horizontal velocity

conditional Vertical Boundary Bounce if (s.pos.y < 0) { s.pos.y = 0; s.vel.y *= -1; } else if (s.pos.y > height) { s.pos.y = height; s.vel.y *= -1; }

Detects when a seed hits the top or bottom edge and bounces it back by reversing vertical velocity

Line by Line:

const dt = deltaTime / 16.67: Normalizes deltaTime (milliseconds since last frame) by dividing by 16.67 (the milliseconds per frame at 60fps), making dt approximately 1 at normal frame rates
for (const s of seeds): Loops through each seed object in the seeds array
s.pos.x += s.vel.x * dt: Updates the seed's x position by adding its x velocity multiplied by the normalized time delta
s.pos.y += s.vel.y * dt: Updates the seed's y position by adding its y velocity multiplied by the normalized time delta
if (s.pos.x < 0) { s.pos.x = 0; s.vel.x *= -1; }: If the seed goes past the left edge, clamp it to x=0 and reverse its horizontal velocity to bounce it back
else if (s.pos.x > width) { s.pos.x = width; s.vel.x *= -1; }: If the seed goes past the right edge, clamp it to the canvas width and reverse its horizontal velocity
if (s.pos.y < 0) { s.pos.y = 0; s.vel.y *= -1; }: If the seed goes past the top edge, clamp it to y=0 and reverse its vertical velocity
else if (s.pos.y > height) { s.pos.y = height; s.vel.y *= -1; }: If the seed goes past the bottom edge, clamp it to the canvas height and reverse its vertical velocity

`computeVoronoiCells(seedsArray)`

This is the core algorithm that computes the Voronoi diagram. For each seed, it starts with the entire canvas and progressively clips it using half-planes defined by the perpendicular bisectors between seeds. The result is a set of convex polygons where each cell contains all points closer to its seed than to any other seed.

function computeVoronoiCells(seedsArray) {
  const cells = [];

  const bbox = [
    createVector(0, 0),
    createVector(width, 0),
    createVector(width, height),
    createVector(0, height)
  ];

  for (let i = 0; i < seedsArray.length; i++) {
    const seed = seedsArray[i];
    let poly = bbox.map(v => v.copy());

    for (let j = 0; j < seedsArray.length; j++) {
      if (i === j) continue;

      const other = seedsArray[j];

      const mid = p5.Vector.add(seed.pos, other.pos).mult(0.5);
      const dir = p5.Vector.sub(other.pos, seed.pos);

      poly = clipPolygonWithHalfPlane(poly, mid, dir);
      if (poly.length === 0) break;
    }

    cells.push({ seed: seed, vertices: poly });
  }

  return cells;
}

🔧 Subcomponents:

calculation Bounding Box Creation const bbox = [ createVector(0, 0), createVector(width, 0), createVector(width, height), createVector(0, height) ]

Creates a rectangle representing the canvas boundaries that serves as the initial polygon for each cell

for-loop Outer Seed Loop for (let i = 0; i < seedsArray.length; i++)

Iterates through each seed to compute its corresponding Voronoi cell

calculation Polygon Initialization let poly = bbox.map(v => v.copy())

Creates a copy of the bounding box for this seed's cell that will be clipped by other seeds

for-loop Inner Seed Loop for (let j = 0; j < seedsArray.length; j++) { if (i === j) continue; ... }

Compares the current seed against all other seeds to clip the polygon

calculation Perpendicular Bisector const mid = p5.Vector.add(seed.pos, other.pos).mult(0.5); const dir = p5.Vector.sub(other.pos, seed.pos)

Calculates the midpoint and direction of the perpendicular bisector between two seeds

function-call Half-Plane Clipping poly = clipPolygonWithHalfPlane(poly, mid, dir)

Clips the polygon to keep only the region closer to the current seed than to the other seed

Line by Line:

const cells = []: Initializes an empty array to store the computed Voronoi cells
const bbox = [ createVector(0, 0), createVector(width, 0), createVector(width, height), createVector(0, height) ]: Creates the four corners of the canvas as a rectangle polygon that will be the starting point for each cell
for (let i = 0; i < seedsArray.length; i++): Outer loop that processes each seed one at a time
const seed = seedsArray[i]: Gets the current seed being processed
let poly = bbox.map(v => v.copy()): Creates a fresh copy of the bounding box for this seed's cell
for (let j = 0; j < seedsArray.length; j++) { if (i === j) continue; }: Inner loop that compares the current seed against all other seeds, skipping when i === j
const mid = p5.Vector.add(seed.pos, other.pos).mult(0.5): Calculates the midpoint between the current seed and the other seed
const dir = p5.Vector.sub(other.pos, seed.pos): Calculates the direction vector from the current seed to the other seed, perpendicular to the bisector
poly = clipPolygonWithHalfPlane(poly, mid, dir): Clips the polygon to keep only the half-plane closer to the current seed than to the other seed
if (poly.length === 0) break: If the polygon has been clipped to nothing, stop processing this seed (it's completely surrounded)
cells.push({ seed: seed, vertices: poly }): Adds the completed cell (with its seed and vertex list) to the cells array

`clipPolygonWithHalfPlane(poly, mid, dir)`

This function implements the Sutherland-Hodgman polygon clipping algorithm. It processes each edge of the polygon and decides what vertices to keep based on whether they're inside or outside the half-plane. This is the key algorithm that carves out each Voronoi cell.

function clipPolygonWithHalfPlane(poly, mid, dir) {
  const output = [];
  if (poly.length === 0) return output;

  for (let i = 0; i < poly.length; i++) {
    const A = poly[i];
    const B = poly[(i + 1) % poly.length];

    const insideA = isInsideHalfPlane(A, mid, dir);
    const insideB = isInsideHalfPlane(B, mid, dir);

    if (insideA && insideB) {
      output.push(B.copy());
    } else if (insideA && !insideB) {
      const I = segmentBisectorIntersection(A, B, mid, dir);
      if (I) output.push(I);
    } else if (!insideA && insideB) {
      const I = segmentBisectorIntersection(A, B, mid, dir);
      if (I) output.push(I);
      output.push(B.copy());
    }
  }

  return output;
}

🔧 Subcomponents:

for-loop Edge Iteration for (let i = 0; i < poly.length; i++) { const A = poly[i]; const B = poly[(i + 1) % poly.length]; }

Iterates through each edge of the polygon by pairing consecutive vertices

function-call Half-Plane Inside Check const insideA = isInsideHalfPlane(A, mid, dir); const insideB = isInsideHalfPlane(B, mid, dir)

Checks whether each endpoint of the edge is inside the half-plane

conditional Both Vertices Inside if (insideA && insideB) { output.push(B.copy()); }

If both endpoints are inside, keep the endpoint B

conditional Leaving Half-Plane else if (insideA && !insideB) { const I = segmentBisectorIntersection(A, B, mid, dir); if (I) output.push(I); }

If leaving the half-plane, add the intersection point where the edge crosses the bisector

conditional Entering Half-Plane

else if (!insideA && insideB) { const I = segmentBisectorIntersection(A, B, mid, dir); if (I) output.push(I); output.push(B.copy()); }

If entering the half-plane, add both the intersection point and the endpoint B

Line by Line:

const output = []: Initializes an empty array to store the vertices of the clipped polygon
if (poly.length === 0) return output: Early exit if the input polygon is empty (already clipped to nothing)
for (let i = 0; i < poly.length; i++): Loops through each edge of the polygon
const A = poly[i]; const B = poly[(i + 1) % poly.length]: Gets two consecutive vertices; uses modulo to wrap around so the last edge connects back to the first vertex
const insideA = isInsideHalfPlane(A, mid, dir); const insideB = isInsideHalfPlane(B, mid, dir): Checks whether each endpoint is on the 'inside' side of the bisector
if (insideA && insideB) { output.push(B.copy()); }: If both vertices are inside the half-plane, the entire edge is inside, so keep the endpoint B
else if (insideA && !insideB) { const I = segmentBisectorIntersection(A, B, mid, dir); if (I) output.push(I); }: If the edge crosses from inside to outside, add only the intersection point where it crosses the bisector
else if (!insideA && insideB) { const I = segmentBisectorIntersection(A, B, mid, dir); if (I) output.push(I); output.push(B.copy()); }: If the edge crosses from outside to inside, add both the intersection point and the endpoint B

`isInsideHalfPlane(pt, mid, dir)`

This helper function uses the dot product to determine which side of a line a point is on. The dot product tells us the component of the point vector in the direction of the bisector. If it's negative or zero, the point is on the 'inside' (closer to the current seed).

function isInsideHalfPlane(pt, mid, dir) {
  const v = p5.Vector.sub(pt, mid);
  const d = p5.Vector.dot(dir, v);
  return d <= 0;
}

🔧 Subcomponents:

calculation Vector from Midpoint const v = p5.Vector.sub(pt, mid)

Calculates the vector from the bisector midpoint to the test point

calculation Dot Product const d = p5.Vector.dot(dir, v)

Line by Line:

const v = p5.Vector.sub(pt, mid): Creates a vector from the midpoint (on the bisector) to the point being tested
const d = p5.Vector.dot(dir, v): Calculates the dot product. A negative or zero value means the point is on the 'inside' side of the bisector
return d <= 0: Returns true if the dot product is <= 0, meaning the point is on the correct side of the bisector (closer to the current seed)

`segmentBisectorIntersection(A, B, mid, dir)`

This function finds where a line segment intersects with the perpendicular bisector. It uses parametric line equations and solves for the intersection point algebraically. This is essential for the polygon clipping algorithm.

function segmentBisectorIntersection(A, B, mid, dir) {
  const ABx = B.x - A.x;
  const ABy = B.y - A.y;
  const AMx = A.x - mid.x;
  const AMy = A.y - mid.y;

  const numerator = - (dir.x * AMx + dir.y * AMy);
  const denominator = dir.x * ABx + dir.y * ABy;

  if (abs(denominator) < 1e-6) return null;

  const t = numerator / denominator;
  const x = A.x + ABx * t;
  const y = A.y + ABy * t;

  return createVector(x, y);
}

🔧 Subcomponents:

calculation Segment Vector const ABx = B.x - A.x; const ABy = B.y - A.y

Calculates the x and y components of the segment from A to B

calculation Point to Midpoint Vector const AMx = A.x - mid.x; const AMy = A.y - mid.y

Calculates the x and y components of the vector from the midpoint to point A

calculation Intersection Parameter

const numerator = - (dir.x * AMx + dir.y * AMy); const denominator = dir.x * ABx + dir.y * ABy; const t = numerator / denominator

Solves for the parameter t that indicates where along the segment the intersection occurs

conditional Parallel Check if (abs(denominator) < 1e-6) return null

Returns null if the segment is parallel to the bisector (no intersection)

Line by Line:

const ABx = B.x - A.x; const ABy = B.y - A.y: Calculates the direction vector of the segment AB
const AMx = A.x - mid.x; const AMy = A.y - mid.y: Calculates the vector from the bisector's midpoint to point A
const numerator = - (dir.x * AMx + dir.y * AMy): Computes the dot product between the bisector direction and the AM vector, negated
const denominator = dir.x * ABx + dir.y * ABy: Computes the dot product between the bisector direction and the segment direction
if (abs(denominator) < 1e-6) return null: If the denominator is near zero, the segment is parallel to the bisector, so there's no intersection
const t = numerator / denominator: Calculates the parameter t (0 to 1) that indicates where along the segment the intersection occurs
const x = A.x + ABx * t; const y = A.y + ABy * t: Calculates the actual x,y coordinates of the intersection point using the parameter t
return createVector(x, y): Returns the intersection point as a p5.Vector

`drawCellFill(cell, time)`

This function creates the visual effect by filling each Voronoi cell with a color that pulses gently. The pulsing is created using a sine wave, and each seed has its own phase offset so they don't all pulse in sync. The result is an organic, breathing crystal effect.

function drawCellFill(cell, time) {
  const s = cell.seed;

  const baseBrightness = 30;
  const pulseAmplitude = 10;
  const pulse = sin(time * 1.5 + s.pulseOffset);
  const brightness = constrain(baseBrightness + pulseAmplitude * pulse, 10, 60);

  const saturation = 70;

  fill(s.hue, saturation, brightness, 0.95);
  beginShape();
  for (const v of cell.vertices) {
    vertex(v.x, v.y);
  }
  endShape(CLOSE);
}

🔧 Subcomponents:

calculation Pulsing Brightness

const pulse = sin(time * 1.5 + s.pulseOffset); const brightness = constrain(baseBrightness + pulseAmplitude * pulse, 10, 60)

Creates a sine wave animation that makes the brightness pulse gently over time

function-call Fill Color Setup fill(s.hue, saturation, brightness, 0.95)

Sets the fill color using the seed's hue, a fixed saturation, and the pulsing brightness

for-loop Polygon Drawing beginShape(); for (const v of cell.vertices) { vertex(v.x, v.y); } endShape(CLOSE)

Draws the Voronoi cell polygon by connecting all its vertices

Line by Line:

const s = cell.seed: Gets the seed object associated with this cell
const baseBrightness = 30: Sets the base brightness level (center of the pulsing range)
const pulseAmplitude = 10: Sets how much the brightness varies from the base (±10)
const pulse = sin(time * 1.5 + s.pulseOffset): Creates a sine wave that oscillates between -1 and 1, multiplied by 1.5 for speed and offset by the seed's phase
const brightness = constrain(baseBrightness + pulseAmplitude * pulse, 10, 60): Calculates the final brightness by adding the pulsing value to the base, then constrains it between 10 and 60
const saturation = 70: Sets a fixed saturation level for vibrant colors
fill(s.hue, saturation, brightness, 0.95): Sets the fill color using HSB mode with the seed's hue, fixed saturation, pulsing brightness, and 0.95 alpha for slight transparency
beginShape(); for (const v of cell.vertices) { vertex(v.x, v.y); } endShape(CLOSE): Draws a filled polygon by specifying each vertex, with CLOSE connecting the last vertex back to the first

`drawCellEdges(cells)`

This function creates the stained-glass effect by drawing the cell edges twice: first with a thick, semi-transparent stroke for a soft glow, then with a thin, more opaque stroke for a sharp outline. The push/pop ensures these settings don't affect other drawing.

function drawCellEdges(cells) {
  push();
  noFill();

  stroke(0, 0, 100, 0.12);
  strokeWeight(6);
  for (const cell of cells) {
    beginShape();
    for (const v of cell.vertices) {
      vertex(v.x, v.y);
    }
    endShape(CLOSE);
  }

  stroke(0, 0, 100, 0.45);
  strokeWeight(2);
  for (const cell of cells) {
    beginShape();
    for (const v of cell.vertices) {
      vertex(v.x, v.y);
    }
    endShape(CLOSE);
  }

  pop();
}

🔧 Subcomponents:

function-call Graphics State Management push(); ... pop()

Saves and restores graphics settings so edge drawing doesn't affect other drawing

for-loop Soft Outer Glow stroke(0, 0, 100, 0.12); strokeWeight(6); for (const cell of cells) { ... }

Draws thick, semi-transparent white edges for a soft outer glow effect

for-loop Sharp Inner Outline stroke(0, 0, 100, 0.45); strokeWeight(2); for (const cell of cells) { ... }

Draws thin, more opaque white edges for a sharp inner outline

Line by Line:

push(): Saves the current graphics settings (fill, stroke, etc.) so we can restore them later
noFill(): Disables filling so only the outlines are drawn
stroke(0, 0, 100, 0.12): Sets the stroke color to white (hue 0, saturation 0, brightness 100) with very low alpha (0.12) for a subtle glow
strokeWeight(6): Sets the stroke width to 6 pixels for the thick outer glow
for (const cell of cells) { beginShape(); ... endShape(CLOSE); }: Loops through all cells and draws their outlines with the current stroke settings
stroke(0, 0, 100, 0.45): Changes the stroke color to white with higher alpha (0.45) for a more visible inner outline
strokeWeight(2): Changes the stroke width to 2 pixels for a thinner, sharper inner outline
for (const cell of cells) { beginShape(); ... endShape(CLOSE); }: Draws all cell outlines again with the new stroke settings, creating a layered effect
pop(): Restores the graphics settings that were saved by push()

`mousePressed()`

mousePressed() is a p5.js event handler that runs whenever the mouse is clicked. This function allows interactive creation of new seeds, which immediately affects the Voronoi diagram and creates new crystal formations.

function mousePressed() {
  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
    seeds.push(createSeed(mouseX, mouseY));
  }
}

🔧 Subcomponents:

conditional Canvas Bounds Check if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height)

Ensures the click is inside the canvas before adding a new seed

function-call New Seed Creation seeds.push(createSeed(mouseX, mouseY))

Creates a new seed at the mouse position and adds it to the seeds array

Line by Line:

if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height): Checks that the mouse click is within the canvas bounds before reacting
seeds.push(createSeed(mouseX, mouseY)): Creates a new seed at the mouse position with a new hue and adds it to the seeds array

`windowResized()`

windowResized() is a p5.js event handler that runs when the browser window is resized. This function ensures the canvas stays responsive and that seeds don't end up outside the visible area after resizing.

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

  for (const s of seeds) {
    s.pos.x = constrain(s.pos.x, 0, width);
    s.pos.y = constrain(s.pos.y, 0, height);
  }
}

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight)

Resizes the canvas to match the new window dimensions

for-loop Seed Position Constraint for (const s of seeds) { s.pos.x = constrain(s.pos.x, 0, width); s.pos.y = constrain(s.pos.y, 0, height); }

Ensures all seeds stay within the new canvas bounds after resizing

Line by Line:

resizeCanvas(windowWidth, windowHeight): Resizes the p5.js canvas to match the current window dimensions
for (const s of seeds): Loops through each seed to adjust its position if needed
s.pos.x = constrain(s.pos.x, 0, width): Constrains the seed's x position to be within the new canvas width
s.pos.y = constrain(s.pos.y, 0, height): Constrains the seed's y position to be within the new canvas height

📦 Key Variables

INITIAL_SEEDS number

A constant that defines how many seed points are created at the start (20)

const INITIAL_SEEDS = 20;

seeds array

Stores all active seed objects, each containing position, velocity, hue, and pulse offset

let seeds = [];

seedCounter number

Tracks how many seeds have been created to ensure each gets a unique hue using the golden angle

let seedCounter = 0;

seed.pos p5.Vector

Stores the current x,y position of a seed on the canvas

seed.pos = createVector(x, y)

seed.vel p5.Vector

Stores the velocity (speed and direction) of a seed's movement

seed.vel = p5.Vector.random2D().mult(speed)

seed.hue number

Stores the hue (0-360) for this seed's color, calculated using the golden angle

seed.hue = (seedCounter * 137.508) % 360

seed.pulseOffset number

Stores the phase offset (0 to 2π) for this seed's pulsing animation

seed.pulseOffset = random(TWO_PI)

cell.seed object

Reference to the seed object that this Voronoi cell belongs to

cell.seed = seed

cell.vertices array of p5.Vector

Array of points that define the corners of the Voronoi cell polygon

cell.vertices = [createVector(x1, y1), createVector(x2, y2), ...]

🧪 Try This!

Experiment with the code by making these changes:

Change INITIAL_SEEDS from 20 to 50 at the top of the sketch to create a more complex, detailed crystal pattern with more cells
Modify the speed range in createSeed() from random(0.15, 0.35) to random(0.5, 1.0) to make seeds drift faster and create more dynamic animations
Change the pulse speed from sin(time * 1.5 + s.pulseOffset) to sin(time * 0.5 + s.pulseOffset) in drawCellFill() to make the brightness pulsing slower and more dramatic
Modify the saturation value in drawCellFill() from 70 to 100 to make the colors more vibrant and saturated
Change the background color from background(0, 0, 5) to background(0, 0, 15) in draw() to make the background slightly lighter
Experiment with the stroke weights in drawCellEdges() - try changing strokeWeight(6) to 10 and strokeWeight(2) to 4 for thicker, more prominent edges
Try changing the golden angle multiplier from 137.508 to 137.5 or 137.51 to see how small changes affect color distribution

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE computeVoronoiCells()

The algorithm recalculates the entire Voronoi diagram every frame, which is O(n²) where n is the number of seeds. With many seeds, this becomes expensive

💡 Consider implementing incremental Voronoi updates or using a spatial data structure (like a quadtree) to optimize collision detection and reduce recalculation overhead

BUG segmentBisectorIntersection()

The function returns null for parallel segments but doesn't handle the case where the intersection point might be outside the segment bounds (t < 0 or t > 1)

💡 Add a check like 'if (t < 0 || t > 1) return null;' to ensure intersection points are actually on the segment, not just on the extended line

STYLE computeVoronoiCells()

The bounding box is recreated as an array of vectors every frame, which is inefficient

💡 Create the bounding box once as a constant or calculate it more efficiently, or use a pre-allocated array that's reused

FEATURE sketch overall

There's no way to remove seeds or reset the sketch after adding many seeds with clicks

💡 Add keyboard controls like pressing 'r' to reset all seeds to the initial 20, or 'c' to clear all seeds and start fresh

BUG updateSeeds()

Seeds can get stuck at corners if they hit two edges simultaneously, as the velocity reversal might not work correctly in 2D

💡 Handle corner cases explicitly by checking if both x and y are out of bounds and reversing both velocity components

PERFORMANCE drawCellEdges()

The cell edges are drawn twice (soft glow + sharp outline), doubling the drawing calls for every cell

💡 Consider using a single pass with a more sophisticated shader or drawing technique, or batch the drawing operations

Preview

Code flow diagram showing the structure of AI Voronoi Crystals - Stained Glass Tessellation Beautiful crystal formations using Voronoi diagram - Code flow showing setup, draw, createseed, updateseeds, computevoronoicells, clippolygonwithhalfplane, isinsidehalfplane, segmentbisectorintersection, drawcellfill, drawcelledges, mousepressed, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview