ASSIGNMENT #4 - FUNCTIONS AND OBJECTS

For this assignment I decided to re-code and simplify my sketch from last week. It kind of worked out but mostly it didn’t (still working on it).

First I simplified all of the rows I had for the checkerboard under one ‘for loop’ (with Allison’s help). It initially looked like this:

//row 1

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 2, 50, 50);

x = x + 50;

}

//row 2

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 50, 50, 50);

}

//row 3

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 100, 50, 50);

x = x + 50;

}

//row 4

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 150, 50, 50);

}

//row 5

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 200, 50, 50);

x = x + 50;

}

//row 6

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 250, 50, 50);

}

//row 7

var x = 0;

while (x <= width) {

if (x % 100) {

fill(b, b, b);

} else {

fill(255);

}

rect(x, 300, 50, 50);

x = x + 50;

}

//row 8

for (var x = 0; x <= width; x = x + 50) {

if (x % 100) {

fill(255);

} else {

fill(b, b, b);

}

rect(x, 350, 50, 50);

}

and ended up looking like this:

Screen Shot 2018-10-04 at 10.02.40 AM.png

What followed was a whirlwind of frustration, trying new things but not being able to achieve what I was looking to do.

For example, I couldn’t get my whole drawing to ‘bounce’. This would happen:

Screen Shot 2018-10-04 at 10.28.20 AM.png
Screen Shot 2018-10-04 at 10.28.25 AM.png

Then, I couldn’t get paused to work. The intention was for the smiley face to bounce and the slider to control between happy or sad.

Thanks to Seho (!) I was able to get the whole drawing to bounce simultaneously. I’m still struggling with the arc (mouth) but it sort of works?

Another thing I’m struggling with was with the transitions of the bounce, pause and slider. I think it looks too choppy, trying to figure out what would make it run more smoothly.

To be continued….

In the meantime here is the link to the final-ish sketch: https://editor.p5js.org/aileenstanziola/sketches/rJ4pL7Zc7

P.S. I tried some things like this, which I would like to play around more with:

https://editor.p5js.org/aileenstanziola/sketches/H1DJnlm97