Week 2 Homework

week2 week2.1 week2.2 week2.3

Originally I was going to make a 5×5 grid which changed to the current 10×10, which in each 2×2 cell was going to have a circle, square, triangle, and gradient. However, while working this changed to having the rectangle in one cell and having a quarter of a circle each of the 2×2 cells to create a whole circle in the middle. Added on, I combined the triangle and gradient together to create the yellow and orange gradient in the top left of each 2×2 cell as well. I like the way it ended up compared to how I was imagining it beforehand, and I also learned about creating gradients with shape functions in a more unique way.

Week 2 Homework

seed seed2

For week 2 I experimented with creating circles and combining them with colours and animation to explore what is called sacred geometry in this glyph commonly referred to as the seed of life.  At first I just wanted to create 7 interlocking circles that all met in the center, but as I brought in the colours and overlapped them in a clockwise fashion, I realized overlapping them with transparent white circles would bring attention to some unique relationships in this shape, so I decided to create a static circle around the inner seed, while using another pulsing circle that expanded close to the perimeter of the shape.  Finally I encapsulated the whole shape in a slowly pulsating egg.  The actual process of getting everything perfect in composition and getting the animation timed the way I wanted was a painstaking and time consuming endeavour, but it was valuable in teaching me what variables within u_time animations would affect the outcome, to either pulse at a certain time or the span of the transformation over time.

seedcode seedcode2

Week 2 Homework

screen-shot-2021-02-23-at-12-11-23-amscreen-shot-2021-02-23-at-12-11-40-am


// Author: Francisco
// Title: Assignment 2 - Part 1

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

#define PI 3.1415926535

float drawRectangle(vec2 st, vec2 pos, vec2 size){

float result = 1.0;

vec2 border = (1.0-size)/2.;

st = st - pos + vec2(0.5);

result = step(border.x, st.x);
result *= step(border.x, 1.0-st.x);
result *= step(border.y, st.y);
result *= step(border.y, 1.0-st.y);

return result;
}

float drawCircle(vec2 st, vec2 pos, float size){

float result = distance(st, pos);

result = 1.0-step(size, result);
//result = smoothstep(0.7, 0.6, size);

return result;
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 hsb;
hsb.r = st.x; // animate hue with time
hsb.g = 1.; // saturation
hsb.b = 1.; // brightness

vec3 color = vec3(0.860,0.509,0.111);
color = vec3(-st.x*1., st.y*1., cos(sin(u_time)));

float c1 = drawCircle(st, vec2(0.5, 0.5), 0.3);
float c2 = drawCircle(st, vec2(0.75, 0.75), 0.5);
float c3 = drawCircle(st, vec2(0.25, 0.75), 0.5);
float c4 = drawCircle(st, vec2(0.25, 0.25), 0.5);
float c5 = drawCircle(st, vec2(0.75, 0.25), 0.5);
float c6 = drawCircle(st, vec2(0.5, 0.5), 0.5);
float c7 = drawCircle(st, vec2(0.75, 0.5), 0.5);

float r1 = drawRectangle(st, vec2(0.5), vec2(0.21));
float r2 = drawRectangle(st, vec2(0.5), vec2(0.43));
float r3 = drawRectangle(st, vec2(0.5), vec2(0.6));
float r4 = drawRectangle(st, vec2(0.5), vec2(0.8));
float r5 = drawRectangle(st, vec2(0.5), vec2(1.0));

float d = distance(st, vec2(0.5,0.5))*1.489;
c6, c7 = d;
r1, r2, r3, r4, r5 = d;

c6 = sin(u_time*PI*0.+d);
c7 = sin(u_time*PI*1.+d);
r1, r2, r3, r4, r5 = sin(u_time*PI*1.+d);

color = mix(color, vec3(3., 0.8, 0.7), c1 * 0.09);
color = mix(color, vec3(3., 0.8, 0.7), c2 * 0.09);
color = mix(color, vec3(3., 0., 0.7), c3 * 0.09);
color = mix(color, vec3(3., 0.8, 0.7), c4 * 0.09);
color = mix(color, vec3(3., 3., 0.7), c5 * 0.03);
color = mix(color, vec3(3., 1., 0.7), c6 * 0.5);
color = mix(color, vec3(3., 0.8, 0.7), c7 * 0.4);

color = mix(color, vec3(0., 0., 1.), r1 * 0.1);
color = mix(color, vec3(0., 0., 1.), r2 * 0.1);
color = mix(color, vec3(0., 0., 1.), r3 * 0.1);
color = mix(color, vec3(0., 0., 1.), r4 * 0.1);
color = mix(color, vec3(0., 0., 1.), r5 * 0.1);

gl_FragColor = vec4(color,0.9);
}

