## Ushna Khalid – Week 02 HW

For the week 2 hw. I first spent some time messing around with the HSB colour space. I made a few weird animation shaders, one that I saved was this Circle HSB. But I didn’t really know what I wanted to work on so I tried getting ideas from looking at other hsb shaders but I didn’t find anything good. So I continued to mess around with the hsb space until I got this.

This looked a lot like screen lines to me and I decided to work with that. Since I was just messing around and didn’t really know how I got here. I had to make it again from scratch so I would know how I got there. In the end, i realized it wasn’t that big of a change. I had just messed with the st.x var.

I then change the hsb.r t make it move. sb.r = -u_time*0.2+d made it look like this

I didn’t use any shaping functions at all in any of the HSB channels. Like what you see above, all the channels have 1. in them. I started experimenting with different shaping functions like cos and sin but it didn’t really do anything I liked with the hue. I then made a var that used the pow shaping function for the hue that made it look like this.

I thought this looked interesting and decides to work with this. I didn’t have anything going on with the saturation and brightness because I thought that there really wouldn’t be any difference if I added in a shaping function or a simple number. However, the prof gave me the idea to just use the random function to spread different brightness and saturation across the canvas the same way it’s doing with the hues. Honestly, I should’ve thought of that myself but alas.

So I got made a random statement that looks like this

rand(c+vec2(0.920,-0.870))

the c var is where I’m holding the pow shaping function. And I put these both the brightness and hue, though the variable is sligher different but the statement for both is the same.

I made the background a flat red to see how it worked.

Here is the random function on saturation

here is the random function on brightness

here is with both saturation and brightness enabled

and here it is all together

After I got a proper static shader image, I could start working on animating the values. While trying to make a proper static shader, I was working on animating it at the same time. I used multiple functions to make different kinds of animations.

This animation uses fract

This one uses sin

These other two look more interesting and I had to change the HSB channels. H had the pow function while the other two have a distance function on them.

here it is with fract

and here it is with sin

I organized all these tests in if statements to make them easy to go through. I do think that a spent a little too long messing around with these to see what I can do.

## Week 2 – Justine

Homework Exercises

This week’s homework focused on the exploration of using HSB values and shaping functions. I had a lot of trouble visualizing the different shaping functions, and most of what I created for this week was through a lot of trial and error—tweaking floats, swapping operations, etc… It was also difficult for me to understand the math, so primarily manipulating the hue helped a lot in the visualization aspect.

I discovered the atan( ) function and I really liked how I was able to make it look like a rainbow wheel, radiating from the lower-left corner of the window. I spent some time playing around with the entire expression and figuring out which variables manipulated what. For example, I learned that anything multiplied or divided by atan( ) affected the width of the colours, while anything added or subtracted affected the position of the colours.

For this exercise, I added u_time to the expression and slowed it down by a quarter to give the colours a slight rotation. It reminds me of a spinning diamond gem—I played around with using a sine function to decrease the saturation at the top-right of the window, and a linear function that decreases the brightness at the opposite corner. These are meant to look like a highlight and shadow.

vec3 hsb;
hsb.r = atan(st.x/st.y) * 0.5 – (u_time/4.);
hsb.g = 1.0-sin(st.x*st.y);
hsb.b = st.x + st.y;

To add some more complexity to the animation, I experimented with using sin( ) to make the rainbow oscillate back and forth, as opposed to infinitely going in a single direction. The result is a very psychedelic rainbow wave! It looks like the rainbow is getting swept around by the wind, or riding along an ocean current.

The two examples below for this exercise are almost exactly the same code; the second one just has a shorter period and thus a tighter wave.

vec3 hsb;
hsb.r = atan(st.x/st.y) * 0.888 – sin(u_time – st.x * 4.);
hsb.g = 1.;
hsb.b = 1.;

Even though I think the animations of the shader are already cool to look at as they are, I could also take this a step further by adding some randomness through noise. This would create some interesting texture to the shader. I also would want to experiment with using mix( ) which was introduced in week 1, perhaps to play around with the hues that appear and add some variation in the palette apart from just having a looping rainbow.

## Temi Gina. Week 1 Shaders

It took me a while to get used to GLSL coding I broke the code multiple times and had to what several tutorials, but I am happy with the final results!

1. RGB Gradient

For the RBG gradients I wanted to create a rainbow effect. During my experimentation I was most intrigued by the sin(u_time) function. I felt like feature created the most interesting compositions so i used it to make a gradient that progressed from deep rich red-blues to more pastel bright yellow-turquoise colours. The main difficulty with this was figuring out the correct colours to place the time function on to make the effect look seamless and aesthetically sound.

2. Mixed Gradient

