Author: Mike Yang

It’s late, but here’s my video and my file:

https://www.youtube.com/watch?v=tJpDdLK9Zno

https://editor.p5js.org/qixiao2585289309/full/LD-l1-339

In the initial stage, my idea was to create an experimental music video using the concepts from the assignments and sketches of the past few weeks. But later I give up this idea because it didn’t look “experimental,” and it felt like I was just repeating what I’d been doing for the past few weeks. So I tried to add 3D elements to p5, and I wanted to use squares as the theme of the animation.

Honestly, the most challenging thing for me was how to introduce different scenes and how to make them fit the rhythm of the music. I wasted a lot of time and did not find a simple solution, so I had to use the “Animation Template” provided by the class to achieve the scene change. 

It was a challenging process for me, the initial stages were painful, but after spending hours reading p5.js Libraries I began to understand a little bit. Of course, I am still in the beginner stage of p5.js, but I’m still happy that I was able to finish it.

2 1

Nothing special for the first shader, but unlike the examples provided in class, I changed the values of x and Y, so now the color gradient position changes, and I added u_mouse to allow the user to control the color. In the second shader, I added fract() and u_time to change the animation effect, and made the brightness value changes over time. I also wanted to revise the saturation but the final visual effect was not what I expected, so I just gave up this idea.