Dades i art (II)

Del Tema 18 a les dades vives

Al Tema 18 vam aprendre a carregar fitxers CSV i JSON locals. Ara anem més enllà:

• APIs públiques: obtenció de dades reals d'internet (meteorologia, terratrèmols, divises).
• Visualització meteorològica: representar temperatures, humitat i vent de forma artística.
• Simulació de xarxes socials: dades d'interaccions, seguidors, likes transformades en nodes i connexions.
• Quadres de comandament artístics: combinar múltiples fonts de dades en una sola obra.

Connexió a APIs amb await loadJSON()

Una API (Application Programming Interface) és un servei web que retorna dades en format JSON. Amb p5.js v2, fem la petició dins d'async setup() amb await loadJSON(url).

let dadesMeteo;

async function setup() {
  createCanvas(400, 300);
  let url = 'https://api.open-meteo.com/v1/forecast?latitude=41.38&longitude=2.17¤t=temperature_2m,wind_speed_10m&timezone=Europe/Madrid';
  dadesMeteo = await loadJSON(url);
  let temp = dadesMeteo.current.temperature_2m;
  let vent = dadesMeteo.current.wind_speed_10m;
}

Algunes APIs requereixen clau d'accés. Per a pràctiques, pots simular la resposta amb un JSON local o utilitzar APIs obertes com Open-Meteo.

Estació meteorològica visual

Simulem dades meteorològiques (temperatura, humitat, vent) i les representem amb elements visuals.

temp = map(mouseX, 0, width, -10, 40);
hum = map(mouseY, 0, height, 100, 0);
let c = lerpColor(color(0,100,255), color(255,50,0), (temp+10)/50);
fill(c); ellipse(100, 110, map(hum, 0, 100, 20, 100));
push(); translate(260, 110); rotate(radians(vent * 10));
fill(180); rect(-5, -40, 10, 80); pop();

Xarxes socials: nodes i connexions

Les dades de xarxes socials es poden representar com un graf: cada compte és un node i cada connexió és una línia.

let nodes = [{x:80,y:80,s:30},{x:200,y:60,s:50},...];
let edges = [[0,1],[0,3],[1,2],...];
for (let e of edges) {
  line(nodes[e[0]].x, nodes[e[0]].y, nodes[e[1]].x, nodes[e[1]].y);
}
for (let n of nodes) { ellipse(n.x, n.y, n.s); }

Gràfic de sectors: proporcions elegants

Un gràfic de sectors mostra proporcions d'un tot. Amb arc() i un bucle, podem dibuixar sectors proporcionals a les dades.

let total = dades.reduce((a,b) => a+b, 0);
let angleInici = 0;
for (let i = 0; i < dades.length; i++) {
  let angle = map(dades[i], 0, total, 0, TWO_PI);
  fill(colors[i]);
  arc(width/2, 100, 150, 150, angleInici, angleInici+angle, PIE);
  angleInici += angle;
}

Quadre de comandament artístic

Un quadre de comandament combina múltiples visualitzacions en un sol llenç.

let cFons = lerpColor(color(100,255,100), color(255,100,100), aqi/300);
background(cFons);
rect(30, 180, map(temp, -5, 38, 0, 300), 25);
ellipse(100, 80, map(hum, 0, 100, 30, 120));
push(); translate(280, 80); rotate(radians(vent * 10));
rect(-3, -30, 6, 60); pop();

Consells per a projectes amb dades

• Utilitza dades reals sempre que puguis: APIs obertes (Open-Meteo, JSONPlaceholder) donen credibilitat al projecte.
• Simula mentre desenvolupes: crea funcions que retornin dades falses però realistes per provar la visualització.
• Actualitza periòdicament: amb setInterval() o frameCount % N === 0 per tornar a cridar loadJSON() cada cert temps.
• Cuida l'estètica: un quadre de comandament ha de ser llegible i atractiu. Utilitza paletes de colors coherents i tipografia clara.
• Explica les dades: acompanya les visualitzacions amb etiquetes, llegendes i textos que ajudin a interpretar la informació.