# Tiling a triangle with buttons/clickable areas

**URL:** <https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986>\
**Category:** Project Guidance\
**Created:** [December 6, 2020, 12:49am UTC](https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986 "2020-12-06T00:49:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ferval77](https://avatars.discourse-cdn.com/v4/letter/f/71c47a/32.png) [@ferval77](https://discourse.processing.org/u/ferval77)\
**Post date:** [December 6, 2020, 12:49am UTC](https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986/1 "2020-12-06T00:49:37Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hi

I’m trying to create Tiling a triangle with buttons/clickable areas like this

 ![Screenshot 2020-12-06 at 00.48.04](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/798c15528b7bcd5a6a63e7abb57a7379140ef85f.png)  
picture, but i cannot figure it out in a simple loop

an alternative would be 6 sliders (one for each stripe of cells)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 6, 2020, 2:41am UTC](https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986/2 "2020-12-06T02:41:40Z")

</div>

Please show your attempt/ entire code

---

<div class="post-metadata">

**Author:** ![ferval77](https://avatars.discourse-cdn.com/v4/letter/f/71c47a/32.png) [@ferval77](https://discourse.processing.org/u/ferval77)\
**Post date:** [December 6, 2020, 2:46pm UTC](https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986/3 "2020-12-06T14:46:57Z")

</div>

I have been playing with this code I found with no luck.

void draw() {  
background(200);  
drawGrid(50, 50, 900, 900, 6, 5);  
}

void drawGrid(float startX, float startY, float gridWidth, float gridHeight, float dimX, float dimY) {  
float w = gridWidth / dimX;  
float h = gridHeight / dimY;  
noStroke();  
for (int y=0; y\<dimY; y++) {  
for (int x=0; x\<dimX; x++) {  
float xPos = startX + x \* w;  
float yPos = startY + y \* h;  
fill((x+y)%2==0?255:0);  
triangle(50,300,xPos, yPos, w, h);  
}  
}  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 6, 2020, 3:15pm UTC](https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986/4 "2020-12-06T15:15:50Z")

</div>

For using this grid as mouse buttons you could make the same graphic invisible and use unique colors.

Then check the color of the mouse position on the invisible PGraphics and by the color determine the field the mouse is in. It’s an old trick.

Might be simpler than to calculate the mouse button area mathematical

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 6, 2020, 4:48pm UTC](https://discourse.processing.org/t/tiling-a-triangle-with-buttons-clickable-areas/25986/5 "2020-12-06T16:48:15Z")

</div>

Yours looks nice though!!!