# Splitting webcam image onto 4 textures
**URL:** https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124
**Category:** Libraries
**Created:** [March 3, 2023, 8:47am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124 "2023-03-03T08:47:13Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [March 3, 2023, 8:47am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/1 "2023-03-03T08:47:13Z")
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.
```auto
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();
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [March 3, 2023, 9:49am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/2 "2023-03-03T09:49:58Z")
Hello @animalfrommars,
Using _get()_ with _PGraphics_ did the trick!
Try this:
```auto
//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](https://processing.org/tutorials/rendering/#another-drawing-surface)
Be sure to read all the related references.
There may be other ways to do this.
`:)`
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [March 3, 2023, 10:41am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/3 "2023-03-03T10:41:35Z")
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
```auto
//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();
```
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [March 5, 2023, 10:16am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/4 "2023-03-05T10:16:17Z")
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.
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [March 5, 2023, 10:19am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/5 "2023-03-05T10:19:14Z")
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.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [March 5, 2023, 1:38pm UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/6 "2023-03-05T13:38:46Z")
> [@animalfrommars](#):
>
> Very interesting all thoses examples with PGraphics… it open many possibilities to me.
Another example for you that creates a shape once in _setup()_ and textures it in _draw()_ in different ways:
```auto
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:
`:)`
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [March 5, 2023, 3:36pm UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/7 "2023-03-05T15:36:28Z")
Ah yes ! Really super !
I’am sure i’am going to explore this way…
Thanks a lot.
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [September 11, 2023, 7:45pm UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/8 "2023-09-11T19:45:59Z")
```auto
Hello glv,
Sorry to disturb you again.
Some months ago you helped me for splitting video...
i continue my tests and experimentations and now i need
to transform the original image from the webcam to a grayscale one
(8 bits will be the best)...
I know that i can to this with the function filter(GRAY)
but this only impact the display not the pixels of the image
that i need to analyse in order to produce sounds...
Have you got any advice for this ?
Thanks a lot for all.
Best,
Animal.
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 12, 2023, 10:44am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/9 "2023-09-12T10:44:59Z")
Hello @animalfrommars,
You can use the _brightness()_ or a method of your own.
Example:
```auto
import processing.video.*;
Capture video;
void setup() {
size(1280, 480);
// Uses the default video input, see the reference if this causes an error
video = new Capture(this, 640, 480);
video.start();
}
void draw()
{
if (video.available())
{
video.read();
image(video, 0, 0, video.width, video.height);
video.loadPixels();
for (int i = 0; i < video.pixels.length; i++)
{
int gs = int(brightness(video.pixels[i]));
video.pixels[i] = color(gs); // This is where you modify!
//video.pixels[i] = 0xFF000000 | (gs<<16) | (gs<<8) | gs; // Does the same as above line.
//if (i%width == 0) println(hex(pixels[i])); // for development
}
}
video.updatePixels();
image(video, video.width, 0, video.width, video.height);
}
```
The brightness _may_ be using one of the methods in link below.
References:
> **[How to Convert an RGB Image to a Grayscale | Baeldung on Computer Science](https://www.baeldung.com/cs/convert-rgb-to-grayscale)**
>
> Learn how to convert an RGB image to grayscale.
Also explore the Processing tutorials on _Images and Pixels_ and _Color_ along with the related references and examples.
Have fun!
`:)`
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [September 12, 2023, 10:58am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/10 "2023-09-12T10:58:25Z")
The article is clear. I will try the luminosity method.
I hope this way will be enough fast…
Thank you so much !
Best.
Animal.
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [September 12, 2023, 11:38am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/11 "2023-09-12T11:38:17Z")
hi @glv,
why not just using `video.filter(GRAY)` and afterwards `image(video,...)` ?
Cheers
— mnse
PS PImage reference …
> **[filter() / Reference](https://processing.org/reference/PImage_filter_.html)**
>
> Filters the image as defined by one of the following modes: THRESHOLD Converts the image to black and white pixels depending on if they are above or below the threshold defined by the …
````auto
PImage img1, img2;
void setup() {
size(400, 400);
img1 = loadImage("flower.jpg");
img2 = loadImage("flower.jpg");
img2.filter(GRAY);
}
void draw() {
image(img1, 0, 0);
image(img2, width/2, 0);
}```
````
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [September 12, 2023, 11:42am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/12 "2023-09-12T11:42:07Z")
I’am not sure but…
because filter(GRAY) only affect the display of the capted image… but not change the real value of the pixels that i need to analye in a order to produce sounds.
The aim of this project is to make sounds with grayscale value of images…
Thanks for helping me !
Animal.
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [September 12, 2023, 11:45am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/13 "2023-09-12T11:45:26Z")
No! if you use the filter on a PImage object it converts the image by the filter.
```auto
void draw() {
filter(GRAY); // this affects only the displaying
img.filter(GRAY); // this converts the img object to grayscale
}
```
Cheers
— mnse
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [September 12, 2023, 11:53am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/14 "2023-09-12T11:53:04Z")
`Some drawings for understanding my project...`
Graphicals disc with grayvalue produce sounds in “realtime” and this images of graphical disc are projected on screen.
---
### Author:  [@animalfrommars](https://discourse.processing.org/u/animalfrommars)
#### Post date: [September 12, 2023, 11:55am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/15 "2023-09-12T11:55:29Z")
OK, VERY THANKS !
I’m going to try this.
Animal.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 13, 2023, 10:58am UTC](https://discourse.processing.org/t/splitting-webcam-image-onto-4-textures/41124/16 "2023-09-13T10:58:26Z")
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!
`:)`