# Fill a mesh Delaunay object

**URL:** https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341
**Category:** Processing
**Created:** [September 7, 2018, 7:57am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341 "2018-09-07T07:57:51Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 7, 2018, 7:57am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/1 "2018-09-07T07:57:51Z")

</div>

Hi guys,  
maybe a silly question, but I can’t figure out how to fill a Delaunay object created with the mesh library

[http://leebyron.com/mesh/](http://leebyron.com/mesh/)

Do I need to convert it into a PShape? Any idea? 🙂

Thank you!

---

<div class="post-metadata">

### Author: ![MxFxM](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@MxFxM](https://discourse.processing.org/u/MxFxM)
#### Post date: [September 7, 2018, 8:44am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/2 "2018-09-07T08:44:23Z")

</div>

Hi.  
From looking at that link you provided I would think the easiest way is to use  
getRegions()

> `getRegions()` returns an array of MPolygons, the order of which correspond to the order of the points entered. MPolygon contains the points of the polygon, and can be drawn to the stage.

But you need to have a Voronoi Diagram to do that. It seems to me the constructor is the same or very similar so there should be no problem.

Spoiler: I have no experience with this myself.

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 8, 2018, 7:53am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/3 "2018-09-08T07:53:16Z")

</div>

Thank you MxFxM, but to me it seems like a waste of computational power…

is this the only way? Can I get thos array of point and in same way buil a shape or use it for something?

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [September 8, 2018, 10:29am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/4 "2018-09-08T10:29:19Z")

</div>

Hi @BrokenCode,

I’m not really familiar with Lee Byron’s “mesh” library but here is my two cents:

- `getRegions()` only work with Voronoi objects
- the “Triangulate” library seems more appropriate in your case

You just need to:

- download it [here](http://n.clavaud.free.fr/processing/triangulate/triangulate-20100628.zip)

- import it in your sketch

- put all the points (PVector) you want to triangulate in an array list (let’s call it `plist`)

- call the `triangulate` method on that list: -\> `triangles = Triangulate.triangulate(plist)`

- display the triangles with the `beginShape(TRIANGLES)` function and fill them as you like:

```auto
beginShape(TRIANGLES)
for t in triangles:
    fill(random(255), random(255), random(255))
    vertex(t.p1.x, t.p1.y)
    vertex(t.p2.x, t.p2.y)
    vertex(t.p3.x, t.p3.y)
endShape()

```

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b5ca18d885031827d6bc8a9089eaef0cc4f36d3d.png)

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 8, 2018, 3:38pm UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/5 "2018-09-08T15:38:04Z")

</div>

Thank you for your answer… I’m currently using JAVA and not Python, I can’t understand how to use this:

```auto
beginShape(TRIANGLES)
for t in triangles:
    fill(random(255), random(255), random(255))
    vertex(t.p1.x, t.p1.y)
    vertex(t.p2.x, t.p2.y)
    vertex(t.p3.x, t.p3.y)
endShape()

```

Where did you taken `triangles` from?

Thank you so much 🙂

edit: oh!!! I saw it just now!! **triangles** `= Triangulate.triangulate(plist)`

thanks again 😃

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [September 8, 2018, 3:48pm UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/6 "2018-09-08T15:48:13Z")

</div>

> [@BrokenCode](#):
>
> Where did you taken `triangles` from?

`triangles` is the instantiation of `Triangulate.triangulate(plist)`  
It is an array list containing the vertices of every triangles

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 8, 2018, 3:51pm UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/7 "2018-09-08T15:51:37Z")

</div>

Yes! I did it! 😃

For future usage:

```auto
import org.processing.wiki.triangulate.*;

int numPoints = 10;
int dimension = 200;

ArrayList<PVector> plist;
ArrayList<Triangle> triangles;

void setup() {
  size(600, 500, P3D);
  plist = new ArrayList<PVector>();
  triangles = new ArrayList<Triangle>();

  for (int i = 0; i < numPoints; i++) {
    for (int j = 0; j < 2; j++) {
      PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
      plist.add(newVector);
    }
  }
}

void draw() {
  background(255);
  triangles = Triangulate.triangulate(plist);
  beginShape(TRIANGLES);
  for (Triangle t : triangles) {
    fill(255, 0, 0);
    vertex(t.p1.x, t.p1.y);
    vertex(t.p2.x, t.p2.y);
    vertex(t.p3.x, t.p3.y);
    endShape();
  }
}

```

Maybe the loop in a loop in the setup() can be improved somehow? 🤔

---

<div class="post-metadata">

### Author: ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)
#### Post date: [September 8, 2018, 3:59pm UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/8 "2018-09-08T15:59:47Z")

</div>

I don’t understand, what’s the point of using a double `for` loop here ?  
You could draw the triangles in `setup()` instead of calling `beginShape()` at every frame.  
Also `P2D` would be more appropriate if you’re not planning to work in 3 dimensions.

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 8, 2018, 4:20pm UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/9 "2018-09-08T16:20:30Z")

