IMG_6316.JPG

itp

Week 5 ICM: Object Oriented Programming

For this week’s assignment, I wanted to embrace the spirit of October and Halloween, so I decided to make two classes: a Pumpkin class and a Ghost class.

I followed the class constructor template we’d used in class for the bouncy ball to build the code for the Pumpkin. I wanted to restrict their movements to vertical to make the interaction with the Ghost objects more interesting, and I wanted to make all of the arguments in each shape a variable, including the fill:

class Pumpkin {

constructor(x, y) {

this.x = x;

this.y = y;

this.pW = 40;

this.pH = 50;

this.s1 = 15;

this.s2 = 35

this.s3 = 20

this.yspeed = 5

this.radius = 40

this.color1 = {

r: 139,

g: 69,

b: 19

}

this.color2 = {

r: 255,

g: 165,

b: 0

}

}

display() {

strokeWeight(0);

fill(this.color1.r, this.color1.g,

this.color1.b);

triangle(this.x, this.y, this.x + this.s1,

this.y - this.s2,

this.x + this.s3, this.y - this.s2);

fill(this.color2.r, this.color2.g,

this.color2.b);

ellipse(this.x, this.y, this.pW, this.pH);

ellipse(this.x + this.s3, this.y, this.pW, this.pH);

}

update() {

this.y = this.y + this.yspeed

this.updateSpeed();

}

updateSpeed() {

let pumpkinSize = 85;

if (this.y < 0 ||

this.y > height) {

this.yspeed = -this.yspeed;

}

}

I followed a similar process for the Ghost class. I gave the Ghost a little more freedom of movement, with it having some Y-axis movement as well as moving back and forth along the x axis.

class Ghost {

constructor(x, y) {

this.x = x

this.y = y

this.ghostW=40

this.ghostH=90

this.gapW = 10

this.gapH = 30

this.eyeW = 5

this.eyeH = 10

this.xspeed= 2

this.yspeed = random(-3,3)

this.radius =20

}

display() {

strokeWeight(0);

fill(255)

ellipse(this.x, this.y, this.ghostW, this.ghostH);

fill(0);

ellipse(this.x+5, this.y+50, this.gapW, this.gapH)

ellipse(this.x-4, this.y+50, this.gapW, this.gapH)

fill(0)

ellipse(this.x-5, this.y-10, this.eyeW, this.eyeH);

ellipse(this.x+5, this.y-10, this.eyeW, this.eyeH);

}

move() {

this.x = this.x + this.xspeed

this.y = this.y + this.yspeed

this.updateSpeed();

}

updateSpeed(){

if (this.x < 0 ||

this.x > width) {

this.xspeed = -this.xspeed;

}

if (this.y <= height/2 -40 ||

this.y >= height/2 + 40) {

this.yspeed = -this.yspeed;

}

}

}

Riffing off the quiz question, I wanted the user to add pumpkin objects when they clicked on the canvas with their mouse. I achieved this in the sketch.js draw() loop:

for (let p in pumpkins) {

pumpkins[p].display();

pumpkins[p].update();

and mousePressed() function:

function mousePressed() {

let p = new Pumpkin(mouseX, mouseY);

p.display();

pumpkins.push(p);

}

The last thing I wanted to do was make it so when the pumpkins collided with the ghost, they turned white. This gave me the most trouble, but I eventually added two new functions to the Pumpkin class, one that detected when a pumpkin and the ghost were touching, and one that changed the color of the pumpkin to white.

intersect(other) {

var d = dist(this.x, this.y, other.x, other.y);

if (d < this.radius + other.radius) {

return true;

} else {

return false;

}

}

changeColor() {

this.color1 = {

r: 255,

g: 255,

b: 255

}

this.color2 = {

r:255,

g:255,

b: 255}

}

Finally, after a bunch of false starts, I added the following code to the draw loop:

if (pumpkins[p].intersect(ghost)) {

console.log("touched ghost")

pumpkins[p].changeColor();

Screen Shot 2018-10-09 at 1.33.34 PM.png

You can see the full code here.

ICM, ITPCaroline NeelComment