mullion · playground

This is the page mullion tiles, untiled: the same sections, in the order they were written. On a window wider than 60em, with a mouse, they become panes. Or tile them on this screen. Tile it again.

style.css

app.js

const canvas = document.getElementById('city');
const ctx = canvas.getContext('2d');

const COLS = 12;
const ROWS = 7;
const W = canvas.width / COLS;
const H = canvas.height / ROWS;

// Which windows have a light on.
const lit = Array.from({ length: COLS * ROWS }, () => Math.random() < 0.3);

function draw (t) {
  const glow = 0.85 + 0.15 * Math.sin(t / 400);

ctx.fillStyle = '#151a2b';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

lit.forEach((on, i) => {
    const x = (i % COLS) * W;
    const y = Math.floor(i / COLS) * H;

ctx.fillStyle = on ? `rgba(255, 45, 149, ${glow})` : '#232a42';
    ctx.fillRect(x + 5, y + 5, W - 10, H - 10);
  });

// Now and then somebody gets up, or goes to bed.
  if (Math.random() < 0.04) {
    const i = Math.floor(Math.random() * lit.length);
    lit[i] = !lit[i];
  }

requestAnimationFrame(draw);
}

canvas.addEventListener('click', (e) => {
  const r = canvas.getBoundingClientRect();
  const col = Math.floor((e.clientX - r.left) / r.width * COLS);
  const row = Math.floor((e.clientY - r.top) / r.height * ROWS);
  const i = row * COLS + col;

lit[i] = !lit[i];
  console.log(`window ${col},${row}`, lit[i] ? 'on' : 'off');
});

document.getElementById('out').addEventListener('click', () => {
  const were = lit.filter(Boolean).length;

lit.fill(false);
  console.warn(`${were} lights out`);
});

console.log(`${COLS * ROWS} windows, ${lit.filter(Boolean).length} lit`);
requestAnimationFrame(draw);

Drag a tab	onto a tab strip to put it there, a pane to stack, an edge to split, the drawer to close
`Esc` while dragging	take the drag back
Drag a divider	or focus it and use the arrows; double-click evens it up
`Alt` `←↑→↓`	focus the pane that way
`Alt` `Shift` `←↑→↓`	move the pane that way
`Alt` `\` / `Alt` `-`	split right / split down
`Alt` `Enter`	zoom the pane in front
`Alt` `W`	close it: to the drawer, or for a file you added, closed
`Alt` `0`	start this layout over
`Ctrl` `Enter`	run the preview

Files

index.html

style.css

app.js

Preview

Console

Activity