Midterm Agalia_Christofi


capture example w

Every year I have this tradition of making something related to the band Beach House, as they are a huge inspiration to me. I took a lot of inspiration from not just the music but their recent albums music videos. They contain these really mesmerizing shaders and flowy patterns. (Example) https://youtu.be/UUFUEwfeGX0.

I absolutely love the colour scheme red and black. But, I wanted there to be moments where other colour began to peak through. This coupled with the concept of using noise to simulate flowing water and currents help me really set a desperate tone. All of the shaders sort of follow this theme of being pulled by currents or tides. Near the end especially, there  is this personification of trying to flow against the tide and being swept in continually.

Timing the visuals proved to be very difficult as they seemed to be slightly desynced. However, I really think the extra time that went into that was worth it. I ended up whipping out a stop watch to help and taking notes to adjust things. Optimization is something else I would like to have had more time for. I tried to cut down on the extra code as much as possible and set the FPS but, the full screen proved to be too much for my computer to handle.

Going forwards I thought it would be interesting to explore more with transitions. I had issues creating for loops for some reason and making them work within my shaders. As I mentioned previously, my goal was to use one shader to make the transitions smoother. I was however, able to achieve this a bit through the animated colour despite the other shortcomings. If I were to have more time, I would mess around with changing alpha to sort of fade between shaders as well. Moreover, I would have liked to play more with the tiling of the shader. As it is, the portion that I tile it could have been timed better, more frequent and gradual so that it fits better with the other visuals. This was sort of a time constraint issue as well.

Midterm Assignment, Puss in Boots

LINK TO MY P5.JS: https://editor.p5js.org/magszla0202/sketches/50hIqaosQ

(I finally figured out how to post on the blog again, it never works for me. TBH tech and I don’t get along, my laptop broke around 2 weeks ago and i’m charging it off a Nintendo switch adapter cable)

My Midterm project was based around the latest Dreamworks movie “Puss in Boots: The Last Wish” because I had seen how well it done, seen it myself, and gotten very inspired by it’s fantasy aesthetic. In the scenes I made, Puss plays his guitar like a fantasy bard, rides a Horse too big of his own size, and shoots a gun along with the song. Much more was planned to this, including a sword fight and him going through a romantic forest with another cat. I wanted to make most of shaders to give a fantasy-like and unnatural look.

