Week 3 Shader

wallway002

wallway002-2

Iterating on this shader several times, it seemed fit to share the source of iteration. This is a grid set to be zoomed on this position, with alternating animations for red, blue and green using ‘u_time’ and and then altering the canvas with noise.

The code combine several functions and experimentation from other classes and shader sessions. I found this form of shaders fun and intriguing, it has brought together some of the learning.


// Author:joshua linton
// Title: wallway_02

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

float drawRectangle(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;
}
//from Week 3 Shader Session Noise
//
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.2113224865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
+ i.x + vec3(0.0, i1.x, 1.0));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw, x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.y * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

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

void main() {

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

vec3 color = vec3(u_time);



st *= 0.19;


vec2 indices;

st = createGrid( st, vec2 (20., 8.), indices);

//st.y += cos( st.x + u_time / cos(-st.y * 2.4) /1280.0) /.24;
st.x += snoise(st + vec2(0, u_time*0.04))*5.;
st.y += snoise(st + vec2(0, u_time*.64))*0.00002;
//st.x += cos( st.y + u_time * sin(st.x)) /5.;



//from Week 2 Shader Session Patterns
if( mod(indices.x, 5.) == 0.0 && mod(indices.y, 2.) == 0.){

st = createGrid(st, vec2(5.0), indices);

color = vec3(0.006,1.000,0.607);

float b = drawRectangle(st, vec2(0.5), vec2(0.5));

color = mix( color, vec3(0.2, 0.3, 0.9), b);

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

color = vec3(0.605,0.942,1.000);

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

st - createGrid(st, vec2(2.0), indices);

color = vec3(0.000,0.800,0.716);

float d = drawRectangle(st, vec2(0.5), vec2(0.5));

color = mix( color, vec3(0.051,1.000,0.541), d);

} else {

color = vec3(1.000,0.910,0.018);
}



//from a previous sketch playing around shapes and borders
float border = .1 + (tan( st.y * 4. + u_time * .64) *4. + 5.) * 0.1;
float borderAgain = + (cos( -st.y * 0.2 + u_time / 5.) *10. + 0.1) * 0.1;
float borderLast = .12 + (tan( st.y * 0.5 + u_time * .064) *4. + 5.) * .4;


vec2 size = vec2(0.590,0.790);


color.r = drawRectangle( st, size );
color.r -= drawRectangle( st, size - vec2(border));
color.b = drawRectangle( st, vec2(0.290,0.270) + vec2(borderLast));
//color.b -= drawRectangle( st, size);
color.g = drawRectangle( st, vec2(0.9,0.9) - vec2(borderLast));
color.g -= drawRectangle( st, size + borderAgain);

//color.g = drawRectangle( st, vec2(.7,.7));
color.b = drawRectangle( st, vec2(1.9,.32));

gl_FragColor = vec4(color,0.9);

}

Week 3 shaders

screen-shot-2021-02-11-at-6-22-59-pm screen-shot-2021-02-11-at-6-57-31-pm

I made a simple grid of squares that change colour randomly. I imported the shader into P5. The shader also has a layer of a different coloured grid that overlays on top occasionally.

code:

#ifdef GL_ES
precision mediump float;
#endif

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

float stipes = 24.072;

float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(-0.062,stipes + u_time * 0.064)))*
4.409);
}

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

st *= 9.280; // Scale the coordinate system
vec2 ipos = floor(st*0.396 + abs(sin(u_time *0.396))); // get the integer coords
vec2 fpos = fract(st *-0.068 + abs(cos(u_time *-0.332))); // get the fractional coords
// Assign a random value based on the integer coord
vec3 color = vec3(random( ipos ), fpos);

gl_FragColor = vec4(color,1.0);
}

Week 3 Shaders (Noise/Random)

First, using the tips from last weeks coding session, I got my black and white circle grid to animate the way I wanted it to. See here:

screen-shot-2021-02-11-at-6-38-01-pmClick to play

I used the same animation of circles moving in a clockwise manner around a square. I added noise to the circles, which was affecting their shape and making for interesting patterns.

I then started to introduce color and play with different blending modes. Here are some animations taken throughout the exploration process (click to play them in a new window):

screen-shot-2021-02-11-at-6-40-47-pm
Click to play

screen-shot-2021-02-11-at-6-48-12-pm
Click to play

screen-shot-2021-02-11-at-6-42-11-pmClick to play

Then I tried exploring with creating a chromatic aberration by stacking three circles in an additive blending mode and then using smoothstep to really blur the edges. Here is that result:

