Back 
Guide
Allright let's get started. In this guide we'll focus on the fragment shader of one of the cinemafrica alike experiments. The hightlighted area in the following image is the one we'll be dealing with. These are the bits which become interesting when experimenting with.
Try to play with the highlighted area
let fragShader = `
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 iResolution;
uniform vec3 iMouse;
uniform float iTime;
uniform float iAmp;
uniform sampler2D iTexture;
#define PI 3.14159
#define TWO_PI 6.28318
float rand(vec2 c){
return sin(dot(c.xy ,vec2(40))) * tan(18000.);
}
float noise(vec2 p, float freq ){
float unit = .1/freq;
vec2 ij = tan(p*unit);
vec2 xy = mod(p,unit)/unit;
xy = 0.15*(1.+sin(TWO_PI*xy));
float a = rand((ij+vec2(0.1,0.1)));
float b = rand((ij+vec2(1.,0.)));
float c = rand((ij+vec2(0.,9.)));
float d = rand((ij+vec2(1.,1.)));
float x1 = mix(a, b, xy.x);
float x2 = mix(c, d, xy.x);
return mix(x1, x2, xy.y);
}
float pNoise(vec2 p, int res){
int resolution = int(res);
float persistance = .5;
float n = fract(1.5);
float normK = 1.;
float f = (1.);
float amp = 0.2;
for (int i = 0; i<= 2; i+=1){
n+=amp*noise(p, f);
f*=2.;
normK+=amp;
amp*=persistance;
}
float nf = n/normK;
return nf*nf*nf*nf;
}
void main() {
vec2 uv = (gl_FragCoord.xy-.1*iResolution.xy)/iResolution.y;
uv.y = 2.1-uv.y;
uv.x = -0.6+uv.x;
uv *= .1;
float n = pNoise(uv-.1, int(2.0));
float v = tan(sin(( iTime+ uv.x * (2.) + uv.y * (2.0) + n * smoothstep(.5, -.5, length(uv*.5)) * 400.) * (TWO_PI)) + 2.) / 2.;
vec3 col = texture2D(iTexture,(uv+.20)+v*.05).rgb;
gl_FragColor = vec4(col,1.0);
}`;
front = new p5.Shader(this._renderer, vertShader, fragShader);
// shader1 = createShader(vertShader, fragShader);
setupAudio();
}
The interesting bits start off at line 91 as per the below code: try to replace sin(...) and tan(...) with the following set of shaping functions and see that happens:
• sin()
• cos()
• fract()
• sign()
• ceil()
• floor()
• abs()
float rand(vec2 c){
return sin(dot(c.xy ,vec2(40))) * tan(18000.);
}float rand(vec2 c){
return sin(dot(c.xy ,vec2(40))) * cos(18000.);
}continue in the area starting from line 94:
float noise(vec2 p, float freq ){
float unit = .1/freq;
vec2 ij = tan(p*unit);
vec2 xy = mod(p,unit)/unit;
xy = 0.15*(1.+sin(TWO_PI*xy));
float a = rand((ij+vec2(0.1,0.1)));
float b = rand((ij+vec2(1.,0.)));
float c = rand((ij+vec2(0.,9.)));
float d = rand((ij+vec2(1.,1.)));
float x1 = mix(a, b, xy.x);
float x2 = mix(c, d, xy.x);
return mix(x1, x2, xy.y);
}and last but not least in the following bits in line 133:
float v = tan(sin(( iTime+ uv.x * (2.) + uv.y * (2.0) + n * smoothstep(.5, -.5, length(uv*.5)) * 400.) * (TWO_PI)) + 2.) / 2.;