Skip to content

Latest commit

 

History

History
65 lines (57 loc) · 1.98 KB

404.md

File metadata and controls

65 lines (57 loc) · 1.98 KB

Page not found

Sorry, but we can’t find the page you requested.

Here’s something inspired by Bridget Riley instead.

import * as d3 from "npm:d3";

const height = Math.min(640, width);
const point = (cx, cy, r, a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
const circles = [];
const random = d3.randomLcg(42);
const n = 80;
let a = 0.2;
let x = width / 2;
let y = height / 2;
let r = Math.hypot(width, height) / 2;
let dr = r / 6.5;

while (r > 0) {
  circles.push({x, y, r, a});
  const t = random() * 2 * Math.PI;
  const s = Math.sqrt((random() * dr * dr) / 4);
  x += Math.cos(t) * s;
  y += Math.sin(t) * s;
  r -= dr;
  a = -a;
}

const canvas = display(document.createElement("canvas"));
canvas.width = width * devicePixelRatio;
canvas.height = height * devicePixelRatio;
canvas.style.width = `${width}px`;

const context = canvas.getContext("2d");
context.scale(devicePixelRatio, devicePixelRatio);

(function frame(elapsed) {
  context.save();
  context.clearRect(0, 0, width, height);
  context.translate(width / 2, height / 2);
  context.rotate(Math.sin(elapsed / 50000));
  context.translate(-width / 2, -height / 2);
  context.beginPath();
  for (let i = 0; i < n; ++i) {
    let move = true;
    d3.pairs(circles, ({x: x1, y: y1, r: r1, a: a1}, {x: x2, y: y2, r: r2, a: a2}) => {
      const ai = ((i * 2) / n) * Math.PI;
      context[move ? ((move = false), "moveTo") : "lineTo"](...point(x1, y1, r1, a1 + ai));
      context.lineTo(...point(x2, y2, r2, a2 + ai));
    });
    d3.pairs(circles.slice().reverse(), ({x: x1, y: y1, r: r1, a: a1}, {x: x2, y: y2, r: r2, a: a2}) => {
      const ai = ((i * 2 + 1) / n) * Math.PI;
      context.lineTo(...point(x1, y1, r1, a1 + ai));
      context.lineTo(...point(x2, y2, r2, a2 + ai));
    });
    context.closePath();
  }
  context.fillStyle = getComputedStyle(canvas).getPropertyValue("color");
  context.fill();
  context.restore();
  if (canvas.isConnected) requestAnimationFrame(frame);
})();