Author: yz4133

Project name:  Eternal Snow

Original Idea:

Create an ongoing snow that could become crazily big/come to a stop according to mouse interaction(clicking) with the snowflakes. 1) Small snowflakes and snowballs keep falling from the top of the screen. 2) Hover over the snowflakes to see them rotate. Click the snowflakes to find them disassembling from the center into small parts while still rotating; the pieces gradually vanish after being clicked in a few seconds. Each time a snowflake is clicked, the number of snowballs falling down would decrease a bit until there are no snowballs falling down, where there will be no new snowflakes either. 3) The snow will become bigger (more and more new snowballs falling down) if a certain amount of snowflakes fall to the ground(the bottom of the screen) and cover the background quickly. 

Continue reading “NOC – Final Documentation – Yunyu Zhang(Samantha)”

1. Apply the raw a small fish figure that would follow a ball(fish food) whose position is decided by the position of clicking the mouse. Experiment with the x and y positions of the fish to make the heading direction to the ball correct and natural. 
2. Use vector subtraction between the position of the fish and the position of the ball to get a new vector, whose magnitude is the distance between the fish and the ball. Through applying if statement that works to compare the value between this distance and a set value, the ball can be only displayed when the distance is larger than the set value, which realized the collision-vanish effect.
3. Use sin() function to add a dynamic effect to the ball.
4. Under function mousePressed(), add statements that work to change the size as well as the color of the ball. This makes the size and the color of the ball different every time the mouse is clicked, where its position would also change.
5. Experiment with some of the values to make things look a bit more comfortable and natural and make the scene full-screen.

1. Apply lifespan and lifeReduction in class Particle and draw a quad in it by using (this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.x4, this.y4) and then multiply the x and y positions by lifespan.
2. In class PSystem assign rotSpeed and also x1, y1, x2, y2, x3, y3, x4, y4 to constructor(). Add this.scl to change the size of the quad. By using push new Particles, I made two quads that are symmetrical to each other by the y-axis whose positions are (this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.x4, this.y4) and (-this.x1, this.y1, -this.x2, this.y2, -this.x3, this.y3, -this.x4, this.y4). 
3. In function setup() I made four pair of quads that would together form a snowflake-like pattern through defining the values in pushing new PSystem. Also, assign these four groups with different rotSpeed.
4. Then change the color of each pair of quads randomly through changing color in class PSystem.
5. Adjust some of the values( eg. rotSpeed, color values, scale) to make better visual effects. 
6. Played with this.acc in the constructor under class Particle and got two interesting versions.

Pinwheel: (the effect in this video is a bit different —- quad of the same color should appear in even number instead of odd number, from the original because the computer would get a bit stuck when doing screen-recording and the speed is arranged to be about 2 times faster than the original because of the size limit of uploading videos)

Flower Dance: (the speed of this video is arranged to be about 2 times faster than the original because of the size limit of uploading videos)

Project name:  Heartstrings

Idea:

My inspiration comes from the video “Oscillate” by Daniel Sierra and at first, I planned to make something that simulates the sea wave using the oscillation concept. My sketch for the original idea is to make a wave, which is made up of small balls, that would move left/right, up/down according to the movement of the mouse. And the small balls would bounce back and flow in the opposite direction if they touch the left/right edges of the screen.

Process:

By following professor Moon’s instruction, I first built an ordinary wave and tried to make a wave exactly the same that is made up of little balls. I had difficulties in the process and made a wave where only one ball appeared. With the help of professor Moon, I learned that I put the x position of the balls wrongly in a function under class Ball(). Instead, the x position should be declared as b.x in the for loop that calls the display function of the balls under function draw(). And the y position of the balls, which is exactly the y position of the previously created wave, can be defined as a value and then transferred to the function written under class Ball() that works to change the y position of the little balls to be exactly the same as that of the ordinary wave.

Then I tried to create the wave effect through first trying to apply a force to the balls. The force comes from the vector that is formed by the previous position and current position of the wave. I developed a way to get the force from doing substitution between this.pos and other.pos but it later turned out to be a false way to achieve this force and also the effect I got is a wave that would move faster and with greater amplitude as time proceeds, which is not an ideal effect.  So after getting help, I added gravity to the balls, which make them fall down naturally and create a bounce() function under class Ball() that would make them bounce back once they touch the original wave. This would create something similar to the movement of the sea wave. And I learned that the way to get the previous and current position of the original wave is to assign the sinValue to an array that stores it in the for loop which calls the display() function of the balls. And this should be put in the very end so that it gets the previous sinValue. In between the sentence that declares the sinValue and stores the previous sinValue, the needed force can be calculated by doing substitution between current sinValue and the previous sinValue(which is the array).

In this way, the force can be applied to the bounce() function to make the balls interact with the wave. Also, this force should only be applied if it is smaller than zero, or the balls would not fall down naturally with only gravity controlling them. By adjusting and experimenting with the masses, the value of velocity and force, I got the first version of the ball wave:

Then I added another two other groups of wave-based balls with some different values in order to improve the visual effect and I found it more visually amusing to make the balls bounce in a larger range that creates an effect which looks like raindrops falling down and bounced back by strings. So I adjusted some values again to create the final version. I also added mouse interaction to it by receiving and applying the speed of mouse movement to the y position of the balls that would basically change the amplitude.

In the debug mode, I show the velocity of the balls using three different colors in order to show the groups. The frequency, amplitude and the magnitude of the force bouncing back the balls can also be changed with the debug mode. I failed to show the original waves in the debug mode so I made two videos, one with the original waves and one without them of my project.

(the speed of these two videos are adjusted to be faster because of the size limit of uploaded files)

Improvements:

1. Add appropriate music to the graphics that could cooperate well with the dynamic movement of the balls realtime. 
2. Create more effective mouse interactions to interact with the balls to achieve flexibility.
3. Explore more with the value to make it look much more natural, comfortable and amusing.

1. Draw a center ball that applies the sin() function which makes it have a glowing effect. For a natural visual experience of this glowing ball, put frameCount inside the sin() function and makes it smaller so that the ball would not glow(becoming small to big and small again) crazily fast. Then adjust the expression by adding and multiplying certain numbers to make the difference between the biggest and smallest size obvious. 
2. Create a set of balls and use applyAttraction() and applyRepulsion() to make the balls being attracted and repulsed from the center ball.[adding “this.POS = (createVector(width / 2, height / 2);” to apply it in these funtions in order to do vector substitution]
3. Use checkCollision(other) to add colliding effects among the balls.
4. Inside function draw(), put applyRepulsion() and checkCollision(other) under the condition that the mouse is pressed. And put applyAttraction() under the opposite condition so that the balls would first be attracted to the center ball and then move quickly away from it when the mouse is clicked. Inside the checkCollision(other) function, the balls would change colors randomly once they collide with another ball.
5. Make the canvas fullscreen to improve visual effect.