Kamel Ghabte · Cours · Gratuit

Data-art : visualiser des données

Transformer des données en formes visuelles avec p5.js.

Le concept

Le data-art consiste à mapper des valeurs numériques sur des propriétés visuelles : position, taille, couleur, rotation. Contrairement à l'infographie classique (clarté), le data-art cherche l'expressivité et la beauté. On encode les données dans la forme elle-même, sans légende explicative.

Le code

// Data-art: animated bar heights from noise
let data = [];
function setup() {
  createCanvas(400, 280);
  for (let i=0; i<30; i++) data.push(0);
}
function draw() {
  background(11,15,20);
  let bw = width/data.length;
  for (let i=0; i<data.length; i++) {
    data[i] = noise(i*0.2, frameCount*0.01) * height * 0.8;
    noStroke(); fill(55, 227, 195, 180);
    rect(i*bw+2, height-data[i], bw-4, data[i]);
  }
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Apprendre, ou réservez un appel pour discuter de votre projet.

Envie d'aller plus loin ?

Réserver un appel découverte →