# Convert camera from 3:2 to 16:9

**URL:** <https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041>\
**Category:** Libraries\
**Created:** [December 6, 2022, 12:07pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041 "2022-12-06T12:07:29Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 12:07pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/1 "2022-12-06T12:07:29Z")

</div>

Hi,

I’m trying to convert an live camera image of 640x480 (3:2)to 640x360 (16:9) only to display it at a size of 1126x633 (still 16:9). Clearly it needs cropping, which is fine. But how? I have:

```auto
if (cam.available() ) {
  cam.read();
}
PImage notcropped = cam;
PImage cropped = notcropped.get(0,0,640,360);
image(cropped, 20,20, 1126,633)

```

but it turns out that cropped is just a black image. I don’t understand why. What would be the correct, efficient way to do this?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 6, 2022, 1:36pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/2 "2022-12-06T13:36:58Z")

</div>

Hi @illus,

This code works for me on Windows:

```processing
import processing.video.*;

Capture cam;

void setup() {
  size(1126, 633);

  cam = new Capture(this, "pipeline:autovideosrc");
  cam.start();
}

void draw() {
  background(255);
  
  if (cam.available() == true) {
    cam.read();
  }
  
  PImage cropped = cam.get(0, 0, 640, 360);
  image(cropped, 20, 20, width, height);
}

```

Can you try it? 😇 (you might need to change the camera name to the one you are using if the `autovideosrc` option doesn’t recognize your camera)

---

<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:** [December 6, 2022, 1:39pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/3 "2022-12-06T13:39:49Z")

</div>

Hello,

Modified [Capture reference](https://processing.org/reference/libraries/video/Capture.html):

```auto
import processing.video.*;

Capture cam;
PImage img0, img1;

void setup() {
  size(640, 480);

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

void draw() {
  if (cam.available() == true) {
    cam.read();
  }
  image(cam, 0, 0);
  img1 = cam.get(0, 0, 640, 360);
  // The following does the same, and is faster when just drawing the image
  // without any additional resizing, transformations, or tint.
  image(img1, 0, 60); // Offset to see the crop on top of original
}

```

The above cropped and displayed. I did not resize it.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/7/371a6a49373346cf8e0f8b5012984fb8684f34b9.jpeg)

`:)`

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 1:59pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/4 "2022-12-06T13:59:30Z")

</div>

cam.get()… that works!! thanks

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 2:00pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/5 "2022-12-06T14:00:34Z")

</div>

i didn’t know cam.get() would work. but it does. Thanks!

---

<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:** [December 6, 2022, 2:14pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/6 "2022-12-06T14:14:11Z")

</div>

Some more references:

- [https://processing.org/reference/PImage\_copy\_.html](https://processing.org/reference/PImage_copy_.html)

- [https://processing.org/reference/copy\_.html](https://processing.org/reference/copy_.html)

`:)`

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 2:17pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/7 "2022-12-06T14:17:38Z")

</div>

I thought it would work, but in my case it doesn’t  
the change I have to make is that in the size(), I need to add P2D (because I want to use a shader to do some chromakey) and that makes the provided solution return a black image again.  
This doesn’t work:

```auto
import processing.video.*;

Capture cam;
PImage bgimage;
  
void setup() {
  size(1920,1080,P2D);

  cam = new Capture(this, 640,480);
  cam.start();
}

void draw() {
  background(255);
  
  if (cam.available() == true) {
    cam.read();
  }
  
  PImage cropped = cam.get(0, 0, 640, 360);
   image(cropped, 20, 20, 640,360);
}

```

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 2:40pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/8 "2022-12-06T14:40:27Z")

</div>

@josephh any solution to this ?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 6, 2022, 2:44pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/9 "2022-12-06T14:44:24Z")

</div>

You are right, it doesn’t work for me neither… I even tried to use a separate [`PGraphics`](https://processing.org/reference/PGraphics.html) to draw the camera image without luck.

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 2:45pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/10 "2022-12-06T14:45:30Z")

</div>

I’m still a beginner, so I have no clue of what to try next

---

<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:** [December 6, 2022, 3:07pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/11 "2022-12-06T15:07:18Z")

</div>

Hello @illus ,

Try this with P2D:

