Week 2 Homework

 screen-shot-2022-02-16-at-4-58-42-pm

This is Gradient #1 which I have shown above where I tried to understand and learn about how to blend 2 colors. I have done this before using a different program, but I developed a new skill where I used different aspects into making this but I found this medium a little tricky and challenging to understand. vec3 color = mix( white, blue, smooth step) this is one of the codes for Vec3 which I have used which would be the Hermite interpolation between the 2 values (https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/smoothstep.xhtml).  

In the beginning, I chose this because I developed a new skill and understood the medium being utilized. I really like the way the colors blended well and brought out a good aspect. 

Week02 Homework – Gradient

screenshot-2022-02-17-004255 screenshot-2022-02-17-004334

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

screenshot-2022-02-17-150656 screenshot-2022-02-17-145403 screenshot-2022-02-17-145419

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!

Week 2 Homework

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)

2022-02-17-16-53-072022-02-17-16-50-25

Week 2 Homewrok

screen-shot-2022-02-16-at-4-15-01-pmscreen-shot-2022-02-16-at-7-44-31-pm

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

 

Week 2 Homework – JiaXi Pan

3When 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.

5I 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.

Week 02 Homework

screen-shot-2022-02-16-at-12-03-17-amscreen-shot-2022-02-15-at-11-26-17-pm

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.

 

Week 2 Homework

screenshot-2022-02-15-at-8-59-12-pmscreenshot-2022-02-15-at-8-57-23-pm

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.