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.
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.
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.
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.
While doing this exercise, I came up with different results as I played around with the coding and additional functions. The two above are the ones I would like to present. I loved this exercise because I usually do coding for games and to see that I can create art with a little bit of math and code was so interesting to me. I love Gradient #2 because it looks like stars in the galaxy and bright pop of pink is something exploding in the universe (You will see it better when you watch the animation rather than the photo). I am going to learn more and see what more I can create.
From this shader I learned mostly how to do basic tasks and better understand what exactly I am working with and what my tools are. I would like to experiment further with the potential of changing things based on my keyboard or other inputs beyond my mouse.
This shader was a lot more complicated. I wanted to have animation as well as mouse input to play around with whilst time being involved. In order to create the effect I mostly just played around with graphtoy and learned a lot about how shapes, colour mixing and overlap will alter based on the equation. I found the results of tan sin and cos, particularly together, to be very interesting. I have experimented with some that were a bit more complex than my result but I found this to be the nicest look overall from my research.
To change the colours I altered a little the equation from class that changes rgb to the hsb work space.
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.