Month: February 2023

https://editor.p5js.org/charnull/sketches/6Mi4PKgn7

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.

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.

 

https://editor.p5js.org/misakatytyshuw/full/kDypy23Ug

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.

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

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.

 

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

  

 

https://editor.p5js.org/tusharika.arora/sketches/BHGVKWiIV

 

 

 

I used a image of “Zebra” I took earlier because its bright colors are suitable for processing. In this homework, I tried to combine weekly shader02 and 05. Let the image have the separation of RGB values and the displacement of pixels at the same time when the mouse is pressed.

https://editor.p5js.org/nelsonxie1213/sketches/5ez5LKdUN

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:

https://editor.p5js.org/AlexNim/sketches/Li950C3D3