In my final project, I showcase somewhat of a Covid-19 Precaution Simulation. The user is situated in the right side of the window and with the refreshing of the page, red virus balls and green mask/safety balls appear. The red viruses will come across the page at different speeds and sizes to symbolize the various ways of possibly contracting Covid-19. Hovering over the green safety orbs will help the users glowing shield to grow larger and brighter. As the shield grows, the viruses will be eliminated; at one point due to the immense “precautions and safety measures” that have been collected/taken by the user, the viruses die before reaching the shield, signifying that we can never be too safe in these times.
var shieldAttribute; //tracks size + color of shield
var mask=[]; //masks (green circles)
var virus = []; //virus (red circles)
var virusCount=10; //number of virus
var maskCount =15 // number of masks
var waves=10;
var x;
var y;
var speed;
var maskx;
var masky;
var maskr;
var checkMask;
var checkVirus;
function setup() {
createCanvas(600, 400);
shieldAttribute = 60;
for (var i = 0; i < virusCount; i++) { //setting up to create virus objects
var x;
var y;
var speed ;
virus[i] = new Covid19(x, y, speed);
}
let checkMask = false;
for (var j = 0; j < maskCount; j++) { //creat mask objects
mask[j] = new Masks(maskx, masky, maskr);
}
}
function draw() {
background(0);
userGen(); //create user + shield
for (var i = 0; i < virusCount ; i++){ //functionality of virus implemented
virus[i].generate();
virus[i].forward();
if(dist(virus[i].x, virus[i].y, 550, height/2)<= shieldAttribute-120){ //the virus balls get eliminated as they approach the growing shield
virus[i].x = -600
}
}
for (var j = 0; j < maskCount ; j++){ //functionality of virus implemented
mask[j].build();
mask[j].collect();
mask[j].move();
}
}
//function for creating user
function userGen(){
noStroke();
fill(20,255,238,shieldAttribute/5); //shield
ellipse(550, height/2, shieldAttribute, shieldAttribute);
fill(60, 198, 177); //user circle
ellipse(550, height/2 ,40, 40);
}
//COVID19 VIRUS CLASS
class Covid19 {
constructor(){
this.x = 0;
this.y = random(20, 380);
this.speed = random(0.5,2.5);
this.virRad = random (30,50);
this.checkVirus = false;
}
forward (){
// for (var i = 0; i < 5; i++){
this.x += this.speed;
}
generate (){ //create the virus
if (this.checkVirus == false){
noStroke();
fill(255,80,10);
ellipse(this.x, this.y, this.virRad, this.virRad);
}
}
}
//MASK CLASS
class Masks {
constructor(){
this.maskx = random(550);
this.masky = random(350);
this.maskr = random(10,80);
this.checkMask = false;
}
build(){ //create the mask
noStroke();
fill(50,240,80);
if (this.checkMask == false){
ellipse(this.maskx, this.masky, this.maskr);
}
}
collect(){ //the mask balls disappear when hovered over, giving the illusion of "collecting"
let d = dist(mouseX, mouseY, this.maskx , this.masky);
if (d <= 20){
shieldAttribute += this.maskr;
this.checkMask = true;
this.maskx = -600
this.masky = -600
this.maskr = 0
}
}
move(){ //masks jittering to make collecting a bit more difficult
this.maskx += random(-2,2);
this.masky += random(-2,2);
}
}