Week 01 Homework – Laila Mariam Imran

Hi all, I’m a little late because of laptop trouble, but here are my gradients.

It took me some time to get a hang of it, I’d never made a gradient using code before, so at first I was just messing around with the fill colour, changing the rgb’s to get a hang of which colours were produced with what values. Once I had an idea of which colours I wanted and how well they matched together, I made this gradient, with r and b opposite of each other, and a touch of green [vec4 color = vec4(st.x, 0.5 – st.y, st.y, 1);].

Gradient #1: RGB channels


For the second gradient, I did this very simple gradient only using two colours that reminded me of Maynards Fuzzy Peach. download-1

I didn’t add any more variables to it as I haven’t explored them as much, but I would like to have added a timer that would shift the red down until it covered the whole screen. I wanted to make this post as soon as I could though, as I was already behind on week 2.

One thought on “Week 01 Homework – Laila Mariam Imran”


    Week 01 Homework
    Shader Art 501
    Magdalena Szlapczynski

    My first experience with the medium was a bit difficult, this is because I only ever coded within Java and Javascript. Most of the coding I have done has been within p5.js as it is a great way to visualize what is happening with the code and if I want to work within a canvas. There is a clear resemblance with p5.js and the Book of Shaders. I personally have a preference for working in visual studio code but after familiarizing myself with the Book of Shaders editor I am looking more forward to coding within it. The first gradient was simple, but there were a few difficulties. I wanted to rely on cos and sin, as affected with time can make consistent values, if you imagine those values being affected by the static sin and cos graph. The look going for the shader is a peach-like warm tone, with the sunset yellow and oranges blending into a soft and light pink. The red channel stays consistent, the green channel makes a sort of spread across the canvas with sin and cos, this was done for experimentation, and finally the blue channel makes the shader appear lively with the switching between orange and pink. The cos on the green channel makes half of the screen have the gradient, adding the sin makes it spread more to the left side. Red and green make yellow, adding the blue makes a sort of light pink. There has to be a good understanding of color on the screen when playing with shaders. The second shader was much easier to make, as the values are simply affected by either the mouse or time with the use of the mix() function. I wrote two gradients for this part of the assignment because I was experimenting. Essentially they are the same. The time affecting the shader appears to be much more gentle and satisfyingly blending through yellow and red.

Leave a Reply

Your email address will not be published. Required fields are marked *