My shader was pretty simple – I focused on playing with noise in both shape and colour. I really liked the bit of the demo where we applied the noise to the size of the circle, therefore creating a blob, so I wanted to do that. I also used noise to warp my canvas and tiles for my pattern, which I thought created an interesting effect. I was going for an ‘oil’ spill aesthetic, where elements would move independently to create one cohesive image, but could still be seen in the result.
// Author:
// Title:
#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){
st *= grid;
indices = floor(st);
st = fract(st);
return st;
}
float drawCircle(vec2 st, vec2 pos, float size){
float result = 1.0;
result = distance(st, pos);
result = 1.0- step(size, result);
return result;
}
float drawRectangle(vec2 st, vec2 pos, vec2 size ){
float result = 1.0;
vec2 border = (1.0-size)/2.0;
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;
}
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
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);
}
vec3 noiseGradient( vec2 st, float offset, vec2 frequency, float t){
// like random(), simplex noise takes a vec2 argument and returns a float
// because it is deterministic, we need to offset to get different
// values for r, g & b
// we add an additional offset in case we want to call the function mutliple times
// so we continue to generate unique numbers
// isn't modularity great?
// also, we add time to 'animate' the noise
vec3 color;
color.r = snoise( st * frequency + vec2(offset, t)) * 0.5 + 0.5;
color.g = snoise( st * frequency + vec2(200.+offset, t)) * 0.5 + 0.5;
color.b = snoise( st * frequency + vec2(300.+offset, t)) * 0.5 + 0.5;
return color;
}
float map(float value, float min1, float max1, float min2, float max2) {
return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;
vec2 indices = floor(st);
float cs = (snoise(st*4. + vec2(u_time*0.01) )*0.540+0.868)*0.744+sin(u_time)*0.3;
st = createGrid(st, vec2(cs*20.), indices);
vec3 bgColor = noiseGradient(st, -0.280, vec2(0.540,0.780), u_time * 0.2);
vec3 color = bgColor;
//color.r = mod(indices.x, 2.);
//color.rgb += mod(indices.y, 2.);
if (mod(indices.x, 2.) == 0. && mod(indices.y, 2.) == 0.){
//lowerleft
float cs = (snoise(st + vec2(u_time*0.01) )*0.5+0.5)*0.744+0.1;
//color = vec3(1.000,0.786,0.038);
float c = drawCircle(st, vec2(cs*5., cs*10.), cs);
color = mix(color, vec3(0.870,0.201,0.076), c);
float c2 = drawCircle(st, vec2(0.5)*cos(u_time)+0.5, cs);
color = mix(color, vec3(0.040,0.342,0.870), c2);
}
else if (mod(indices.x, 2.) == 0.)
{
//color = vec3(1.000,0.786,0.038);
float cs = (snoise(st + vec2(u_time*0.01) )*0.492+0.5)*0.4+0.1;
float c = drawCircle(st, vec2(1)*fract(u_time)*2., cs);
color = mix(color, vec3(0.087,0.711,0.870), c);
float c2 = drawCircle(st, vec2(0.5)*sin(u_time)+0.5, cs);
color = mix(color, vec3(0.130,0.579,0.870), c2);
}
else if (mod(indices.x, 2.) != 0. && mod(indices.y, 2.) == 0.)
{
//upper left
// color = vec3(1.000,0.786,0.038);
float cs = (snoise(st + vec2(u_time*0.01) )*0.5+0.5)*0.4+0.1;
float c = drawCircle(st, vec2(1)*fract(u_time)*2., cs);
color = mix(color, vec3(0.087,0.711,0.870), c);
float c2 = drawCircle(st, vec2(0.5)*sin(u_time)+0.5, cs);
color = mix(color, vec3(0.018,0.160,0.870), c2);
}
else
{
// color = vec3(1.000,0.786,0.038);
float cs = (snoise(st + vec2(u_time*0.01) )*0.5+0.5)*0.4+0.1;
float c = drawCircle(st, vec2(1)*fract(u_time+0.5)*0.3, cs);
color = mix(color, vec3(0.087,0.711,0.870), c);
float c2 = drawCircle(st, vec2(0.5)*cos(u_time)+0.5, cs);
color = mix(color, vec3(0.111,0.534,0.870), c2);
//upper right
//color = vec3(0.675,0.664,0.411);
}
gl_FragColor = vec4(color,1.0);
}
