**Homework Week 3**

**Exercise #1: SDF Shapes**

For shader 1 I began with the homework file layers 2, from this file I experimented with changing the already written rectangle shape with one from the SDF shapes resources. From this point I began messing around with adding variables in different places and ended up with a really intriguing animation that looked like an eye closing. When my shader was in this stage I was trying to figure out how to add a sort of iris shape in the middle of the closing eye this lead to me writing two shapes into a single mix function which generated a super trippy effect. After that I added some more complexity to the shader and came up with a super weird sort of fractal animation which cycles through multiple patterns when interacted with the mouse.

The code for this shader can be seen below with comments!

// Author: Luke

// Title: fractals – Homework Week 3 (exercise one)

// Course: ShaderArt (DIGF-3011, Winter 2022)

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

// by Iñigo Quiles (IQ)

// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){

vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),

6.0)-3.0)-1.0,

0.0,

1.0 );

rgb = rgb*rgb*(3.0-2.0*rgb);

return c.z * mix( vec3(1.0), rgb, c.y);

}

// by Jeremy Rotsztain

// st: canvas position

// pos: rectangle position

// size: rectangle width/height

//lukey-> added two new shapes to replace the homework file’s shape –> Layer_II

//https://iquilezles.org/articles/distfunctions2d/ – Bobbly Cross – exact (https://www.shadertoy.com/view/NssXWM)

//Regular Hexagon – exact

float sdHexagon( in vec2 p, in float r )

{

const vec3 k = vec3(-0.866025404,0.5,0.577350269);

p = abs(p);

p -= 2.0*min(dot(k.xy,p),0.0)*k.xy;

p -= vec2(clamp(p.x, -k.z*r, k.z*r), r);

return length(p)*sign(p.y);

}

float sdBlobbyCross( in vec2 pos, float he )

{

pos = abs(pos);

pos = vec2(abs(pos.x-pos.y),1.0-pos.x-pos.y)/sqrt(2.0);

float p = (he-pos.y-0.25/he)/(6.0*he);

float q = pos.x/(he*he*16.0);

float h = q*q – p*p*p;

float x;

if( h>0.0 ) { float r = sqrt(h); x = pow(q+r,1.0/3.0)-pow(abs(q-r),1.0/3.0)*sign(r-q); }

else { float r = sqrt(p); x = 2.0*r*cos(acos(q/(p*r))/3.0); }

x = min(x,sqrt(2.0)/2.0);

vec2 z = vec2(x,he*(1.0-2.0*x*x)) – pos;

return length(z) * sign(z.y);

}

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.-st.y);

return result;

}

// by Patricio Gonzalez-Vivo

// from The Book of Shaders

float random (vec2 st) {

return fract(sin(dot(st.xy,

vec2(12.9898,78.233)))*

43758.5453123);

}

// by Jeremy Rotsztain

// slightly more useful random

// min: minimum value

// max: maximum value

float randomRange( vec2 st, float min, float max){

float r = random( st);

float range = max-min;

return r * range + min;

}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;

st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

// draw 200 shapes/layers

for( int i=0; i<200; i++){

// pick a random position

// use the for loop index to change the random seed

// use the same x value for each random

// use a different y value for each time random is called in the loop

// so that the results are the same

vec2 pos;

pos.x = random( vec2(i, 0));

pos.y = random( vec2(i, 10));

// calculate a rectangle 0.2 x 0.x

// Lukey –> changed the shape from drawrectangle to blobby cross from the source cited previously in the script.

float shape = sdBlobbyCross( st – pos, 0.0+ u_mouse.x/u_resolution.x*u_mouse.y/u_resolution.y);

//lukey–>added secondary shape which when mixed created a super trippy effect

float shape2 = sdHexagon( st – pos, 0.1+ u_mouse.x/u_resolution.x);

// random hue, high saturation & random brightness

vec3 hsb;

hsb[0] = random( vec2(i, 20)); // hue

hsb[1] = 0.916; // saturation

hsb[2] = randomRange(vec2(i, 30), 0.45, 1.0); // brightness

// convert to rgb

vec3 shapeColor = hsb2rgb(hsb);

// mix color where shape == 1.0

// otherwise keep previous color

//lukey–> added extra color mix and adjusted the previous one to use the new shapes i experimented with dividing and multiplying the shapes within one mix function it created a crazy effect that goes through multiple unique patterns when the mouse is moved on the canvas

color = mix( color, shapeColor, shape/shape2);

color = mix(color, shapeColor, shape2*shape);

}

gl_FragColor = vec4(color,1.0);

}