screen-shot-2021-02-11-at-6-44-23-pmClick to play

 

I preferred the look of more distinct and separate blobs. So I went back a step and then changed the background to white and the blending to be subtractive blending mode. I also explored different shaping functions as opposed to using the staged animation of Up, Down, Left, Right. Here it is combining the tan() function with snoise() to some very pleasing results.

This is the final submission:

screen-shot-2021-02-11-at-6-49-34-pmClick to play

 

 

Bonus? I was able to get my shaders to render in the browser using a node.js package called GLSL-Canvas-JS. (https://www.npmjs.com/package/glsl-canvas-js). So you can view my circle grid OpArt inspired loop and the final blended RGB blobs using noise in full screen at these links:

Circle Grid: https://nicolevella.com/_beta/shaders/001/

RGBlobs: https://nicolevella.com/_beta/shaders/002/

 

Code:

// Nicole Vella
// 2021

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

vec3 permute(vec3 x){return mod(((x*34.)+1.)*x,289.);}

float snoise(vec2 v){
    const vec4 C=vec4(.211324865405187,.366025403784439,
    -.577350269189626,.024390243902439);
    vec2 i=floor(v+dot(v,C.yy));
    vec2 x0=v-i+dot(i,C.xx);
    vec2 i1;
    i1=(x0.x>x0.y)?vec2(1.,0.):vec2(0.,1.);
    vec4 x12=x0.xyxy+C.xxzz;
    x12.xy-=i1;
    i=mod(i,289.);
    vec3 p=permute(permute(i.y+vec3(0.,i1.y,1.))
    +i.x+vec3(0.,i1.x,1.));
    vec3 m=max(.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),
    dot(x12.zw,x12.zw)),0.);
    m=m*m;
    m=m*m;
    vec3 x=2.*fract(p*C.www)-1.;
    vec3 h=abs(x)-.5;
    vec3 ox=floor(x+.5);
    vec3 a0=x-ox;
    m*=1.79284291400159-.85373472095314*(a0*a0+h*h);
    vec3 g;
    g.x=a0.x*x0.x+h.x*x0.y;
    g.yz=a0.yz*x12.xz+h.yz*x12.yw;
    return 130.*dot(m,g);
}

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

#define drawCircle(st,pos,size)smoothstep(0.,250./u_resolution.y,size-length(pos-st))

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution.xy;
    st.x*=u_resolution.x/u_resolution.y;
    
    float circSize=.5;            
    vec3 white=vec3(1.);
    vec3 black=vec3(0.);
    vec3 red=vec3(1.,0.,0.);
    vec3 green=vec3(0.,1.,0.);
    vec3 blue=vec3(0.,0.,1.);
    vec3 canvas=vec3(0.);
    
    float n=snoise(vec2(st.x-u_time*.1,0.))*.5+.5;
    
    float rect=drawRectangle(st,vec2(0.),vec2(4.));
    
    float circleC1=drawCircle(st,vec2(cos(u_time*.33)*n+n+.03,n),circSize);
    float circleC2=drawCircle(st,vec2(cos(u_time*.44)*n+n+.02,n),circSize);
    float circleC3=drawCircle(st,vec2(cos(u_time*.66)*n+n+.01,n),circSize);
    
    canvas=mix(canvas,white,rect);
    
    canvas*=mix(canvas,green,circleC3);
    canvas/=mix(canvas,blue,circleC1);
    canvas*=mix(canvas,red,circleC2);
    
    gl_FragColor=vec4(canvas,1.);
}

Week 3

I call this one spaghetti.

download-8 download-10


// Author @patriciogv - 2015
// http://patriciogonzalezvivo.com

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265358979323846
float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(0.360,0.320)))
* 43758.5453123);
}

// Value noise by Inigo Quilez - iq/2013
// https://www.shadertoy.com/view/lsf3WH
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st)+sin(u_time*0.1);
vec2 u = f*f*(3.0-2.0*f);
return mix( mix( random( i + vec2(0.0,0.0) ),
random( i + vec2(1.0,0.0) ), u.x),
mix( random( i + vec2(0.0,1.0) ),
random( i + vec2(1.0,1.0) ), u.x), u.y);
}

mat2 rotate2d(float angle){
return mat2(cos(angle),-sin(angle),
sin(angle),cos(angle));
}
vec2 rotatePattern(vec2 _st, float _angle){
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += -0.596;
return _st;
}

