add metaballs example

Author: monkstone

image_filtering/data/gaussianBlur.glsl

@@ -0,0 +1,59 @@
+// Adapted from:
+// <a href="http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html" target="_blank" rel="nofollow">http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html</a>
+ 
+#ifdef GL_ES
+precision mediump float;
+precision mediump int;
+#endif
+ 
+#define PROCESSING_TEXTURE_SHADER
+ 
+uniform sampler2D texture;
+ 
+// The inverse of the texture dimensions along X and Y
+uniform vec2 texOffset;
+ 
+varying vec4 vertColor;
+varying vec4 vertTexCoord;
+ 
+uniform int kernelSize;       
+uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
+uniform float strength;     // The strength value for the gaussian function: higher value means more blur
+                            // A good value for 9x9 is around 3 to 5
+                            // A good value for 7x7 is around 2.5 to 4
+                            // A good value for 5x5 is around 2 to 3.5
+                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>
+ 
+const float pi = 3.14159265;
+ 
+void main() {  
+  float numBlurPixelsPerSide = float(kernelSize / 2); 
+ 
+  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+ 
+  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
+  vec3 incrementalGaussian;
+  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * strength);
+  incrementalGaussian.y = exp(-0.5 / (strength * strength));
+  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;
+ 
+  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
+  float coefficientSum = 0.0;
+ 
+  // Take the central sample first...
+  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
+  coefficientSum += incrementalGaussian.x;
+  incrementalGaussian.xy *= incrementalGaussian.yz;
+ 
+  // Go through the remaining 8 vertical samples (4 on each side of the center)
+  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
+    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
+                          blurMultiplyVec) * incrementalGaussian.x;         
+    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
+                          blurMultiplyVec) * incrementalGaussian.x;         
+    coefficientSum += 2.0 * incrementalGaussian.x;
+    incrementalGaussian.xy *= incrementalGaussian.yz;
+  }
+ 
+  gl_FragColor = avgValue / coefficientSum;
+}

image_filtering/data/threshold.glsl

@@ -0,0 +1,22 @@
+#ifdef GL_ES
+precision mediump float;
+precision mediump int;
+#endif
+
+#define PROCESSING_TEXTURE_SHADER
+
+uniform sampler2D texture;
+varying vec4 vertTexCoord;
+
+uniform float threshold;
+uniform float antialiasing;
+
+void main(void) {
+  
+  vec2 coord = vertTexCoord.st;
+
+  // Get the color of the pixel at our fragment's coordinates
+  vec4 pixel = texture2D( texture, coord );
+
+  gl_FragColor = vec4(smoothstep(threshold - antialiasing, threshold + antialiasing, pixel.r));
+}

image_filtering/metaballs.rb

@@ -0,0 +1,39 @@
+
+# Note: this filter is meant to be used on black & white images
+
+# The 2D metaball filter is a combination of blur and threshold
+attr_reader :gaussian_blur, :threshold
+
+def setup
+  size(500, 500, P2D)    
+  # Load and configure the filters
+  @gaussian_blur = load_shader('gaussianBlur.glsl')
+  gaussian_blur.set('kernelSize', 32) # How big is the sampling kernel?
+  gaussian_blur.set('strength', 7.0) # How strong is the blur?  
+  @threshold = load_shader('threshold.glsl')
+  threshold.set('threshold', 0.5)
+  threshold.set('antialiasing', 0.05) # values between 0.00 and 0.10 work best  
+end
+
+def draw   
+  background(255)  
+  # Draw some moving circles
+  translate(width / 2,height / 2)
+  no_stroke
+  fill(0)
+  ellipse(0, 0, 100, 100)
+  x = map1d(sin(frame_count * 0.01), (-1.0..1.0), (-120.0..120.0))
+  ellipse(x, 0, 100, 100)
+  ellipse(-x, 0, 100, 100)
+  y = map1d(sin(frame_count * 0.01), (-1.0..1.0), (-120.0..120.0))
+  ellipse(0, y, 100, 100)
+  ellipse(0, -y, 100, 100)  
+  # Vertical blur pass
+  gaussian_blur.set('horizontalPass', 0)
+  filter(gaussian_blur)  
+  # Horizontal blur pass
+  gaussian_blur.set('horizontalPass', 1)
+  filter(gaussian_blur)  
+  filter(threshold)  
+end
+