let recycleTrash;

let landTrash;

let waterTrash;

​

let blackFont;

let robotoFont;

​

let inputTotal;

let inputRecycle;

let inputLand;

let inputWater;

​

function preload() {

  blackFont = loadFont("assets/black.ttf");

  robotoLightFont = loadFont("assets/Roboto-Light.ttf");

  robotoMediumFont = loadFont("assets/Roboto-Medium.ttf");

​

  recycleImage = loadImage("assets/recycle.png");

  landfillImage = loadImage("assets/landfill.png");

  houseflyImage = loadImage("assets/housefly.png");

  waterImage = loadImage("assets/water.jpg");

  manImage = loadImage("assets/man.png");

​

  inputTotal = createInput("64", "text");

  inputTotal.position(10, 625);

  inputRecyle = createInput("7.68", "text");

  inputRecyle.position(190, 625);

  inputLand = createInput("41.60", "text");

  inputLand.position(370, 625);

  inputWater = createInput("14.72", "text");

  inputWater.position(550, 625);

}

​

function setup() {

  createCanvas(windowWidth, 600);

}

​

function draw() {

  background(0);

  totalTrash = inputTotal.value(); //64

  recycleTrash = inputRecyle.value(); //7.68

  landTrash = inputLand.value(); //41.60

  waterTrash = inputWater.value(); //14.72

​

  let recycle = floor((recycleTrash * 100) / totalTrash);

  let recyPercent = map(recycle, 0, 100, 0, width);

​

  let land = floor((landTrash * 100) / totalTrash);

  let landPercent = map(land, 0, 100, 0, width);

​

  let water = floor((waterTrash * 100) / totalTrash);

  let waterPercent = map(water, 0, 100, 0, width);

​

  noStroke();

​

  fill("#e9d9b8");

  rect(recyPercent, 0, landPercent, height);

​

  fill("#40eff1");

  rect(landPercent, 0, waterPercent, height);

​

  fill("#52e16b");

  rect(0, 0, recyPercent, height);

​

  fill(0);

  textFont(blackFont);

  textSize(17);

  text("Recycle", 0, 50);

  text("Landfill", recyPercent, 50);

  text("Water", landPercent, 50);

​

  fill("#BB0000");

  textFont(robotoLightFont);

  textSize(13);

  text(recycle + "%", 0, height / 2 - 7);

  text(land + "%", recyPercent, height / 2 - 7);

  text(water + "%", landPercent, height / 2 - 7);

​

  textFont(robotoMediumFont);

  textSize(12);

  text((totalTrash * recycle) / 100 + " jt ton", 0, height / 2 + 7);

  text((totalTrash * land) / 100 + " jt ton", recyPercent, height / 2 + 7);

  text((totalTrash * water) / 100 + " jt ton", landPercent, height / 2 + 7);

​

  image(recycleImage, 0, 0, 40, 40);

  image(landfillImage, recyPercent, 0, 60, 35);

  image(waterImage, landPercent, 0, 60, 35);

}

​