rotate an array of webcams

Hi guys, Thanks for having me in this forum. I am a complete beginner in Processing and I hope I'm in the right category to ask this question. I'm working on a sketch where I want to rotate 90° an array of Webcam inputs. At the moment, to keep it simple, I'm using the default webcam from my MacBook Pro (Retina, 15-inch, Mid 2015), running macOS High Sierra 10.13.2.

I guess I don't really understand how rotate(), translate(), pushMatrix() and popMatrix() work. I tried to use them but I always get weird results.

Here is the code:

import processing.video.*;
Capture webcam;
int[] xpos = {100, 300, 500, 700, 900};




void setup() {
  size(1280, 480);
  webcam = new Capture(this, 640, 480);  
  webcam.start();
  background (100, 0, 0);
}

void draw() {
  if (webcam.available()) {
    webcam.read();


    for (int i =0; i<xpos.length; i++) {

      image(webcam, xpos[i], 0, 160, 90);

      //HERE is where the issue starts. Please Uncomment the following code to check the issue.
      //translate(width/2, height/2);
      //rotate(radians(90));
      //image( webcam, 0, 0);
    }
  }
}

Answers

  • edited March 2018 Answer ✓

    it's tricky

    every rotation is on the origin, so this is correct:

        translate(width/2, height/2);
        rotate(radians(a));
    

    Ugly Corner Rotation

    But it's for example often that an image rotates around a corner and not around its center.

    to avoid this say

    image(img, 
        img.width/2,img.height/2); 
    

    where you place the center of the image on the origin so it rotates around its center

    Chrisir

    int[] xpos = {100, 300, 500, 700, 900};
    int a;   // angle 
    
    void setup() {
      size(1280, 480);
      background (100, 0, 0);
    }
    
    void draw() {
    
      background (100, 0, 0);
    
      for (int i =0; i<xpos.length; i++) {
    
        text("webcam", xpos[i], 0, 160, 90);
    
        //HERE is where the issue starts. 
        pushMatrix(); 
        translate(width/2, height/2);
        rotate(radians(a));
        text("webcam", -textWidth("webcam")/2, 0);
        popMatrix();
      }
      a++;
    }
    //
    
  • PushMatrix and popMatrix basically isolates code sections so that an independent rotation is possible

  • My code is a bit wrong because the pushMatrix popMatrix section doesn’t really belong inside the for loop since it doesn’t change during the for loop. It can just be placed after the for loop }

  • Hi @Chrisir and @jeremydouglass, Thanks for the quick reply.

    I was able to turn the webcam 90°but I still haven't achieved my goal of having them in the same raw. right now they piled in column (we can only see two of them, the rest are off-page). I'm going to upload an example of how It should look like.

    Screen Shot 2018-03-27 at 10.31.22 AM

    Here is the code:

    import processing.video.*;
    Capture webcam;
    int[] xpos = {100, 300, 500, 700, 900};
    
    
    
    
    
    void setup() {
      size(1280, 480);
      webcam = new Capture(this, 640, 480);  
      webcam.start();
      background (100, 0, 0);
    }
    
    void draw() {
    
    
      if (webcam.available()) {
        webcam.read();
    
    
        for (int i =0; i<xpos.length; i++) {
    
    
    
          pushMatrix(); 
          translate(width/16, height/9);
          rotate(radians(90));
          image(webcam, xpos[i], 0, 160, 90);
          popMatrix();
        }
      }
    }
    
  • I still haven't achieved my goal of having them in the same raw

    What does this mean? I don't know what "the same raw" is...?

  • edited March 2018

    He means same row

    Your xpos[i] is in the wrong place

    Put it 2 lines up into translate

    2nd parameter of image in line 30 should be -image.width()/2 I guess, if this works or just -80

  • int[] xpos = {100, 300, 500, 700, 900};
    
    int a; 
    
    
    void setup() {
      size(1280, 480);
      background (100, 0, 0);
    }
    
    void draw() {
    
      background (100, 0, 0);
    
    
      for (int i =0; i<xpos.length; i++) {
    
        pushMatrix(); 
        translate(xpos[i], height/9);
        rotate(radians(a));
        text("webcam", 
          -textWidth("webcam")/2, 0, 
          160, 90);
        popMatrix();
      }
      a++;
    }
    
Sign In or Register to comment.