Use a video as a texture and map it to squares/cubes

edited February 2017 in Library Questions

Hello to the Forum! I've been using Processing for quite a while and i really love it. So far i was able to do anything that came up my mind without having to ask here. But now I cannot figure out how to do this:

I want to divide the sketch screen into a set of cubes/squares, e.g. 6x4 and have 1 video to play on all of them, making it look like there is just 1 video playing. Later I will want to move some of the cubes on the z axis while the video is playing for audio-visualization. I was trying to use the video as a texture. While processing was not returning any errors, i could only see a blank screen. I have then tried to work around it with a PImage tex which i load with myMovie.get(0,0, width, height). It was applied as a texture to the cube, but the video would only update every few seconds. I have been searching a lot, but I cannot find any examples for what i want to do. I am not sure if using textures is a a good appoach to this problem. So I am hoping there is somebody here who has a better idea or who can tell me how to properly use a video as a texture and apply it to the cubes.

Answers

  • Answer ✓

    I was trying to use the video as a texture

    PImage tex which i load with myMovie.get(0,0, width, height)

    The Capture class extends PImage, so both statements above are the same.

    It was applied as a texture to the cube, but the video would only update every few seconds.

    What resolution are you using? If you try a lower resolution, does it speed the "show"?

    Kf

  • It's almost impossible to find the bottleneck in code we can't see...

  • edited February 2017

    Thank you for your replies. I am working on it. My fault was not to use the v and u values in vertex. The code below works. Next step will be to figure out how to adress the different squares in order to change their z values. I will try to use PShape[] for that.

    import processing.video.*;
    
    Movie myMovie;
    
    void setup() {
      size(640, 360, P3D);
    
      myMovie = new Movie(this, "transit.mkv");
      myMovie.loop();
    }
    
    
    void draw() {
      fill(0, 0, 255);
      noStroke();
      for (int x=0; x<8; x++) {
        for (int y=0; y<4; y++) {
          beginShape();
          texture(myMovie);
          vertex( width*x/8, height*y/4, 0, width*x/8, height*y/4);
          vertex(width*(x+1)/8, height*y/4, 0, width*(x+1)/8, height*y/4);
          vertex(width*(x+1)/8, height*(y+1)/4, 0, width*(x+1)/8, height*(y+1)/4);
          vertex(width*x/8, height*(y+1)/4, 0, width*x/8, height*(y+1)/4);
          endShape();
        }
      }
    }
    
    void keyPressed() {
      exit();
    }
    
    void movieEvent(Movie m) {
      if (myMovie.available()) m.read();
    }
    
  • code formatted.

    what size (pixels) is the video?

  • it's here and is probably the same size as the screen

    https://github.com/processing/processing-video/blob/master/examples/Movie/Reverse/data/transit.mkv

    (i was worried that you were trying to squeeze a 4k video or something ridiculous onto a 640x360 sketch)

  • edited February 2017

    After i got the effect working i noticed i would also like the squares to be able to grow in size instead of only changing their z position. I have tried to achieve this with scale. After calling scale for a single square and after the vertices are set, i reset it back to the original value, so the subsequent squares are not affected. The square however changes its position due to the scaling. Is there a more suitable method than scale? Or do i need to use transform?

    This is the current code:

    import processing.video.*;
    
    Movie myMovie;
    int rows =8;
    int columns=4;
    int[] squareZ = new int[rows*columns];
    float[] squareScale = new float[rows*columns];
    int whichSquare;
    void setup() {
      size(640, 360, P3D);
    for (int i=0; i<squareZ.length; i++){
     squareZ[i]=0; 
     squareScale[i]=1;
    }
      myMovie = new Movie(this, "transit.mkv");
      myMovie.loop();
    
    }
    
    
    void draw() {
      background(0);
      fill(0, 0, 255);
      noStroke();
      whichSquare=0;
        for (int i=0; i<rows; i++) {
        for (int j=0; j<columns; j++) {
          beginShape();
          texture(myMovie);
          scale(squareScale[whichSquare]);
          vertex( width*i/8, height*j/4, squareZ[whichSquare], width*i/8, height*j/4);
          vertex(width*(i+1)/8, height*j/4, squareZ[whichSquare], width*(i+1)/8, height*j/4);
          vertex(width*(i+1)/8, height*(j+1)/4, squareZ[whichSquare], width*(i+1)/8, height*(j+1)/4);
          vertex(width*i/8, height*(j+1)/4, squareZ[whichSquare], width*i/8, height*(j+1)/4);
          scale(1/squareScale[whichSquare]);
          endShape();
          whichSquare++;
        }
      }
    }
    
    void changeSquareZ(int adr, int zVal){
    squareZ[adr]=zVal;  
    }
    
    void keyPressed() {
      if (key=='r' || key=='R') 
      for(int i=0; i<squareZ.length; i++){
     squareZ[i]=0; 
     squareScale[i]=1;
    }
    if (key=='q' || key=='Q')
      changeSquareZ(int(random(0,rows*columns)), int(random(0, 50)));
    
    if (key=='z' || key=='Z'){
      squareScale[int(random(0,rows*columns))]=random(0.8,1.2);
    }
    }
    
    void movieEvent(Movie m) {
      if (myMovie.available()) m.read();
    }
    
  • I already found an answer to the question from my last post. Instead of using scale I have to alter the first two values of each vertex to grow/shrink the size of single squares.

Sign In or Register to comment.