Assignment: DO-make something with a lot of repetition

Here is my code.

I created two graphics with simple lines of code.

In first one, I played with rotate.I found that pattern changes very differently if change the value of rotate. i is basically controlling the length of the line as well as stroke color.

In second one, I played with radius. radius  = 50; number = 2 at the beginning. The value of radius adds two each time and ellipse is becoming bigger. When radius is bigger the width, radius starts to become smaller cause the value of number plus -1, changing the direction. u here is controlling the color.

#4: Create a checkerboard grid of 100 cells.

Need to figure out (better draw a draft) the coordinate of black and white rect. Pay attention to the better way:

#2-c: Make every other column blue.

I calculated singular column as x = 2x – 1. The better way is x % 2==1


*Need to learn more about: box(); noise; rotateX();

* Pay attention to counting pixels or columns in for loop


Group project:

We create a slider based on worksheet work this week. As moving slider, the area of bouncing ball is changing. 

One of the problem is when ball hits the wall (the border). Actually the center point hits the border instead of the border of ball (the circle). But it goes wrong if I change the range in if statement. The origin statement: 

if(bx2 > x || bx2 < 0){…}. 

change to: if(bx2 > x – 15 || bx2 < 15){…} ()

(15 is the radius of ellipse)

Another bug is that it goes wrong if I move fast the slider across the location of ellipse.


There are some different ways writing this sketch: “Change the behavior so that when you mouse over a column, you turn it red and it stays red until the next time you mouse over it again, at which point the column goes back to white. (Just get this working for one column.)”   But still quite confused after reading classmates’ code.


class notes:

1. Getting Started with p5.js: chapter 5 Response 

Some contents need to be reviewed:


2. Questions and difficulties

a. vector

b. In the final assignment, rotating rect requires putting ‘background();’ in “void setup()”. But bouncing ball requires “background()” in void draw. How to fix that?

c. In the final assignment, i want to create many bouncing ball. Is there some ways to simplify coding? (What I did is copy and pasye first bouncing ball code and change some numbers)

d.Difference?  “x = x + (mouseX – x);”   and  “x = mouseX; “


a. get more familiar with arc, bezier, curve

b. rotate

c. array