Slit each individual the time grid that slits from canvas

psamead · January 22, 2022, 3:48pm

Hi my friends,

I am a newbie. Could anybody give me some idea on this topic? There is a primary slit, which divides into grids, then each grid is divided into horizontal pieces.

I try to follow the tutorial on slit scan topic:

but i could not find out a way to loop through secondary divide.
here is the code

import processing.video.*;

// Movie came;
Capture cam;

// PImage setup
int scl = 2;
int hSlit = 5;
int w, h, hsNum;
PImage[] historyImage;
int historyIndex = 0;
int offset = 0;

PImage[] sliceImage;

void setup()
{
  size(640, 480);
  String[] cameras = Capture.list();
  printArray(cameras);
  cam = new Capture(this, cameras[0]);
  cam.start();
  w = width/scl;
  h = height/scl;
  
  hsNum = h/hSlit;
  
  historyImage = new PImage[scl*scl];
  for(int i = 0; i < historyImage.length; i++)
  {
    historyImage[i] = createImage(width, height, RGB);
  }
  background(0);
}

void captureEvent(Capture cam)
{
  cam.read();
}

void draw()
{
  int count = 0;
  for(int i = 0; i < scl; i++)
  {
    for(int j = 0; j < scl; j++)
    {
      int currentIndex = (count+offset)%historyImage.length;
      image(historyImage[currentIndex], i*w, j*h, w, h);
      count++;
      
      // to create a slicing effect in each divided grid      
      sliceImage = new PImage[hsNum];
      for(int k = 0; k < sliceImage.length; k ++)
      {
        sliceImage[k] = new PImage(w, hSlit,RGB);
        int y = k*hSlit;

        sliceImage[k].copy(historyImage[currentIndex], 0, y, w, hSlit, 0, y, w, hSlit);
        image(sliceImage[k], 0, 0);
      }

    }
  }
  offset++;
  historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  historyIndex= (historyIndex+1)%historyImage.length;
}

glv · January 22, 2022, 7:24pm

Hello,

I tinkered with your code a bit:

Code Example

import processing.video.*;

// Movie came;
Capture cam;

// PImage setup
int scl = 2;
int hSlit = 5;
int w, h, hsNum;
PImage[] historyImage;
int historyIndex = 0;
int offset = 0;

PImage[] sliceImage;

void setup()
{
  size(640, 480);
  String[] cameras = Capture.list();
  printArray(cameras);
  cam = new Capture(this, cameras[0]);
  cam.start();
  w = width/scl;
  h = height/scl;
  hsNum = h/hSlit;
  
  println( w, h, hSlit, hsNum, cam.width, cam.height);
  
  historyImage = new PImage[scl*scl];
  for(int i = 0; i < historyImage.length; i++)
    {
    historyImage[i] = createImage(width, height, RGB);
    }
  
  sliceImage = new PImage[4]; 
  delay(1000);
  }

void captureEvent(Capture cam)
  {
  cam.read();
  }

void draw()
  {
  historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  //image(historyImage[0], 0, 0); //ok
  
  int count = 0;
  for(int i = 0; i < scl; i++)
    {
    for(int j = 0; j < scl; j++)
      {
      // This displays all 4!
      int currentIndex = (count+offset)%historyImage.length;
      count = i+j*2;
        
      if (count == 0)
        {
        // to create a slicing effect in each divided grid      
        int k = 0;
        //for(int k = 0; k < sliceImage.length; k++)
          {       
          k = 0;  
          sliceImage[k] = new PImage(w, 50, RGB); 
          sliceImage[k].copy(historyImage[currentIndex], 0, 0, 2*w, 100, 0, 0, w, 100/2);
          image(sliceImage[k], 0, 2*52);
          
          k = 1;
          sliceImage[k] = new PImage(w, 50, RGB);
          sliceImage[k].copy(historyImage[currentIndex], 0, 100, 2*w, 100, 0, 0, w, 100/2);
          image(sliceImage[k], 20, 1*52);
          
          k = 2;
          sliceImage[k] = new PImage(w, 50, RGB);
          sliceImage[k].copy(historyImage[currentIndex], 0, 150, 2*w, 100, 0, 0, w, 100/2);
          image(sliceImage[k], 0, 0*52);
          
          // And so on...
          
          //image(historyImage[currentIndex], i*w, j*h, w, h); //ok
          }
        }
      
      if (count == 1) // This can be 0, 1, 2, 3
        image(historyImage[currentIndex], i*w+w/3, j*h, w/3, h/3);  
      
      if (count == 2) // This can be 0, 1, 2, 3
        image(historyImage[currentIndex], i*w, j*h, w/2, h/2);  
        
      if (count == 3) // This can be 0, 1, 2, 3
        image(historyImage[currentIndex], i*w, j*h, w, h);  
      }
    }
  //offset++;
  //historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  historyIndex= (historyIndex+1)%historyImage.length;
  }

