Jiapei's Documentation Blog

 

Final Code with mouse interaction: p5.js Web Editor | NOC_final_mouseInteraction (p5js.org)

Final Code with motion detection: p5.js Web Editor | NOC_Exhibit (p5js.org)

Project Description

In the era fluctuating with information, we constantly feel overwhelmed by all the over-exaggerated, eye-catching, but maybe toxic taglines all over the internet. #DROWN intends to visualize this feeling of being suffocated and drowned by all the text on the internet, particularly on social media. 

The project #DROWN uses hashtags on the trending chart of major social media platforms (Weibo and Twitter) as the major element, representing overwhelming information online; when users interact with the project in a certain way (motion/mouse interaction), the texts would change their usual stage where they flow around, and gather around the users’ position and fluctuated, creating the feeling of over-flooding the users.

Process

#stage 1: break down texts

p5.js Web Editor | NOC_final prototype 2_words separate_OOP (p5js.org)

Since each line of text is expected to fluctuate and move so they don’t seem so idle, I first wrote an object that takes an input text and then used for loop to break down each character of that text as an element inside an array. Then, I used sine( ) to reposition each of the characters along a sine wave and rotate each of the characters. Lastly, I added a little noise value to the height and rotation angle so they are not so regularly positioned along the sine wave. 

#stage 2: flow field + mouse attraction + gui

p5.js Web Editor | NOC_final prototype 4_gui_attractToMouse (p5js.org)

Then, I created a flow field for the texts to flow in the canvas organically, and added mouse attraction for the texts to follow the mouse position. After transforming what we learned in class and achieving what I wanted, I noticed that the texts sometimes get too close to each other and can’t be identified. Thus, I added some repulsion to the words, which looks great.

I also added GUI to control the angle of the words floating, the fluctuation for each line of text, and the repulsion of all the text for some user interaction and customization.

#stage 3: change 2 states + text input

p5.js Web Editor | NOC_final_mouseInteraction (p5js.org)

Then it’s the last part of the code before the in-class presentation where I designed 2 stages for the how experience and added a user text input for the users to add text into the canvas.

For the 2 states, the first one, which is the “default” state, the texts all flow in one direction, which could be changed by GUI; the second one, is when the user clicks the mouse, and then all the texts will flow to the direction of the mouse and gather around the mouse for 15 seconds in default (also customizable by using GUI). The 2 states are easily distinguishable by simply changing the angle of the flow field.

What troubles me most was to time in the second state for all the texts to fly towards the mouse for a certain duration of time when the mouse is clicked. Thus, I searched online and find a way to make that happen, which is to use “millis( )” to get the current time and in the “mousePressed( )” function get the start time when the mouse is clicked.

Adding the part for users to input text is easy to just have another text pushed into the whole array of words with the help of dat.GUI.

However, what bothered me most is to have the input text displayed in another color, and then change to white like the others after some time. I tested multiple times and ended up adding a timer using “setTimeout( )” and “clearTimeout( )”, and having the color of text as a variable inside the constructor to be reached outside of the object and ultimately achieved the desired outcome.

#stage 4: motion capture

p5.js Web Editor | NOC_Exhibit (p5js.org)

This part is mostly done with the help of Professor Moon (thank you so much!!!). We used MoveNet to get the position of the nose of the user and replace the mouse position with the nose position. In this way, the texts will gather around the user as desired

Reflection

What I learned most from this project is to time certain actions in js. For example, how to time the change of newly input text colors using “setTimeout( )” and “clearTimeout( )”, and how to time the 2 states using “setInterval( )”. This function is really helpful when certain movements are expected to change or triggered in a set timing.

Simultaneously, I also got to explore how to play with texts, especially how to break down a set of texts into small segments to change the overall look of the texts.

Meanwhile, I also got to familiarize myself with things learned throughout the semester, including flow field, repulsion, dat.GUI, and oscillation.

Motion capture is also something I got to know the first time and could explore in the future.

Further Development

For further development, the first thing is about the sound. What I think works best is some voiceovers of the texts on the screen repeating again and again, to amplify the overwhelming feeling. And when the texts get closer to the user, the sound will echo more and become louder.

Also, I think it would be a good idea to actually have the texts grabbed from the trending chart of Twitter synchronously so that conceptually it makes more sense. Professor Leon advised me about API, which I could explore later to make the project better.