For the second gradient I wanted to create something more dynamic, inspired by the sunrise. I used a lot of trial and error to create the mixture of linear and circular gradients. Like in the first gradient, the colours shift over time, however in this composition, there are two clear stagnant lines, reminiscing of light leaks and one curved one entering and exiting from the corner of frame, representing the sun.

Performing various math functions on the variables and their relation to st.x and st.y, yielded the most interesting effects and colour placements. I played around with these to create the shapes and movement I wanted.

## Ethan Griffin – Week02 Homework

I started off wanting to create a static tv sort of effect, I started off using noise to try this but while trying I accidentally added random to the brightness HSB variable which created the static effect I was looking for. As well as adding time to it and changing the time with mouse position allowed for different variations.

Then using distance based saturation with mouse position the HSB colors saturation increase from the center.

With certain mouse positions the effect becomes much more unique.

# Homework Week 2

### Gradient #1: Explore HSB color

For the first HSB color shader I wanted to experiment with the Sin function to create a trippy looking shader. I wanted this shader to be interactable with the mouse position both x and y because it’s fun moving your mouse around on the shader, I experimented with where I could fit the mouse x and y variables and created a way to adjust both the colors and the sin wave itself.

#### See my code and comments for this first shader below

// Author: Lukey
// Title: Explore HSB color (Homework Week 2)

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.1415926535
#define TWO_PI 6.283185307

float plot( vec2 xy, float amt){
if( step( xy.y – 0.006, amt) == 1.0 && (1.0- step( xy.y + 0.006, amt)) == 1.) return 1.0;
return 0.;
}
// conversion function by Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(4.000,0.769,0.000),
5.640)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(0.417,1.000,0.025), rgb, c.y);
}

void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
//sin variable
float l = st.x;
//fract variable
float p = st.y;

//the code below is sampled from the shaping functions and curves .frag provided in the week2 shader zip

//LUKEY -> fract from sample code, fract is dictated by st.x multiplied by value and then multiplied by mouseX position
//this makes the shader very ineractable allowing you to change the look by using the mouse position
p = fract(st.x * 1.248*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y);

//LUKEY -> dictate sin, these values are multiplied choatically until I got a crazy look, there was not really any reason to it!
l = sin( u_time * -0.400 + st.x * TWO_PI * 0.964 * 0.628 + 0.764+u_mouse.y/u_resolution.y);

vec3 hsb = vec3(u_mouse.y/u_resolution.y,0.798+u_mouse.y/u_resolution.y,1.000); // 100% red
vec3 rgb = hsb2rgb(hsb);

vec3 color = vec3(0.0);

// We map x (0.0 – 1.0) to the hue (0.0 – 1.0)
// And the y (0.0 – 1.0) to the brightness
color = hsb2rgb(vec3(st.x*st.y+fract(u_time*.25)/l+p,l+0.888*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y,st.y/st.x+fract(u_time*.25)/p));

//The following line I experiemnted with using mouse position within the mix function
color.rgb = mix( color.rgb*u_mouse.x/u_resolution.x – u_mouse.y/u_resolution.y, vec3(0.0, 1.0, 0.0), plot( st, color.r));
gl_FragColor = vec4(color,1.288);
}

### Gradient #2: Animating HSB values

In the evolution of the above shader, I adjusted some of the values to include time either added, multiplied, or divided by values written previously. My focus was to animate the fract function over time to get a copy machine look with the shader being refreshed by the fract function over time. I also experimented with multiplying time by negative values which changed the direction the function would animate in.

#### See my code and comments for this second shader below

// Author: Lukey
// Title: Animating HSB values (Homework Week 2)

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.1415926535
#define TWO_PI 6.283185307

float plot( vec2 xy, float amt){
if( step( xy.y – 0.006, amt) == 1.0 && (1.0- step( xy.y + 0.006, amt)) == 1.) return 1.0;
return 0.;
}
// conversion function by Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(4.000,0.769,0.000),
5.640)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.000,0.431,0.296), rgb, c.y);
}

void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
//sin variable
float l = st.x;
//fract variable
float p = st.y;

//the code below is sampled from the shaping functions and curves .frag provided in the week2 shader zip

//LUKEY -> fract from sample code, fract is dictated by st.x multiplied by value and then multiplied by mouseX position
//this makes the shader very ineractable allowing you to change the look by using the mouse position

//LUKEY EXERCISE 2 –> added time to fract to create a sort of copy machine effect, it feels like the screen get refreshed, you can also use the mouse.x and .y positions to adjust
//it as well the effect is interactable but also happens on its own
p = fract(st.x + st.y* 1.248*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y+(u_time*-.25)+(u_time*.02));

