# Take triangle from image onto display
**URL:** https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281
**Category:** Processing for Android
**Created:** [February 18, 2022, 11:12pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281 "2022-02-18T23:12:03Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Sekoia](https://discourse.processing.org/u/Sekoia)
#### Post date: [February 18, 2022, 11:12pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/1 "2022-02-18T23:12:03Z")
Hey all,
I’m trying to merge two images in a marching squares shape. In some cases, that would mean I need to extract a triangle from one of the images (a small rectangular isoceles triangle). I did find [How to copy a triangle out of an image - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image.html) (from 2016), but this changes an image which I do not want, as this would execute a few times a frame, meaning lots of rebuilding of rather large images, even though the triangles are a few dozen pixels in size. Besides copying the pixels over manually, which sounds painful to do, I can’t think of any way to do this nicely and efficiently.
Additional info; this is for a live background through Processing Android, meaning I’d prefer for it to be as efficient as possible.
---
### Author:  [@JSGauthier](https://discourse.processing.org/u/JSGauthier)
#### Post date: [February 19, 2022, 12:03am UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/2 "2022-02-19T00:03:07Z")
Perhaps looking into these sections of the reference can help you.
PShape and vertex as well texture commands can help you create your triangles.
> **[Reference](https://processing.org/reference/beginShape_.html)**
>
> Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The va…
> **[Reference](https://processing.org/reference/texture_.html)**
>
> Sets a texture to be applied to vertex points. The texture() function must be called between beginShape() and endShape() and before any calls to vertex(). This function onl…
It is difficult to assess your intentions without a clearer formulation. Perhaps you could share what code you have already composed?
Best,
JS
---
### Author:  [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [February 19, 2022, 12:05am UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/3 "2022-02-19T00:05:59Z")
As JSGauthier said, use the image you want to read from as a texture and render it onto a triangle. Set the texture coordinates to read from the triangular part of the image you want to sample.
---
### Author:  [@Sekoia](https://discourse.processing.org/u/Sekoia)
#### Post date: [February 19, 2022, 10:02am UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/4 "2022-02-19T10:02:32Z")
@JsGauthier For sure. The idea is to use marching squares, which I already coded but a simpler version. I have a function to render a cell in a specific position, here’s the simpler version:
```auto
void renderPiece(int x, int y, int state) {
if (state < 11 && state != 7 && state != 9) {
fill(0);
} else {
fill(255);
}
rect(x, y, S, S);
if (state < 11 && state != 7 && state != 9) {
fill(255);
} else {
fill(0);
state = 15-state;
}
switch (state) {
case 1:
triangle(x, y+HS, x+HS, y+S, x, y+S);
break;
case 2:
triangle(x+S, y+S, x+S, y+HS, x+HS, y+S);
break;
case 3:
rect(x, y+HS, S, HS);
break;
case 4:
triangle(x+HS, y, x+S, y, x+S, y+HS);
break;
case 5:
triangle(x+HS, y, x+S, y, x+S, y+HS);
triangle(x, y+HS, x+HS, y+S, x, y+S);
break;
case 6:
rect(x+HS, y, HS, S);
break;
case 8:
triangle(x, y, x+HS, y, x, y+HS);
break;
}
}
```
`state` is made up of four bits, 2³ being top left point, 2² top right, 2¹ bottom right, 2⁰ being bottom left.
The code works as follows; half of the marching squares cases are just inverted other cases. Specifically, states 0111, 1001, and everything above state 1011. Therefore, what I do is I draw the background of the square (inverted or not), then set the fill to the right color and switch the inverted states to the original, then treat all of the 8 remaining cases.
Here is the already slightly modified but incomplete image version:
```auto
void renderPiece(int x, int y, int state) {
if (state < 11 && state != 7 && state != 9) {
copy(filtered, x, y, S, S, x, y, S, S);
} else {
copy(unfiltered, x, y, S, S, x, y, S, S);
state = 15-state;
}
switch (state) {
case 1:
triangle(x, y+HS, x+HS, y+S, x, y+S);
break;
case 2:
triangle(x+S, y+S, x+S, y+HS, x+HS, y+S);
break;
case 3:
rect(x, y+HS, S, HS);
break;
case 4:
triangle(x+HS, y, x+S, y, x+S, y+HS);
break;
case 5:
triangle(x+HS, y, x+S, y, x+S, y+HS);
triangle(x, y+HS, x+HS, y+S, x, y+S);
break;
case 6:
rect(x+HS, y, HS, S);
break;
case 8:
triangle(x, y, x+HS, y, x, y+HS);
break;
}
}
```
this is the code that needs to be changed, but here’s the method where it’s called from as context:
```auto
void marchingSquares() {
int pX = 0;
int pY = 0;
for (int x = 0; x < W; x++) {
pY = 0;
for (int y = 0; y < H; y++) {
if (changed[x+1][y+1]) {
renderPiece(pX, pY, ((map[x][y] ? 1 : 0) << 3) | ((map[x+1][y] ? 1 : 0) << 2) | ((map[x+1][y+1] ? 1 : 0) << 1) | (map[x][y+1] ? 1 : 0));
}
pY += S;
}
pX += S;
}
}
```
@scudly That would work, after a bit of testing! How fast is it, though?
---
### Author:  [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [February 19, 2022, 9:02pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/5 "2022-02-19T21:02:25Z")
GPUs are designed to render textured triangles as fast as possible. The only trade-off is in how often your source image (texture) is changing relative to how many triangles you are drawing. Sending a changing texture to the GPU every frame if you’re only drawing one or two small triangles is probably not worth it. If you have a fixed image that you can send once and then render thousands to millions of triangles from it, it’ll be as fast as you could possibly want.
---
### Author:  [@Sekoia](https://discourse.processing.org/u/Sekoia)
#### Post date: [February 19, 2022, 9:35pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/6 "2022-02-19T21:35:21Z")
The image never changes, but since this is for a phone background there’s no GPU. Still, seems like this is as efficient I can make it, thanks!
---
### Author:  [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [February 19, 2022, 10:01pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/7 "2022-02-19T22:01:43Z")
All smart phone processors contain a GPU. It’s what renders the interface.
---
### Author:  [@Sekoia](https://discourse.processing.org/u/Sekoia)
#### Post date: [February 19, 2022, 11:02pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/8 "2022-02-19T23:02:29Z")
Well, it’s integrated into the CPU normally (on phones), right?
---
### Author:  [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [February 19, 2022, 11:09pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/9 "2022-02-19T23:09:03Z")
Yes. And it has hardware support for rendering textured triangles. In parallel. In GPU dedicated memory.
---
### Author:  [@Sekoia](https://discourse.processing.org/u/Sekoia)
#### Post date: [February 20, 2022, 9:21am UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/10 "2022-02-20T09:21:06Z")
Oh, fair enough. Thanks!
---
### Author:  [@JoseMY](https://discourse.processing.org/u/JoseMY)
#### Post date: [February 21, 2022, 9:48pm UTC](https://discourse.processing.org/t/take-triangle-from-image-onto-display/35281/11 "2022-02-21T21:48:46Z")
I don’t know if this could help you, but in the past I programmed a Kaleidoscope in APDE.
It took a triangle out of an camera image and multiplicated by 6 in real time.
Looking at the source code I see I used a static triangle, generated at setup, as mask, so I’m unsure you can use it. Also I use a high-end cellphone, a Samsung Note 8.
>