​

let myData;

setInterval(background, 1000);

let r = 255;

let g = 255;

let b = 255;

let c1 = 400;

let c2 = 300;

let c3 = 200;

​

let nowD = 0;

let widthH;

let widthR;

let widthZ;

var houseHold;

//setInterval(one, 2000);

//setInterval(two, 2000);

​

​

function preload() {

  myData = loadJSON('data.json');

  imgBurger = loadImage('burger.png');

  imgBattery = loadImage('battery.png');

  imgRecycle = loadImage('recycle.png');

}

​

​

function setup() {

  createCanvas(600, 600);

  console.log(myData)

​

}

​

function draw() {

​

  frameRate(1)

​

  if (nowD == 6) {

    nowD = 0;

  }

  // for (var i = 0; i < Object.keys(myData).length; i++) {

    var data = myData[nowD];

    let house = parseFloat(data["household"]);

    let hazard = parseFloat(data["hazardous"]);

    let recycle = parseFloat(data["recyclable"]);

    // console.log(house, hazard, recycle);

    widthH = house;

    widthR = recycle;

    widthZ = hazard;

  // }

​

  background(r, g, b);

  //noFill();

  //strokeWeight(widthH);

  //ellipse(150, 140, 100, 100);

  push();

  fill(widthH * 10, 0, 255);

  strokeWeight(widthH*10);

  stroke(widthH * 10, 255, 0);

  ellipse(150, 140, c1, c1);

  pop();

  push();

  fill(widthR * 10, 255, 255);

  strokeWeight(widthR*10);

  stroke(255, widthR * 10, 0);

  ellipse(200, 500, c2, c2);

  pop();

  push();

  fill(255, widthZ, 255);

  strokeWeight(widthZ * 20);

  stroke(0, 0, widthZ * 10);

  ellipse(423, 423, c3, c3);

  pop();

  image(imgBurger, 100, 100, 100, 80);

  image(imgBattery, 400, 400, 50, 50);

  image(imgRecycle, 150, 450, 100, 100);

  nowD += 1;

​

}

​

function background() {

  r = random(255);

  g = random(255);

  b = random(255);

}