Week 7 Assignment

1 2

PushPop Assignment Code
I explored the pushPop assignment by accumulating different shapes in a different canvas and modified the value of the Xs and Ys of every shape creating unique outputs. I have also tried creating a large shape that creates a background for the canvas. Instead animating/moving the camera a lot, I tried to incorporate some transformation with the shape itself and using functions such as “seconds” “sin()” “cos()” and “fill()” using the hex value instead of RGB values.

3 4 5 6

BumpMapping Assignment Code

I really enjoy doing this assignment since this includes 3D objects and I tried to explore more and experiment with the mapping. I have tried replacing a different object at first but it does not look pleasant because it only shows the map (the painting) really closely, but I eventually figured out the problem since the object is not scaled properly and the camera is not focused on the right coordinate. Through this lecture in this topic / assignment, I understood the “backend” of the materials much more and how it was applied when rendering “details” on a specific model/object.




For this midterm, I wanted to focus on something relatively organic. Because my coding experience is limited I also wanted to work within limitations and explore this lack of knowledge as a tool of creation. I started off by creating patterns that gradually change over time or focus on texture, like the wave-like ripple followed by the actual static waves. This was achieved by using  “random” function, floor(), smoothStep() and very often sin and cos simultaneously to create a ripple effect. As a grid, I often used the entirety of the canvas and altered it as a whole for independent shaders. My teammate also added to the organic feel of these transitory motions by creating a shader resembling cells moving around.

Additionally, as I started also exploring the potentials of P5 I wanted to try and play around with what can change if I added a random function or if I altered the canvas size. Since the full-screen aspect was necessary I decided to try and use it to my advantage by adding movement or gradual change to the canvas in itself. I then realized the static nature of random when adding it to the canvas which in turn made me wonder if I could explore glitches as a form of art, particularly in generative art.

Overall I have learnt a lot from this experience, I wish I had a clearer vision from the start of what I wanted to achieve as it feels like the result is a bit messy but I am relatively satisfied with it. It is an 80s acid trip that goes a little wrong, a budget 2001: A Space Odyssey introductory vortex.

WEEK 7: Homework


3d2 3d1

I tried to experiment with a little of everything for this resulting in a bit of a mess, but a fun mess! I tried to get a better idea of movement and special awareness through the Z axis. The hardest part was figuring out how to make all the cones face each other and sync-up but that’s mostly because I am not great at math. If you click you also get a directional light that you can move as long as you hold down the button.



For the bumping I wasn’t quite sure how to approach it so I went Baroque. I feel like they used lighting and dark very powerfully so I wanted to see how figures would translate through this feature. I like it when it is quite reduced as it makes the people in the picture look a little three dimensional rather than like razor-sharp blades.



Week 7 HW

screen-shot-2022-03-28-at-1-11-46-am                                                                 popmatrix



bump mapping

For this week I worked with 3D objects. I worked around the stroke(), fill(), scale() to try out different results. For the bump mapping I chose an art work of wraith who is my  favourite gaming character done by “@Warren_Nguyen555”. I loved the way it turned out because I love the way it looks with the dark colors.

Week07 3D&Vertex Shaders

week07_hw4Practice #1
screenshot-2022-03-26-235038Practice #2

Hi! For this week’s practice, I’ve tried 3D objects in p5 for the first time. So I started up with basic geos. I applied fill()/noFill()/stroke()  for trying out different shapes/outlines with colors. I also used translate(p5.Vector.fromAngle to make them move around the space. For the second practice, I uploaded two png/jpg. with bird’s feather. “feather2” works much better than “feather”. It might be because the feather shapes and colors are highly contrasted on the surrounding inner/outer feather.

Thank you.

Midterm Assignment




For this midterm assignment, I created four different shaders and set them to music, when the music starts the shader will play along with the music. The four shaders will switch and loop according to the rhythm of the music. I was inspired by the abstract watercolour, I thought the blending of colours looked interesting and the watercolour looked like a way to find order in the chaos.

For two of the shaders I used the noise function to draw the basic shape of the shader, then smoothstep and a series of calculations to get the watercolour I wanted. Then I use the if-else function to plot the time and length of each shader that appears.

One of the bigger difficulties I encountered in the production process was calculating the function and how to make my pattern look smooth and have a watercolour feel. In the process of creating my fourth shader, at first, I used the step function and it didn’t look smooth, then I used smoothstep, but then I found that the return parameter made the pattern look like a lot of squares, and then I modified the parameters to achieve the water ripple effect.


Midterm Assignment

capture 2

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



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.

Midterm Assignment

1 2 3 4 5 6

I started my idea initially that incorporates both music video and a camera filter, but I realized how long it will take and the complications it will have when it was migrated from TheBookOfShaders to P5.js. So I went with the music video instead and was heavily inspired by my favorite show. I tried some of my inspirations came from modern art aesthetics and I tried to involve geometries and complementary colors.

The code itself has a lot of frag files and I did my best to apply what I have learned from our previous homework and sketches while also expanding my creativity on how will I work my project along with the music playing in the background.

The most challenging part of my assignment was syncing the transitions of my shaders to the music. It was time-consuming figuring out the millisecond’s timestamps and making the individual shaders, but I was pretty satisfied with the result I had.

Music Video – Midterm Assignment Link


Major Assignment


screen-shot-2022-03-23-at-11-46-27-pm screen-shot-2022-03-23-at-11-48-35-pm

screen-shot-2022-03-23-at-11-48-11-pm screen-shot-2022-03-23-at-11-48-50-pm

screen-shot-2022-03-23-at-11-46-06-pm screen-shot-2022-03-23-at-11-45-33-pm

screen-shot-2022-03-23-at-11-48-57-pm screen-shot-2022-03-23-at-11-49-54-pm


For the first Major Assignment, I wanted to create a music video comprised of a series of colourful animations. To keep continuity I predominately used noise by adapting codes from The Book Of Shaders. The Shaders from the top are named: Spongy, Sound Wave, Sundial, Squiggle Checkers, Waterfall, Squiggle Checkers 2, Tiles, Blot, Vines.

Spongy, Sound Wave, Waterfall, and Blot were made using an adapted Wood Texture noise with a rectangle drawn onto. The rectangles each have a different shopping function applied to its border, creating interesting bulbous designs. The latter two have been fractured by breaking the main function, replacing all 1. with abs(sin(u_time)).

Sundial and Vine adapted the Circle Wave with a shaping function controlling the thickness and bend with u_time. The latter shaping uses mod to introduce a glitching like effect where the animation jumps between sections.

The Squiggle Checkers, uses the Lava Lamp noise as a background. Overtop, randomly selected cells are coloured the inverse. This is done by having a random number assigned to each cell. A separate variable transforms u_time into whole numbers oscillating from 0-3. Only the cells with the indicated number are coloured the inverse.

In the javascript, the shaders are played at random for a random duration. A variable is used to count the frames, and when they reach the randomly determined amount, the duration and scene number are reassigned.

Lastly, the I created the background theme in Logic. I used electronic synthesizes in order to compliment the generative nature of the shaders.