# Transforming color image from webcam to grayscale image for analyse

**URL:** <https://discourse.processing.org/t/transforming-color-image-from-webcam-to-grayscale-image-for-analyse/42744>\
**Category:** Libraries\
**Created:** [September 11, 2023, 3:10pm UTC](https://discourse.processing.org/t/transforming-color-image-from-webcam-to-grayscale-image-for-analyse/42744 "2023-09-11T15:10:54Z")\
**Posts on this page:** 3\
**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:** [September 11, 2023, 3:10pm UTC](https://discourse.processing.org/t/transforming-color-image-from-webcam-to-grayscale-image-for-analyse/42744/1 "2023-09-11T15:10:54Z")

</div>

`Preformatted text`

```auto
`Hello,
I need to analyse a grayscale image from webcam.
I know that **filter(GRAY)** would do it for the display... but i also need to transform all the pixels. 
Could anyone tell me what is the best way for this ? the faster way ?
Thank you for your help.

```

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

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

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

void draw() {
  textureMode(NORMAL);
  image(cam, 0, 0, 100, 100);
  filter(GRAY);
  //how to Split the original webcam image onto 4 vidéos on screen
  /////////////
  ////A - B////
  ////D - C////
  /////////////
  //shape A
  beginShape();
  texture(cam);
  vertex(100, 0, 0, 0, 0);
  vertex(300, 0, 0, 0.5, 0);
  vertex(300, 200, 0, 0.5, 0.5);
  vertex(100, 200, 0, 0, 0.5);
  endShape();
  //tester les superpositions vidéos avec couche alpha
  //shape B
  beginShape();
  texture(cam);
  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();
  //shape C
  beginShape();
  texture(cam);
  vertex(300, 200, 0, 0.5, 0.5);
  vertex(500, 200, 0, 1, 0.5);
  vertex(500, 400, 0, 1, 1);
  vertex(300, 400, 0, 0.5, 1);
  endShape();
  //shape D
  beginShape();
  texture(cam);
  vertex(100, 200, 0, 0, 0.5);
  vertex(300, 200, 0, 0.5, 0.5);
  vertex(300, 400, 0, 0.5, 1);
  vertex(100, 400, 0, 0, 1);
  endShape();
  //
}

```

![Capture d’écran 2023-09-11 à 17.14.09](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/8/8815b768a32ab39a9e50e1162ccbf1bcf90a9100.png)

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 12, 2023, 11:33am UTC](https://discourse.processing.org/t/transforming-color-image-from-webcam-to-grayscale-image-for-analyse/42744/2 "2023-09-12T11:33:41Z")

</div>

Hi @animalfrommars,

if you use cam.filter(GRAY) processing converts the image into grayscale, but you can only save it to 24b grayscale for bmp/jpg/png. (there is an ugly way to go via tga though)

if you really need a 8-bit grayscale using a common image extension you need to do it via java …

Hope that helps…

Cheers  
— mnse

PS: here’s a little example of how it could be done. For your case replace the `loadImage` thing with your `cam` object. the `filter` isn’t needed for saving and happens under the hood…

```auto
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.io.File;

void setup() {
  surface.setVisible(false);
  saveGrayScale8Bit(loadImage("image.bmp"), "image_gray.bmp");
  exit();  
}

void saveGrayScale8Bit(PImage img, String name) {
  BufferedImage bi = (BufferedImage) img.getNative();
  BufferedImage gray8Bit = new BufferedImage(img.width, img.height, BufferedImage.TYPE_BYTE_GRAY);
  gray8Bit.getGraphics().drawImage(bi, 0, 0, null);
  try {
    File outputfile = new File(dataPath(name));
    ImageIO.write(gray8Bit, name.substring(name.lastIndexOf('.') + 1), outputfile);
    println("image saved!");
  }
  catch (IOException e) {
    println("Error saving image! : " + e.getMessage());
  }
}

```

---

<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:** [September 13, 2023, 11:02am UTC](https://discourse.processing.org/t/transforming-color-image-from-webcam-to-grayscale-image-for-analyse/42744/3 "2023-09-13T11:02:27Z")

</div>

Hello @animalfrommars,

> [@Splitting webcam image onto 4 textures](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/16):
>
> Hello @animalfrommars, This will give you some insight into what is happening under the hood: [https://github.com/processing/processing4/blob/main/core/src/processing/core/PImage.java#L853](https://github.com/processing/processing4/blob/main/core/src/processing/core/PImage.java#L853) \< Give it a minute to load and go to the correct line! slight_smile

`:)`