Processing Motion Blur Effect

williamw

Hi guys, This is my code so far. I'm supposed to blur a basketball so it looks like it has motion. However, I have no idea where the error in my code is and how I'm supposed to fix it. When I run the code, it just show a blank white screen. Thanks!

int x = 0;
int y = 0;
PImage img;
float[][] blur = { { 0, 0, 0 } , 
                     { 1.0/3.0, 1.0/3.0, 1.0/3.0 } ,
                     { 0, 0, 0 } } ;
//float [][] gFilter = matrix;
void setup() {
  size(600,600);
  background(255);
  img = loadImage("BasketballBorder.png");
  frameRate(60);


}

void draw() {
  image(img, x, 0);

  float [][] gFilter = blur;
  int matrixsize = gFilter.length;

  loadPixels();

  //Code
  for (int x = 0; x<img.width; x++) {
    for (int y = 0; y<img.width; y++) {
      color c = convolution(x,y,blur,matrixsize,img);
      int loc = x + y*img.width;
      pixels[loc] = c;
    }
  }
  updatePixels();

}


color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
{
  float rtotal=0.0;
  float gtotal=0.0;
  float btotal=0.0;
  int offset=matrixsize/2;


  for (int i=0; i<matrixsize; i++) {
    for (int j=0; j<matrixsize; j++) {
      int xloc = x + i-offset;
      int yloc = y + j-offset;
      int loc = xloc + img.width*yloc;

      loc = constrain(loc, 0, img.pixels.length-1);

      rtotal += (red(img.pixels[loc]) * matrix[i][j]); //<<<<<This is where processing points out the error in my code
      gtotal += (green(img.pixels[loc]) * matrix[i][j]);
      btotal += (blue(img.pixels[loc]) * matrix[i][j]);
    }
  }

  // Make sure RGB is within range
  rtotal = constrain(rtotal, 0, 255);
  gtotal = constrain(gtotal, 0, 255);
  btotal = constrain(btotal, 0, 255);

  // Return the resulting color
  return color(rtotal, gtotal, btotal);
}

Poersch

In order to manipulate your image's pixels[] array you have to call your image's loadPixels()/updatePixels. corrected your code and commented the incorrect lines:

int x = 0;
int y = 0;
PImage img;
float[][] blur = { { 0, 0, 0 }, { 1.0/3.0, 1.0/3.0, 1.0/3.0 }, { 0, 0, 0 } };

void setup() {
  size(600, 600);
  background(#ffffff);
  img = loadImage("http" + "://forum.processing.org/two/uploads/imageupload/549/25QR206HDUK3.png");
}

void draw() {
  image(img, x, 0);
  float [][] gFilter = blur;
  int matrixsize = gFilter.length;
  img.loadPixels(); // loadPixels();
  for(int x = 0; x < img.width; x++)
    for(int y = 0; y < img.height; y++) { // for(int y = 0; y < img.width; y++) {
      color c = convolution(x, y, blur, matrixsize, img);
      int loc = x + y * img.width;
      img.pixels[loc] = c;
    }
  img.updatePixels(); // updatePixels();
}


color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img) {
  float rtotal = 0.0;
  float gtotal = 0.0;
  float btotal = 0.0;
  int offset = matrixsize / 2;
  for(int i = 0; i < matrixsize; i++)
    for(int j = 0; j < matrixsize; j++) {
      int xloc = x + i - offset;
      int yloc = y + j - offset;
      int loc = xloc + yloc * img.width;
      loc = constrain(loc, 0, img.pixels.length - 1);
      rtotal +=   red(img.pixels[loc]) * matrix[i][j];
      gtotal += green(img.pixels[loc]) * matrix[i][j];
      btotal +=  blue(img.pixels[loc]) * matrix[i][j];
    }
  rtotal = constrain(rtotal, 0, 255);
  gtotal = constrain(gtotal, 0, 255);
  btotal = constrain(btotal, 0, 255);
  return color(rtotal, gtotal, btotal);
}

And for anyone who is interested a fast shader based version:

PImage someImage;
PShader dirBlur;

void setup() {
    someImage = loadImage("http" + "://forum.processing.org/two/uploads/imageupload/549/25QR206HDUK3.png");
    size(someImage.width, someImage.height, P2D);
    dirBlur = loadShader("dirBlur.frag");
}

void draw(){
    image(someImage, 0, 0);
    float angle = atan2(mouseX - width / 2, height / 2 - mouseY);
    dirBlur.set("blurOffset", 1.0 / someImage.width * sin(angle), 1.0 / someImage.height * cos(angle));
    for(int n = 0; n < 8; n++)
        filter(dirBlur);
}

And the dirBlur.frag (should be in your project's data folder):

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;
uniform vec2 blurOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
    vec4 sum = vec4(0.0);
    sum += texture2D(texture, vec2(vertTexCoord.x - 7.5 * blurOffset.x, vertTexCoord.y - 7.5 * blurOffset.y)) * 0.05;
    sum += texture2D(texture, vec2(vertTexCoord.x - 5.5 * blurOffset.x, vertTexCoord.y - 5.5 * blurOffset.y)) * 0.09;
    sum += texture2D(texture, vec2(vertTexCoord.x - 3.5 * blurOffset.x, vertTexCoord.y - 3.5 * blurOffset.y)) * 0.12;
    sum += texture2D(texture, vec2(vertTexCoord.x - 1.5 * blurOffset.x, vertTexCoord.y - 1.5 * blurOffset.y)) * 0.155;
    sum += texture2D(texture, vec2(vertTexCoord.x, vertTexCoord.y)) * 0.17;
    sum += texture2D(texture, vec2(vertTexCoord.x + 1.5 * blurOffset.x, vertTexCoord.y + 1.5 * blurOffset.y)) * 0.155;
    sum += texture2D(texture, vec2(vertTexCoord.x + 3.5 * blurOffset.x, vertTexCoord.y + 3.5 * blurOffset.y)) * 0.12;
    sum += texture2D(texture, vec2(vertTexCoord.x + 5.5 * blurOffset.x, vertTexCoord.y + 5.5 * blurOffset.y)) * 0.09;
    sum += texture2D(texture, vec2(vertTexCoord.x + 7.5 * blurOffset.x, vertTexCoord.y + 7.5 * blurOffset.y)) * 0.05;
    gl_FragColor = sum;
}