screen-shot-2021-02-23-at-12-12-58-am


// Author: Francisco Samayoa
// Title: Assignment 2 - Part 2

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

#define PI 3.14159265358979323846

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {

st *= grid;

indices = floor(st);
st = fract(st);

return st;
}

vec2 rotate2D(vec2 _st, float _angle){
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}

float drawRectangle(vec2 st, vec2 pos, vec2 size) {
float result = 1.0;
vec2 border = (1.0 - size) / 2.0;

result = step(border.x, st.x);
result *= step(border.x, 1.0 - st.x);
result *= step(border.y, st.y);
result *= step(border.y, 1.0 -st.y);
return result;
}

float drawCircle(vec2 st, vec2 pos, float size) {
float result = distance(st, vec2(pos));
// blurry
result = 1.0 - smoothstep(size - 0.3, size + 0.676, result);
return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec2 st0 = st;
vec2 indices;

st = createGrid( st, vec2(6.), indices);

float pct = smoothstep(0.9, 0.1, st.x);
float pct2 = smoothstep(0.1, 0.9, st.y);

vec3 color = vec3(0);

if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 0.){

// lower left cell

color = vec3(0.955,0.750,0.002);

color = mix(color, vec3(0.933,1.000,0.493), pct/pct2);

} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.){

// lower right cell

st = rotate2D(st, PI * 0.25);

color = vec3(0.975,0.525,0.355);

color = mix( color, vec3(1., 0., 0), (1.-pct)/(-pct2));


} else if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 1.){

// upper left

color = vec3(0.745,0.348,0.062);

color = mix( color, vec3(0.737,1.000,0.648), (pct)/(1.-pct2));

} else {

// upper right

color = vec3(0.800,0.365,0.155);

color = mix( color, vec3(0.794,0.866,1.000), (1.-pct)/(1.-pct2));
}

gl_FragColor = vec4(color,1.0);
}

Week 2 HW

My favourite shader made this week was this neat ripple effect created using techniques learned in the patterns video, shaping functions video, as well as my own explorations into the sin function.

ripple

I first began by modifying the code from the grid example, and created a series of if else statements targeting each column individually.

In each of these conditions, I drew circles with the size being based off a sin function using u_time, which created an effect where the circle grew and shrunk over time.

I modified the speed of the effect by multiplying  u_time, effectively changing the period of the function, which resulted in a shorter cycle and animation. This can be seen below in my experiments in graphtoy, the orange wave is sin(x) while the shorter yellow wave is sin(x*2).

screenshot-2021-02-16-203402

In order to offset the animation of each circle to create the ripple effect, I added a varying horizontal shift to each function, so that the cycles would occur quickly in succession. Once again, this was verified using graphtoy.

Overall, making this shader refreshed a lot of what I learned about sin functions and their modifiers, and it was especially interesting using sin functions with u_time to create an animated shader.

 

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices ){

// multiply by the number of cells
// [0,1] range => [0,10] (for example)
st *= grid;

// get the cell indices
// for example, in a grid of 10x10:
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
indices = floor(st);

// use fract to get the fractional amount of st
// 9.5 => 0.5
// shows the xy coordinate in each cell
st = fract(st);

return st;
}

