# Webcam capture and PGraphics

**URL:** <https://discourse.processing.org/t/webcam-capture-and-pgraphics/33389>\
**Category:** Libraries\
**Created:** [November 7, 2021, 9:42pm UTC](https://discourse.processing.org/t/webcam-capture-and-pgraphics/33389 "2021-11-07T21:42:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mario60](https://avatars.discourse-cdn.com/v4/letter/m/e5b9ba/32.png) [@mario60](https://discourse.processing.org/u/mario60)\
**Post date:** [November 7, 2021, 9:42pm UTC](https://discourse.processing.org/t/webcam-capture-and-pgraphics/33389/1 "2021-11-07T21:42:09Z")

</div>

```auto
import processing.video.*;

Capture cam;

PGraphics pg1;

void setup() {
  size(950, 950);
  frameRate(10);
  pg1 = createGraphics(475, 475);

    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, cameras[0]);
      print(cam.width +" "+cam.height); 
    cam.start();     
  }
}

void draw() {
  background(255);
    if (cam.available() == true) {
    cam.read();
  }
  
   //image(cam, 0, 475); // check commented vs. uncommented
   pg1.beginDraw();
   pg1.image(cam, 0, 0);
   pg1.loadPixels();
        for (int y = 0; y < cam.height; y++) {
            for (int x = 0; x < cam.width; x++) {
              int index = (x + y * 467);
              color c = pg1.pixels[index]; 
              pg1.pixels[index] = color(red(c), int(random(100,200)), blue(c));

        }
      }
   pg1.updatePixels();
   pg1.endDraw();

   image(pg1,0,0); 
   image(cam, 475, 475); 
 
}

```

please check the code above, with line `image(cam, 0, 475);` either commented or uncommented.  
In the latter case, the `image(pg1,0,0);` is rendered as a noise green box, and I get two webcam captures.  
In the former case, the `image(pg1,0,0);` is rendered ok as a filtered webcam capture, but `image(cam, 475, 475);` is rendered as a black box.

Either case, why so? I don’t get how it works.

---

<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:** [November 8, 2021, 1:09am UTC](https://discourse.processing.org/t/webcam-capture-and-pgraphics/33389/2 "2021-11-08T01:09:20Z")

</div>

Hello,

Your code seems to behave with the P2D renderer:

```auto
  size(950, 950, P2D);
  pg1 = createGraphics(475, 475, P2D);

```

> [@mario60](#):
>
> Either case, why so?

I do not have an immediate answer.  
I find myself exploring a lot and working around issues from experience.

`:)`

---

<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:** [November 8, 2021, 11:46am UTC](https://discourse.processing.org/t/webcam-capture-and-pgraphics/33389/3 "2021-11-08T11:46:42Z")

</div>

Hello @mario60,

Give this a try:

```auto
import processing.video.*;

Capture cam;

PGraphics pg1;

PImage img;

void setup() {
  size(950, 950, JAVA2D);
  frameRate(10);
  pg1 = createGraphics(475, 475, JAVA2D);
  img = createImage(475, 475, RGB);

  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, cameras[0]);
    print(cam.width +" "+cam.height);
    cam.start();
  }
}

void draw() {
  background(255);
  if (cam.available() == true) {
    cam.read();
  }

  image(cam, 0, 475); // check commented vs. uncommented
  
  img = cam.copy();
  
  pg1.beginDraw();
  //pg1.image(cam, 0, 0); // < Try this
  pg1.image(img, 0, 0); // < Or this
  pg1.loadPixels();
  for (int y = 0; y < pg1.height; y++) {
    for (int x = 0; x < pg1.width; x++) {
      int index = (x + y * pg1.width);
      color c = pg1.pixels[index];
      pg1.pixels[index] = color(red(c), int(random(100, 200)), blue(c));
      //pg1.pixels[index] = color(red(c), blue(c), green(c));  
    }   
  }
  pg1.updatePixels();
  pg1.textAlign(CENTER, CENTER);
  pg1.textSize(96);
  pg1.text("TEST", pg1.width/2, pg1.height/2); 
  pg1.endDraw();

  image(pg1, 0, 0);
  image(cam, 475, 475);
}

```

I made a copy of `cam` to `img` to work with.  
You could also edit the `img.pixels` array directly after you make a copy.  
You used `PGraphics` so I took advantage of this and added some text.

JAVA2D is the default renderer.

`:)`

---

<div class="post-metadata">

**Author:** ![mario60](https://avatars.discourse-cdn.com/v4/letter/m/e5b9ba/32.png) [@mario60](https://discourse.processing.org/u/mario60)\
**Post date:** [November 8, 2021, 1:09pm UTC](https://discourse.processing.org/t/webcam-capture-and-pgraphics/33389/4 "2021-11-08T13:09:58Z")

</div>

Helo [glv](https://discourse.processing.org/u/glv)

It works. Thanks so much.  
I work from experience too.  
Take care  
m.