MLNI Week 3 HW Jessica Chon

For this week’s assignment, we had to “create a generative art that utilizes object-oriented programming concept and interactivity with mouse and/or keyboard”. The link to my work is below:

https://editor.p5js.org/chonjessica/full/2E4_ZXWZW

And here a video of my code working. 

Project Summary

I really just wanted to keep my assignment simple since I tend to be weak in OOP so I just wanted code I could understand and do. So for the assignment I just made a spinning star and wanted it change colors, and have balls pop up whenever a user clicked it. 

Code

let balls = [];

function setup() {
createCanvas(500, 500);

r = random(255);
g = random(255);
b = random(255);

for (let i = 0; i < 10; i++) {
balls[i] = new Ball();
}
}

function draw() {
background(0);
stroke(0);
strokeWeight(3);

star(mouseX, mouseY, 1.5);
}

function mousePressed() {
r = random(255);
g = random(255);
b = random(255);

for (let i = 0; i < 10; i++) {
balls[i].display();
balls[i].move();
balls[i].bounce();
}
}

function star(x, y) {
push();
translate(x, y);
scale(1);
rotate(frameCount * 0.01);
translate(-width / 2, -height / 2);

//star shape & random color
beginShape();
vertex(141, 314);
vertex(203, 131);
vertex(271, 330);
vertex(110, 202);
vertex(311, 204);
endShape(CLOSE);
pop();
}

class Ball {
constructor() {
this.x = width/2;
this.y = height/2;
this.xSpd = random(-5, 5);
this.ySpd = random(-5, 5);
this.size = 50;
}

move() {
this.x += this.xSpd;
this.y += this.ySpd;
}

bounce() {
if (this.x < 0 || this.x > width) {
this.xSpd *= -1;
}
if (this.y < 0 || this.y > height) {
this.ySpd *= -1;
}
}

display() {
fill(r, g, b)
ellipse(this.x, this.y, this.size, this.size);
}
}

Discussion

I had to look up some examples of how to make random colors appear when you clicked and found this link and found that you can type vertex to make the points of a shape pointy, rather than curved as we did in class. I also just referred a lot to the in-class examples to get an idea of what I wanted to do for the homework. Since I’m still not too comfortable with OOP, I had to google a lot of examples to understand how to make the balls appear on mousePressed, which I figured out after looking at a few examples. However, I am unsure as to why the balls keep disappearing after I stop clicking, but still reappear in the same place. I would like to eventually make an office hour to get more clarification on how to do OOP.