let loaded = false;

let earthquakeMag=0;

let earthquakeName;

let earthquakeSig;

let x = 50;

let y = 50;

​

function setup() {

  createCanvas(400,400);

  textAlign(CENTER);

  background(200,100,39);

}

​

function draw() {

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

  drawEarthquake();

}

​

function keyPressed() {

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

}

​

function getEarthquake(earthquakes) { // Get 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) {

    circle(earthquakeSig+10,earthquakeSig+10,  earthquakeMag * 10);

    text(earthquakeName+"\n"+earthquakeMag, earthquakeSig+10, earthquakeSig+10, 70, 80);   

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