DO:
Next week you will be presenting your own assignments. Time limit is 5 minutes. Be prepared to point out 3 things in your sketch and how they're working. (e.g. Here's a loop, it's limit is being set by the mouse. This doohicky is an object and I have an array of 100 of them. They flicker and change color and when I click, I flip a boolean to make them start and stop flickering.)Design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)Make one single object with just variables.Put one or more functions in the object.Try manually making two objects.Duplicate the object using an array and make as many as you like!If you are already working with classes/objects and arrays:Re-organize / break-down your classes into the "smallest functional units" possible.Try different ways to have your objects "communicate" with each other in some way.In the end the goal is to have code in draw() that only makes calls to objects.
link to sketch:
Code:
let balls = [];
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(20);
// this is a loop to tell the balls what each of them need to do
// how many times the loop run depends on how many balls there are (balls.lenght)
for (let b = 0; b < balls.length; b++) {
balls[b].move();
balls[b].display();
balls[b].shake();
balls[b].changesize();
}
}
///I use loop to create 100 balls per mouse click and push them in the array
function mousePressed() {
for (let i = 0; i < 100; i++) {
//speed
let xs = random(-0.55, 0.8);
let ys = random(-0.55, 0.8);
// constructor(x, y, xs, ys, size,color)
// create new Ball with random speed, random size from 0-20 and random color
let newball = new Ball(mouseX, mouseY, xs, ys, random(20), color);
balls.push(newball);
console.log(balls.length);
}
}
class Ball {
constructor(x, y, xs, ys, size,color) {
this.x = x;
this.y = y;
this.xs = xs;
this.ys = ys;
this.size = size;
this.color = random(['#25545B','#47FF90','#7145F7','#4CFF00','#4C00FF']);
}
display() {
noStroke();
ellipse(this.x, this.y, this.size, this.size);
fill(this.color);
}
move() {
this.x = this.x + this.xs;
this.y = this.y + this.ys;
}
shake() {
this.x = this.x + random(-0.5, 0.5);
this.y = this.y + random(-0.5, 0.5);
}
changesize() {
this.size = this.size + 0.03;
if (this.size > 30){
this.size = 0
}
}
}