Month: February 2022

Shader #1

Shader #2

This week I worked with the sin() and cos() to create an infinite shader using u_time to animate the shader. I ended up creating two different versions of how the curves move and look visually. Overall I enjoyed playing around with these functions and look forward to seeing how they can be used to create more complex shaders.

shader 1:radial three colour Gradient

code: code

shader 2: HSB distorted sinusoidal Color drops

code:code

I am new to shaders so it was interesting to mess around with the parameters a bit. In the first shader I wanted to see how we can change the alignment of the gradients from a linear one to a radial one.

In the second shader I was just playing around with the HSB space and sin() function. I definitely got a hang of the space.

Gradient Animated #1 
I actually had fun doing this work and exploring different values and the unique smoothstep() along with it. I have tried mixing two times adding the mixed vec3 value into another vec3 resulting in three different colours at the same time in the canvas.

Gradient Animated #2
This shader is challenging to make and I try to incorporate overlapping of the three different color channels (RGB) without seeming overwhelming. I used fract() to create the pulsing effect and sin() to do a series of color waves emitting from the vec2() coordinate from pct.

2 1

Nothing special for the first shader, but unlike the examples provided in class, I changed the values of x and Y, so now the color gradient position changes, and I added u_mouse to allow the user to control the color. In the second shader, I added fract() and u_time to change the animation effect, and made the brightness value changes over time. I also wanted to revise the saturation but the final visual effect was not what I expected, so I just gave up this idea.

| Gradient#1 & #2 video

| Gradient 1 code                                              | Gradient 2 code

The results are similar to my thoughts. The difficult thing is from Gradient 1. When I try to draw those ractangles, I cannot place them in right thoughts. I learnt to draw different shapes (rectangles, circles, lines….) and how to make layer for shapes. I leanrt randomness as well but I didn’t use in my homework. Combining previous learnt trigonometric functions and other knowledge, I did those.

For the Gradient 1, firstly, I drew different boxes and circle, and some of them are determined by mouse position, so that they can interacte with mouse. Then on main function, I layered every shapes and drew them on top of one anthoer. In the begining, I use mix() to mix color, in this way, if there were only few shapes, they are easy to control, but I want to add more, so by referencing 05-Layers_1, I learnt how to layer shapes.

For the Gradient 2, firstly, I drew the backgound and the two lines. Then I divided and rotated the spaces on canvas, and layered the shapes. Finally, draw them in a interactivable (by mouse & time) color.  In the begining, I edited code from book and try different outcomes, then I combine the knowledge I just learnt, the shapes were well organized by layer.

For this Shader, I adapted the Book Of Shaders, HSB_Colour_Space file. First I changed the colour vector in Iñigo Quile’s function, replacing the rainbow spectrum for predominately black and white with inflections of orange and blue. I then changed the following equation hsb.r = floor(-u_time+d*10.)/10. I removed the floor and multiplied everything by st.y squared. Doing this allowed the layers to blur, and reoriented the image to flow vertically. Additionally, squaring st.y added an element of perspective by thickening the frontmost lines.

I really enjoy creating generative art with p5 (image below). I found it very satisfying working with the Shader codes as it felt like a much more accelerated version of what I would make in p5. I’m excited to learn more and perhaps a way to combine the two.

For the first gradient I didnt really do too much I just wanted to explore colour and see what I could do while using reference and while exploring I decided to turn the gradient using mix() on its y instead of x like the normal example

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.