xyz animation

// animation for kvnsmth.xyz

const bg = "#1a1a1a";

function setup() {

  const c = createCanvas(120, 120);

}

​

function draw() {

  background(bg);

  noStroke();

  const r = 50;

  const n = 12;

  const cx = width / 2;

  const cy = height / 2;

  const mx = constrain(mouseX, 0, width);

  const my = constrain(mouseY, 0, height);

  const d = map(dist(cx, cy, mx, my), 0, min(width, height), 0.1, 1);

  const s = d * (r / 7);

  translate(cx, cy);

  noFill();

  const sw = map(d, 0, 1, 5, 0.5);

  strokeWeight(sw);

  stroke(255, 255, 255, 255 * 0.2);

  const esx = 1.5 * r * cos(radians(frameCount / 2));

  const esy = 1.5 * r * -sin(radians(frameCount / 3));

  ellipse(0, 0, esx, esy);

  push();

  strokeWeight(sw * 0.66);

  stroke(bg);

  ellipse(0, 0, esx, esy);

  pop();

  for (let i = 0; i <= TAU; i += TAU / n) {

    const p = i / TAU;

    let x = r * cos(i + radians(frameCount / 2));

    let y = r * sin(i - radians(frameCount / 3));

​

    fill("#ffa200");

    circle(x, y, p * s);

​

    x = r * cos(i - radians(frameCount / 3));

    y = r * sin(i + radians(frameCount / 2));

    fill("#FFFFFF");

    circle(x, y, (1 - p) * s);

  }

}