Category: Nature of Code

Here is the link for my assignment 3.

Basically it is consisted of rectangles and lines centered at the center of the screen. At first, I created a class which includes two rectangles and a line. The two rectangles are symmetric to the center point and have velocities in two directions. By applying the vectors, I gave rectangles an initial downward velocity and another velocity is along the line.

At first, there is nothing on the screen. By pressing the mouse, there will be a couple of rectangles and lines appearing on the screen with different sizes and velocities. 

The velocity of the rectangles will change according to their positions, but most of the time there exist rectangles with low speed and high speed at the same time. And as the number of rectangles increases, there will be certain 3D effect. Also, when the mouse moves, the system will rotate according to mouseX and mouseY.  

Here is a short demo:

1. Make triangles that appear when clicking the mouse and let them rotate and move. To make the movement look natural, apply vector with position, velocity, and acceleration through adding acceleration to velocity and adding velocity to position in the update() function. Use “this.acc.mult(x);” to control how fast/slow the triangles move. 
2. Add a change() function to make the triangles bounce back once they touch the four edges of the canvas and also change their colors. To make them bounce back naturally, multiply the velocity by -1. 
3. Create another class that draws the bubbles that also appear when pressing the mouse similar to that of the triangles. 
4. Add a change() function to the bubbles, too. It makes the bubbles bounce back once they touch the edges of the canvas(in the same way as the triangles, multiplying the velocity by -1) and also changes the color as well as the opacity and size(through changing the scale) of the bubbles. 
5. Limit the number of triangles and bubbles to reduce burden and improve visual effect by adjusting sizes and making the canvas full-screen. (The inconsistency in the video is caused by screen-recording) 

I used vectors and OOP to create raindrops in this sketch.

Instead of using X and Y positions as separate variables, I created vectors for the position, the velocity, and the acceleration for each raindrop object. The acceleration is used to simulate the raindrops in real life.

In terms of the background, I used what Prof. Moon has talked about in his workshop last week to make the color change gradually from blue to pink.

When the user presses the mouse, the rain will slowly stop dropping and stay in the air, just like when time stops in those sci-fi movies.

Also, I wanted to create another interaction that allows the user to use the mouse to drive away the raindrops. But I have not managed to finish it by the time I am writing this documentation.

Here is a link to what I have accomplished so far. I will update it as soon as I finish tackling the problem.

https://editor.p5js.org/py561@nyu.edu/sketches/7whgW_611

Updated:

Eventually, with the help of Dave, I managed to debug and found that the reason why it did not work out earlier was that I made a mistake while translating the raindrops. I should put “line(0, 0, 0, length)” instead of “line(posX, 0, posX, length)”.