# Mapping a video texture on PShape

**URL:** <https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014>\
**Category:** Libraries\
**Created:** [February 22, 2023, 10:25pm UTC](https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014 "2023-02-22T22:25:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![animalfrommars](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/animalfrommars/32/18060_2.png) [@animalfrommars](https://discourse.processing.org/u/animalfrommars)\
**Post date:** [February 22, 2023, 10:25pm UTC](https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014/1 "2023-02-22T22:25:32Z")

</div>

Hello,

I’m trying to map a video image from a webcam on a PShape.  
It seems that colors are changing but the video image don’t appear…  
See my code below.  
Thank you for your help.

```auto
import processing.video.*;
import processing.opengl.*;
import peasy.PeasyCam;

int nbObjets = 10;
int nbVectors = nbObjets*4;
PVector[] v = new PVector[nbVectors];
PImage monImage;

color GREEN = color(0, 255, 0);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);

PeasyCam cam;
Capture video;
MyShape [] tabMyShape = new MyShape[nbObjets];

void setup() {
  size(600, 600, P3D);
  cam = new PeasyCam(this, 400);
  for (int i=0; i<nbVectors; i++) {
    v[i] = new PVector(int(random(width)), int(random(height)), int(random(-1000, 1000)));
  }
  for (int i=0; i<nbObjets; i++) {
    tabMyShape[i] = new MyShape(GREEN, BLACK, v, i+1);
  }
  video = new Capture(this, 320, 240);
  video.start();
  //frameRate(20);
}

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

void draw() {
  background(0);
  for (int i = 0; i < nbVectors; i++) {
    v[i].x += random(-10, 10);
    v[i].y += random(-10, 10);
    v[i].z += random(-10, 10);
  }
  for (int i=0; i<nbObjets; i++) {
    //tabMyShape[i].shapeColor = color(random(255), random(255));
    tabMyShape[i].strokeColor = color(255);
    tabMyShape[i].display(video);
  }
}

```

```auto
class MyShape {
  color shapeColor;
  color strokeColor;
  int index;
  int U, V;
  //Constructor
  MyShape(color inColor, color inStroke, PVector[] vectorArray, int unIndex) {
    shapeColor = inColor;
    strokeColor = inStroke;
    v = vectorArray;
    index = unIndex;
  }

  void display(PImage uneVideo) {
    strokeWeight(int(random(4)));
    //fill(shapeColor);
    stroke(strokeColor);
    beginShape();
    textureMode(NORMAL);
    texture(uneVideo);
    tint(255, 60);//transparency
    for (int i=0; i<4; i++) {//mapping video image on the 4 corners
      switch(i) {
      case 0 :
        U = 0 ;
        V = 0;
      case 1 :
        U = 1;
        V = 0;
      case 2 :
        U = 1;
        V = 1;
      case 3 :
        U = 0;
        V = 1;
      }
      texture(uneVideo);//texture video
      vertex(v[i+(4*(index-1))].x, v[i+(4*(index-1))].y, v[i+(4*(index-1))].z, U, V);
    }
    endShape(CLOSE);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 22, 2023, 10:28pm UTC](https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014/2 "2023-02-22T22:28:43Z")

</div>

Hello @animalfrommars,

A working example I wrote recently:

```auto
import processing.video.*;

Capture cam;

PShape s;

void setup() 
  {
  size(640, 480, 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]);
      }
    
    // The camera can be initialized directly using an 
    // element from the array returned by list():
    cam = new Capture(this, cameras[0]);
    cam.start();     
    }
  
  textureMode(NORMAL);
  shapeMode(CENTER);
  
  s = createShape();
  s.beginShape();
  s.texture(cam);
  s.vertex(40, 80, 0, 0);
  s.vertex(320, 20, 1, 0);
  s.vertex(380, 360, 1, 1);
  s.vertex(160, 380, 0, 1);
  s.endShape();  
  }

void draw() 
  {
  background(255);
  translate(width/2, height/2);
    
  if (cam.available() == true) 
    {
    cam.read();
    }
    
  shape(s, 0, 0);
  }

```

Does the above work at your end?

I later mapped this to all the faces of a cube:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/9/b988673ba0024c478814233adf1c0e98c92c0c0f.jpeg)

This is the book on cam:  
[http://www.generative-gestaltung.de](http://www.generative-gestaltung.de)

`:)`

---

<div class="post-metadata">

**Author:** ![animalfrommars](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/animalfrommars/32/18060_2.png) [@animalfrommars](https://discourse.processing.org/u/animalfrommars)\
**Post date:** [February 22, 2023, 10:38pm UTC](https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014/3 "2023-02-22T22:38:30Z")

</div>

Thanks @glv  
I have tried your code, it works very good.  
Iwant to correct mine… and for the moment it doesn’t work… as yours…  
I wonder if it is because i didn’t use the “createShape” method ?

Yes beautifull book, i got it.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 22, 2023, 11:08pm UTC](https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014/4 "2023-02-22T23:08:32Z")

</div>

Hello,

This works equally well:

```auto
import processing.video.*;

