let loaded = false;

let earthquakeMag=0;

let earthquakeName;

let earthquakeSig;

let x = 50;

let y = 50;

​

function setup() {

createCanvas(720,400);

textAlign(CENTER);

background(255);

stroke(0, 10 ,100, 0);

} 

​

function draw() {

//background(100+earthquakeMag*20,200-earthquakeMag*20,0);

drawEarthquake();

}

​

function keyPressed() {

if (key == 'l') loadJSON(url, getEarthquake);

}

​

function getEarthquake(earthquakes) { // Geti the magnitude and name of the earthquake out of the loaded JSON

earthquakeMag = earthquakes.features[0].properties.mag;

earthquakeName = earthquakes.features[0].properties.place;

earthquakeSig = earthquakes.features[0].properties.sig;

loaded = true;

print(earthquakeMag,earthquakeName);

​

​

}

​

function drawEarthquake() {

if (loaded) {

  stroke(0);

  strokeWeight(1);

ellipse(earthquakeSig,earthquakeSig, earthquakeMag * 30);

  noStroke();

text(earthquakeName+"\n"+earthquakeMag, 0, height - 40, width, 30);

/*x = x + 1;

if (x > 35 && x < 100 )

{print('here ya go');

x = x + -1; }*/

​

} else text("click canvas\nuse key [l] for update", width/2, height/2);

  from = color(255, 255, 0, 0.1 * 255);

  to = color(255, 90, 0, 0.2 * 255);

  c1 = lerpColor(from, to, 0.23);

  c2 = lerpColor(from, to, 0.36);

  for (let i = 0; i < 15; i++) {

    fill(from);

    circle(

      random(-40, 220), random(height),

      random(-40, 220), random(height),

      random(-40, 220), random(height),

      random(-40, 220), random(height)

    );

    fill(c1);

   circle(

      random(140, 380), random(height),

      random(140, 380), random(height),

      random(140, 380), random(height),

      random(140, 380), random(height)

    );

    fill(c2);

    circle(

      random(320, 580), random(height),

      random(320, 580), random(height),

      random(320, 580), random(height),

      random(320, 580), random(height)

    );

    fill(to);

    circle(

      random(500, 760), random(height),

      random(500, 760), random(height),

      random(500, 760), random(height),

      random(500, 760), random(height)

    );

  }

  frameRate(5);

}

​