Ethan Griffin – Week03 Homework

For my first shader I wanted to create a composition with multiple rectangles that would expand and retract in size using a sin function inside of drawRectangle. As well as making them transparent to see the layers.


__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_02_18-still003 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_03_17-still004 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_05_04-still005

Making changes to the color mix and the multiplying of colors for transparency I other styles.

__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_01_13_23-still013 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_01_15_07-still014__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_01_16_22-still015

__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_21_05-still006 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_21_23-still007 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_24_09-still008

Also being able to create the same compositions horizontally.

__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_59_03-still011 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_01_02_19-still012

Different variations on brightness with st.x and st.y.

__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_33_06-still009 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_00_43_12-still010

Then experimenting with how big the for loop can be.

__-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_02_03_21-still020 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_02_04_23-still021 __-the-book-of-shaders-editor-__-google-chrome-2023-01-30-11-47-09-00_02_07_16-still022


Week 2 Tusharika

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.

screen-shot-2023-01-30-at-12-24-45-am screen-shot-2023-01-30-at-12-25-53-am

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

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



Week 2 Homework – Zhihan Zhang

This week we use HSB to generate the figure with various functions and using u_time to animate it. In the process of working on this assignment, it takes me a bunch of time to completely understand the whole functions especially the step and smoothstep function. And at the beginning my codes always show several errors. I solved one of them, which was caused by I forget to ad “.” in the cos/sin function when I multiplied with a fix number. For example, it should be hsb.g = cos(3. * v * u_time) instead of hsb.g = cos(3 * v * u_time).

The animated figure that I created was not what I predicted before I drew the figure. So here is one of the question that I am confused. I tried to create a color A and color B. I would like to mix A and B together with mix function for the hue of hsb, something like hsb.r = mix(colorA, colorB, st.x), but it leaded to a error that “x = :dimension mismatch,” I tried a lot of times to adjust it but failed, so I deleted it and  post it here.

I only gave the u_time in the function of hub.g, because  I thought my final result figure with u_time in hsb.g is more beautiful than the figure that I put u_time in hsb.r/hsb.b. I also changed the plot line color to make it like the water drops. Therefore, the final animated figure seems to be like changeable dropping rain dropping with special rhythm w  ith the flashy light in a dark city.


Week 2 HSB Mark Lin

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

screenshot-2023-01-27-at-11-29-17-pm screenshot-2023-01-27-at-11-29-38-pm screenshot-2023-01-27-at-11-31-16-pm screenshot-2023-01-27-at-11-31-47-pm screenshot-2023-01-27-at-11-31-55-pm screenshot-2023-01-27-at-11-34-15-pm screenshot-2023-01-27-at-11-36-37-pm screenshot-2023-01-27-at-11-37-44-pm screenshot-2023-01-27-at-11-39-50-pm screenshot-2023-01-27-at-11-44-30-pm screenshot-2023-01-27-at-11-46-11-pm

Week 2 – Tyler Jorge

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.

Week 2 Homework – Ethan Day


Link to 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”

Week 2 Agalia Christofi


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.

infinite-distorting-bends infinite-eyes

curve-stripescolournado download looping-puddles morphing-pools  rainbow-puddles

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.

swipe-stripes  stripe-crop

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.

wipe wipe


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.

Week 2 – Nelson Xie

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.


Week 1 – Nelson Xie

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.