```auto
import processing.video.*;

Capture cam;
PImage img;

void setup() {
  size(640, 480, P2D);

  img = createImage(640, 360, RGB);
  //img.format = 1;

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

void draw() {
  if (cam.available() == true) {
    cam.read();
  }
  image(cam, 0, 0);
  img.copy(cam, 0, 0, cam.width, cam.height, 0, 0, 640, 360); 
  
  image(img, 0, 60);
}

```

Note… this was some very quick testing before work so there may be better options.

`:)`

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 6:00pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/12 "2022-12-06T18:00:30Z")

</div>

yeah, that works, somehow it feels strange to first draw the image, read it back and draw it again, but it works.

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 6, 2022, 6:40pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/15 "2022-12-06T18:40:04Z")

</div>

I can even use image(cam,1920,0) so it is completely off screen, and it will work, but when I comment that line out, the result is black. This doesn’t compute in my brain, but alas, I’m happy.

---

<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:** [December 7, 2022, 2:54am UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/16 "2022-12-07T02:54:31Z")

</div>

I found some related issues:

> <https://github.com/processing/processing/issues/1852.html>
>
> Capture examples like AsciiVideo, Mirror, Mirror2 (possibly all the ones that ac…cess the pixels array) don't work when using P2D as the renderer, they only show a black screen. This is most likely due to the recent changes in the handling of the pixels array, which conflicts with the optimizations implemented in the video library when the renderer is GL (the video frames go directly into the texture of the Capture object, so the pixels array doesn't contain any valid data).

> <https://github.com/processing/processing-video/issues/203>
>
> When using the function get() in a video capture, the returned PImage is all bla…ck when using the P2D/P3D/OPENGL renderer. However, if I switch the renderer to JAVA2D it works fine. 
> 
> Code to reproduce:
> 
> \`\`\`
> import processing.video.\*;
> 
> Capture cam;
> PImage img;
> 
> void setup() {
> size(640, 480, P2D); // Change to JAVA2D to work
> 
> String\[\] cameras = Capture.list();
>  
> cam = new Capture(this, cameras\[1\]);
> cam.start();        
> }
> 
> void draw() {
> if (cam.available() == true) {
> cam.read();
> img = cam.get();
> }
> image(img, 0, 0);
> }
> \`\`\`
> 
> I am using the macOS Monterey but it also happens using a Windows 10.

> <https://github.com/processing/processing-video/issues/160>
>
> \## Description
> When you create a canvas with P2D or P3D, the webcam capture doe…s not contain any data (it is an array of black pixels).
> 
> 
> 
> \## Expected Behavior
> The capture object pixel array should contain data
> 
> 
> \## Current Behavior
> The capture object pixel array contains all black
> 
> \## Steps to Reproduce
> Run this program
> import processing.video.\*;
> Capture video;
> PImage theImage;
> 
> void setup() {
> //this loads an array of black pixels
> size(640, 480, P3D);
> //this works as expected
> //size(640, 480);
> video = new Capture(this, 640, 480);
> video.start();
> }
> 
> void draw(){
> if (video.available()) video.read();
> theImage = video.get();
> theImage.loadPixels();
> image(theImage,0,0);
> }
> 
> \## Your Environment
> \* Processing version: 3.5.4
> \* Operating System and OS version: OSX Catalina 10.15.4

---

<div class="post-metadata">

**Author:** ![illus](https://avatars.discourse-cdn.com/v4/letter/i/e5b9ba/32.png) [@illus](https://discourse.processing.org/u/illus)\
**Post date:** [December 7, 2022, 12:57pm UTC](https://discourse.processing.org/t/convert-camera-from-3-2-to-16-9/40041/17 "2022-12-07T12:57:39Z")

</div>

here is some more weird behavior. Without any image(cam,0,0) call it fails, but with that call the copy made to img updates just fine, but the direct view of image(cam,0,0) updates about 1 fps (if you don’t include the frameRate() it will even be slower like 1 per minute.)  
it makes programming more a trial and error thing, and hoping that it works on some other machine.

```auto
import processing.video.*;

Capture cam;
PImage img;

void setup() {
  size(1920,1080,P2D);
  frameRate(10);
  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, 640,480);
    cam.start(); 
  }
  img = createImage(640,480,RGB);
}

void draw () {
  background(128);
  if (cam.available()) {
    cam.read();
    //image(cam, 0,0);
     img.copy(cam,0,0,640,480,0,0,640,480);
     image(cam,0,0);
    //img.loadPixels();
    
  }
  //image(cam,0,0);
  image(img,640,0);
}

```