Okay, here you go. I use a graphics buffer (PGraphics) to draw the text onto. A graphics buffer is exactly like sketch surface you’re drawing on, but it’s “virtual” in a sense that you don’t see it until you display it like an image. If I didn’t use that and drew the text directly in the sketch window, the shader would act funny for some reason. This way the shader doesn’t see my text directly, but rather just as a pre-rendered image and it works great.
Save the following code as blurShader.glsl.
This shader is a modified version of Gene Kogan’s shader that you can find HERE.
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
#define PROCESSING_TEXTURE_SHADER
uniform sampler2D texture;
uniform vec2 texOffset;
uniform vec2 resolution;
varying vec4 vertColor;
varying vec4 vertTexCoord;
uniform float dx, dy;
uniform int blurSize;
const float pi = 3.14159265;
void main() {
float xu = gl_FragCoord.x / resolution.x;
float yu = gl_FragCoord.y / resolution.y;
float numBlurPixelsPerSide = float(blurSize / 2);
float ssigma = blurSize / 4;
vec2 blurMultiplyVec = vec2(dx, dy);
vec3 incrementalGaussian;
incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * ssigma);
incrementalGaussian.y = exp(-0.5 / (ssigma * ssigma));
incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;
vec4 avgValue = vec4(0.0, 0.0, 0.0, 1.0);
float coefficientSum = 0.0;
avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
coefficientSum += incrementalGaussian.x;
incrementalGaussian.xy *= incrementalGaussian.yz;
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;
}
And here’s the Processing code.
To achieve different results, change the blurSize to change the amount of blur and the blurAngle to control the direction of the motion blur (radians, not degrees!)
PFont font;
PShader blurShader;
PGraphics pgText;
void setup(){
size(600, 400, P2D);
noLoop();
pgText = createGraphics(600, 400, P2D);
font = createFont("Helvetica", 100);
// define blur shader parameters
blurShader = loadShader("blurShader.glsl");
PVector blurVec = new PVector(1, 0);
int blurSize = 31;
float blurAngle = 0;
blurVec.rotate(blurAngle);
blurShader.set("blurSize", blurSize);
blurShader.set("dx", blurVec.x);
blurShader.set("dy", blurVec.y);
// Draw the text on the pgText buffer.
pgText.beginDraw();
pgText.clear();
pgText.textAlign(CENTER, CENTER);
pgText.background(19);
pgText.textFont(font);
pgText.textSize(100);
pgText.noStroke();
pgText.fill(244);
pgText.text("HELVETE", 300, 200);
pgText.endDraw();
}
void draw(){
// use the blur shader
shader(blurShader);
// display the pgText surface to see the text
image(pgText, 0, 0);
}