Capture cam;

PShape s;

void setup() 
  {
  size(500, 500, 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]);
      }
    
    // The camera can be initialized directly using an 
    // element from the array returned by list():
    cam = new Capture(this, cameras[0]);
    cam.start();     
    }
  
  textureMode(NORMAL);
  shapeMode(CENTER); 
  }

void draw() 
  {
  background(255);
    
  if (cam.available() == true) 
    {
    cam.read();
    }
  
  beginShape();
  texture(cam);
  vertex(100, 100 + random(-20, 20), 0, 0);
  vertex(400, 100, 1, 0);
  vertex(400, 400, 1, 1);
  vertex(100, 400, 0, 1);
  endShape();    
  }

```

I suggest scaling back your code (without and then with a class) to a simple example, get that working and then build on that. If not working post your simplified code when asking for help.

Reference:  
[https://stackoverflow.com/help/minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example)

Your code works with my shape in place of your [jitterbug](https://en.wikipedia.org/wiki/Jitterbug).  
No PeasyCam for testing.

Output of my code and your code with my shape (last example) in place of yours:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/2/f237c2e6193e5e2f3ac410c56bfdfbfd14c4519c.jpeg)

References:  
[https://processing.org/reference/libraries/video/Capture.html](https://processing.org/reference/libraries/video/Capture.html)  
[https://processing.org/reference/texture\_.html](https://processing.org/reference/texture_.html)

`:)`

---

<div class="post-metadata">

**Author:** ![animalfrommars](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/animalfrommars/32/18060_2.png) [@animalfrommars](https://discourse.processing.org/u/animalfrommars)\
**Post date:** [February 23, 2023, 4:35pm UTC](https://discourse.processing.org/t/mapping-a-video-texture-on-pshape/41014/5 "2023-02-23T16:35:13Z")

</div>

Hello,  
Thanks again for your help.  
I re-did it from scratch as you advice to me, it was working goog.  
After i began to build a class, it works also very good.  
So now it’s ok.

Here is my las code

```auto
import processing.video.*;
Capture cam;

import peasy.PeasyCam;
PeasyCam myCam;

int nbFORME = 100;
FORME [] tabFORME = new FORME[nbFORME];

void setup()
{
  for (int i=0; i<nbFORME; i++) {
    tabFORME[i] = new FORME();
  }
  myCam = new PeasyCam(this, 400);
  size(1400, 900, 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]);
    }
    // The camera can be initialized directly using an
    // element from the array returned by list():
    cam = new Capture(this, cameras[0]);
    cam.start();
  }
  textureMode(NORMAL);
  shapeMode(CENTER);
}

void draw()
{
  background(0);
  //CAMERA
  if (cam.available() == true)
  {
    cam.read();
  }
  //FORMES
  for (int i=0; i<nbFORME; i++) {
    tabFORME[i].display();
  }
}

```

```auto
class FORME {
  int x, y, z;
  int x1, y1, z1;
  int x2, y2, z2;
  int x3, y3, z3;
  float monRandom = 2;
  FORME() {
    //
    x = int(random(-width, width));
    y = int(random(-height, height));
    z = int(random(-1000, 1000));
    //
    x1 = int(random(-width, width));
    y1 = int(random(-height, height));
    z1 = int(random(-1000, 1000));
    //
    x2 = int(random(-width, width));
    y2 = int(random(-height, height));
    z2 = int(random(-1000, 1000));
    //
    x3 = int(random(-width, width));
    y3 = int(random(-height, height));
    z3 = int(random(-1000, 1000));
  }

  void display() {
    beginShape();
    //strokeWeight(random(2));
    //stroke(0);
    noStroke();
    tint(250, 120);
    texture(cam);
    vertex(x+ random(-monRandom, monRandom), y + random(-monRandom, monRandom), z+ random(-monRandom, monRandom), 0, 0);
    vertex(x1+ random(-monRandom, monRandom), y1+ random(-monRandom, monRandom), z1+ random(-monRandom, monRandom), 1, 0);
    vertex(x2+ random(-monRandom, monRandom), y2+ random(-monRandom, monRandom), z2+ random(-monRandom, monRandom), 1, 1);
    vertex(x3+ random(-monRandom, monRandom), y3+ random(-monRandom, monRandom), z3+ random(-monRandom, monRandom), 0, 1);
    endShape(CLOSE);
  }
}

```

 ![ScreenCapture-AnimalFromMars](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/2/92766e8b148b49e1e495ae884f59f96eb1850ee0.jpeg)