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.
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.
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.
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
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.
This was my first attempt at GLSL and it was a lot of fun learning about the various shaders. In gradient#1 I tried to associate the red value with the time, and the green and blue values with the mouse position, so when the mouse moves to the bottom of the canvas, there will be a big color change. In gradient #2 I tried using the sin function and mix function several times and correlating them with both time and mouse positioon.
For this week, I wanted to experiment with creating scanlines. You can see most of my code, but at the bottom to make the scanline effect I added “vec3 color = cos (hsb2rgb(hsb)); “. Working with hue, saturation and brightness were interesting. Having the ability to manipulate brightness in certain areas was the main focus of my work. I liked that I added a glitch effect to my work as well, as it is a new type of digital art. This was more experimentation, hopefully next time I would be able to work on something more purposeful and less glitch!
Gradient #1: Explore HSB colour
My shader explorations this week involved blending and animating together different iterations of the HSB colour spectrum, as shown in the example from the class file and in the example gallery of The Book of Shaders. As a first step, I generated a moving pattern using the sin function and edited the numbers to see what effects I could achieve. My knowledge of shaders from last week led me to do a bunch of experiments at this point. It turned out really well!
Gradient #2: Animating HSB values
My goal was to create a repeating pattern of colours using the sin function and u_time. Using the example as a guide, I made a circular and smooth transition through each hue, which was the brightest in the center. In the second step, I used u_time to animate through the colour wheel, combining sin(), cos(), tan(), etc. With the addition of shaping functions such as sin() and tan(), the animation becomes more complex and psychedelic over time. At this stage, I also conducted tons of experiments for practicing and exploring.
Overall, having just started learning the new language, I spent a lot of time experimenting and modifying shaders, mainly by trial and error this week. Even though I still have a lot to learn about how shaders operate, I was really glad about what I achieved this week. The final visual results are very inspiring and give me the confidence to make more complicated shaders in future exercises.
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). :/
I started initially with my HSB gradient shader. Which I’m giving a special mention because it helped create the fun weird animation shader I ended up with!
Very cool, circles, circling. Having this base code let me experiment and play around with the values and sliders to see what would happen.
This then created this pretty colour gradient which at first I was going to settle on for my animation shader and it was animated. I then worked backwards to create the hsb gradient but after looking back on my previous and iterating with that in mind, I ended up deciding to swap which shader I wanted to animate. (I since pulled the u_time out of my original animation so it is static now)
After adding the code from my animation shader, I pulled out the animations and circles before playing around with the rgb declared before the main function. It created this fun gradient which I probably could’ve stopped at and called it a day.
I remembered that my rgb gradient had some interpolation and figured maybe I can try using coords to do something. It worked pretty well and created something cool but my peanut brain decided oo let’s animate it with time! What could possibly happen then! A cool animation thats what! But I couldn’t stop there… I then added the hsb.r animation and messed around with the math functions for both and the value sliders until I landed on this bouncing, zooming extravaganza and then decided that my original animation shader was boring and I should definitely make this new one the animation.
Unfortunately gyazo gif only does 7 seconds so it isn’t showing the full animation but I assure that it is very cool.