DIGF-3011-501 (Winter 2023) Shader Art

Here is my experience of the HSB colour space mixed with an animated hue with the time

hsb.r = sin( u_ time*st.× * 1.896 * 2.670) * 0.5 + 0.596; // animate hue with time

hsb.g = sin( u_ time*st.y * 2.328 * 3.510) * 0.500 + 1.820;; // saturation

hsb.b = cos(u_ time*st.y * 1.824 * 2.974). * 0.5 + 0.932;; // brightness

After trying different combinations, especially using multiplied u_time with st has an amazing effect

It was very fun to play it around, unfortunately, my laptop crashed and I lost my code and I cannot save the animations.

Here are some screenshots I have

This week I played around with the HSB colour space as well as some shaping functions to achieve some pretty spectacular shaders.

 

#1

This was the first shader I created using various shaping functions. I used the hsb2rgb bit of code, which was somewhat difficult at first to wrap my head around, but I think I eventually understood what it was that it was doing. All future iterations of my shaders were based upon this code.

 

#2

This shader was one of the more interesting ones I created. I played around with u_time quite a bit as well as the fract shaping function.

 

#3

This is essentially a much (much) more scaled down version of #2, with a variation in the colour as well as some tweaks to the fract function

 

#4

I dont quite remember exactly how I created this one, but I think its really cool how all the colours converge in the center, then split off to the side. I think this is my favourite of the four I created this week.

 

Working with HSB is pretty different to RGB, but after much experimenting, the learning curve is not steep at all. I think this week I spent a little too much time playing around with specific functions and not enough time experimenting with all of the other shaping functions. Next week I will try to expand my learning more by using other functions.

 

Link to GIF: https://media.giphy.com/media/APOcUKOHbhhtzkwXeu/giphy-downsized-large.gif

I call this shader the Cuttlefish, named after their ability to animate their skin’s pattern and colour. I found this shader resembles their growing and shrinking shapes and rotating colours.

For this HSB shader I started by playing around with various shaping functions. I started with sin or cos combined with time in order to get some animation happening, and I then started plugging in various values like st.x and y, whole numbers, and starting multiplying and adding different shaping functions. This particular shaping function utilizes cos and atan in the hue variable, creating a carousel of colours starting at the bottom left of the screen.

RGB values are only named that, but are actually HSB values for hue saturation brightness.

The saturation stays relatively consistent for a few seconds, and at times makes the bottom corner flash white and the strip next to it flash black. This marks the beginning/end of a cycle, and acts as a hypnotizing/blinding effect to mesmerize the viewer, like a cuttlefish does. This is simply done through cos combined with time, and the addition of st.x and y to make the effect go along the bottom corner and create a big flash. Inverting the st.x and y would make the effect appear on the top right corner.

I used brightness to create a zebra pattern starting from the top right corner, using black lines as a thick pattern. The black lines are a part of a normally much larger and thinner pattern, but I shrunk it down to a small fraction to get those big bold lines separations.

The Code and comments:

Continue reading “Week 2 Homework – Ethan Day”

It was a bit rough at first setting everything up and working in hsb but I slowly figured it out. I wanted to experiment with random variables as well as creating various types of static, patterns and glitches. So, the first shader started out as shown above. I wasn’t feeling too great about it so, I decided to experiment with some equations.

 

These were all made with the same base code with minor adjustments to randomness, speed, and scale. Various placements of u_time, random variables, smoothsteps and cos allowed for this effect. It was interesting seeing how the patterns looked and operated at various point of the animation. I had to pop some of it into the graph toy website to figure out how to get everything working as intended and see how the cos would be effected by various equations. The visual representations through the graph really helped me when I got stuck.  Honestly, there was a bit of trial and error at this point for doing the variations. I would plug in various variables and tweak the numbers to my liking, studying how the changes effected the code; therefore working backwards. I wanted to experiment with making looping psychedelic patterns and “glitchy” looking shaders.

By switching variables to st.xy and removing the sin in the random function, I took out the circular bends in the pattern while maintaining the exponentially decreasing forward movement. I then adjusted them to look like a space warp.

  

This was simply taking that base coded flipping the canvas and increasing the size of the pattern. It began creating this fun swiping loop of rainbows as well when I removed the randomized elements. I at one point got something like the rainbow Netflix logo.

This was one that I was messing with patterns for and created a landscape that animates between colours.

Lastly, I tweaked the conversion function a bit and added snoise. The alterations to the conversion function caused the blurred projector effect seen here. Snoise added the static for the top two and the black circles on the bottom one. Getting the snoise to work was a bit difficult at first because of the formatting and long list of additional code required.

In Gradient#1 I tried using the distance function from the week 2 shaders, and linked it to saturation and brightness. The distance function allows the brightness to spread in a rippled manner, and the mix function allows the lower half of the canvas to have a lower saturation, giving it a more layered feel. For hue, I used the random function to divide the canvas into 16 (4×4) grids and let them have different colors. In Gradient#2 I tried to add a time factor to both saturation and brightness, and adjusted the direction of the color change a little bit, so now the color of the canvas changes from bottom to top as the ripples move.

 

For me this week was about really trying to understand the basics and what functions actually take and do rather than just change a few values around and manipulating at random.

Shader 1: GIF Link

I experimented with multiplying cos and sin again to get a more fluid pattern for the first iteration of my HSB shader. It ended up reminding me of those storm or snowfall warning maps you see on weather stations or channels. Here I worked off of the class boilerplate example and changed/added to the sin/cos functions to create this pattern. I also went into the HSB function from IQ to play around with the values to change the overall color. I spent quite a long time just swapping out variables and changing values and really trying to notice why the pattern changed the way it did based on the changes I made. Trying real hard to think in sinusoidal waves.

Shader 2: GIF Link

I continued adding shaping functions and changing the multipliers and values for each line and ended up making this one interactive by adding u_mouse/u_resolution to hsb.r so the hue changes based on mouse position. I also just tried packing as many shaping functions as I could for each HSB element. In particular I played around with ceil and floor but ended up using abs and fract in favour of clamp for more control. I’m also really happy with how the random function alters the saturation and creates this tv static/embroidered pattern. I probably spent the longest amount of time on the brightness and which values I wanted to constrict it to, but I think it’s pretty cool! Reminds me now of topographic maps, heat signatures, and yeah, lava lamps too.

Moving forward I do want to introduce more movement or animation to the composition with rotation or tessellation in general. I wish my gifs were higher res too (the second one is particularly… crispy). :/