xxxxxxxxxx354
//Transitioning to classes for moving drawingslet darkness = false;let patrolCar, patrolCar2, patrolKitty;let bigBrotherPupil;let colorMaps = [ { //Red Color r: 255, g: 0, b: 0, }, { //White Color r: 255, g: 255, b: 255, }, { //Skin Color r: 255, g: 170, b: 130, }, { //Brick Color r: 200, g: 200, b: 200, },];function setup() { createCanvas(600, 400); bigBrotherPupil = new Pupil(300, 200, 'black', -1, 0.2); patrolCar = new movingPatrol(50, 300, colorMaps[0], 8, 19, 'car'); patrolCar2 = new movingPatrol(50, 300, colorMaps[3], 1, 4, 'car'); patrolKitty = new movingPatrol(80, 200, colorMaps[1], 3, -2, 'cat'); }function draw() { background(colorMaps[3].r, colorMaps[3].g, colorMaps[3].b ); drawGrid(); // call obj and movement functions BigBrother(bigBrotherFace); /* initializing moving pupil pair through pupil class, as well as other objects */ bigBrotherPupil.display(); patrolCar.display(); patrolCar2.display(); patrolKitty.display(); //Kitty always moves patrolKitty.move(); patrolKitty.bounce(); /* Patrol car 2 moves in day, so big brother lurks at night, thus patrol car 1 suddenly moves making kitty panic */ if (darkness) { bigBrotherPupil.move(); bigBrotherPupil.bounce(); patrolCar.move(); patrolCar.bounce(); // Alternate colors during dark if (random() > 0.6) { updateColor(0); } else { randomizeColor(1); } } else { // Car 2 camouflages in dark patrolCar2.move(); patrolCar2.bounce(); } }// Pupil class, new obj produces a pair of pupils to keep the movement in syncclass Pupil { constructor(x, y, color, xspeed, yspeed) { this.x = x; this.y = y; this.color = color; this.xspeed = xspeed; this.yspeed = yspeed; } display() { noStroke(); fill(this.color); // Draw left and right eyes ellipse(this.x - 70, this.y - 50, 20, 20); ellipse(this.x + 70, this.y - 50, 20, 20); } move() { this.x += this.xspeed; this.y += this.yspeed; } bounce() { if (this.x < 278 || this.x > 324) { this.xspeed = -this.xspeed; } if (this.y < 178 || this.y > 228) { this.yspeed = -this.yspeed; } }}// Patrol Object Classclass movingPatrol { constructor(x, y, color, xspeed, yspeed, characterType) { this.x = x; this.y = y; this.color = color; this.xspeed = xspeed; this.yspeed = yspeed; this.type = characterType; } display() { noStroke(); fill(this.color.r, this.color.g, this.color.b); if (this.type == 'car') { rect(this.x, this.y, 60, 20); rect(this.x + 20, this.y - 10, 40, 10); fill(0); ellipse(this.x + 10, this.y + 20, 15, 15); ellipse(this.x + 50, this.y + 20, 15, 15); } else if (this.type == 'cat') { //// Head ellipse(this.x, this.y - 50, 42, 40); //// Ears fill(this.color.r, this.color.g, this.color.b); // Left ear triangle(this.x - 20, this.y - 70, this.x - 10, this.y - 50, this.x, this.y - 60); // Right ear triangle(this.x + 20, this.y - 70, this.x + 10, this.y - 50, this.x, this.y - 60); //// Eyes fill(0); ellipse(this.x - 10, this.y - 50, 5, 5); // Left eye ellipse(this.x + 10, this.y - 50, 5, 5); // Right eye // Nose fill(255, 0, 0); ellipse(this.x, this.y - 46, 5, 5); // Mouth stroke(0); strokeWeight(1); noFill(); arc(this.x, this.y - 42, 10, 10, 0, PI); //Smile Curve } } move() { this.x += this.xspeed; this.y += this.yspeed; } bounce() { if (this.x < 0 || this.x > width) { this.xspeed = -this.xspeed; } if (this.y < 0 || this.y > height) { this.yspeed = -this.yspeed; } }}///////////////////////////////////////////////////////////////////// Unchanged functions from Lab 5 below ////////////////////////////////////////////////////////////////////////brick wallfunction drawGrid() { for (let i = 0; i <= width; i += 20) { for (let j = 0; j <= height; j += 20) { // line(i, j + 20, i + 20, j); noFill(); rect(i, j, 20); } } }//change bgfunction mousePressed() { if (!darkness) { colorMaps[3].r = 0; colorMaps[3].g = 0; colorMaps[3].b = 0; darkness = true; } else { colorMaps[3].r = 200; colorMaps[3].g = 200; colorMaps[3].b = 200 darkness = false; } draw(); }//Big brother is watchinglet bigBrotherFace = { x: 300, y: 200, col: colorMaps[2], xspeed: 6, yspeed: -4,};let bigBrotherPupil1 = { x: 300, y: 200, col: 'black', // pupil color xspeed: -1, yspeed: 0.2,}//for checking gradient valueslet direction = [ { towardsWhite: true }, { towardsWhite: false } ];function updateColor(index) { let color = colorMaps[index]; let dir = direction[index]; if (dir.towardsWhite) { color.g = min(color.g + 10, 255); color.b = min(color.b + 10, 255); // Check if the color is white if (color.g >= 255 && color.b >= 255) { dir.towardsWhite = false; // Change to red } } else { color.g = max(color.g - 10, 0); color.b = max(color.b - 10, 0); // Check if the color has is red if (color.g <= 0 && color.b <= 0) { dir.towardsWhite = true; // Change to white } }}function randomizeColor(index) { let color = colorMaps[index]; // Assign random values within the 0-255 range color.r = Math.floor(Math.random() * 256); color.g = Math.floor(Math.random() * 256); color.b = Math.floor(Math.random() * 256);}// Big Brother Face Object (non animated drawing)function BigBrother(obj) { noStroke(); // face fill(obj.col.r,obj.col.g,obj.col.b); ellipse(obj.x, obj.y, 350, 350); // eyes fill(255); ellipse(obj.x - 70, obj.y - 50, 70, 100); // Left eye ellipse(obj.x + 70, obj.y - 50, 70, 100); // Right eye // mouth fill(65,0,0); rect(obj.x - 40, obj.y + 80, 80, 10);}