float drawCircle (vec2 st, vec2 pos, float size){
float result = distance (st, pos);
result=1.-step(size,result);


return result;
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

// good practice to take a copy of the original st
// before you change it
vec2 st0 = st;

vec2 indices;

// This divides the result of the sin function, changing the final size of the circle
float size = 4.;

// This changes the period of the sin function, changing the speed at which the circles animate
float speed = 5.;

// Create grid for circles
st = createGrid( st, vec2(5., 5.), indices);

// Set bg colour
vec3 color = vec3(0.995,0.764,0.451);
// Change the colour and sin function of each column
if(indices.x == 0.){
float r = drawCircle(st, vec2(0.5), sin(u_time*speed)/size);
color = mix( color, vec3(0.683,0.289,1.000), r);
}else if(indices.x == 1.){
float r = drawCircle(st, vec2(0.5), sin(u_time*speed+1.)/size);
color = mix( color, vec3(1.000,0.243,0.831), r);
}
else if(indices.x == 2.){
float r = drawCircle(st, vec2(0.5), sin(u_time*speed+2.)/size);
color = mix( color, vec3(1.000,0.118,0.380), r);
}
else if(indices.x == 3.){
float r = drawCircle(st, vec2(0.5), sin(u_time*speed+3.)/size);
color = mix( color, vec3(1.000,0.188,0.236), r);
}
else if(indices.x == 4.){
float r = drawCircle(st, vec2(0.5), sin(u_time*speed+4.)/size);
color = mix( color, vec3(1.000,0.237,0.122), r);
}

gl_FragColor = vec4(color,1.0);
}

Animating my tile shader

I pushed my week 2 tiled/grid shader further by animating it.

I also refactored the code into less lines while making it more semantically legible.

screen-shot-2021-02-05-at-10-34-54-am screen-shot-2021-02-05-at-10-34-59-am screen-shot-2021-02-05-at-10-35-03-am

Code:

// Nicole Vella
// 2021
// Metaball Grid Shader

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

float map(float value,float min1,float max1,float min2,float max2){
    return min2+(value-min1)*(max2-min2)/(max1-min1);
}

vec2 createGrid(in vec2 st,in vec2 grid,out vec2 indices){
    
    // multiply by the number of cells
    // [0,1] range => [0,10] (for example)
    st*=grid;
    
    // get the cell indices
    // for example, in a grid of 10x10:
    // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
    indices=floor(st);
    
    // use fract to get the fractional amount of st
    // 9.5 => 0.5
    // shows the xy coordinate in each cell
    st=fract(st);
    
    return st;
}

float drawRectangle(vec2 st,vec2 pos,vec2 size){
    
    float result=1.;
    vec2 border=(1.-size)/2.200;
    
    // border animations
    // vec2 border = (1.0t-size)/2.200 + cos(st.x *6. + u_time)*0.508;
    // border.x =  0.25*sin(st.x*u_time);
    // border.y = -0.25*cos(st.y*u_time);
    
    st=st-pos+vec2(.5);
    
    result=step(border.x,st.x);
    result*=step(border.x,1.-st.x);
    result*=step(border.y,st.y);
    result*=step(border.y,1.-st.y);
    
    return result;
}

float drawCircle(vec2 st,vec2 pos,float size){
    float d=distance(st,pos);
    // step shows values > argument 1, and we want the opposite
    // so we invert the results by subtraction 1.0 - the value
    return 1.-step(size,d);
}

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    st.x*=u_resolution.x/u_resolution.y;
    
    vec2 st0=st;
    vec2 indices;
    st=createGrid(st,vec2(10.,10.),indices);
    
    float delay=.45;
    float circSize=.5;
    
    vec2 size=vec2(.25,.25);
    vec2 pos=vec2(.5,.5);
    
    vec3 white=vec3(1.);
    vec3 black=vec3(0.);
    vec3 canvas=vec3(0.);
    
    // animations
    // 0 to 1
    float animation0to1=map(sin(u_time*delay),-1.,1.,0.,1.);
    // 1 to 0
    float animation1to0=map(sin(u_time*delay),-1.,1.,1.,0.);
    
    // bg rect
    float rect=drawRectangle(st,vec2(.5),vec2(1.));
    
    // top edge, Left To Right circle
    float circleTLTR=drawCircle(st,vec2(animation0to1,1.),circSize);
    
    // bottom edge, Right To Left circle
    float circleBRTL=drawCircle(st,vec2(animation1to0,0.),circSize);
    
    // left edge, Top To Bottom circle
    float circleLTTB=drawCircle(st,vec2(0.,animation1to0),circSize);
    
    // right edge, Bottom To Top circle
    float circleRBTT=drawCircle(st,vec2(1.,animation0to1),circSize);
    
    if((mod(indices.x,2.)==0.&&mod(indices.y,2.)==1.)||(mod(indices.x,2.)==1.&&mod(indices.y,2.)==0.)){
        
        canvas=mix(canvas,white,rect);
        canvas=mix(canvas,black,circleTLTR);
        canvas=mix(canvas,black,circleBRTL);
        
    }else{
        
        canvas=mix(canvas,black,rect);
        canvas=mix(canvas,white,circleRBTT);
        canvas=mix(canvas,white,circleLTTB);
        
    }
    
    gl_FragColor=vec4(canvas,1.);
}

