# Slit-scan effect

**URL:** <https://discourse.processing.org/t/slit-scan-effect/22036>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [June 21, 2020, 12:27pm UTC](https://discourse.processing.org/t/slit-scan-effect/22036 "2020-06-21T12:27:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexandruchitu](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@alexandruchitu](https://discourse.processing.org/u/alexandruchitu)\
**Post date:** [June 21, 2020, 12:27pm UTC](https://discourse.processing.org/t/slit-scan-effect/22036/1 "2020-06-21T12:27:12Z")

</div>

Hello !

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

 ![Untitled-1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8dcc58876eddd6f7f3843c92a396ab981b54ae0c.jpeg)

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 = y_window\_width + draw\_position\_x;  
int getPixelIndex = y_video\_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 :

> **[Untitled-2](https://ibb.co/dWQ6QrV)**
>
> Image Untitled-2 hosted in ImgBB

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

> **[Untitled-3](https://ibb.co/GHv4KMz)**
>
> Image Untitled-3 hosted in ImgBB

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

I will appreciate very much your help !

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 22, 2020, 12:53am UTC](https://discourse.processing.org/t/slit-scan-effect/22036/2 "2020-06-22T00:53:17Z")

</div>

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

```java
//===========================================================================
// 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;
}

```

---

<div class="post-metadata">

**Author:** ![alexandruchitu](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@alexandruchitu](https://discourse.processing.org/u/alexandruchitu)\
**Post date:** [June 22, 2020, 11:58am UTC](https://discourse.processing.org/t/slit-scan-effect/22036/3 "2020-06-22T11:58:41Z")

</div>

Thank you first for your help !

Now the result is this :

 ![Untitled-4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3f2fc150c6e2ae76f67d3ac4785fae5a0dd348db.jpeg)

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

Thanks !!!

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 23, 2020, 12:35pm UTC](https://discourse.processing.org/t/slit-scan-effect/22036/4 "2020-06-23T12:35:50Z")

</div>

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](https://processing.org/reference/PGraphics.html) 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](https://processing.org/reference/image_.html) 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