fractalkitty looking for math? fractalkitty.com

weekly creative coding

divergent boundaries

#random#trig#grid#color#interactive#voronoi#sea#wcc

Press space to change, press "s" to save, press other keys while hovering your mouse to add points with a click.

pointsparamsvoronoiDiagramnumPointsbgColrenderTimerandomsmodedrawVoronoicelldelaunay


let points;
let params;
let voronoiDiagram;
let numPoints;
let t, dt;
let bgCol;
let renderTime;
let randoms;
let mode = 0;

function setup() {
  sized = min(1500, min(windowWidth, windowHeight)) * 0.8;
  cnv = createCanvas(sized, sized);
  describe(
    "a wavy vertical line of smaller connected lines down the center of the image with lines shooting in many directions out in both directions with some expansion in places as if the line has been broken and breached. upon close inspection the lines are voronoi in nature. lines are white on a dark background, but with grayish traces around them. "
  );
  t = 0;
  loop();
  dt = random(0.05, 0.02);
  randoms = [
    random(200, 1000),
    random(-10, 10),
    random(-50, 50),
    random(-30, 30),
    random(300, 1000),
    random(50, 100)
  ];

  numPoints = random(height, height * 3);
  renderTime = random(10, 20);
  points = [];
  params = [];
  if (mode === 0) {
    for (let i = 0; i < numPoints; i++) {
      points.push([
        random(width / 2, width / 2) +
          randoms[1] * cos(i / randoms[0]) * sin(i / randoms[2]) -
          randoms[3] * sin(i / randoms[4]) * sin(i / randoms[4] - randoms[0]),
        (height / numPoints) * i
      ]);
      tmp =
        abs(
          tan(
            (i + randoms[0]) / (2 * randoms[4]) - randoms[2] / (i + randoms[4])
          )
        ) /
        (randoms[2] * random(1, 3));
      params[i] = {
        r1: random(-tmp, tmp),
        r2: random(-0.1, 0.1),
        c: random(1, 4)
      };
    }
  }
  noFill();
  bgCol = color(20, 30, 40);
  background(bgCol);
  bgCol.setAlpha(random(2, 4));
  strokeWeight(1);
}

function draw() {
  if (renderTime > t) {
    t += dt;
  } else {
    noLoop();
    console.log("fin");
  }
  background(bgCol);

  for (let i = 0; i < points.length; i++) {
    points[i][0] = points[i][0] + params[i].r1 * abs(sin(t - i));
    points[i][1] = points[i][1] + params[i].r2 * cos(t - i);
  }
  delaunay = d3.Delaunay.from(points);
  voronoiDiagram = delaunay.voronoi([0, 0, width, height]);
  drawVoronoi();
}

function drawVoronoi() {
  for (let i = 0; i < points.length; i++) {
    const cell = voronoiDiagram.cellPolygon(i);

    if (cell) {
      stroke(255, 255, 255, 2);
      beginShape();
      for (const [x, y] of cell) {
        vertex(x, y);
      }
      endShape(CLOSE);
    }
  }
}

function mouseMoved() {
  if (keyIsPressed) {
    if (points.length > 0) {
      points[0] = [mouseX, mouseY];
      const delaunay = d3.Delaunay.from(points);
      voronoiDiagram = delaunay.voronoi([0, 0, width, height]);
      drawVoronoi();
    }
  }
}

function mousePressed() {
  if (keyIsPressed) {
    points.push([mouseX, mouseY]);
    params[params.length] = {
      r1: random(-0.1, 0.1),
      r2: random(-0.1, 0.1),
      c: random(1, 4)
    };
  }
}

function windowResized() {
  setup();
  draw();
}

function keyPressed() {
  if (keyCode === 83) {
    save(cnv, "divergent_boundaries", "png");
  }
  if (keyCode === 32) {
    setup();
    draw();
  }
}