Tag: mlni03

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. 

Homework OOP

So what did I do exactly? 

I made my input the location of my mouse (the x and y coordinates). I then worked to declare the type of movement I wanted to happen. It wasn’t anything particularly special, but this is essentially the more organized way of getting movement for multiple objects.

If I really wanted to I could have a million circles. I didn’t want to do that, because I wanted to show how the mouse input works as clearly as possible. 

I could have just as easily done the keyboard, Up, Down, Left, Right arrow keys, but I like the real time updates this way… I am kind of a press and hold sort of person and I get annoyed easily if I hav to repeatedly press the keys. 

Anyway… this is my code (you can also see it in the video).

const MAX_BALLS = 10000, balls = [];
let bg;

function setup() {
pixelDensity(displayDensity());
createCanvas(500, 500).mousePressed(createBall);
frameElement && (frameElement.width = width, frameElement.height = height);

bg = color(random(255),random(255),random(255));
}

function draw() {
background(bg);
ellipseMode(CENTER).noLoop();
strokeWeight(2.5).stroke((random(255), random(255),random(255))).fill((random(255), random(255),random(255)));
for (let b of balls) b.display();
}

function createBall() {
const b = balls.length == MAX_BALLS && balls.shift() || new Ball;
balls.push(b.setXY(mouseX, mouseY));
redraw();
}

class Ball {
static get DIAM() { return 50; }

constructor(x, y) { this.setXY(x, y); }

setXY(x, y) {
this.x = x, this.y = y;
return this;
}

display() { ellipse(this.x, this.y, Ball.DIAM, Ball.DIAM); }
}