Last but not least, I think the switching between the 2 states could use a little bit more thought into it. To be more specific, I think not the states switch every 20 seconds. However, conceptually I don’t think this setting works. I think maybe the state of being attracted to the user could be triggered when the user stays in front of the screen for a certain time, and then switch to the default state (just a random thought now, it might not work perfectly).

During IMA Show

p5.js Web Editor | NOC-W11 Assignment-Infinite Patterns-1 (p5js.org)

 

p5.js Web Editor | NOC-W11 Assignment-Infinite Patterns-2 (p5js.org)

In this assignment, I mainly experimented with animating fractal patterns. Although the outcomes are not what I expected, it turned out quite good.

Initially, I watched the video by the Coding Train on YouTube and wanted to draw some similar symmetry patterns. So I first draw this single animated fractal branch (^).

The animation is achieved through the rotation of each segment (^).

I then adapted the method used in the video to duplicate and rotate each branch. Because of the feature of fractal patterns, they don’t require flipping like that in the video and are already symmetrical. Thus, it’s a bit different from what I had expected (with only the single branch being made symmetrical), but the outcome looks great.

I also shifted some of the codes around and put the recalling of the branch outside of the for loop used to make the symmetrical pattern, and it turns out great as well (^).

I actually wanted to animate the drawing of the branches and draw it like an actual tree (^). However, I wasn’t able to achieve that for some reason. (I think it might have something to do with not being able to put the function inside draw()).

Link: p5.js Web Editor | NOC-W6 Assignment Structure with Springs (p5js.org)

In this assignment, I created a simulation of a bundle of balloons. The bottom of the string is fixed in the center of the bottom canvas. To interact, users can drag the point where the bundle of strings interests. Then the balloons (circles) would move accordingly with certain elasticity. All of the strings, including the bottom one, are all springs and have certain elasticity that would make the intersection point return to approximately the center of the canvas, and the balloons evenly distribute around the intersection point.

I first created the spring system where all balloons are connected to the intersection point through springs. Then, I added the single spring at the bottom outside the loop that creates the other springs to make sure it’s not affected by the other balls. And the bottom of the string is another fixed ball so that it doesn’t move and is also easy to code (don’t have to create another spring system.

Then to make the balloon seem more natural, I decreased the k and applied floatage to the balloons so that the balloons won’t move too drastically and have a sense of floating in the air. I also added gravitational repulsion force to make the balloons not collide with each other too much, which always happens when moving the balloons left and right before applying the force.

 

Final Work: p5.js Web Editor | NOC-W5 Assignment Waves (p5js.org)

In this assignment, I created a simulation of a river. It has circles inside it, which shows a sense of water running inside. By using GUI, the “sinAmp” can manipulate the width of the river; the “noiseFreqAdj” can control the speed of the river stretching and shrinking; the “riverDens” can control the density of the river by increasing/decreasing the amount of circles inside the river; and the “frameRate” controls the speed of the circles moving inside the river.

To create the effect, I simply used sine waves combing with noise waves to create the wavy effect of each stroke of waves. The dotted effect of the river is made by mistake as I was experimenting with how to offset the strokes and added a random value to the frequency of the sinValue. However, the visual outcome is quite good, so I kept it.

Initially, I wanted to create an animation of a static mountain at the upper half of the canvas, and a moving water on the lower half. However, it didn’t quite work out because 1). I used noise wave for the mountain, and it’s hard to make the mountain static because of the random value inside; 2). simultaneously, because both the mountain and the water used two for loops to make them moving as the way I wanted, the program was to heavy to make the two working smoothly. Thus, while experimenting with the mountains, I noticed how I could actually create a river-like effect through by changing some of the values inside the mountain thing.

(The failed code: p5.js Web Editor | NOC-W5 Assignment Waves-failed (p5js.org))    

p5.js Web Editor | NOC W4-An Imaginary Environment (p5js.org)

In this assignment, I created an environment full of bubbles, and all bubbles are attracted to each other based on their gravitational attractiveness. Simultaneously, upon collision, there’s a 50% of chance that the bubbles will “emerge into 1” and form into a bigger bubble, or bump into each other and bounce off. The bubbles are restricted by air resistance which is created based on their sizes and gravity.

During the creation process, I utilized checkCollosionWith(others) and applyGravitationalAttractionBetween(others) functions learned in class to create the feeling of attracting and bumping each other upon collision. Simultaneously, to add to the air resistance, I utilized the same method used in the last assignment, which is the F=(1/2)CρSV^2 formula.

