ICM Week 4 – The struggle is real.

I’m trying to make a ball appear on the screen using my own functions with move() and display() but I’m running into a console error I can’t figure out.

let balls = [];
function setup() {
createCanvas(500, 400);
for (let i = 0; i < 4; i++) {
balls[i] = {
x: random(0,width),
y: random(0,height),
display: function() {
stroke(255);
noFill();
ellipse(this.x, this.y, 25, 25);
},
move: function() {
this.x = this.x + random(-1, 1);
this.y = this.y + random(-1, 1);
}
}
}
}
function draw() {
background(0);
for (let i = 0; i < balls.length; i++);
balls[i].move();
balls[i].display();
}

Console says Uncaught ReferenceError: i is not defined (sketch:line 26) which is this line of code:

for (let i = 0; i < balls.length; i++);

Since Dan moved on in his video to simplify, I will move on too…

Unfortunately, I ran into the same problem with the simplified code…

let balls = [];
function setup() {
createCanvas(500, 400);
for (let i = 0; i < 4; i++) {
balls[i] = new Ball();
}
}
function draw() {
background(0);
for (let i = 0; i < balls.length; i++); {
balls[i].move();
balls[i].display();
}
}
function Ball() {
this.x = random(0,width);
this.y = random(0, height);
this.display = function() {
stroke (255);
noFill();
ellipse(this.x, this.y, 25, 25);
}
this.move = function() {
this.x = this.x + random(-1,1);
this.y = this.y + random(-1,1);
}
}

It’s unbelievably annoying to move forward with the video’s we have to watch without being able to replicate the code sufficiently…let’s see if I can learn this stuff without recreating it at the same time I guess..

……..Now I’m really getting angry…I just tried to copy what dan was coding, verbatim, and I’m getting an uncaught type error in this code:
let bubbles = [];
function setup() {
createCanvas(600, 400);
for (let i = 0; i < 10; i++) {
let x = random(width);
let y = random(height);
bubbles.push(new Bubble(x,y));
}
}
function draw() {
background(0);
for (let i = 0; i < bubbles.length; i++)
bubbles[i].move();
bubbles[i].display();
}

I put that in the sketch.js folder, then I created another file named “bubble.js” and put the appropriate code there too…I cannot figure out why I can’t seem to get anything to show up today 4 hours into doing all this……..I’m losing my mind…taking a break now as I’m about to throw my computer across the room.

……………………………………………………………………………………………………..

Moving on from all that ’cause I still can’t figure it out.

For homework this week I took an old sketch and tried to rework it. Here’s the old one:

And the code:
let angle = 0
let x = 50
let y = 50
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(0);
translate(200, 200);
rotate(angle);
stroke(130);
line(0, 0, 50, 50);
rectMode(CENTER);
fill(255, 50, 20);
rect(x, y, 10, 10);
angle = angle + 2;
}

And after some more frustrating attempts — can’t get this to work either! Every single code I’ve done this weekend has not worked…now I’m starting to think that something is wrong with p5.js. None of the quiz answers I gave work, and I can’t figure out how to clean up this code and make the clock center itself.

When I take background and put it into the setup I see that the rotating line and square are actually drawing every time they move which means that if I add the background back to the draw function, it draws every time the line and square moves. But I still have no idea how to center it. 🙁

Here’s one code I ended up with:
let angle = 0
let x = 50
let y = 50
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
angleMode(DEGREES);
translate(width/height);
rotate(angle);
stroke(130);
line(0, 0, 50, 50);
fill(255, 50, 20);
rect(x, y, 10, 10);
angle = angle + 2;
}

And here’s another code where I ended up with the same as above, I cannot center this damn thing:
let angle = (200,200);
let x = 50;
let y = 50;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(0);
translate(moveCenter(), height/2);
rotate(angle);
stroke(130);
line(0, 0, 50, 50);
fill("red");
rect(x, y, 10, 10);
angle = angle + 2;
function moveCenter(pct) {
return width * pct/400;
}
}

Another thing I don’t understand is why, in the image below, “var painting = false” if you are indeed painting…I guess the language is confusing.