FRENAR
N°14 · WebGL / three.js · Pièce maîtresse

Data Rug 3D

Le tissage de données en relief. Un plan haute résolution déformé par du value noise seedé — chaque vertex ondule selon les « données du jour ». Lumière rasante sculpturale pour révéler la topographie. La pièce iconique.

WebGL indisponible
orbite · ajustez seed et amplitude
// Data Rug 3D — vertex displacement + lumière sculpturale
const geo = new THREE.PlaneGeometry(8, 5, 128, 80);
const positions = geo.attributes.position;

function displace(time) {
  for (let i = 0; i < positions.count; i++) {
    const x = positions.getX(i);
    const y = positions.getY(i);
    // Value noise 2D seedé + animation temporelle
    const n = noise(x * freq + time, y * freq, seed);
    positions.setZ(i, n * amplitude);
  }
  positions.needsUpdate = true;
  geo.computeVertexNormals();
}

// Lumière rasante (Es Devlin)
const keyLight = new THREE.DirectionalLight(0xffffff, 1.5);
keyLight.position.set(4, 1.5, 2); // angle bas → relief dramatique
À toi de jouer

Poussez l'amplitude à 30 avec fréquence haute — le tapis devient montagneux. Seed 808 vs seed 2026 : deux paysages différents à partir du même algorithme. Trouvez la seed qui produit le motif le plus proche d'un vrai zellige.

Le Data Rug : votre signature algorithmique

Réserver un créneau