Week 2 Shader

I wanted to explore creating textures through black and white gradients. As well as using the idea of truchet tiles.

I began with simple shapes and gradients.

 

screenshot-2021-02-03-181448

 

Tiling them generates a texture.

screenshot-2021-02-03-181431

 

Moving the location of the circles will create different patterns, some becoming almost seamless.

screenshot-2021-02-03-181344

 

Code:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float map(float value,float min1,float max1,float min2,float max2){
return min2+(value-min1)*(max2-min2)/(max1-min1);
}

vec2 createGrid(in vec2 st,in vec2 grid,out vec2 indices){
st*=grid;
indices=floor(st);
st=fract(st);
return st;
}

float drawRectangle(vec2 st,vec2 pos,vec2 size){
float result=1.;
vec2 border=(1.-size)/2.200;
st=st-pos+vec2(.5);
result=step(border.x,st.x);
result*=step(border.x,1.-st.x);
result*=step(border.y,st.y);
result*=step(border.y,1.-st.y);
return result;
}

float drawCircle(vec2 st,vec2 pos,float size){
float d=distance(st,pos);
return 1.-step(size,d);
}

void main(){
vec2 st=gl_FragCoord.xy/u_resolution.xy;
st.x*=u_resolution.x/u_resolution.y;

// good practice to take a copy of the original st
// before you change it
vec2 st0=st;

vec2 indices;

// create our grid
st=createGrid(st,vec2(10.,10.),indices);

vec3 color=vec3(0.);

// a float to control animation speed
float speed=.5;

float circle1=drawCircle(st,vec2(1.,1.),.5);
float circle2=drawCircle(st,vec2(0.,0.),.5);

// animations
// float circle1=drawCircle(st,vec2(0.,map(cos(u_time*speed),-1.,1.,0.,1.)),.5);
// float circle2=drawCircle(st,vec2(1.,map(cos(u_time*speed),-1.,1.,1.,0.)),.5);
// float circle1=drawCircle(st,vec2(map(sin(u_time*speed),-1.,1.,0.,1.),map(cos(u_time*speed),-1.,1.,0.,1.)),.5);
// float circle2=drawCircle(st,vec2(map(cos(u_time*speed),-1.,1.,0.,1.),map(sin(u_time*speed),-1.,1.,0.,1.)),.5);

// color = vec3(st.t.y,abs(sin(u_time)));
vec2 size=vec2(.25,.25);
vec2 pos=vec2(.5,.5);

// color = mix( color, vec3(pct2)*(atan(u_time)+1.)*0.03, circle2);

// background gradient
float rect=drawRectangle(st,vec2(.5),vec2(1.));

// various gradients based on different distances
float pct=distance(st,vec2(.5));
float pct2=distance(st,vec2(1.,1.));
float pct3=distance(st,vec2(0.,0.))*2.;
float pct4=distance(st,vec2(0.,0.));
float pct5=distance(st,vec2(map(sin(u_time*speed),-1.,1.,0.,1.),map(cos(u_time*speed),-1.,1.,0.,1.)));

// use the mix function to draw multiple shapes
color=mix(color,vec3(pct2),rect);
color=mix(color,vec3(pct5),circle1);
color=mix(color,vec3(pct),circle2);

gl_FragColor=vec4(color,1.);
}

Shader Explorations 2

download-16download-17download-18download-19

The above four images show is a sequence of animated shader stills from left to right and top to bottom.

For this week’s homework shader explorations I decided to integrate my first shader, a Piet Mondrian inspired shader (created when I was exploring rectangle placement and layering effects for the Book of Shaders’ “recreate a Piet Mondrian painting” exercise), as I felt the design would make for a cool tile effect. The original colours followed Mondrian’s primary colour scheme (similar to the last still, but the small rectangle was yellow), but I felt that it needed to be more dynamic so I decided to animate a colour shifting gradient using u_time and smoothstep.

