boilerplate

shader_boilerplate/shader.frag

@@ -0,0 +1,20 @@
+// Title:
+// Author:
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+void main() {
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    st.x *= u_resolution.x/u_resolution.y;
+
+    vec3 color = vec3(0.);
+    color = vec3(st.x,st.y,abs(sin(u_time)));
+
+    gl_FragColor = vec4(color,1.0);
+}

shader_boilerplate/shader.vert

@@ -0,0 +1,16 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+attribute vec3 aPosition;
+
+
+
+void main() {
+  
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 
+
+  gl_Position = positionVec4;
+}

shader_boilerplate/sketch.js

@@ -0,0 +1,31 @@
+let theShader;
+
+function preload(){
+  theShader = loadShader('shader.vert', 'shader.frag');
+}
+
+function setup() {
+  pixelDensity(1);
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  noStroke();
+}
+
+function draw() {  
+  
+  theShader.setUniform('u_resolution', [width, height]);
+theShader.setUniform("u_time", millis() / 1000.0); // we divide millis by 1000 to convert it to seconds
+theShader.setUniform("u_mouse", [mouseX, map(mouseY, 0, height, height, 0)]); // we flip Y so it's oriented properly in our shader
+  
+  
+  // shader() sets the active shader with our shader
+  shader(theShader);
+
+  
+  // rect gives us some geometry on the screen
+  rect(0,0,width, height);
+  
+}
+
+// function windowResized(){
+//   resizeCanvas(windowWidth, windowHeight);
+// }

shader_test/brownian.frag

@@ -0,0 +1,69 @@
+/*
+Iterated Fractional Brownian Motion
+Based on:
+  http://www.iquilezles.org/www/articles/warp/warp.htm
+*/
+
+precision mediump float;
+
+varying vec2 position;
+uniform float time;
+uniform vec2 resolution;
+
+// makes a pseudorandom number between 0 and 1
+float hash(float n) {
+  return fract(sin(n)*93942.234);
+}
+
+// smoothsteps a grid of random numbers at the integers
+float noise(vec2 p) {
+  vec2 w = floor(p);
+  vec2 k = fract(p);
+  k = k*k*(3.-2.*k); // smooth it
+  
+  float n = w.x + w.y*57.;
+  
+  float a = hash(n);
+  float b = hash(n+1.);
+  float c = hash(n+57.);
+  float d = hash(n+58.);
+  
+  return mix(
+    mix(a, b, k.x),
+    mix(c, d, k.x),
+    k.y);
+}
+
+// rotation matrix
+mat2 m = mat2(0.6,0.8,-0.8,0.6);
+
+// fractional brownian motion (i.e. photoshop clouds)
+float fbm(vec2 p) {
+  float f = 0.;
+  f += 0.5000*noise(p); p *= 2.02*m;
+  f += 0.2500*noise(p); p *= 2.01*m;
+  f += 0.1250*noise(p); p *= 2.03*m;
+  f += 0.0625*noise(p);
+  f /= 0.9375;
+  return f;
+}
+
+void main() {
+  // relative coordinates
+  vec2 p = vec2(position*6.)*vec2(resolution.x/resolution.y, 1.);
+  float t = time * .009;
+  
+  // calling fbm on itself
+  vec2 a = vec2(fbm(p+t*3.), fbm(p-t*3.+8.1));
+  vec2 b = vec2(fbm(p+t*4. + a*7. + 3.1), fbm(p-t*4. + a*7. + 91.1));
+  float c = fbm(b*9. + t*20.);
+  
+  // increase contrast
+  c = smoothstep(0.15,0.98,c);
+  
+  // mix in some color
+  vec3 col = vec3(c);
+  col.rb += b*0.17;
+  
+  gl_FragColor = vec4(col, 1.);
+}

shader_test/test.frag

@@ -0,0 +1,36 @@
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+// YUV to RGB matrix
+mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
+                    1.0, -0.39465, -0.58060,
+                    1.0, 2.03211, 0.0);
+
+// RGB to YUV matrix
+mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
+                    -0.09991, -0.33609, 0.43600,
+                    0.615, -0.5586, -0.05639);
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution;
+    vec3 color = vec3(0.0);
+
+    // UV values goes from -1 to 1
+    // So we need to remap st (0.0 to 1.0)
+    st -= 0.5;  // becomes -0.5 to 0.5
+    st *= 2.0;  // becomes -1.0 to 1.0
+
+    // we pass st as the y & z values of
+    // a three dimensional vector to be
+    // properly multiply by a 3x3 matrix
+    color = yuv2rgb * vec3(0.5, st.x, st.y);
+
+    gl_FragColor = vec4(color,1.0);
+}
+