</div>

Duble for loop was used in the previous vers, because I was using two dimensional array, for storing points… As I can see works good even for creating random PVector, but can

```auto
for (int i = 0; i < numPoints*2; i++) {
  
      PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
      plist.add(newVector);

  }

```

be more accurate?

I think I need to draw the triangles in draw() just because I’ve got interpolation between some oldPosition and newPosition.

P3D is also from old code, where I was using PeasyCam 🙂

Here a more updated version:

```auto
import org.processing.wiki.triangulate.*;

int numPoints = 10;
int dimension = 200;
int yoffset = 0;
float xoff = 0.0;
int coin;

ArrayList<PVector> position;
ArrayList<PVector> newPosition;
ArrayList<Triangle> triangles;

void setup() {
  size(600, 500);

  position = new ArrayList<PVector>();
  newPosition = new ArrayList<PVector>();
  triangles = new ArrayList<Triangle>();

  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
    PVector newNewVector = new PVector((int) random(dimension), (int) random(dimension));
    position.add(newVector);
    newPosition.add(newNewVector);
  }
}

void draw() {
  background(255);

  coin = (int) random(100);
  if (coin < 10) {
    createTriangulation();
  }

  for (int i = 0; i < newPosition.size(); i++) {
    PVector oldVector = position.get(i);
    PVector newVector = newPosition.get(i);
    PVector lerpedVector = oldVector.lerp(newVector, 0.5);
    position.set(i, lerpedVector);
  }

  triangles = Triangulate.triangulate(position);

  beginShape(TRIANGLES);
  for (Triangle t : triangles) {
    fill(255, 0, 0);
    vertex(t.p1.x, t.p1.y);
    vertex(t.p2.x, t.p2.y);
    vertex(t.p3.x, t.p3.y);
    endShape();
  }
}

void createTriangulation() {

  ArrayList<Triangle> newTriangles;

  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
    newPosition.set(i, newVector);
  }
  newTriangles = Triangulate.triangulate(position);

  for (int i = 0; i < newTriangles.size(); i++) {
    triangles.add(newTriangles.get(i));
  }
}

```

What I’m trying to achieve now is to have multiple triangulation objects… with the mesh library, I created an ArrayList to store all the new Delaunay() object and was really cool and smooth, but now, if I try to extend the `triangles` ArrayList, it doesn’t create a new one, but only update the actual on screen.  
What I want is a sort of “growing tree” where when the `coin` is flipped it creates a new Delaunay shape and so and so…  
Sorry if I’m not able to describe it better, but I’m trying my best ☹

Thank you!!

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 8, 2018, 5:39pm UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/10 "2018-09-08T17:39:45Z")

</div>

> **[Delaunay repulsion JS - OpenProcessing](https://www.openprocessing.org/sketch/172907)**
>
> Delaunay triangulation ported to JS (slightly modified Triangulate class from Florian Jennet, already customed by Ale)
> 
> l: toggle lines
> p: toggle points
> f: toggle fill
> click: reset the points
> 
> The triangulation is still very slow in JS, some...

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 9, 2018, 8:07am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/11 "2018-09-09T08:07:14Z")

</div>

Thank you GoToLoop, but I can’t understand how I can use that sketch to achieve what I need… I’ve got a basic functional Delaunay obj, now I want to be able to create more distinctive and separate Delaunay obj.  
With the mesh library was so easy:

```auto
ArrayList<Delaunay> delaunayList = new ArrayList<Delaunay>();
 Delaunay myDelaunay = new Delaunay(points);
  delaunayList.add(myDelaunay);

// I can call every Delaunay() method I want

for (int i = 0; i < delaunayList.size(); i++) {

    float[][] myEdges = delaunayList.get(i).getEdges();

    for (int j = 0; j < myEdges.length; j++) {
      float startX = myEdges[j][0];
      float startY = myEdges[j][1];
      float endX = myEdges[j][2];
      float endY = myEdges[j][3];
      line( startX, startY, endX, endY );
    }

    int[][] myLinks = delaunayList.get(i).getLinks();

    for (int k = 0; k < myLinks.length; k++) {
      int startIndex = myLinks[k][0];
      int endIndex = myLinks[k][1];

      float startX = points[startIndex][0];
      float startY = points[startIndex][1];
      float endX = points[endIndex][0];
      float endY = points[endIndex][1];

      line( startX, startY, endX, endY );
    }
  }

```

Everytime I create a new Delaunay() obj, I can add it to an ArrayList of Delaunay() obj, and for every obj this ArrayList contains it builds different a isolated form.

With the Triangulate library, I can’t find a similar behaviour ☹  
Thank you

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 9, 2018, 8:54am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/12 "2018-09-09T08:54:26Z")

</div>

So, this is an over simplified sketch that illustrate what I want to create:

