∿ Generative art

Strange attractor

스트레인지 어트랙터

A butterfly-like trajectory revealed by plotting a handful of equations iterated tens of thousands of times — a signature image of chaos theory.

Also known as: Clifford attractorChaotic attractor

···

js

const c = document.createElement('canvas');
document.body.appendChild(c);
c.style.width = '100%'; c.style.height = '100%';
const ctx = c.getContext('2d');
const cs = getComputedStyle(document.documentElement);
const rgb = (cs.getPropertyValue('--accent').trim() || '#5b5bf7').match(/[0-9a-f]{2}/gi).map((x) => parseInt(x, 16));
let w, h;
function resize() {
  const dpr = Math.min(devicePixelRatio || 1, 2);
  w = innerWidth; h = innerHeight;
  c.width = w * dpr; c.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, w, h);
  buildAndReset();
}
const A = -1.4, B = 1.6, CPARAM = 1.0, D = 0.7;
let traj = [], scaleX = 1, scaleY = 1, offX = 0, offY = 0, drawn = 0;
function buildAndReset() {
  let x = 0.1, y = 0.1;
  const N = 42000;
  traj = new Float32Array(N * 2);
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
  for (let i = 0; i < N; i++) {
    const nx = Math.sin(A * y) + CPARAM * Math.cos(A * x);
    const ny = Math.sin(B * x) + D * Math.cos(B * y);
    x = nx; y = ny;
    traj[i * 2] = x; traj[i * 2 + 1] = y;
    if (x < minX) minX = x; if (x > maxX) maxX = x; if (y < minY) minY = y; if (y > maxY) maxY = y;
  }
  scaleX = (w * 0.86) / (maxX - minX); scaleY = (h * 0.86) / (maxY - minY);
  const s = Math.min(scaleX, scaleY);
  offX = w / 2 - ((minX + maxX) / 2) * s; offY = h / 2 - ((minY + maxY) / 2) * s;
  scaleX = scaleY = s;
  drawn = 0;
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, w, h);
}
addEventListener('resize', resize);
resize();
function drawBatch() {
  ctx.fillStyle = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',0.05)';
  const total = traj.length / 2, batch = 900;
  const end = Math.min(total, drawn + batch);
  for (let i = drawn; i < end; i++) {
    ctx.fillRect(traj[i * 2] * scaleX + offX, traj[i * 2 + 1] * scaleY + offY, 1.3, 1.3);
  }
  drawn = end;
}
for (let i = 0; i < 30; i++) drawBatch(); // 스크린샷 시점에 상당 부분이 이미 드러나도록
(function loop() {
  if (drawn >= traj.length / 2) { if (Math.random() < 0.004) buildAndReset(); }
  else drawBatch();
  requestAnimationFrame(loop);
})();

A tiny formula computes a point's next position purely from its previous one — this demo uses the Clifford attractor popularised by Clifford Pickover. Start two points almost, but not quite, in the same place and their paths diverge completely over time — that's chaos's famous sensitivity to initial conditions. Yet the trajectories never scatter everywhere; they stay confined to a particular butterfly- or loop-shaped region, called the attractor.

A single point's path looks disordered, but iterate the same formula tens of thousands of times and stack every point at very low opacity, and the spots visited most often glow brighter — revealing a startlingly intricate structure. This demo doesn't draw it all at once; it plots points in sequence as an animation.

Designers reach for it for organic poster and album-cover graphics, or "mathematically beautiful" background patterns. Nudging the formula's coefficients slightly produces an entirely different shape, so in practice you explore several coefficient sets until one looks right.

When to use

Use it for abstract album-cover or poster graphics, or science/math-themed backgrounds. Try a few coefficient sets until the shape reads right.