NOC#W02 – Hot Rumor🔥🔥

•Project: Hot Rumor

• Concept

With the heat, the “RUMOR”s move faster.

• Process

  1. Try with the example code in class.(https://editor.p5js.org/MOQN/sketches/Pdbvj34Ng)

I made something like Japanese-style fire animation, which was my first idea.

2. With reappear and vector, the fire seemed to be endless and fierce.3. I used curveVertex to make the shape of the flame.

https://editor.p5js.org/Tinggg/sketches/-XcwZRBFj4. I limited the number of the object to see what happened.
5. Using the mouse to set the fire didn’t work well. 6. So I turned the mouse interaction to automatic animation. I limited the number of flames and used scale and lifespan concept (which is actually transparency) to show the growth, fading and end of the flames.
7. Only fire was too boring so I added “RUMOR” to roast.
8. This is the unsuccessful version of adding random moving object. 9. Finally, I used bouncing to the “RUMOR” to show a effect of roasting and added a mouse interaction to the fire. Considering the realistic physical situation, as the temperature increases, the molecular motion speeds up. Therefore, when the mouse goes upward, the fire will be bigger and “RUMOR” will move faster. On the contrary, it goes the opposite way. Additionally, I made some little shaking effect on “RUMOR” to show the twisted hot air.

10. In the later class, I got instructions from Moon. “blendMode(ADD);” helped a lot on making the color of the fire more realistic. 

• Reflection/ Lesson-learned

In this assignment, I learned how to use class to customize an object. It is beneficial and convenient. I can stuff all the functions of the object itself in it and classify them, which makes the code orderly. Vector is the first math function I have ever used. I still have more to learn about it but through this practice, I started to understand the charm of it, making the code concise. It became easier to use vector for motion. Besides, I tried to use the vertex that I didn’t use last week and I think I get some make-up practice now.

However, there is still much to improve in this assignment. It was not what I want that every flame looks so shaking. I need the shaking effect to show the flickering flames but this is too much. I hope I can figure out the reason in my later exploration and learn more methods to make various changes.

• Sketch Link

https://editor.p5js.org/Tinggg/sketches/37zxlE15W

Leave a Reply

Your email address will not be published. Required fields are marked *