Temporizzazione dei dati JSON

    let terremoti;
let tempo;     

function preload() {
    terremoti = loadJSON( "terremoti_200504_0240.json" );
}

function setup() {
    createCanvas(600, 300);
    noFill();
    tempo = terremoti.features[0].properties.time;
}

function draw() {
    background(255);
    for (let i = 0; i < terremoti.features.length; i++) {
        let info = terremoti.features[i].properties;
        let deltaTempo = tempo - info.time;
        if (deltaTempo >= 0 && deltaTempo < 3000000) {
            let alfa = map(deltaTempo, 0, 3000000, 128, 0);
            stroke(0, alfa);
            let coordinate = terremoti.features[i].geometry.coordinates;
            let x = map(coordinate[0], -180, 180, 0, width);
            let y = map(coordinate[1], 90, -90, 0, height);
            circle(x, y, info.mag * 20);
        }
    }
    tempo += 10000; // + 10 secondi
}
  

  tempo = terremoti.features[/*1*/0/**/].properties./*1*/time/**/;
//...
tempo += 10000; // + 10 secondi

Imposta il valore iniziale del temporizzatore, in millisecondi, a quello della prima scossa presente nell’elenco. Incrementa poi il temporizzatore di 10 secondi a ogni draw().

  let deltaTempo = tempo - info.time;
if (deltaTempo >= 0 && deltaTempo < 3000000) {
  // ...
}

Calcola la differenza fra il valore attuale del temporizzatore e quello della scossa presa in considerazione. Se il valore è compreso fra 0 (inizio della scossa) e 3000000 (durata forzata a 50 minuti per pure esigenze grafiche) allora disegna il cerchio.

  let alfa = map(deltaTempo, 0, 3000000, 128, 0);
stroke(0, alfa);

Mappa il valore deltaTempo in modo da ottenere un valore di opacità che corrisponda al 50% (128) quando la scossa si verifica e finisca col diventare nulla (0) dopo 50 minuti (virtuali).

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
  • index.html
  • sketch.js
  • terremoti_200504_0240.json