I still felt like I needed to add more variety of shapes, as I took the effort to make functions based on all of the shape exercises, so I decided on adding a polar shape. I found experimenting with the different parameters of polar shapes extremely fun, therefore I created a polar shape function that allowed me to control everything from position to length and width of spokes. Although I could have gone for a more complicated shape, I decided against it because the tiling pattern was also complex. It was an awesome moment when I realized I was able to layer the tile pattern over the polar design and see the solar shapes through the gap made with one of the rectangles.

Overall, I had a lot of fun learning about shapes and creating my own functions for them.

// Author: Madelaine Fischer-Bernhut
// Title: Animated Piet Mondrian Pattern v2

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

#define PI 3.14159265358979323846


//rotation and tile functions from the Book of Shaders "Patterns"
vec2 rotate2D(vec2 st, float angle){
 st -= 0.5;
 st = mat2(cos(angle), -sin(angle),
 sin(angle), cos(angle))*st;
 st += 0.5;
 return st;
 
}

vec2 tile(vec2 st, float zoom){
 //scale up space
 st *= zoom;
 
 //wrap around 1.0
 return fract(st);
}

vec2 rotateTilePattern(vec2 st){
 
 //scale coordinate system by 2x2
 st *= 2.0;
 
 //give each cell and index number according to its position
 float i = 0.0;
 i += step(1.0, mod(st.x,2.0));
 i += step(1.0, mod(st.y,2.0))*2.0;
 
 //each cell between 0.0 -1.0
 st = fract(st);
 
 //rotate each cell according to index
 //use matrix to rotate the space

 if(i == 1.0){
 st = rotate2D(st, PI*-0.5);
 } else if (i == 2.0){
 st = rotate2D(st, PI*0.5);
 } else if (i == 3.0){
 st = rotate2D(st, PI*2.0);
 } else if (i== 0.0){
 st = rotate2D(st, PI);
 }
 
 return st;
 
}

float drawRect(vec2 st, vec2 size, vec2 pos){
 float result = 1.0;
 
 //invert size so the size variables will controle the size based on the white dimensions
 vec2 border = (1.0-size)/2.0;
 
 result = step(border.x + pos.x, st.x);
 result *= step(border.x - pos.x, 1.0-st.x);
 result *= step(border.y + pos.y, st.y);
 result *= step(border.y - pos.y, 1.0-st.y);
 
 return result;
}

float createPolShape(vec2 st, float size, float spokesNum, vec2 spokeSize, vec2 pos, float rot, float blur){
 float result = 1.0;
 
 //control the position of the shape
 pos -= st;
 
 //control the size of the shape
 float r = length(pos)*size;
 float a = atan(pos.y, pos.x);
 
 //control the number of "spokes" and their shape
 //rotate and animate the shape by adding or subtracting from the "a" in cos or sin
 float f = cos(a*spokesNum + rot)*spokeSize.y+spokeSize.x;
 f = abs(cos(a*spokesNum+rot)*sin(a*spokesNum+rot))*spokeSize.y+spokeSize.x;
 // f = smoothstep(-.5,1.0, cos(a*spokesNum+rot))*spokeSize.y+spokeSize.x;
 
 //changing f+value effects focus of shape (blurred)
 result = 1.0-smoothstep(f,f+blur,r);

 
 return result;
}

