Month: February 2022

Gradient #1 (smoothstep / mix / u_mouse.y) >>> Code

Gradient #2 (hsb-rgb/distance/dot/fract) >>> Code

Hi!

For this gradient exercise, I’ve experimented with a mix() function for two-color gradients and using sin/cos/tan, etc to change the u_time value. For the first exercise, I also used u_mouse.x  to make it interactive. The movement speed of the mouse will affect the smoothness of color change. For the second gradient exercise, I edit the in-class example to explore different color & time values and used the dot() [img.1]to replace distance() [img.2&3]. The saturation keeps changing over time (as shown in picture). This was a fun experience, and I would continue exploring other variables or applying more new functions. Thanks!

Gradient#1  Gradient#2   code

By testing many funcions from the book, I got many results, but I prefer to show those two. I’m focusing on interactive shaders. For both, it can interact with mouse and update by time. When I interact with those gradients, they appear unexpected image.

I learnt how to mix color by mix() function, use mouse cordinate to interact, distance based hue, animate over time, and give color chanel a new value…

(those two are gif files, if they don’t work, please click links above)

Gradient #1                                                       Gradient #2

Code                                                                     Code

By experimenting with the above image, I first used Smoothstep () to set a basic range, then I calculated the shape of the jaggedness by using the Mod() function, then by further calculating in the R and G channels to get six stepped rectangles. It was a very interesting experience, but at the same time, the complexity of the functions bothered me. For Gradient #2 I used the dot() to set a range, and then set the u_mouse data so that mouse movement on the graph would change its contrast and color

 

Still new to learning the language, little by little I learned more about the tools and structure used in making shaders by following the exercises. For this exercise, I made a gradient based on the RGB_Gradient example. In this gradient the amount of how much colour is in the gradient is controlled by the X coordinates of the mouse.

This week I used the shaders provided to us to play around with the different colours to get a feel of this shader editor.

When trying to make Gradient #1, I used multiple colours and used “smoothStep” to set a range, which made my image split. The whole image looked abstract.

 

 

When writing Gradient #2, I used polar coordinates to map the position of the hues in the HSB space.

I feel like I can do a lot of interesting motion effects by adding time, but it’s not the same as I feel when I make animation in other software because programming makes animation more random and often makes unexpected works.

I spent a long time reading The Book of Shaders repeatedly and combining the examples in class, while some of the features are understood, there is still a lot to learn. I find it very challenging to work in this medium and it takes a lot of time for me to try.

gradient shader 1 code       gradient shader 2 code (animated)

While editing the shaders that was provided in the week 01 module, I experimented with the values (BEDMAS, sin/cos/tan/fract, sliding the values, etc) to see what kind of results came out from it and for the most part I had to do alot of trial and error; it was a struggle but rewarding when it forms something that looks interesting. I found that after getting familiar with this code, I re-read some pages of the book of shaders and worked along with the examples which allowed for further exploration with the shader (2) I created. Going forward, I plan on continuing to refer back to the basics as it can be overwhelming but I learnt that with this medium, there is a lot of potential to create something extrodinary.

 

Through creating the above shaders, I have obtained some logic behind the codes and functions. For example, I finally realize that the color is represented with numbers (yes my brain is not math enough to comprehend) and therefore visualize and make sense of the functions. It was interesting to see how code and math can actually create art. It is like meshing two unrelated areas of studies together.  Sometimes a small mistake in codes could be surprising too. By just doing these exercises, I could notice that this medium owns huge possibilities to explore the combination of mechanical and human aesthetics.

Exploring shader is a really fun trip, is fascinating to see how the combination of codes can produce color palettle. Is a nice space to compose a color scheme through a shader!