rotate an array of webcams

francescocamuffo

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);
    }
  }
}

Chrisir

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++;
}
//

jeremydouglass

For more on rotation, see:

• https://processing.org/tutorials/transform2d/
• https://processing.org/reference/rotate_.html

Chrisir

PushMatrix and popMatrix basically isolates code sections so that an independent rotation is possible

Chrisir

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 }

francescocamuffo

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.

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();
    }
  }
}

jeremydouglass

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...?

Chrisir

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

Chrisir

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++;
}