Final Assignment

For my final assignment I decided to expand off of my first major assignment – a shader music video, with some key evolutionary differences. The most significant difference is this piece is meant to be an exploration of alternative, interactive music videos. I find the concept of an interactive music video to be fascinating. From VR to websites, these digital spaces present entirely new way of packaging a song. With this in mind, I wanted to take a song I’m about to release (vocals still need to be recorded), and package it into a new interactive experience in which the user could toggle the video feed.

The shaders themselves include a collection of my experimentations, some new and some updated from the major assignment. Here I included amplitude as a controlling variable so each shader would be sound reactive. Such sound related animations include colour and size change either in proportion to the amplitude or when surpassing a certain threshold. Users can then click on the screen to change the shader.

Stylistically, the song is a bit coy and sassy so I went for predominately bold and feminine colours. I didn’t include many gradients as I really like the more graphic, Y2K look of solid  blocked colours.

Code/Editor: https://editor.p5js.org/kahoogie/sketches/-CPo-gO-U

Video: https://www.youtube.com/watch?v=1MRwGtRiG6o

screen-shot-2022-04-27-at-7-50-43-pm

screen-shot-2022-04-27-at-7-50-34-pm screen-shot-2022-04-27-at-7-50-20-pm screen-shot-2022-04-27-at-7-50-04-pm screen-shot-2022-04-27-at-7-49-51-pm screen-shot-2022-04-27-at-7-51-00-pm

 

 

Week 9 Shader

screen-shot-2022-04-12-at-1-34-41-am screen-shot-2022-04-12-at-1-34-11-am

screen-shot-2022-04-12-at-1-35-41-am screen-shot-2022-04-12-at-1-34-21-am

This material was a very experimental exploration of Adobe Substances 3D Designer. I watched Adobe’s brief tutorials so I was familiar enough with the basics, however beyond that a lot of what I did was just trial and error. I really like that period where you’re learning a new program and can endlessly click between settings to see what will happen. I really love the look of water so I thought it would be fun to try to make what I think is a really hard material with really limited knowledge. I ended up created four water textures and experimented with them in different material roles (Abedo, Metallic, Height, etc.). What resulted with this cool water stone material. I really like how dynamic it is with light.

Week 8 – PBR Exploration

screen-shot-2022-04-07-at-3-02-43-am

For this material exploration I wanted to employ a range of textures in a minimal scene. I used materials from Ambient CG

 

Firstly, I used my own plant model that I had made using photogrammetry and then touched up in blender. This process meant there was already a corresponding abedo file. For a little extra texture, I used the normal map of a moss texture, combining the two inputs into a unique material.

I wanted the floor plane to be the exact opposite from the plant, so here I found a classic tile material. For the vase I used a porcelain texture. Interesting, I found that this material emulated water frozen in time rather than porcelain. It was cool experimenting with the normal and height map, making it a much more dynamic shape. Lastly, I went very simple with the skybox, just choosing a flat colour to highlight the space as this removed digital realm.

screen-shot-2022-04-07-at-2-54-01-am

screen-shot-2022-04-07-at-3-13-04-am

Major Assignment

screen-shot-2022-03-23-at-11-45-49-pm

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.

 

Week 4 Homework

screen-shot-2022-03-07-at-3-48-04-pm

I found it difficult wrapping my head around the colour approaches in Week 4’s shaders, so for the homework I decided to do something relatively simple – merging the codes of Exercise 1 and Contrast of Hue while also adding a vertical pan animation. This took a lot of trial and errors and slight adjustments to the existing functions, but I was eventually able to figure it out.

Week 3 – Homework

Shader #1

screen-shot-2022-03-02-at-6-19-43-pm

For the first exercise I made a flower by layering several circles. Each petal is comprised of a set of two circles multiplied so only the overlap remains visible. Unlike the majority of my shaders done so far, I had a clear idea for this sketch beyond bare experimentation with the code. I enjoyed the change of pace and really applying what I’ve learned. The size of the petals are also calculated using abs(sin(time)) so they animate.

Shader #2

screen-shot-2022-03-02-at-6-19-56-pm

screen-shot-2022-03-02-at-6-20-09-pm

 

For the second shader I made this checkered pattern with a cool animation. In both the x and y axis, the circles in each cell oscillate diagonally using a sin function. The direction alternates between even and odd cells. What I like most about this shader is that by using sin, there are periods of pause where everything come together like in the first image.

Week 2 Homework

screen-shot-2022-02-17-at-11-36-55-pm

For this Shader, I adapted the Book Of Shaders, HSB_Colour_Space file. First I changed the colour vector in Iñigo Quile’s function, replacing the rainbow spectrum for predominately black and white with inflections of orange and blue. I then changed the following equation hsb.r = floor(-u_time+d*10.)/10. I removed the floor and multiplied everything by st.y squared. Doing this allowed the layers to blur, and reoriented the image to flow vertically. Additionally, squaring st.y added an element of perspective by thickening the frontmost lines.

 

I really enjoy creating generative art with p5 (image below). I found it very satisfying working with the Shader codes as it felt like a much more accelerated version of what I would make in p5. I’m excited to learn more and perhaps a way to combine the two.

screen-shot-2019-11-12-at-11-13-46-pm