I unrolled the for loop to get a sense of things.
I started with one and added a few… I do this often in my personal code development.
You should be able to work with that and generate a single loop.

It is much easier to slice that rock with code !

:)

psamead · January 23, 2022, 10:09pm

Thanks for your reply and advice, this is very helpful, very appreciated.

This is incredible to have a rock on your desk !!

With your code, I modify a little bit, so it can loop over with different division.

import processing.video.*;

// Movie came;
Capture cam;

// PImage setup
int scl = 2;
int hSlit = 40;
int w, h, hsNum;
PImage[] historyImage;
int historyIndex = 0;
int offset = 0;

PImage[] sliceImage;

void setup()
{
  size(640, 480);
  String[] cameras = Capture.list();
  printArray(cameras);
  cam = new Capture(this, cameras[0]);
  cam.start();
  w = width/scl;
  h = height/scl;
  hsNum = h/hSlit;
  
  //println(w, h, hSlit, hsNum, cam.width, cam.height);
  
  historyImage = new PImage[scl*scl];
  for(int i = 0; i < historyImage.length; i++)
  {
    historyImage[i] = createImage(width, height, RGB);
  }
  sliceImage = new PImage[hsNum];
}

void captureEvent(Capture cam)
{
  cam.read();
}

void draw()
{
  historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  
  int index = 0;
  for(int i = 0; i < scl; i++)
  {
    for(int j = 0; j < scl; j++)
    {
      int currentIndex = (index+offset)%historyImage.length;
      //index = i+j*2;
      //index = i+j*scl;
      
      // to create a slicing effect in each divided grid   
      for(int k = 0; k < sliceImage.length; k++)
      {           
        sliceImage[k] = new PImage(w, hSlit,RGB);
        //sliceImage[k].copy(historyImage[currentIndex], 0, k*hSlit, width, hSlit, 0, 0, w, hSlit-1);
        sliceImage[k].copy(historyImage[currentIndex], 0, k*height/hsNum, width, height/hsNum, 0, 0, w, hSlit-1);
        image(sliceImage[k], i*w, j*h+k*hSlit);        
      }
    }
  }
  
  //offset++;
  //historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  historyIndex = (historyIndex+1)%historyImage.length;
}

but I wonder if it can be achieved the bending time slitscan effect like the one in Daniel’s video.

well, sorrry Daniel, I don’t want to mess up, just for demostration.

glv · January 23, 2022, 11:06pm

Hello @psamead,

You need some sinusoidal offsets over time!

Or cosinusoidal if you prefer.

import processing.video.*;

// Movie came;
Capture cam;

// PImage setup
int scl = 2;
int hSlit = 40;
int w, h, hsNum;
PImage[] historyImage;
int historyIndex = 0;
int offset = 0;

PImage[] sliceImage;