I faced some difficulties while trying to make the disappearance of the bubbles upon collision happen. Initially, I popped out the “other” object and leave the “this” object, which creates some glitches and the change of radius doesn’t apply to the bubble. Then I tried to splice out the “this” object and made the effect happen. However, I actually don’t fully understand why this works and the other doesn’t, which need further exploration.

p5.js Web Editor | NOC W3-A Phenomenon with Forces (p5js.org)

For this assignment, I created a party popper that could burst out some confetti when the user clicks the mouse.

To create a more natural sense of confetti popping out of the popper, I applied force including gravity and air resistance. The gravity is based on the mass assigned to each of the confetti, which is a random value between 0.05 and 0.1, and then multiplied by the constant gravity value. As for the air resistance, it is based on the formula F=(1/2)CρSV^2, with (1/2)Cρ set as a constant value C_AirResistance, S being the size of the confetti, and V is the speed of the confetti. 

The velocity of each confetti is also assigned with a random x value so that different confetti could spread out and create the expected effect.

For further development, I wanted to create an animation for the popper with which the popper will have the motion of popping things out when clicking the mouse. However, I wasn’t able to find out how to create an animation that could be triggered by mouse pressed. 

 

p5.js Web Editor | NOC W2 – Dynamic Objects with Vectors (p5js.org)

For this assignment, I created a cherry blossom tree that has flowers falling constantly. When users press their mouse, the flowers will fall faster, and more flowers will fall as well. At the same time, the flowers on the tree also shake, which is aimed to create an illusion of wind blowing over and results in more flowers falling.

To achieve this visual outcome, I created objects for the tree trunk, the flowers on the tree, and the petals falling down. Besides the display() method that draws out the patterns, I created methods such as move() to make the petals constantly fall down (achieved with vectors), changeSpd() to accelerate the falling of petals when the mouse is pressed. I also added checkEdges() to make sure that the petals out of frame are deleted from the canvas. As for the flowers on the tree, I also used vectors to add to the positions of the circles that constitute the flowers.

I encountered some problems with the interaction of mouse pressing at first. I used the mousePressed() and mouseReleased() functions to add the acceleration of the falling petals when the mouse is pressed and reduce the acceleration when the mouse is released. However, the petals that are newly added to the array will get the acceleration of the mouseReleased() function if the mouse is released before the generation of new petals. I still can’t quite figure out why this happens, but it was resolved with the mouseIsPressed statement in the if loop.

Generative Pattern with Transformations

p5.js Web Editor | W1 Assignmnet 1 – Generative Pattern with Transformations (p5js.org)

For the first assignment, I created a sunflower that has two layers of petals and the petals are turning in the opposite direction. The flower also has seeds appearing randomly in the center of the flower.

I first wrote two functions, one to draw a petal and another for leaves. I used beziewVertex() to make the outline of the shapes more natural and organic. Then I used for loops and rotate() functions to make multiple petals appear as if in a circle. Then I used frameCount outside the for loop so that each layer of the petals can rotate. After that, I used random() to make the “seeds (some small circles)” randomly appear at the center of the flower.

The only problem here is that I don’t know how to make the “seeds” appear in a circular area, other than a square area like it is now.

Generative Visuals with Objects

p5.js Web Editor | W1 Assignmnet 2 – Generative Visuals with Objects (p5js.org)

For the second assignment, I created a hot air balloon floating in the sky. When the users click on the screen, the balloon rotates and the clouds move faster as if the balloon is experiencing a strong wind.

I made two objects, one for the 

hot air balloon, and the other for the clouds. For the balloon, it has 2 methods: display() method which draws out the balloon, and lean() method which makes the balloon rotates to create a feeling of moving very fast toward the right. For the clouds, it has 5 methods: display() method which draws out a cloud, the addSpd() method which add the speed of the cloud moving right, the reduceSpd() method which does the opposite of addSpd(), move() method which makes the clouds move right, and repeat() method which makes the clouds appear at the very left when it moves out of frame.

I had a little struggle when figuring out the rotation of the balloon. At first, I put the translate() inside the display() method of the balloon. Thus, when rotating the balloon, it only rotates around the (0, 0) coordinate. In the end, I found out that I should put the translate() where the display() and lean() are called.