```auto
import org.processing.wiki.triangulate.*;

int numPoints = 10;
int dimension = 200;

ArrayList<PVector> newPosition;
ArrayList<Triangle> triangles;

void setup() {
  size(600, 500, P3D);

  newPosition = new ArrayList<PVector>();
  triangles = new ArrayList<Triangle>();

  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
    newPosition.add(newVector);
  }
}

void draw() {
  // background(255);
}

void mousePressed() {
  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension)); 
    newPosition.set(i, newVector);
  }
  triangles = Triangulate.triangulate(newPosition);
  translate(random(width), random(height));
  beginShape(TRIANGLES); 
  for (Triangle t : triangles) {
    fill(255, 0, 0); 
    vertex(t.p1.x, t.p1.y); 
    vertex(t.p2.x, t.p2.y); 
    vertex(t.p3.x, t.p3.y); 
    endShape();
  }
}

```

This is the thing I’m try to replicate, but with the possibility to animate it, as soon as I uncomment `background(255);` it doesn’t work. I want all my shape to stay on screen, until? Until I choose when to remove it from the pseudo `arrayOfShapes`.  
In my previous comment, I show that, beside the remove from array function, with the mesh library I could make it work!! I’m just struggling figure it out how to do it with the Triangulate library…  
Thank you

**EDIT**  
I thought that something like this could work, but it doesn’t:

```auto
import org.processing.wiki.triangulate.*;

int numPoints = 10;
int dimension = 200;

ArrayList<PVector> newPosition;
ArrayList<Triangle> triangles;
ArrayList<Triangulate> allTriangulate;

void setup() {
  size(600, 500, P3D);

  newPosition = new ArrayList<PVector>();
  triangles = new ArrayList<Triangle>();
  allTriangulate = new ArrayList<Triangulate>();

  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
    newPosition.add(newVector);
  }
}

void draw() {
  background(255);
  for (int i = 0; i < allTriangulate.size(); i++) {
    triangles = allTriangulate.get(i).triangulate(newPosition);
    beginShape(TRIANGLES); 
    for (Triangle t : triangles) {
      fill(255, 0, 0); 
      vertex(t.p1.x, t.p1.y); 
      vertex(t.p2.x, t.p2.y); 
      vertex(t.p3.x, t.p3.y); 
      endShape();
    }
  }
}

void mousePressed() {
  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension)); 
    newPosition.set(i, newVector);
  }
  Triangulate triangulate = new Triangulate();
  allTriangulate.add(triangulate);
}

```

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 9, 2018, 11:51am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/13 "2018-09-09T11:51:52Z")

</div>

New approach:  
create a new PShape everytime and store it in an ArrayList and display it with a for loop in draw(). The problem now is that .fill() doesn’t work completetly good, and the construction of the Delaunay isn’t perfect… just another way that can achieve what I need…  
Here is the code:

```auto
import org.processing.wiki.triangulate.*;

int numPoints = 10;
int dimension = 200;

ArrayList<PVector> newPosition;
ArrayList<Triangle> triangles;
ArrayList<PShape> shapes;

void setup() {
  size(600, 500, P3D);
  hint(DISABLE_DEPTH_TEST);
  newPosition = new ArrayList<PVector>();
  triangles = new ArrayList<Triangle>();
  shapes = new ArrayList<PShape>();

  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension));
    newPosition.add(newVector);
  }
}

void draw() {
  background(255);
  for (int i = 0; i < shapes.size(); i++) {
    shape(shapes.get(i));
  }
}

void mousePressed() {
  
  for (int i = 0; i < numPoints * 2; i++) {
    PVector newVector = new PVector((int) random(dimension), (int) random(dimension)); 
    newPosition.set(i, newVector);
  }
  
  triangles = Triangulate.triangulate(newPosition);
  
  PShape tria = createShape();
  tria.beginShape();
  for (Triangle t : triangles) {
    tria.fill(255, 0, 0);
    tria.vertex(t.p1.x, t.p1.y);
    tria.vertex(t.p2.x, t.p2.y);
    tria.vertex(t.p3.x, t.p3.y);
  }
  tria.endShape();

  shapes.add(tria);
}

```

I’m a bit lost at this point… thank you 🙂

**EDIT**  
the strange behaviour is fixed!!!

`tria.beginShape(TRIANGLE);`

😃

---

<div class="post-metadata">

### Author: ![BrokenCode](https://avatars.discourse-cdn.com/v4/letter/b/9de0a6/32.png) [@BrokenCode](https://discourse.processing.org/u/BrokenCode)
#### Post date: [September 10, 2018, 7:29am UTC](https://discourse.processing.org/t/fill-a-mesh-delaunay-object/3341/14 "2018-09-10T07:29:02Z")

</div>

Returning to the original question, I fuond this:

[https://processing.org/discourse/beta/num\_1233317122.html](https://processing.org/discourse/beta/num_1233317122.html)

where user **noelb** modified the Delaunay method to build a Shape for every triangle… but that will cause the same problem as the triangulation library: how can one achieve creating multiple PShape with interpolating vertexes?