void main() {
 //st are texture coordinates, s is along the horizontal axis and t along the vertical axis (surface)
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 st.x *= u_resolution.x/u_resolution.y;

 float outline = 0.05;
 
 //for testing: centre of polar shape position is based on mouse
 vec2 pos = u_mouse/u_resolution;
 pos = vec2(0.5);
 
 vec3 color = vec3(0.0);
 
 //polar shape will appear underneath Piet Mondrian pattern
 color = vec3(createPolShape(st, 2.15, 10.0, vec2(0.350,0.860), pos, u_time*2.0, -0.260));

 //divide space by value
 st = tile(st, 1.0);
 
 //first rotate entire space by 90 deg
 st += rotate2D(st,PI*0.5);
 
 //then rotate title patterns based on index/location
 st = rotateTilePattern(st);

 //create bordered rectangles
 
 //white rectangles
 //adding the initial rectangle layer instead of multiplying results in the Piet Mondrian Pattern being masked by the polar shape
 // color += vec3(drawRect(st, vec2(0.360,0.590) - vec2(outline), vec2(-0.320,0.210)));
 
 //multiplying a rectangle layer in with the other two added results in that rectangle becoming "transparent"
 color *= vec3(drawRect(st, vec2(0.360,0.590) - vec2(outline), vec2(-0.320,0.210)));
 color += vec3(drawRect(st, vec2(0.480,0.585) - vec2(outline), vec2(0.259,-0.067)));
 color += vec3(drawRect(st, vec2(1.0,0.165) - vec2(outline), vec2(0.000,-0.417)));
 
 //coloured rectangles (with animated gradient overlay effect using smoothstep to control placement, and offsetting those colour gradients by overlaying sin & cos time animations)
 color.r += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(0.105,0.350)) * smoothstep(sin(u_time*0.4)*0.9,1.1,st.x) ;
 color.g += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(0.105,0.350)) * smoothstep(cos(u_time*0.4)*0.9,1.1,st.x) ;
 color.r += drawRect(st, vec2(0.150,0.3) - vec2(outline), vec2(0.425,0.35))* smoothstep(cos(u_time*0.4)*0.9,1.5, st.y);
 color.g += drawRect(st, vec2(0.150,0.3) - vec2(outline), vec2(0.425,0.35))* smoothstep(sin(u_time*0.4)*0.9,1.5, st.y);
 color.b += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(-0.230,-0.210)) * smoothstep(sin(u_time*0.4)*0.95,1.2, 1.0-st.x);
 color.g += drawRect(st, vec2(0.540,0.300) - vec2(outline), vec2(-0.230,-0.210)) * smoothstep(cos(u_time*0.4)*0.95,1.2, 1.0-st.x);


 gl_FragColor = vec4(color,1.0);
}

Week 2 Shaders

Note: someone please tell me how to embed the code in these posts because it seems I am the only one who can’t figure it out, and here I am pastebin-ing like a chump. Thanks in advance!

screenshot-2021-01-29-011141

Code: https://pastebin.com/iu7Q6nai

This was an exercise in getting accustomed to using shapes to create images. These are layered circles – including the curves, which are made using background-coloured circles to cover other circles. I found the book of shaders editor’s built in number and colour adjustment tools made it pretty easy to arrange the shapes. In terms of tweaking the circle to take on slightly different curves, I’m still figuring that out.

screenshot-2021-01-29-015552

Code: https://pastebin.com/ndrG1uTa

This is a simple pattern made using a grid. I struggled to figure out how to get access to use the pixel position within the larger canvas, rather than within the grid cell itself. (I still haven’t figured it out). I understand manually designating which row and column combinations to render which set of instructions, but I wonder how to introduce a bit more randomness.

Week 2 Shader Pattern

I spent some time playing around with the border function. I ended up with this gradient that slowly moves towards the bottom left of the screen. The colors mix in weird way with this one so I decided to leave it as is.

patterntest

// Author:Mark Herod
// Title: Shape/Pattern

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float drawRect (vec2 st, vec2 size){
float result = 1.0;

vec2 border = (1.0-size)/2.;

result = step(border.x, st.x);
result *= step(border.x, 1.0-st.x);
result *= step(border.y, st.y);
result *= step(border.y, 1.0-st.y);

return result;
}

float drawCircle(vec2 st, float size){
float result = distance(st, vec2(0.5));
result = 1.072-step(size,result);

return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

float border = 0.178 + (cos(st.x * 98.008 + u_time * 2.112) *0.732 *0.5);

//applies border and movement to each shape.
// also give shader the squarish shape
border /= + (cos(st.y * 99. + u_time * 1.792) *2.444 *1.284);

vec2 size = vec2 (0.5,0.5);

//draws squares
color.g = drawRect( st, size );
color.g = (asin(drawRect( st, size - vec2(border))));

//draws circle.
color.r = drawCircle(st, border);
color.b += drawCircle(st,border/st.y);

gl_FragColor = vec4(color,1.0);
}

This was just an experimentation of shapes and seeing how things worked together. I used the square as more of a light source to shine in from the right.

faded

// Author: Mark Herod
// Title: Faded Shapes

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float drawCircle(vec2 st, vec2 pos, float size){
 
float result = distance(st,pos);
result = 1.0-step(size,result);
return result;
	}

