Month: February 2022

For week 3 homework, I am still trying to get a hang of the grid theory and logic, and therefore these are pretty simple compositions. While creating these gradients, I found out that the order of codes is critical for example if I coded a line before a function, the line would not work but worked after coding it after the function.

This homework proved to be quite hard for me. At first I started off by feeling like I understood most things but while trying to persevere I found myself struggling. I mostly wanted to try and play around with the absence of shapes for both of these experiments. I learned a lot regarding how to combine colours, identifying the “canvas” and creating independent variables in GL_SL. I would say I feel I have learnt more from working on the first shader as I was able to focus on specific elements and how they interact, particularly when color was defined by color.r (or color[0]). I would like to play around more with that method of drawing shapes in the canvas as the overlay result was very interesting. I also found it interesting how smoothstep() is affected by the background or elements around it based on layer.

1. Shader 1
2. Shader 2

Gradient #1 Code

Gradient #2 Code

Hi! I’ve experimented with the rectangle outline code for this week’s homework for gradient 1. Use borders to create the overall outline with rectangles, and use mix() to create the gradient color look. I also tried the displacement of two rectangles to create different looks (as shown).

For the second gradient, I edit the example from the book of shaders and play around with the color and scales [5*5, using tile()]. I also applied the u_time uniform variable to make it rotate over time [using rotate2D()].

Thank you.

• Gradient #1: In this activity I tried to use one gradient and two different colors as variables. I used mix() to be the main function and I also created some interaction within it to control blending. 

Video: https://youtu.be/nU34qZ46VqU

Code: https://gist.github.com/Grace-pc/7bb15be76eeced1a86265144d0df789a

 

• Gradient #2: In this exercise I used HSB, sin() function, fract() and mouseXY to create an floating, interactive wave. 

video: https://youtu.be/yXH6-dOHh84

Code: https://gist.github.com/Grace-pc/2ea8de1e48a6d431570e2e479f2e4fa2

Shader #1

 

Shader #2

CODES

For this assignment, I had a lot of fun making the first shader, I did a bunch with different shapes but then I decided to work with circles only instead, using  the Layers-Frag from the weeks files and I love how artsy I made it look. The patterns I did have a little bit of trouble with the code, it took me a little while to figure out how it works and I still have some problems here and there but Im going to look more into it.

Gradient #1

For the first gradient, I explored how repeating sinuous waves affect the color mix. I’m getting familiar with the shader language and trig. I also experimented with other methods such as mouse interaction and smoothstep to control the blending.

 

Gradient #2

For this one, I studied some examples in the Book of Shaders. I used the HSB file and played around with different shaping functions. It is animated by time, and the wave size can be controled by mouse. I also added sin() into the disctance calculation, so the central circle can move across the canvas.

Overall, I had a lot of failed attempts, but it is also very satisfying when it finally worked.

Gradient#1

While making Gradient #1, I understand how to use mix() to blend the colors. During the making process, I was trying to find other forms to do the color blending. Looking at the book of shader, I found out that the “shape” chapter, it introduces how to use shading function to create various shapes other than a straight line. Therefore, I learned how to use code to calculate the radius and angles of each pixel and use the function to change the radius of a circle. And the outcome will be the below images.

Code

Gradient#2

While making Gradient #2, I learned that there is a way to turn HSB color into RGB color setting, which will be more convenient for me to make. And I tried a lot of time changing the setting and mouse interaction, as well as the shading function to adjust the original coding. I played with sin(), as well as u_time, and mouse XY. I found it really fun to have interaction between the shader and people.

Video       Code

In this assignment, I learned how to make basic shapes and use layers to form the graphics into a bull. I also gradually became familiar with the application of functions. Having finally understood how the fract function works, I’m still learning how to write rotations into it.

Shader#1 

The first shader was made by using the rotate2d() function and a for() loop to generate multiple squares of different colours.

Shader#2 

This shader was created with the tile(), grid() and mix() functions. Using these along with sin() and cosine(), I was able to create a three-tiered pattern using circles.

Gradient #1: This week, using the float(), smoothstep() and mix() functions I was able to create an interesting blend of Vec3 colors in a parabolic state through defining PI and the sin function which allowed me to play with the parameters of where the gradients occurred and mixed with one another. I think this would be a really cool shader to try and animate utilizing u_time which I plan to use more often in order to bring my shaders to life.

Code: