For the bouncing ball, we used if statements. if the ball went past the height or width of the size, it’s direction would reverse.

For this week’s assignments, using for statements, we need to organize and command dots to do certain tasks.

The first set is simple and we did in class. Create a 5×5 square made of dots. This was using a ‘for’ statement. ‘For’ and ‘while’ statements work by creating parameters. For example, ‘for (int i=width/6; i<width-width/6; i+=width/6) {‘ means: i equals the amount of width/6. While i is less than the width minus 1/6 of the width, i will increase every width/6. The user is then left with circles distributed evenly along the x-axis. In order to do the y-axis, you need to add another for statement corresponding to the height/y-axis.

For Part B, we need to use a the map function to create a gradient going across the circles. Map takes part of the code and applies a range to area. For example, float c=map(i, 0, width, 255, 0); simply means i is the variable being affected. The area or scale being affected is 0, width. So all i from 0 to width. Lastly, 0, 255, means 0-255 in the color range (because c will be our color), white to black. So from left to right, the code should show a gradient. You can change this around by changing the range OR to apply the gradient vertically, apply your y-axis variable instead (seen below).

For the next two parts, we needed to create a change of size in the dots from subtle to very large. For this part, you simply need to make the diam=random(30, 55); (a subtle change). The range size of the circle becomes 30-55. For a larger change, you can do random(0, 100);.

The last two parts were rollovers. Using if statements and the dist formula, we create different rollovers with the circles. if (dist(mouseX, mouseY, i, j)<=diam/2){ float circleDiam=10; ellipse(i,j, circleDiam, circleDiam); Dist measures the space needed to get from one point to another. Not from point to point. So if the distance of MouseX, mouseY, and i, j is less than the diam/2, then create a smaller or larger circle. This overrides the previous circles because it is still in the for statement.

Harihar_G from Gloria Harihar on Vimeo.

Harihar_F from Gloria Harihar on Vimeo.

The next assignment is to use map to create a grid gradient. This was the hardest; for this assignment we created a grid in class using the for statements. Next we used the distance and map functions. Distance becomes our variable. so measuring the distance of x, y, to the center (width/2, height/2). Next we map out our function. map(distance, 0, width/2, 0, 255). This makes distance the variable. The scale is from 0 to width/2 and the range is from 0 to 255.

You’re left with a centered grid gradient.