p5(sketch => {
let system;
let step = 0;
let resourceSize = 100;
let landfillSize = 0;
let smallCircleX;
let smallCircleY;
let productX;
let productY;
let percentageRecyclable = 0; // You can set this value as required
let recycleCircleX, recycleCircleY, landfillCircleX, landfillCircleY;
let recycleSlider;
sketch.setup() = function {
createCanvas(800, 600);
smallCircleX = width / 4;
smallCircleY = height / 2;
productX = width / 2;
productY = height / 2;
recycleCircleX = width / 2;
recycleCircleY = height / 4;
landfillCircleX = width / 2;
landfillCircleY = height / 4;
recycleSlider = createSlider(0, 100, 0);
recycleSlider.position((width/2)-100, height - 40);
}
function draw() {
background(255);
percentageRecyclable = recycleSlider.value();
// Draw the two main circles
fill(0, 255, 0);
ellipse(width / 4, height / 2, resourceSize);
fill(255, 0, 0);
ellipse(3 * width / 4, height / 2, landfillSize);
// Add labels for the circles
textSize(25);
textAlign(CENTER, CENTER);
fill(0);
text('Resources', width / 4, height / 2 + resourceSize / 2 + 20);
text('Landfill', 3 * width / 4, height / 2 + landfillSize / 2 + 20);
text('Product Use', width / 2, height / 2 + 20);
text('Product Disposal', width / 2, height / 4 - 20);
let economyType = percentageRecyclable<=0?"Linear Economy":percentageRecyclable>0 && percentageRecyclable<100?"Recycling Economy":"Circular Economy"
text(`Reusable resources: ${percentageRecyclable}%, ${economyType}`, width/2, height - 50);
if (step === 0) {
if (keyIsDown(ENTER) && resourceSize > 9) {
resourceUsed = false
resourceSize -= 10;
step = 1;
}
} else if (step === 1) {
smallCircleX += 4;
if(!resourceUsed){
resourceUsed=true
console.log(resourceUsed)
}
if (smallCircleX >= width / 2) {
step = 2;
} else {
fill(255, 255, 0);
ellipse(smallCircleX, smallCircleY, 10);
}
} else if (step === 2) {
productY -= 2;
if (productY <= height / 4) {
step = 3;
} else {
fill(0, 0, 255);
rect(productX, productY, 10, 10);
}
} else if (step === 3) {
let dxResource = (width / 4 - recycleCircleX-100) / 100;
let dyResource = (height / 2 - recycleCircleY+100) / 100;
let dxLandfill = (3 * width / 4 - landfillCircleX+100) / 100;
let dyLandfill = (height / 2 - landfillCircleY+100) / 100;
recycleCircleX += dxResource;
recycleCircleY += dyResource;
landfillCircleX += dxLandfill;
landfillCircleY += dyLandfill;
fill(0, 255, 255);
ellipse(recycleCircleX, recycleCircleY, 10 * (percentageRecyclable / 100));
fill(255, 127, 0);
ellipse(landfillCircleX, landfillCircleY, 10 - (10 * (percentageRecyclable / 100)));
if (dist(recycleCircleX, recycleCircleY, width / 4, height / 2) < 30 && dist(landfillCircleX, landfillCircleY, 3 * width / 4, height / 2) < 30) {
let recycleSize = 10 * (percentageRecyclable / 100);
let landfillSizeIncrease = 10 - recycleSize;
resourceSize += recycleSize;
landfillSize += landfillSizeIncrease;
smallCircleX = width / 4;
smallCircleY = height / 2
productX = width / 2;
productY = height / 2;
recycleCircleX = width / 2;
recycleCircleY = height / 4;
landfillCircleX = width / 2;
landfillCircleY = height / 4;
step = 0;
}
}
}
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