//LUKEY -> dictate sin, these values are multiplied choatically until I got a crazy look, there was not really any reason to it!
// LUKEY EXERCISE 2 –> multiplyed time by a negative
l = sin( u_time * -0.536 + st.x * TWO_PI * 0.964 * 0.628 + 0.764+u_mouse.y/u_resolution.y);

vec3 hsb = vec3(u_mouse.y/u_resolution.y,0.798+u_mouse.y/u_resolution.y,1.000+(u_time*1.244)); // 100% red
vec3 rgb = hsb2rgb(hsb);

vec3 color = vec3(0.0);

// We map x (0.0 – 1.0) to the hue (0.0 – 1.0)
// And the y (0.0 – 1.0) to the brightness
color = hsb2rgb(vec3(st.x*st.y+fract(u_time*.25)/l+p,l+0.888*u_mouse.x/u_resolution.x+u_mouse.y/u_resolution.y,st.y/st.x+fract(u_time*.25)/p));

//LUKEY -> The following line I experiemnted with using mouse position within the mix function
// LUKEY EXERCISE 2 –> Added time to “plot” within the mix function
color.rgb = mix( color.rgb*u_mouse.x/u_resolution.x – u_mouse.y/u_resolution.y, vec3(0.0, 1.0, 0.0), plot( st, color.r+fract(u_time*.25)));
gl_FragColor = vec4(color,1.288);
}

## Week 1 Shaders – Ivy Sun 3183268

Gradient #1: RGB channels

My first exploration was really simple, I just used u_time to create a dynamic gradient animation operated in multiple axes. It was probably the hardest and most crucial part of the process for me to work through the shader examples to truly understand how they were composed to create gradients and lines. Being used to only thinking about numbers and scalar operations, I found it difficult to wrap my head around mathematical operations on images or colours in vector form.

Gradient #2: Using mix()

My second exploration was playing around with u_time once again to create a wave-like animation while mixing two colours. I stepped through a bunch of experiments, combining the example functions, making distance filed, mixing additional colours, etc. After that, I created the wave form by converting to polar coordinates.

Shader Art is a brand-new concept for me, and I spent a whole lot of time reviewing and reading the materials in class and following the examples. As I adjusted the time and shaping functions, I was pleasantly surprised at the amount of variation in the end result. Using time-dependent gradients allows for multiple distinct intersections of colours, which increases the dynamic and feel of the piece.

As this is my first attempt at shader art, the results are very satisfactory to me, although it still has a lot of shortcomings. However, I expect that with more practice, I will become more familiar with shader art and be able to create more advanced effects.

## Week 1 Agalia Christofi

A lot of the process for making these shaders was trial and error and studying how each portion of the code operated. Once I was able to wrap my head around that, I began seeing how various functions and variables would effect the visuals. This process is documented in the code’s comments in the form of notes for myself. I felt as though I had trouble creatively expanding upon the shaders, except for changing values, once I was finally able to understand the basics.

Most of the trouble I had was working in JS instead of C#.  Also, it is definitely taking some time to wrap my head around how the sin and more complex pattern work is done. I think that doing these exercises myself and watching the coding recap video really helped though.

On the other hand, trouble shooting in the program was very direct in leading me to the problem compared to working in unity, which is what I am used to.  Being able to instantly see the changes and issues was such a breath of fresh air.

I can’t wait to begin doing more complex stuff like patterns and weird movements. For example, what I have seen from some of my peers in the class blog. These sorts of psychedelic patterned shaders really interest me and would expand upon my work greatly.

## Week2 Homework-LC

Week2 Homework

Introduction

For the first exercise I mixed a gradient background and a noisy background with a y-axis gradient. I found these two methods online and modified the values depending on my desirable effects, so it can be an x-axis gradient, a y-axis gradient or a module y-axis gradient I post here. After finishing this part I added a circle to the canvas, also you can find the method on The Book of Shaders website and call it yourself. What I found interesting is that changing the mix() values in the terminal mix function is more logical to get changeable results rather than changing the method values. As you see these two backgrounds were mixed by the mix(), and what I did to get variable effects is only adjust the third value by different formulas.
However, it isn’t anything useless if you want to change values in methods. When testing the animation, I found that if you change the circle edge range from all positive values to mixed negative and positive values, the circle will demonstrate the opposite way.

Static shapes

module y-axis gradient

Positive Circle/Negative circle and their radians values differences

Animations added by mix()

More Animatins Link

https://docs.google.com/document/d/1qwRCvCzVwcj77iOXC76nrJFVihTfEKW9XHZDqGIOUs4/edit?usp=sharing

## Week 01 Homework

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.

## 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.

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.