Splitting webcam image onto 4 textures

Processing Libraries
1

Hello every one,

I’am trying to split a vidéo image from a webcam onto 4 different textures. It works BUT i don’t understand why the original image from the webcam slow down or stop…
is my approach ok ? What did i missed ?

This is only a test. I’am going to split webcam image onto multiples vertex shape… so i want to use the good approach.

Thank you for your help.

import processing.video.*;
Capture cam;

PImage myTextureA, myTextureB, myTextureC, myTextureD;

void setup() {
  size(500, 400, P3D);
  String[] cameras = Capture.list();
  if (cameras.length == 0)
  {
    println("There are no cameras available for capture.");
    exit();
  } else
  {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++)
    {
      println(cameras[i]);
    }
    cam = new Capture(this, 200, 200, cameras[0]);//0
    cam.start();
  }
  myTextureA = new PImage(100, 100);
  myTextureB = new PImage(100, 100);
  myTextureC = new PImage(100, 100);
  myTextureD = new PImage(100, 100);
}

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

void draw() {
  textureMode(NORMAL);

  myTextureA.copy(cam, 0, 0, 100, 100, 0, 0, 100, 100);
  myTextureB.copy(cam, 100, 0, 100, 100, 0, 0, 100, 100);
  myTextureC.copy(cam, 100, 100, 100, 100, 0, 0, 100, 100);
  myTextureD.copy(cam, 0, 100, 100, 100, 0, 0, 100, 100);

  //display original webcam image
  tint(255, 120, 120);
  image(cam, 0, 0, 100, 100);
  noTint();
  
  //spliting the original webcam image onto 4 textures
  /////////////
  ////A - B////
  ////D - C////
  /////////////
  
  //shape A
  beginShape();
  texture(myTextureA);
  vertex(100, 0, 0, 0, 0);
  vertex(300, 0, 0, 1, 0);
  vertex(300, 200, 0, 1, 1);
  vertex(100, 200, 0, 0, 1);
  endShape();

  //shape B
  beginShape();
  texture(myTextureB);
  vertex(300, 0, 0, 0, 0);
  vertex(500, 0, 0, 1, 0);
  vertex(500, 200, 0, 1, 1);
  vertex(300, 200, 0, 0, 1);
  endShape();
  
  //shape C
  beginShape();
  texture(myTextureC);
  vertex(300, 200, 0, 0, 0);
  vertex(500, 200, 0, 1, 0);
  vertex(500, 400, 0, 1, 1);
  vertex(300, 400, 0, 0, 1);
  endShape();
  
  //shape D
  beginShape();
  texture(myTextureD);
  vertex(100, 200, 0, 0, 0);
  vertex(300, 200, 0, 1, 0);
  vertex(300, 400, 0, 1, 1);
  vertex(100, 400, 0, 0, 1);
  endShape();
}

screenCapture-AnimalFromMars

1 Like
2

Hello @animalfrommars,

Using get() with PGraphics did the trick!

Try this:

//Global
PGraphics pg;

// setup()
 pg = createGraphics(200, 200, P3D) ;

// draw()
  pg.beginDraw();
  pg.image(cam, 0, 0);
  pg.endDraw();

  myTextureA = pg.get(0, 0, 100, 100);
  myTextureB = pg.get(100, 0, 100, 100);
  myTextureC = pg.get(100, 100, 100, 100);
  myTextureD = pg.get(0, 100, 100, 100);

Resources:
https://processing.org/tutorials/rendering/#another-drawing-surface

Be sure to read all the related references.

There may be other ways to do this.

:)

1 Like
3

Unless you actually need the 4 images for something else the fastest solution would be to avoid creating them in the first place. You can do this by changing the texture coordinates. Here is shape B

//shape B
  beginShape();
  texture(cam);
// texture coorinates      u    v
  vertex(300, 0, 0,      0.5,   0);
  vertex(500, 0, 0,        1,   0);
  vertex(500, 200, 0,      1, 0.5);
  vertex(300, 200, 0,    0.5, 0.5);
  endShape();
3 Likes
4

Hello,
I’ve tried it.
Cool, it works very good.
Very interesting all thoses examples with PGraphics… it open many possibilities to me.

Thanks a lot.

1 Like
5

Thank you.
I’ve tried it. It works good.
Sure it’s more “economic” if i don’t re-use the Pimages objets created…
But your example is also a good way to experiment graphicals videos with textures.

1 Like
6

Another example for you that creates a shape once in setup() and textures it in draw() in different ways:

import processing.video.*;
Capture cam;

PShape s0, s1;

PImage myTextureA, test;

void setup() 
  {
  size(450, 300, P2D);
    
  String[] cameras = Capture.list();
  if (cameras.length == 0)
    {
    println("There are no cameras available for capture.");
    exit();
    } 
  else
    {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++)
      {
      println(cameras[i]);
      }
    cam = new Capture(this, 200, 200, cameras[0]);
    cam.start();
    }
 
  textureMode(NORMAL);
  
  s0 = createShape();
  s0.beginShape();
  s0.noStroke();
  s0.vertex(0, 0, 0,      0.5,  0.5);
  s0.vertex(100, 0, 0,      1,  0.5);
  s0.vertex(100, 100, 0,    1,    1);
  s0.vertex(0, 100, 0,    0.5,    1);
  s0.endShape();
  
  s1 = createShape();
  s1.beginShape();
  s1.noStroke();
  s1.vertex(0, 0, 0,       0,  0);
  s1.vertex(100, 0, 0,     1,  0);
  s1.vertex(100, 100, 0,   1,  1);
  s1.vertex(0, 100, 0,     0,  1);
  s1.endShape();
  }

void draw() 
  {
  background(255);
  surface.setTitle(str(frameRate));
  image(cam, 0, 0, 200, 200);
  
  myTextureA = get(0, 0, 100, 100);

  s1.setTexture(myTextureA);
  shape(s1, 210, 10);
  
  noFill();
  rect(315, 5, 110, 110);
  s0.setTexture(cam);
  shape(s0, 320, 10);

  test = get(mouseX-50, mouseY-50, 100, 100);

  noFill();
  rect(255, 145, 110, 110);  
  s1.setTexture(test);
  shape(s1, 260, 150);
  }
  
void captureEvent(Capture video) 
  {
  video.read();
  }

In the example above I used get() in the current sketch window.

In my previous example I used PGraphics(); this is useful if you want to work with image offscreen.

Above code:

image

:)

1 Like
7

Ah yes ! Really super !
I’am sure i’am going to explore this way…
Thanks a lot.

1 Like