Générez des zelliges algorithmiques

Le zellige est déjà du code

Avant l'ordinateur, l'artisan du zellige suivait une règle : une grille, une symétrie, un motif qui se répète. C'est exactement un programme. Le creative coding, c'est écrire cette règle en quelques lignes — puis la faire varier à l'infini. Ici, notre outil est p5.js : une bibliothèque JavaScript pensée pour dessiner.

La grille — le squelette du motif

Tout part d'une grille. On parcourt des colonnes et des lignes, et à chaque case on dessine quelque chose. Bougez le curseur : vous changez la densité de la grille en temps réel.

function draw(){
  const n = 10;                 // nombre de cases
  const s = width / n;          // taille d'une case
  for (let x = 0; x < n; x++)
    for (let y = 0; y < n; y++){
      push();
      translate(x*s + s/2, y*s + s/2);
      rotate((x+y) * QUARTER_PI); // l'orientation dépend de la position
      line(-s/2, 0, s/2, 0);      // un simple trait → déjà un motif
      pop();
    }
}

Le motif — symétrie & couleur

Un zellige naît d'une symétrie répétée. On dessine une « étoile » (rosace) et on la duplique par rotation. Jouez avec les branches et la palette : chaque réglage donne un motif unique — comme un artisan qui change de gabarit.

L'interaction — le motif vous répond

C'est ici que le design d'interaction commence : le motif réagit à votre souris. Aucune manette, aucun capteur — juste le curseur qui devient un pinceau algorithmique. Déplacez-vous sur le canvas.

Et maintenant ?