void setup()
{
  size(640, 480);
  String[] cameras = Capture.list();
  printArray(cameras);
  cam = new Capture(this, cameras[0]);
  cam.start();
  w = width/scl;
  h = height/scl;
  hsNum = h/hSlit;
  
  //println(w, h, hSlit, hsNum, cam.width, cam.height);
  
  historyImage = new PImage[scl*scl];
  for(int i = 0; i < historyImage.length; i++)
  {
    historyImage[i] = createImage(width, height, RGB);
  }
  sliceImage = new PImage[hsNum];
}

void captureEvent(Capture cam)
{
  cam.read();
}

void draw()
{
  historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  
  float off = frameCount*TAU/100; //glv
  
  int index = 0;
  for(int i = 0; i < scl; i++)
  {
    for(int j = 0; j < scl; j++)
    {
      int currentIndex = (index+offset)%historyImage.length;
      //index = i+j*2;
      //index = i+j*scl;
      
      // to create a slicing effect in each divided grid   
      for(int k = 0; k < sliceImage.length; k++)
        {           
        float offset = 20*sin(k*TAU/sliceImage.length + off); //glv
        sliceImage[k] = new PImage(w, hSlit,RGB);
        //sliceImage[k].copy(historyImage[currentIndex], 0, k*hSlit, width, hSlit, 0, 0, w, hSlit-1);
        sliceImage[k].copy(historyImage[currentIndex], 0, k*height/hsNum, width, height/hsNum, 0, 0, w, hSlit-1);
        image(sliceImage[k], i*w + offset, j*h+k*hSlit); //glv       
        }
    }
  }
  
  //offset++;
  //historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  historyIndex = (historyIndex+1)%historyImage.length;
}

I did this in a few minutes… but it took a lot of coding over the years and a good foundation in mathematics to get there.

Scrutinize the code and work to understand what I added.

Consider smaller slices…

References:
https://processing.org/tutorials/trig

:)

psamead · January 28, 2022, 8:45pm

Thanks for your reply and kindness on sharing your knowledge and tutorial , much appreciated again.
I believe your coding experience is much more than mine and brilliant.

Slicing rock in such an easy way is brilliant

But I’m still interested on the time displacement effect loll

In Daniel’s video, it seems more on using pushing different sets of images on the display canvas by the their delta time to create this effect, maybe I am wrong here

In the code from the video, here

mport processing.video.*;

Capture  cam;

int w = 5;
int x = 0;
PImage[] history;
int historyIndex = 0;
int offset = 0;

void setup() {
  size(640, 480);
  String[] cameras = Capture.list();
  cam = new Capture(this, cameras[1]);
  history = new PImage[width/w];
  for (int i = 0; i < history.length; i++) {
    history[i] = createImage(width, height, RGB);
  }
  cam.start();
  background(0);
}

void captureEvent(Capture cam) {
  cam.read();
}

