Creative Coding and Interactive Media Art at Demos Lab

const SEED = 20261021; // today's date as YYYYMMDD
const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches;

// Orbits: bodies on seeded elliptical paths around a few attractors
const COLORS = ['#ff6b5e', '#8b5cf6', '#3ee0d0', '#ffc857', '#f4f1ea'];
let attractors = [], bodies = [];

function setup() {
  createCanvas(640, 480);
  randomSeed(SEED);
  noiseSeed(SEED);
  // Today's palette: three colors, plus two to four attractors
  let pool = COLORS.slice(), pal = [];
  for (let i = 0; i < 3; i++) pal.push(pool.splice(floor(random(pool.length)), 1)[0]);
  for (let i = floor(random(2, 5)); i > 0; i--) {
    attractors.push(createVector(random(150, 490), random(130, 350)));
  }
  // Each body gets its own ellipse size, tilt, phase and color
  for (let i = 0; i < 70; i++) {
    let r = random(18, 160);
    bodies.push({
      home: random(attractors), a: r, b: r * random(0.35, 1), id: i,
      tilt: random(TWO_PI), t: random(TWO_PI), size: random(2, 4.5),
      // Smaller orbits move faster, like planets
      speed: (random(0.06, 0.12) / sqrt(r)) * random([-1, 1]),
      col: color(random(pal))
    });
  }
  background(12, 11, 18);
  if (REDUCED) {
    // Still mode: trace whole orbits faintly, mark the bodies, then stop
    for (let s = 0; s < 500; s++) step(20, 3, s === 499);
    glow();
    noLoop();
  }
}

function draw() {
  // A translucent background wash makes the trails fade
  background(12, 11, 18, 24);
  step(200, 1, true);
  glow();
}

// Point on a tilted ellipse, gently wobbled by noise
function pos(b) {
  let w = 1 + 0.25 * (noise(b.id, b.t * 0.2) - 0.5);
  return createVector(cos(b.t) * b.a * w, sin(b.t) * b.b * w).rotate(b.tilt).add(b.home);
}

// Move every body forward, draw its trail segment and optional head
function step(alpha, k, head) {
  for (let b of bodies) {
    let p = pos(b);
    b.t += b.speed * k;
    let q = pos(b);
    b.col.setAlpha(alpha);
    stroke(b.col);
    line(p.x, p.y, q.x, q.y);
    if (head) { b.col.setAlpha(255); fill(b.col); circle(q.x, q.y, b.size); }
  }
}

// Attractors as soft white glows
function glow() {
  noStroke();
  for (let a of attractors) {
    fill(244, 241, 234, 30);
    circle(a.x, a.y, 28);
    fill(244, 241, 234, 220);
    circle(a.x, a.y, 6);
  }
}