Month: January 2023

HSB Color and Animating the HSB Color

While working I didn’t have a proper plan as to what  I was expecting the end result to look like. I started experimenting with the shaping functions. While I was working with the amt and fact, I couldn’t have the x and the y fraction at the same time. I tried different styles but the only editor only runs then latest amt code.

Then when I started working the HSB code, the most satisfying part was to be able to play with various colours in the shader. The picture below reminded me how if a screen is not function or broken the colours would pop up like this on a TV screen or Netflix is being opened.

Then I just started using u time to animate on the side and just experimented with the colours, I preferred the animation and colours to be in a circular manner as it looked like optical illusion.

hsb.r = floor(-u_time+d*-3.)/10.;

if the multiplied value is negative it was animates from outwards to inwards direction, the number is also the number of colours that will be shown at a time.

When I replaced the floor in the code with sin, the texture was very smooth and kind of blur on the edges

vec3 rgb = clamp(abs(mod(c.x*1780876777777865555555555.0+vec3(2.783,3.444,4.000), ///Used to change the colours of the gradient
6.624)-5.896)-1.832,

just to experiment I kept on adding random number to see how the colours will look at the end, the number of colours kept on being multiplied and ended up make the gradient black with a yellow line

My end result: Sun effect

 

We are talking about HSB this week and I understand that RGB is mixed color by Red, Green and Blue. By mixing these three colors we are able to create other colors. HSB on the other hand, is using Hue, Saturation and Brightness to describe color. When I experience with HSB I found there is a big difference which is that HSB is more straight forward to me compare to RGB. For RGB, I have to remember which color is which number that I think is too complex.

For this weeks assignment, I tried HSB with sin function and add a new function Pow to make it more complicated. Then I test numbers around and tried adding, minus and multiply to change the look of the result. After I keep the result I want, I add u_time to animate the colors.

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.