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);
}
