Week 13: Minim Exercises

These videos HAVE SOUND.

For this week’s exercise, I created waterdrops falling into more water. The size of the waterdrop depends on which waterdrop it is.

Also, create a bouncing ball that makes noise once it hits a wall. For this, you just have to set the sound trigger during the ball’s parameter’s if statements.


Week 5 Assignments

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.

Screen Shot 2016-05-03 at 2.35.18 PM

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.

Screen Shot 2016-05-03 at 2.56.57 PM

Week 4 Translator

For my translator, I wanted something simple yet funny. To understand the booleans, I first set them all to false. Figuring out which one to switch on afterward was the next step. Using if statements and coordinates of my ‘CAT’, ‘DOG’, & ‘BIRD’ buttons, I set them so that if the mouse is clicked anywhere in that box area, the screen will switch to a new screen.

This part of the translator became difficult. When the user clicked in the designated sections, the sections would come up without having any way to go back to ‘home’ except by clicking the designated areas once more. To make things easier, I added a back button so the user knows exactly where to click.

I edited the translator I turned in, to this newer version. Much easier navigation.

Week 3 Assignments

We had rollover assignments this week.

For the quad rollover, I experimented with using type and how to actually create the rollover. I introduced a new statement “&&” into my “if” statements. I’ll define one line of the draw.

if ((mouseX<width/2)&&(mouseY<height/2))

if mouseX is less than half the width AND mouseY is less than half the height then:

rect(0, 0, width/2, height/2);

Create a rectangle that is half the width and half the height. This particular code makes a rectangle in the upper left corner. I then added a circle that would appear randomly and a line that would appear randomly.

Quad Rollover from Gloria Harihar on Vimeo.

My keys follow the same kind of format but I tried putting animation into it for a few of them. I used if statements inside the if statements. It felt a little crude but I didn’t fully understand functions as yet.

Keys Rollover from Gloria Harihar on Vimeo.

Week 2 Assignments

For my first assignment, we needed to create circles moving in a diagonal line, from left to right. If we could, get the circles to loop.

From my previous assignment and having made the animated rain, I used “if” statements and variables. As the circles move from left to right, they +1 to the y-axis and -1 to the x-axis. When the circle reaches the bottom of the screen, x-axis becomes 500 once again (like its starting variable).

Circles Moving Diagonally from Gloria Harihar on Vimeo.

Second assignment: Create different strokeWeight as the mouse moves across the screen. Using pmouseX, pmouseY, mouseX, & mouseY, I calculated the absolute value of pmouseX and pmouseY. That determines the stroke. Color is set to random colors of blue and green.

strokeweight from Gloria Harihar on Vimeo.

Third: Created Zoog in accordance with the textbook. His legs move in the opposite direction of the mouse because of pmouse values.

Moving Legs with Zoog from Gloria Harihar on Vimeo.

I created another mini character in accordance with zoog. His legs and eyes move using the “if” statements.

M&M Zoog from Gloria Harihar on Vimeo.

Week 1 Assignments

For this assignment, I created Rain and a bucket, of sorts, to catch the rain.

For the rain, I used¬†processing.flosscience.com/processing-for-android/macul-2012/make-an-object-move¬†. Because it was still early in the course, I didn’t understand the second part of the code and just used what I understood. I created a rectangle that would add pixel increments to give the appearance of dropping rain. The increments determine the speed at which the rain falls. I used ‘if’ statements to create the rain after declaring several rain variables.

For the bucket, I created a layer behind the rain and a layer on top of the rain. It gives the appearance that the rain is going into the bucket.

Make Me Move from Gloria Harihar on Vimeo.

The second assignment is to recreate one of Mondrian’s work at half the size of the original image.

For this assignment, I made the background white. I then drew in the color rectangles with a strokeWeight(8).

After finding the right dimensions and placement for the rectangles, I created the black likes with a heavy stroke.

02 Mondrian03.jpg