Il problema dei grafici a linee curve

Dopo aver realizzato il nostro grafico a linee, potremmo pensare di utilizzare delle linee curve. Ma, come vedremo in questo articolo, ci troveremo ad affrontare una serie di problemi.

Dalle linee dritte a linee curve

Ripartendo dal codice nell'articolo precedente e cambiato le seguenti righe:

vertex(x1, height - 50 + tempMin[i] * - 20);

vertex(x1, height - 50 + tempMax[i] * - 20);

utilizzando curveVertex() al posto di vertex() otteniamo questo risultato:

Notiamo subito che mancano dei collegamenti con il primo e l'ultimo punto della serie di dati. Come indicato nel reference, questa funzione utilizza il primo e l'ultimo punto vengono usati per guidare la curvatura della linea.

A questo punto dobbiamo arbitrariamente aggiungere due punti e, in questo caso, conviene farlo prima e dopo il ciclo for. Qui sorge il secondo problema: che coordinate diamo a questi due punti che non derivano dal nostro dataset?

La soluzione più ovvia è utilizzare le coordinate del primo e dell'ultimo punto:

// Temperature minime
  int x1 = 68;
  beginShape();
  curveVertex(x1, height - 50 + tempMin[0] * - 20); 
  for (int i = 0; i < tempMin.length; i++) {
    fill(100, 190, 255);
    curveVertex(x1, height - 50 + tempMin[i] * - 20);
    noStroke();
    ellipse(x1, height - 50 + tempMin[i] * - 20, 10, 10);
    x1 += 40;
    stroke(100, 190, 255);
    noFill();
  }
  curveVertex(x1, height - 50 + tempMin[tempMin.length - 1] * - 20); 
  endShape();

  // Temperature massime
  x1 = 68;
  beginShape();
  curveVertex(x1, height - 50 + tempMax[0] * - 20); 
  for (int i = 0; i < tempMax.length; i++) {
    fill(255, 100, 100);
    curveVertex(x1, height - 50 + tempMax[i] * - 20);
    noStroke();
    ellipse(x1, height - 50 + tempMax[i] * - 20, 10, 10);
    x1 += 40;
    stroke(255, 100, 100);
    noFill();
  }
  curveVertex(x1, height - 50 + tempMax[tempMax.length - 1] * - 20); 
  endShape();

Se lanciamo il programma, il nostro grafico a linee curve diventa così:

Il risultato potrebbe sembrare soddisfacente ma un occhio esperto si potrebbe accorgere di un altro problema: la curvatura delle linee intorno ai punti dei dati può confonderci e portarci in errore quando leggiamo il grafico.

L'errore di precisione

Questo set di dati ha dei data point molto vicini tra loro e, quindi, il fenomeno non si vede chiaramente.

Ho realizzato quest'altra immagine per mostrarlo meglio: questa volta i punti sono inseriti in un array in modo casuale ma il principio è lo stesso di quello utilizzato nello sketch che stiamo realizzando.

È evidente l'errore che esiste tra i primi due punti e gli ultimi due: la linea curva va oltre i valori in modo anomalo e portando a un'interpretazione errata del grafico.

Come trovare la soluzione definita al nostro problema? Abbiamo due possibilità:

1. Rinunciare alle linee curve una volta per tutte
2. Non usare la funzione curveVertex() ma usare le curve di Bézier e, quindi, la funzione bezierVertex().

La difficoltà dell'usare queste curve è di dover passare alla funzione tre coordinate x e y: due per i punti di controllo e una per il punto di ancoraggio. Se volete capire come funzionano, consiglio di provare a giocare al The Bézier Game (io ho rinunciato dopo poco).