**Exercise #2: Pattern**

I struggled to get something I liked with this exercise and ended up tweaking the previous shader to focus on one of the patterns it cycled through. I chose to focus on this specific pattern because it reminded me of Angela Johal‘s vibrant geometry which was included in the assignment page. Though I think this is a lot more chaotic than the work from Angela I think that it reflects my creative work a lot more.

The code for the shader can be seen below with added comments!

// Author: Luke

// Title: Fractal Pattern – Homework Week 3 (exercise Two)

// Course: ShaderArt (DIGF-3011, Winter 2022)

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

// by Iñigo Quiles (IQ)

// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){

vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),

6.0)-3.0)-1.0,

0.0,

1.0 );

rgb = rgb*rgb*(3.0-2.0*rgb);

return c.z * mix( vec3(1.0), rgb, c.y);

}

// by Jeremy Rotsztain

// st: canvas position

// pos: rectangle position

// size: rectangle width/height

//lukey-> added two new shapes to replace the homework file’s shape –> Layer_II

//https://iquilezles.org/articles/distfunctions2d/ – Bobbly Cross – exact (https://www.shadertoy.com/view/NssXWM)

//Regular Hexagon – exact

float sdHexagon( in vec2 p, in float r )

{

const vec3 k = vec3(-0.866025404,0.5,0.577350269);

p = abs(p);

p -= 2.0*min(dot(k.xy,p),0.0)*k.xy;

p -= vec2(clamp(p.x, -k.z*r, k.z*r), r);

return length(p)*sign(p.y);

}

float sdBlobbyCross( in vec2 pos, float he )

{

pos = abs(pos);

pos = vec2(abs(pos.x-pos.y),1.0-pos.x-pos.y)/sqrt(2.0);

float p = (he-pos.y-0.25/he)/(6.0*he);

float q = pos.x/(he*he*16.0);

float h = q*q – p*p*p;

float x;

if( h>0.0 ) { float r = sqrt(h); x = pow(q+r,1.0/3.0)-pow(abs(q-r),1.0/3.0)*sign(r-q); }

else { float r = sqrt(p); x = 2.0*r*cos(acos(q/(p*r))/3.0); }

x = min(x,sqrt(2.0)/2.0);

vec2 z = vec2(x,he*(1.0-2.0*x*x)) – pos;

return length(z) * sign(z.y);

}

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.-st.y);

return result;

}

// by Patricio Gonzalez-Vivo

// from The Book of Shaders

float random (vec2 st) {

return fract(sin(dot(st.xy,

vec2(12.9898,78.233)))*

43758.5453123);

}

// by Jeremy Rotsztain

// slightly more useful random

// min: minimum value

// max: maximum value

float randomRange( vec2 st, float min, float max){

float r = random( st);

float range = max-min;

return r * range + min;

}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;

st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

// draw 200 shapes/layers

for( int i=0; i<200; i++){

// pick a random position

// use the for loop index to change the random seed

// use the same x value for each random

// use a different y value for each time random is called in the loop

// so that the results are the same

vec2 pos;

pos.x = random( vec2(i, 0));

pos.y = random( vec2(i, 10));

// calculate a rectangle 0.2 x 0.x

// Lukey –> changed the shape from drawrectangle to blobby cross from the source cited previously in the script.

// Lukey2 –> Adjusted the rest of the script to focus in on one of the animation patterns from the previous created script. I thought this had the same spirit as Angela Johal piece such as this one(maybe a little more choatic) https://www.instagram.com/p/Cn9z_zspeFo/?utm_source=ig_web_button_share_sheet

float shape = sdBlobbyCross( st – pos, 0.352);

//lukey–>added secondary shape which when mixed created a super trippy effect

float shape2 = sdHexagon( st – pos, 0.708);

// random hue, high saturation & random brightness

vec3 hsb;

hsb[0] = random( vec2(i, 20)); // hue

hsb[1] = 0.916; // saturation

hsb[2] = randomRange(vec2(i, 30), 0.45, 1.0); // brightness

// convert to rgb

vec3 shapeColor = hsb2rgb(hsb);

// mix color where shape == 1.0

// otherwise keep previous color

//lukey–> added extra color mix and adjusted the previous one to use the new shapes i experimented with dividing and multiplying the shapes within one mix function it created a crazy effect that goes through multiple unique patterns when the mouse is moved on the canvas

color = mix( color, shapeColor, shape/shape2);

color = mix(color, shapeColor, shape2*shape);

}

gl_FragColor = vec4(color,1.0);

}