N°26 · Canvas 2D · Signature transversale

Zellige × Pixel

Le pont entre patrimoine et code. Un zellige traditionnel se décompose en pixels — chaque tuile de céramique devient un carré de données. Déplacez le curseur de résolution : du continu au discret, de l'artisanat à l'algorithme.

glissez le curseur résolution

Résolution Seed Symétrie

// 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);
    }
  }
}

À toi de jouer

À quelle résolution le motif zellige reste-t-il reconnaissable ? Comparez 8×8 (très abstrait) vs 64×64 (quasi-photographique). Quel est le seuil minimal d'information pour que l'étoile reste lisible ?

Du pixel au patrimoine — explorez le pont

Réserver un créneau