FRENAR
N°26 · Canvas 2D · Cross-disciplinary Signature

Zellige × Pixel

The bridge between heritage and code. A traditional zellige decomposes into pixels — each ceramic tile becomes a square of data. Slide the resolution: from continuous to discrete, from craft to algorithm.

slide the resolution cursor
// Zellige × Pixel — transition continu → discret
function render(resolution) {
  // 1. Dessiner le zellige à haute résolution (continu)
  drawZellige(offscreen, seed, symmetry);

  // 2. Pixeliser à la résolution demandée
  const cellW = W / resolution;
  const cellH = H / resolution;

  for (let y = 0; y < resolution; y++) {
    for (let x = 0; x < resolution; x++) {
      // Échantillonner la couleur du centre de la cellule
      const pixel = offscreen.getImageData(
        x * cellW + cellW/2, y * cellH + cellH/2, 1, 1
      );
      ctx.fillStyle = `rgb(${pixel.data[0]},${pixel.data[1]},${pixel.data[2]})`;
      ctx.fillRect(x * cellW, y * cellH, cellW - gap, cellH - gap);
    }
  }
}
Your turn

At what resolution does the zellige pattern remain recognisable? Compare 8×8 (very abstract) vs 64×64 (near-photographic). What is the minimum information threshold for the star to remain legible?

From pixel to heritage — explore the bridge

Book a session