void draw() {
  for (int i = 0; i < history.length; i++) {
    int x = i * w;
    int currentIndex = (i + offset) % history.length;
    copy(history[currentIndex], x, 0, w, height, x, 0, w, height);
  }
  offset++;
  history[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  historyIndex = (historyIndex + 1) % history.length;
}

I wonder if this can be applied to my case. I am trying to work on it but it is getting funny result, could you give me some advice to improve it

import processing.video.*;

// Movie came;
Capture cam;

// PImage setup
int scl = 2;
int hSlit = 5;   //40
int w, h, hsNum;
PImage[] historyImage;
int historyIndex = 0;
int offset = 0;
int subHIndex = 0;
int subOffset = 0;

PImage[] sliceImage;

void setup()
{
  size(640, 480);
  String[] cameras = Capture.list();
  printArray(cameras);
  cam = new Capture(this, cameras[0]);
  cam.start();
  w = width/scl;
  h = height/scl;
  hsNum = h/hSlit;
  
  //println(w, h, hSlit, hsNum, cam.width, cam.height);
  
  historyImage = new PImage[scl*scl];
  for(int i = 0; i < historyImage.length; i++)
  {
    historyImage[i] = createImage(width, height, RGB);
  }
  
  sliceImage = new PImage[hsNum];
  for(int i = 0; i < sliceImage.length; i++)
  {
    sliceImage[i] = createImage(w, hSlit,RGB);
  }
  
}

void captureEvent(Capture cam)
{
  cam.read();
}

void draw()
{
  //historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  
  //float off = frameCount*TAU/100;  // glv
  
  int index = 0;
  for(int i = 0; i < scl; i++)
  {
    for(int j = 0; j < scl; j++)
    {
      int currentIndex = (index+offset)%historyImage.length;
      //index = i+j*2;
      index = i+j*scl;
      
      // to create a slicing effect in each divided grid   
      for(int k = 0; k < sliceImage.length; k++)
      {  
        //float offset = 20*sin(k*TAU/sliceImage.length + off);  // glv    
        
        int subIndex =(k+subOffset)%sliceImage.length;
        //sliceImage[k] = new PImage(w, hSlit,RGB);
        println(sliceImage.length);
        sliceImage[subHIndex].copy(historyImage[currentIndex], 0, k*height/hsNum, width, height/hsNum, 0, 0, w, hSlit-1);
        //image(sliceImage[k], i*w, j*h+k*hSlit);
        //copy(historyImage[currentIndex], 0, k*height/hsNum, width, height/hsNum, i*w, j*h+k*hSlit, w, hSlit-1);
        copy(sliceImage[subIndex], 0, 0, w, hSlit-1, i*w, j*h+k*hSlit, w, hSlit-1);
        //image(sliceImage[k], i*w + offset, j*h+k*hSlit);  // glv
        
      }
      subOffset++;
      subHIndex = (subHIndex+1)%sliceImage.length;
    }
  }
  
  offset++;
  historyImage[historyIndex].copy(cam, 0, 0, width, height, 0, 0, width, height);
  historyIndex = (historyIndex+1)%historyImage.length;
}

psamead · January 30, 2022, 3:36pm

Hi I just figure out a way to do the time displacement effect and put it in different windows

import processing.video.*;

// Movie came;
Capture cam;

// PImage setup
int scl = 3;
int y = 0;
int hSlit = 5;   //40 , 5
int w, h, hsNum;
PImage[] arrayImage;
int arrayIndex = 0;
int offset = 0;

void setup()
{
  size(640, 480);
  String[] cameras = Capture.list();
  printArray(cameras);
  cam = new Capture(this, cameras[0]);

  w = width/scl;
  h = height/scl;
  hsNum = h/hSlit;
  
  //println(w, h, hSlit, hsNum, cam.width, cam.height);
  
  //arrayImage = new PImage[scl*scl];
  arrayImage = new PImage[height/hSlit];
  for(int i = 0; i < arrayImage.length; i++)
  {
    arrayImage[i] = createImage(width, height, RGB);
  }
  cam.start();
  background(0);
}

void captureEvent(Capture cam)
{
  cam.read();
}

void draw()
{
  for(int i = 0; i < arrayImage.length; i++)
  {
    int y = i*hSlit;
    int currentIndex = (i+offset)%arrayImage.length;  
    
    for(int j = 0 ; j < scl; j++)
    {
      for(int k = 0; k < scl; k++)
      {
        copy(arrayImage[currentIndex], 0, y, width, hSlit, j*w, k*h+y/scl, w, hSlit);
      }
    }
  }
  offset++;
  arrayImage[arrayIndex].copy(cam, 0, 0, width, height, 0, 0, width, height); 
  arrayIndex = (arrayIndex+1)%arrayImage.length;
}

psamead · January 30, 2022, 3:42pm

Thank you sooooooo much for you help <3

Topic		Replies	Views
Help in Slit-Scan Libraries	2	900	September 29, 2019
Time displacement / slit-scan webcam looping issue Libraries	0	144	August 31, 2023
Slit Scan Variation - Problem with Array Libraries	2	428	March 24, 2019
Grid collage of random PImage Coding Questions	1	130	January 7, 2023
Help with some loops and image processing Coding Questions	2	528	January 17, 2019

Slit each individual the time grid that slits from canvas

Related topics