Parallax — depth from three multiplications

Far things move slower than near things. That's the whole law: layer.x = camera.x × factor, one factor per layer. Press Run, then move your pointer across the canvas — you are the camera.

// three generated silhouette layers (no image files)
function makeLayer(color, jag, base) {
  const pts = [];
  for (let x = 0; x <= 40; x++) {
    pts.push(base + Math.sin(x * 0.7 + jag) * jag * 8
                  + Math.sin(x * 1.9 + jag * 3) * jag * 4);
  }
  return { color, pts };
}
const far  = makeLayer("#8A8FD0", 1.0, H * 0.45);
const mid  = makeLayer("#5A63C8", 1.6, H * 0.60);
const near = makeLayer("#3A3F8F", 2.4, H * 0.78);

let camera = 0;
canvas.onpointermove = (e) => {
  const r = canvas.getBoundingClientRect();
  camera = (e.clientX - r.left - W / 2) * 2;   // pointer = camera
};

function drawLayer(layer, factor) {
  const offset = -camera * factor;             // ← THE parallax line
  ctx.fillStyle = layer.color;
  ctx.beginPath();
  ctx.moveTo(-200, H);
  layer.pts.forEach((y, i) => {
    ctx.lineTo(offset % 60 + (i - 5) * 60, y); // wraps as it scrolls
  });
  ctx.lineTo(W + 200, H);
  ctx.closePath();
  ctx.fill();
}

onFrame(() => {
  ctx.clearRect(0, 0, W, H);
  drawLayer(far,  0.2);   // mountains barely move
  drawLayer(mid,  0.5);   // hills follow politely
  drawLayer(near, 0.9);   // foreground rushes past
});

Move your pointer left and right. The three factors (0.2 / 0.5 / 0.9) are the entire depth illusion.

Try tweaking: set all three factors to 0.5 — depth vanishes instantly (the best proof of why it worked) · swap the factors (far 0.9, near 0.2) for an unsettling "wrong world" · add a fourth layer.

In Godot: Parallax2D nodes with scroll_scale = these exact factors — download parallax.gd from the Godot project. In Unity: the three multiplications go in LateUpdate(), one per layer transform. In Unreal (2D): same arithmetic driven by the camera position. Chapter 04.