vec2 tile(vec2 _st, float _zoom){
_st *= _zoom;
return fract(_st);
}
float lines(in vec2 pos, float b){
float scale = 1.600;
pos *= scale;
return smoothstep(0.0,
.5+b*.5,
abs((sin(pos.x*u_time/25.0)+b*abs(sin((u_time)))))*.5);
}
vec2 rotateTilePattern(vec2 _st){

// Scale the coordinate system by 2x2
_st *= 2.0;

// Give each cell an index number
// according to its position
float index = 0.0;
index += step(1., mod(_st.x,2.0));
index += step(1., mod(_st.y,2.0))*2.0;

// |
// 2 | 3
// |
//--------------
// |
// 0 | 1
// |

// 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 90 degrees
_st = rotatePattern(_st,PI*0.25);
} else if(index == 2.0){
// Rotate cell 2 by -90 degrees
_st = rotatePattern(_st,PI*-.75);
} else if(index == 3.0){
// Rotate cell 3 by 180 degrees
_st = rotatePattern(_st,PI*.75);
}
else{
_st = rotatePattern(_st,PI*-.25);
}

return _st;
}

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

vec2 pos = st.yx*vec2(0.990,0.960);
vec3 color = vec3(0.0);
float pattern = pos.x;
// Add noise
pos = rotate2d( noise(pos) ) * pos;

// Draw lines
pattern = lines(pos,.5);

gl_FragColor = vec4(vec3(1.0,pattern*.9,0.25),1.0);
}

It’s getting hard for me to add on to my old code because the functions tend to feel overwhelming so I decided to start fresh using the wood example created by @patriciogv. I love the endless possibilities of using noise and I’m interested in learning more about Perlin noise.

Shader Explorations Week 3

screenshot-928screenshot-934 screenshot-931screenshot-935

The above 4 images show several iterations of my code below. I had a lot of fun experimenting with creating a kaleidoscope effect by overlapping several dynamic circles (their shapes were altered/deformed using noise) at varying opacities, colour schemes/noise-based gradients, and offsets. Like in the noise tutorial from class, I decided to create the background with a dynamic gradient of colours also controlled by offset noise. Originally the circles used a similar rainbow noise gradient, but I felt that I wanted to create more contrast between the background and circles. I experimented (as shown above) with white, black, grey, and blue. It appeared that using other solid colours like red, green, and yellow didn’t create enough contrast.

I find it really cool how the circles are not the “main” kaleidoscope shapes but are used to create negative space that cuts through the background in order to create the effect. I added a basic outlined square to the tile pattern to add more-dynamic overlay effects. The brightness and opacity of the squares are controlled using horizontal mouse movements.


// Author: Madelaine Fischer-Bernhut
// Title: 2D Perlin Simplex Noise V12

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.142

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

//Book of Shaders Simplex Noise (based off Ian McEwan, Ashima Arts)
// Some useful functions
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }

float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}

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

//rotation 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 rotateTilePattern(vec2 st){

//scale coordinate system by 2x2
st *= 6.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 drawCircle(vec2 st, vec2 position, float size){

float result = distance(st, position);
result = 1.0 - step (size, result);

return result;

}

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

//invert size so the size variables will control 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;
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.0);

//scale coordinate system to see noise
vec2 pos = vec2(st.x*1.0 - sin(u_time*0.2), st.y*1.0 + cos(u_time*0.2));

//BACKGROUND
//background gradient color
color.r = snoise(pos) * 0.5 + 0.5;
color.b = snoise(pos + vec2(u_time*0.3)) * 0.5 + 0.5;
// color.r = snoise(pos + vec2(u_time*0.3)) * 0.5 + 0.5;
// color.g = snoise(pos + vec2(u_time*0.3)) * 0.5 + 0.5;
color.g = snoise(pos + vec2(u_time*0.1)) * 0.5 + 0.5;

//TILE and ROTATE
st *= vec2(0.5, 0.5);
st += rotate2D(st,PI*0.5);

//then rotate title patterns based on index/location
st = rotateTilePattern(st+0.25);

//CIRCLE SETUP
//Animated circle size with noise function, add "st" in vector with noise to create a dynamic shape
//create an offset in size and opacity for each subsequent circle
float circle = drawCircle(st, vec2(0.580,0.550), (snoise(st + vec2(u_time*0.2))*0.5 +0.5) * 0.5 + 0.1)*1.0;
float circle2 = drawCircle(st, vec2(0.500,0.500), (snoise(st + vec2(u_time*0.2))*0.5 +0.5) * 1.0 + 0.1)*0.75;
float circle3 = drawCircle(st, vec2(0.710,0.330), (snoise(st + vec2(u_time*0.2))*0.5 +0.5) * 1.5 + 0.1)*0.5;

