/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var particles = [];
function setup() {
createCanvas(400, 400);
for (var i = 0; i < 50; i ++) {
particles[i] = new Object();
particles[i].x = random(width);
particles[i].y = random(height);
particles[i].dx = random(-2,5);
particles[i].dy = random(-2,5);
particles[i].c = color(86, 137, 179);
particles[i].covid = false;
}
frameRate(25);
}
function draw() {
background(201, 156, 105);
for (var j = 0; j < 50; j ++) {
drawParticles(particles[j]);
moveParticles(particles[j]);
}
if (frameCount == 50 || frameCount % 100 == 0) {
particles[2].covid = true;
}
// calculate distance for infection
for (var i = 0; i < particles.length; i ++) {
for (var j = 0; j < particles.length; j ++) {
var d = int(dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y));
if (d < 20) {
if (particles[i].covid == true) {
particles[j].covid = true;
}
}
}
}
// display counter
//if all particles have covid, then display the warning text
var covidCounter = 0;
for (var i = 0; i < particles.length; i ++) {
if (particles[i].covid == true) {
covidCounter ++;
}
}
noStroke();
fill(255);
textAlign(LEFT);
textSize(20);
text("Infected People:", 10, 25);
text(covidCounter, 160, 25);
if (covidCounter == particles.length) {
fill(255, 253, 131);
textAlign(CENTER);
textSize(30);
text('STOP CORONA!', width/2, height/2.15);
textSize(35)
text('KEEP YOUR DISTANCE!', width/2, height/1.75);
}
}
// reset canvas and cure all particles
function keyPressed() {
for (var i = 0; i < particles.length; i ++) {
particles[i].covid = false;
}
}
// cure covid with mouse
function mousePressed() {
for (var i = 0; i < particles.length; i ++) {
var mouseDistance = int(dist(mouseX, mouseY, particles[i].x, particles[i].y));
if (mouseDistance < 10) {
particles[i].covid = false;
}
}
}
function drawParticles(p) {
if (p.covid == true) {
stroke(1);
fill(204, 61, 61);
} else {
stroke(1);
fill(p.c);
}
ellipse(p.x, p.y, 12, 12);
}
function moveParticles(p) {
p.x += p.dx;
p.y += p.dy;
if (p.x > width || p.x < 0) {
var resetX = random(100);
if (resetX < 50) {
p.x = 0;
} else {
p.x = width;
}
p.dx = random(-2, 5);
}
if (p.y > height || p.y < 0) {
var resetY = random(100);
if (resetY < 50) {
p.y = 0;
} else {
p.y = height;
}
p.dy = random(-2, 5);
}
}
The final result of my project is a Covid-19 infection simulator using particles. The canvas represents a public space, and the particles represent people traveling around without social distancing. Initially, all the particles are not infected. However, as they “travel” around freely–some going off canvas and reentering the canvas from somewhere else–one of the particles would contract “Covid-19, ” turning red. This infected particle will then continue to spread the virus to other particles if other particles are too close–“less than 6 feet”–to it. A counter is displayed at the top left of the canvas, showing how many particles are infected on the screen at the moment. Once every particle is infected, a text is displayed saying “STOP CORONA! KEEP YOUR DISTANCE!”This program is also interactive. Using the mousePressed() function, when the user clicks on an infected particle, he or she can cure it from the virus. However, the particles can become infected again similar to Covid reinfections we have seen on the news. By clicking on any key, the user can also reset the particles to their normal state, restarting the simulation again.
The project is inspired by the frustration I get from watching the news and seeing people not properly social distancing. Hopefully, this project illustrates the importance of social distancing to the viewers while providing them with visual elements that are captivating and interactive.
If provided more time, I would like to add mutual repulsion to the program, illustrating what effective social distancing looks like, which was one of the main features I planned to implement initially but failed to do so since I didn’t fully understand the physics behind the example code and didn’t want a completely broken program.