Isolating and translating a row of pixels

beedot

Hi there, I'm trying to create an effect similar to flow by V5MT. My goal/approach right now is to isolate the pixel rows and translate them by a random number. But I'm not sure what exactly the syntax would be to do so.

Dont neccesarily need to achieve the cascading image roll effect. Im trying to just do it with one static image first then maybe will tackle the motion issue.

thanks!

PImage img;

void setup() {
  size(375,500);
  img = loadImage("bust.jpg");

  background(0);
  loadPixels();

  for ( int x = 0; x < width; x++ ) {


    for ( int y = 0; y < height; y++) {

      int loc = x + y * width;

      color c = img.pixels[loc];

      pushMatrix();

      translate(x+random(10),y);
      fill(c);
      noStroke();
      rect(0,0,1,1);

      popMatrix();
    }
  }
}

hamoid

Hi. Translating is slow for this purpose. A shader would do this very fast. Without shaders, maybe something like this?

PImage img;

void setup() {
  // Note: image assumed to be the same size as the display
  size(375, 500);
  img = loadImage("bust.jpg");

  image(img, 0, 0);
}
void draw() {
  loadPixels();

  for (int i=0; i < 1000; i++) {
    int x1 = int(random(width));
    int y1 = int(random(height));
    int p1 = x1 + y1*width;

    int x2 = x1 + int(random(-3, 3));
    int y2 = y1 + int(random(-3, 3));
    int p2 = (pixels.length + x2 + y2*width) % pixels.length;
    
    swap(p1, p2);
  }

  updatePixels();
}
void swap(int p1, int p2) {
  color c1 = pixels[p1];
  color c2 = pixels[p2];

  pixels[p1] = c2;
  pixels[p2] = c1;
}