vec3 circleColor = vec3(0.005,0.005,0.005);

//circle color gradient
// circleColor.r = snoise(pos) * 0.5 + 0.5;
// circleColor.b = snoise(pos + vec2(-u_time*0.3)) * 0.5 + 0.5;
// circleColor.g = snoise(pos + vec2(-u_time*0.1)) * 0.5 + 0.5;

//circle color blue gradient
// circleColor.b *= (snoise(pos) * 0.5 + 0.5)*0.2;
// circleColor.b += (snoise(pos + vec2(-u_time*0.3)) * 0.5 + 0.5)*0.2;
// circleColor.b += (snoise(pos + vec2(-u_time*0.1)) * 0.5 + 0.5)*0.2;

//circle color normal black and white gradient
circleColor = vec3(snoise(pos) * 0.5 + 0.5)*0.2;
circleColor += vec3(snoise(pos + vec2(-u_time*0.3)) * 0.5 + 0.5)*0.2;
circleColor += vec3(snoise(pos + vec2(-u_time*0.1)) * 0.5 + 0.5)*0.2;


//RECTANGLE OVERLAY
//solid black outline
// float rectangle = drawRect(st, vec2(0.0), vec2(0.9)-0.1);

//low opacity outline
float rectangle = drawRect(st, vec2(0.0), vec2(0.6)-0.1);
rectangle -= drawRect(st, vec2(0.0), vec2(0.8)-0.1);

//full opactity fill of rectangle
// rectangle = drawRect(st, vec2(0.0), vec2(0.8)-0.1);

//MIX/LAYER CIRCLES
//second mix parameter controls color of shape (circle)
color = vec3(mix(color, circleColor, circle));
color = vec3(mix(color, circleColor, circle2));
color = vec3(mix(color, circleColor, circle3));

//second mix parameter controls brightness/opacity of rectangular overlay
color = vec3(mix(color, vec3(u_mouse.x/u_resolution.x), rectangle));

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

breakingpatterns

This is a result of experimentation. I just multiplied the canvas by 12, a line that was formed and commented out following along to class. Adding zeroes to 12 till it was 1.2 million, with no particular reason, just liked the result at 1200000.

My approach is usually pushing/decimating a quality, attribute, variable to see what happens and is saved based on interesting results.

I was trying to make a pattern design that I liked, satisfied with a result I went on to push some numbers to see what some lines of code actually do. Pushed the pattern to the point that it seemed to render blank and return to a result along the way that I liked.

I made a shapes shader but ended up animating it and although very pleased with the tweaked and experimented results it doesn’t open the same as it was made, though sometimes it does?

Throughout this lesson I grasped a lot more understanding of coding shaders. Review and iterations are likely approaches to further learning.


// Author: Joshua Linton
// Title: Breaking Patterns
// Reference: code is derived from following along to Shader Session: 2D Patterns, asynchronous lecture,
// from DIGF3011 - OCADU - Prof. J. Rotsztain

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

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

void main() {
 vec2 st = gl_FragCoord.xy/u_resolution.xy;
 st.x *= u_resolution.x/u_resolution.y;
 
 st *= 1200000.;
 //It is through this line that I have transformed a 64 by 24 grid with internal grids into this result.
 //Multiplying the canvas by 1.2 million.
 //This is quite typical, my immediate experimentation is always to begin adding zeroes to any number in formula.
 
 
 vec2 indices;
 
 st = createGrid( st, vec2(64., 24.), indices);
 
 vec3 color = vec3(0.);
 
 
 if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 0.){
 
 st = createGrid(st, vec2(5.0), indices);
 
 color = vec3(0.006,1.000,0.607);
 
 float b = drawRectangle(st, vec2(0.5), vec2(0.5));
 
 color = mix( color, vec3(0.2, 0.3, 0.9), b);
 
 } else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.0){
 
 color = vec3(0.605,0.942,1.000);
 
 } else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 1.0){
 
 st - createGrid(st, vec2(2.0), indices);
 
 color = vec3(0.000,0.800,0.716);
 
 float d = drawRectangle(st, vec2(0.5), vec2(0.5));
 
 color = mix( color, vec3(0.051,1.000,0.541), d);
 
 } else {
 
 color = vec3(1.000,0.910,0.018);
 }

 gl_FragColor = vec4(color,1.0);
}

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