Shader Art (Winter 2022)

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!

Welcome to OCAD University Blogs. This is your first post. Edit or delete it, then start blogging! There are tons of great themes available for you to choose from. Please explore all of the options available to you by exploring the Admin Toolbar (when logged in) at the top of the page, which will take you to the powerful blog administration interface (Dashboard), which only you have access to.

Have fun blogging!