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

function setup() {
  createCanvas(windowWidth, windowHeight); // https://p5js.org/reference/#/p5/createCanvas
  colorMode(HSB, 360, 100, 100, 1);        // HSB for nice color control
  noStroke();

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

function draw() {
  // Dark background for stained-glass feel
  background(0, 0, 5); // HSB: very dark gray

  // Update seed positions
  updateSeeds();

  // Compute Voronoi cells for current seed positions
  const cells = computeVoronoiCells(seeds);

  const time = millis() / 1000; // seconds

  // Fill cells with pulsing colors
  for (const cell of cells) {
    drawCellFill(cell, time);
  }

  // Draw glowing white-ish edges over the top
  drawCellEdges(cells);
}

function createSeed(x, y) {
  // Use golden angle to distribute hues around the color wheel
  const hue = (seedCounter * 137.508) % 360;
  seedCounter++;

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

  return {
    pos: createVector(x, y),
    vel: angleVec,
    hue: hue,
    pulseOffset: random(TWO_PI) // phase offset for pulsing
  };
}

function updateSeeds() {
  const dt = deltaTime / 16.67; // normalize to ~1 at 60fps

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

    // Bounce off edges
    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;
    }
  }
}

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

  // Canvas bounding box as initial polygon for each cell
  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];

      // Half-plane of points closer to seed than to other
      const mid = p5.Vector.add(seed.pos, other.pos).mult(0.5);
      const dir = p5.Vector.sub(other.pos, seed.pos); // q - p

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

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

  return cells;
}

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) {
      // Both inside: keep end point
      output.push(B.copy());
    } else if (insideA && !insideB) {
      // Leaving the half-plane: keep intersection
      const I = segmentBisectorIntersection(A, B, mid, dir);
      if (I) output.push(I);
    } else if (!insideA && insideB) {
      // Entering the half-plane: add intersection and end point
      const I = segmentBisectorIntersection(A, B, mid, dir);
      if (I) output.push(I);
      output.push(B.copy());
    }
    // If both outside: keep nothing
  }

  return output;
}

function isInsideHalfPlane(pt, mid, dir) {
  const v = p5.Vector.sub(pt, mid);
  const d = p5.Vector.dot(dir, v);
  // Keep the side that contains the seed: dot <= 0
  return d <= 0;
}

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;

  // Segment is (almost) parallel to the bisector
  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);
}

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

  // Pulsing brightness using sin wave
  const baseBrightness = 30;
  const pulseAmplitude = 10;
  const pulse = sin(time * 1.5 + s.pulseOffset); // subtle speed
  const brightness = constrain(baseBrightness + pulseAmplitude * pulse, 10, 60);

  const saturation = 70;

  fill(s.hue, saturation, brightness, 0.95);
  beginShape(); // https://p5js.org/reference/#/p5/beginShape
  for (const v of cell.vertices) {
    vertex(v.x, v.y); // https://p5js.org/reference/#/p5/vertex
  }
  endShape(CLOSE);
}

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

  // Soft outer glow
  stroke(0, 0, 100, 0.12); // white, low alpha
  strokeWeight(6);
  for (const cell of cells) {
    beginShape();
    for (const v of cell.vertices) {
      vertex(v.x, v.y);
    }
    endShape(CLOSE);
  }

  // Brighter sharp inner outline
  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();
}

function mousePressed() {
  // Only react to clicks inside the canvas
  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
    seeds.push(createSeed(mouseX, mouseY));
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // https://p5js.org/reference/#/p5/resizeCanvas

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