Help on video effect

Processing Libraries
1

Hi everyone. I am new to coding.
This “effect” is almost done in terms of the overall look, but I can’t understand how to smooth out the pixelated lines (examples below).
There’s a difference between P2D/P3D, but it’s not enough. pixelDensity() got me to a better place, but the lines are still broken as you’ll see.

I am aware that this might not be the best way to produce this effect – I am open to learning other ways if necessary.

Here is the code:

//////////////////////////////////////////////////////////////////////////

import processing.video.*;
import processing.video.Movie;
Movie myMovie;

int cellSize = 1;
int cols, rows;

void setup() {
  size(1280, 720, P3D);
  cols = width / cellSize;
  rows = height / cellSize;
  colorMode(RGB, 255, 255, 255, 255);
  myMovie = new Movie(this, "movie.mp4");
  myMovie.loop();
  loadPixels();
  pixelDensity(2);
}

void draw() {
  background(0);

  if (myMovie.available()) {
    myMovie.read();
    myMovie.loadPixels();

    // Begin loop for columns
    for (int i = 0; i < cols; i++) {
      // Begin loop for rows
      for (int j = 0; j < rows; j++) {      
        // Where are we, pixel-wise?        
        int x = i*cellSize;
        int y = j*cellSize;
        int loc = (myMovie.width - x - 1) + y*myMovie.width; // Reversing x to mirror the image

        float r, g, b;

        r = red(myMovie.pixels[loc]);
        g = green(myMovie.pixels[loc]);
        b = blue(myMovie.pixels[loc]);
        // Make a new color with an alpha component

        float adjustBrightness = 1;
        r *= adjustBrightness;
        g *= adjustBrightness;
        b *= adjustBrightness;

        r = constrain(r, 0, 255);
        g = constrain(g, 0, 255);
        b = constrain(b, 0, 255);  

        color NewCol = color(r, g, b);
        pixels[loc] = NewCol;

        // Code for drawing a single rect
        // Using translate in order for rotation to work properly
        pushMatrix();
        translate(x+cellSize/2, y+cellSize/2);

        // Rotation formula based on brightness
        rotate((2 * PI * brightness(NewCol) / 255.0));
        rectMode(CENTER);       
        noFill();
        stroke(NewCol);
        strokeWeight(.1);     
        rect(0, 0, pmouseX, pmouseY);
        popMatrix();
      }
    }
  }
}

//////////////////////////////////////////////////////////////////////////

P2D P3D with pixelDensity

2

Just to share, helped me to get better results.
I found this:

"Thing get a bit better if you add complications like:

  1. randomly sample which pixels get to move each turn
  2. let pixels swap at different distances depending on how far they are from their goal, with further pixels swapping farther
  3. add random jitter to pixel swapping so that they don’t always head straight for the goal

Approaches like these can things can break up log-jams and create more fluid outcomes."

Basically, I just applied some randomness to the pixels and the artefacts went away.
Maybe it is not a solution on its own but it did the trick.

Thank you.

1 Like