Most of the work I do has a lot to do with 3D modelling and animation, and I got really intrigued by how I could grab a model online, rig it, get animations onto it, then export it as one frame. To make things simple, I made it flip through two different frames of the same action- which is similar to some of the fights in the Puss in Boots movie where some of the frame rates are cut / they did framerate modulation
(https://wavemotioncannon.com/2016/12/31/an-introduction-to-framerate-modulation/), but they are done very well.

Images below are some work in process.

four_04 one_01 three_03 two_02

Midterm Homework



midterm homework was a very challenging thing to do for my coding experience, in order to understand the meaning of making an exciting music video; I needed to decide on two main focuses: 1. Focusing on the coding mechanism which is making sure I understand how to make the image vibrating with music such as the amplifier. 2. focusing on the variabilities of adding different shaders for one javascript. I chose the second one as the ultimate option for my assignment.

The code has references from Tara B and Ushna Khalid for week 4 assignment.

screenshot-2023-02-28-at-12-12-48-pm screenshot-2023-02-28-at-12-12-51-pm screenshot-2023-02-28-at-12-12-36-pm screenshot-2023-02-28-at-12-12-39-pm

I edited the street picture via lightroom with a colour wheel to make the vibe of the music. What’s more, I added another loop to extend the slideshow

Ushna Khalid – Midterm

For my midterm, I chose to make a music video type thing with P5.

Before I started anything, I tried looking for inspiration by looking through examples that were given to us. I really liked Lillian Shwartz work, So i decided to focus on that as inpo. I really liked the fluidity that was in her video so I decided to make my video with that as its main theme, but i would be going or a calmer vibe.

I made most of the shaders in the book of shaders editor since I didnt wan to spend too much time trying to set up a P5 file to work in and thought that putting gin an already made shader into P5 would work better. Wheni finished making shaders, or a base of each shader, I put them into their own P5 file and then made a copy of the scene changer P5 file that we were given to try to put it all together. That didnt work for some reason so I made the whole midterm in one of the shaders files by making my own if statement and that worked.

For the first shader, I just wanted to see how to make a liquid flow type of shader.  I ended up with a really simple shader that was in only black and white but I decided to include it. I went through the book of shaders a lot to help me out with certain thing. For this shader I wen through chapter 5 and found an explanation of abs that I used

for(float i = 1.0; i < 7.0; i++){
uv.x += 0.6 / i * sin(i * 3.5* uv.y + uTime);
uv.y += 0.6 / i * cos(i * 1.5 * uv.x + uTime);

vec3 color = vec3(0.1)/abs(sin(uTime-uv.y-uv.x));

For the second shader I found some cool examples of color maps.  I wanted to try to make each shader more colorful that the next since the first shader is just black and white. So I experimented with them.

Color Maps

and for both the second and third shader I experimented with Fractial Brownian Motion that I found in the book of shaders here and found an example of on shader toy here

I also used and messed around with noise and hash functions found here 

For the last two shaders I just used my week 4 shader and changed them up a bit and found images to that would look fluid when in movement.

these are images used for the third shader

these are the images used in the forth shader


Week 4 Tusharika

I was really excited to experiment with week 4 exercises as recently I was able to use the shader for one of my assignments for Atelier class where I created a ripple effect using the shader editor (I did took some assistance from a tutorial) and then imported into Touch designer to add some movement to prepare a final version that could be used in our Final Unity Project.

screen-shot-2023-02-04-at-4-00-38-pm screen-shot-2023-02-03-at-8-51-54-am

I also experimented with the obj texture file, I recently made a model through photogrammetry and exported as OBJ model to use in unity, it was amazing to see how the texture looks so different in the image from when once its applied to the model in unity. The coordinates of the textures are gets wrapped on the correct place on the models.



I first started working for the class exercises with the cat textures, I was unable to upload image of my own at first and couldn’t figure out what was the issue even though I was logged into my account. So, I made the files from scratch which made me understand better the code and how I can manipulate the code better.

Shader #1:Use shaping functions to do pixel manipulation on an image.


I used this image that I clicked last year to experiment with pixel manipulation.

I wanted the image to have less displacement, so I manipulated with the mirror function to see and get the right amount of mirroring within the image

float mirror( float v){

float m = mod(v, 2.0);//This effects the how much the design of the image will be disorted

At the same time I experimented with the speed of the animation and the displacement


var displacement = dist( mouseX, mouseY, width/2, height/2);//If the mouse X and Y is position is swapped in the displacement function, the design looks more complex
var maxDist = dist( 0, 0, width, height);//if the width and height is not divided by two the displacement is less and the actual image is more visible as an optical illusion
/// this function allows the displacement to be less when the mouse is in the center

myShader.setUniform(“uTime”, millis()/1000);
/// I tried the speed at just 100 for the animation, it looked as if they were was a earthquake and when the mouse was in center it looked like water ripples , once the speed was 2000 it looked quite soothing

screen-shot-2023-02-26-at-7-05-55-am  screen-shot-2023-02-26-at-7-11-11-am






Ethan Griffin – Midterm Assignment

For this assignment I wanted to focus more on the movement and dynamic of telling a simple story with few scenes. It starts off just as a 2d square moving on x and y axis unable to escape the dimensions of the canvas. Before finally doing and splitting into 6 squares that  morph eventually turning into a 3d cube that moves on all 3 axis.

p5-js-web-editor-_-midtermassignment-google-chrome-2023-02-24-17-44-18-00_00_13_26-still001 p5-js-web-editor-_-midtermassignment-google-chrome-2023-02-24-17-44-18-00_00_54_20-still002 p5-js-web-editor-_-midtermassignment-google-chrome-2023-02-24-17-44-18-00_00_57_09-still003

p5-js-web-editor-_-midtermassignment-google-chrome-2023-02-24-17-44-18-00_01_15_28-still005 p5-js-web-editor-_-midtermassignment-google-chrome-2023-02-24-17-44-18-00_01_17_21-still006 p5-js-web-editor-_-midtermassignment-google-chrome-2023-02-24-17-44-18-00_01_22_27-still007


I had wanted to use variations on my previous shaders in it but couldn’t implement them the way I wanted that fit with the movement of the shape.





Week5 Homework

Link: https://editor.p5js.org/liach926/sketches/p8TuFlxNd

When I first saw the example, it reminded me of the fluid liquid. So I found an image of a water pattern and planned to make an effect similar to flowing water. I started by using the Perlin Noise in the fragment shader, hoping to bring more ripples and fluctuations. At this point, I was confused about the difference in functions between vertex and fragment shaders.

So I spent a lot of time trying to understand the various definitions and how some of the words are translated and linked between different shaders. For instance, the varying variable could be used between vertex and fragment shaders. Therefore I could set the varying displaceAmtf from the vertex’s displaceAmt and transfer it into the fragment shader. And the vdisplaceAmt could be set into the use of the smoothstep function of color. The “uniform”variables could be used in fragment, vertex and js. And when I transferred the functions from thebookofshaders, it was important to adjust the variables above to match with the other shaders. For example, there will be no

“vec2 st = gl_FragCoord.xy/u_resolution.xy;”

The texCoord will be used instead. Or it may cause some errors.



003 001 002



Week 4 Homework Tae Nim 3170229

This week was the most challenging and took the longest time out of my weekly home-works because of the new experiments I did with the new medium: p5.js.


For this week, I started my work based on last week’s homework. P5.js combines with html, css, and js, so I wanted to pull up the previous week’s task to continue the journey. Based on the code, I tried to use noise interactively by texturing the picture by reading the mouse position. I loved the ending, but I needed to take this further.


For further steps, I changed the picture to a different one for visibility. Moreover, I also adjusted the coding to create a different shape as a new work of art. In the end, I liked how it turned out since it reminded me of the flower shape, the object of the picture I used. Moreover, it created a connection for delivering the story, so I decided to step further to explain my design intention of the code.

My thesis project is about adding multiple layers for various target audiences for inclusive and clear communication. Therefore, if I said another perspective that shows the design motive, it could give the audience a clearer image of the shader I created.


From the last week’s homework, I wanted to create multiple layers, so I got inspired by the first picture and tried to add the shader. However, I realized I could not apply the shader this way. I learned that there are ways to use texture to the shape, but for this trial, I could not direct the shader by putting “leftBuffer.” or “rightBuffer.” in front of the “shader(shader1);” I even tried multiple times to fix the code in different ways, but I still did not figure out.


For this stage, I tried the new method of creating two canvases. It seemed successful initially because it worked well if I applied the shader on the left side canvas and left the suitable side canvas without the shader but placing the rotating shape. However, the problem occurred when I tried to add a different texture to the right side shape. Even though I directed the two additional shader files for two separate canvases, the shader would only work for one canvas. Furthermore, the shader needed to be successfully applied on the shape I created on java script since two canvases’ coding were colliding and causing a technical issue.

While trying to find a new way to solve the problem, I came up with an idea to use other png pictures to blend two different textures on one screen by reading the mouse position to control the visibility of the photographs. This way is much better than splitting the view by using one canvas. Moreover, the overlapping effect will create a much stronger bond and make a more neutral way of flow and transition that will help audiences to come up with the idea of the design intention that I was trying to express the natural object: a flower, which I tend to use in my project often as a symbol.

Link of the Final Work:



Week 5 Shader – Ivy Sun 3183268

As part of this week’s 3D shader exploration, I created a glitchy rabbit. In it, I tried to incorporate as many prompts as possible from the assignment brief. For smoother displacement, I loaded a rabbit model with a higher vertex count. A simple zoom and tilt effect is also created by animating the camera angles and movement with the sin/cos(uTime) function.

To create a dynamic motion with colour shifting, I animated and distorted a texture of the rabbit’s surface in the frag and vert shaders using simplex noise, frequency, and amplitude. In order to add some more interest to the texture colour, I blended in a gray variation based on the vertex model’s position. My rabbit model’s vertices were also displaced based on the brightness of the texture after watching the bumpmapping tutorial from class.

During this week’s practice, I developed a great interest in 3D shaders. The shader I created before will hopefully be combined with a 3D model by me later, which will be very exciting for me.

1 4

3 2

P5.JS Link: https://editor.p5js.org/ivy.sun/full/-xmusfJPY