Slit-scan effect

Processing Libraries
1

Hello !

I’m a newbie :slight_smile:
I want to make this effect with a video I already shoot

Untitled-1
Untitled-1737×557 214 KB

I try with this code :
import processing.video.*;

Movie myVideo;
int video_width = 3840;
int video_height = 2160;
int video_slice_x = video_width/2;
int window_width = 3840;
int window_height = video_height;
int draw_position_x = 0;
boolean newFrame = false;

void setup() {
myVideo = new Movie(this, “nane.mov”);
size(3840, 2160);
background(0);
myVideo.loop();
}

void movieEvent(Movie myMovie) {
myMovie.read();
newFrame = true;
}

void draw() {
if (newFrame) {
loadPixels();
for (int y=0; y<window_height; y++){
int setPixelIndex = ywindow_width + draw_position_x;
int getPixelIndex = yvideo_width + video_slice_x;
pixels[setPixelIndex] = myVideo.pixels[getPixelIndex];
}
updatePixels();

draw_position_x++;
if (draw_position_x >= window_width) {
  exit();
}
newFrame = false;

}
}

But the final video render looks like this :

My unedited video looks like this ( the man is walking from left to right )


For sure I’m doing something noob, tell me what is my mistake !

I will appreciate very much your help !

2

I remove all your redundant width and height variables as I like to keep it simple. I make my sketches the same size as my video input and I use Processing’s internal width and height references in my code.

I added the option to skip every second frame. You can change it so to skip more frames if you want or remove that if you don’t find it useful. Finally, I find you do not need to call loadPixels/updatePixels if you are grabbing image sections like I did here.

Kf

//===========================================================================
// IMPORTS:
import processing.video.*;

//===========================================================================
// FINAL FIELDS:


//===========================================================================
// GLOBAL VARIABLES:
Movie myVideo;
boolean newFrame = false;
int draw_position_x = 0;


//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:
void setup() {
  size(640, 360);
  myVideo = new Movie(this, "transit.mov");  
  background(33);
  myVideo.loop();

}

void draw() {
  //image(myVideo,0,0);

  //Update sketch title every 30 frames
  if (frameCount%30==0)
    surface.setTitle("FrameCount: "+frameCount);

  //If no new data, skip draw
  if (!newFrame)
    return;

  //Draw every other frame
  if (frameCount%2!=0)
    return;

  //Get column data from center of vide, 1 pixel wide, full image height
  //REFERENCE: https://processing.org/reference/PImage_get_.html
  PImage ySlit = myVideo.get(width/2, 0, 1, height);
  
  //Draw slitImage on top of sketch, update x stepper
  image(ySlit,draw_position_x++,0);


  newFrame=false;

  //Step updating main sketch if stepper reach end of canvas
  if (draw_position_x >= width) {
    noLoop();
  }
}

void movieEvent(Movie myMovie) {
  myMovie.read();
  newFrame = true;
}
3

Thank you first for your help !

Now the result is this :

Untitled-4
Untitled-41962×1137 503 KB

How do I do for that area of copy to be on a large scale? Like in the photo posted above for example.

Thanks !!!

4

It is not clear what you are requesting. Do you want to stretch this? Instead of drawing directly to the sketch, you could draw on a PGraphics object. When the movie is executed to completion, you can draw the PGraphics into the sketch using image() with 5 parameters instead of 3. See here in the reference.

Another approach is that instead of taking a slit of 1 pixel wide, you can make it wider. The width selection will depend on the sketch width output (in your case, 3840) and the number of frames in your source movie. However, I think you want the first approach.

Kf