float drawRect (vec2 st, vec2 size){
    float result = 1.0;
   
    vec2 border = (1.0-size)/2.;
    
    result =(border.x, st.x);
    
    
    return result;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;

    vec3 color = vec3(0.042,0.575,0.396);
    //color = vec3(st.x,st.y,abs(sin(u_time)));
    
    float c1 = drawCircle(st, vec2(0.320,0.470),0.4);
    float c2 = drawCircle(st, vec2(0.360,0.270),0.560);
    float c3 = drawCircle(st, vec2(0.320,0.470),4.);
    
    float r1 = drawRect( st, vec2(2.0, 0.2) );
    
    color = mix(color, vec3(0.0,1.1,3.0),c1*0.5 );
    color = mix(color, vec3(2.499,3.000,0.306),c2*0.5 );
    color = mix(color, vec3(0.209,0.405,0.036),c3*0.5 );
    color = mix(color, vec3(3.000,1.086,2.930),r1/1.8);
    

    gl_FragColor = vec4(color,1.0);
}

Week 2 Shaders

I feel like I had even more trial and error this week than I did previously, as I actually had a very hard time trying to learn how to combine shapes and colors, so I was very pleased when I figured it out.

Because of that, I ended up working on the pattern shader first. It ended up being more of an aesthetic exploration where I played with rotating tiles and optical illusions, using some of the functions from the Book of Shaders and tweaking with the numerical values. Initially, I wanted to play with changing colors on each tile rather than rotating but as I was having trouble finding out how to add colors, I decided to focus on the other aspects.

pattern-shader


// Author: Dawn Murphy
// Title: Shape Pattern Shader

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265358979323846

uniform vec2 u_resolution;
uniform float u_time;

vec2 rotate2D (vec2 _st, float _angle) {
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}

vec2 rotateTilePattern(vec2 _st){

// Scale the coordinate system to 2x2
_st *= 3.0;

//number each cell
// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |

float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;

// Make each cell between 0.0 - 1.0
_st = fract(_st);

// Rotate each cell according to the index
if(index == 1.0){
// Rotate cell 1 by 45 degrees
_st = rotate2D(_st,PI*0.75);
} else if(index == 2.0){
// Rotate cell 2 by 145 degrees
_st = rotate2D(_st,PI*-0.75);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotate2D(_st,PI);
}
return _st;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(0.0);
float d = 0.0;

//Make 4 tiles
st *= 2.0; // Scale up the space by 3
st = fract(st); // Wrap around 1.0
st = rotateTilePattern(st);

// Remap the space to -1. to 1.
st = st *2.-1.;


// Make the distance field
d = length( abs(st)-1.0);

// Visualize the distance field
gl_FragColor = vec4(vec3(fract(d*5.0)),1.0);


}

For the shape and color-based shader, I did a lot more digging, examining examples from the book, and (of course) trial and error until I was able to find a way to functionally combine shapes with colors using mix(). For the result, I worked on making shapes in different colors and positions and with layering them in a pleasing way.

shape-shader


// Author: Dawn Murphy
// Title: Multicolored Shape Shader

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

//define first circle
float circleF(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.8);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define second circle
float circleS(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define third circle
float circleT(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.2);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define fourth circle
float circleFo(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.2,0.8);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

//define fifth circle
float circleFi(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.80,0.200);
return 1.-smoothstep(_radius-(_radius*0.1),
_radius+(_radius*0.1),
dot(dist,dist)*10.0);
}

void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(0.0);

vec3 pct = vec3(st.x);

//visualize the circles
vec3 colorF = vec3(circleF(st,0.9));
colorF -= vec3(0.096,0.690,0.338); //turns the first circle pink by subtracting all the green
vec3 colorS = vec3(circleS(st,0.9));
vec3 colorT = vec3(circleT(st,0.9));
vec3 colorFo = vec3(circleFo(st,0.9));
vec3 colorFi = vec3(circleFi(st,0.9));

//combine time
color = mix(colorF,vec3(0.066,0.273,1.000),colorT); //adds the third circle and colors it blue
color = mix(color,vec3(0.592,0.129,0.730),colorS); //adds the second circle and colors it purple
color = mix(color,vec3(0.995,0.280,0.695),colorFo); //adds the fourth circle and colors it pink
color = mix(color,vec3(0.066,0.273,1.000),colorFi); //adds the fifth circle and colors it blue
gl_FragColor = vec4( color, 1.0 ); //draws
}