Fill a mesh Delaunay object

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/

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

Thank you!

1 Like

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.

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?

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

  • import it in your sketch

    In setup()

  • 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:

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

4 Likes

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

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 :slight_smile:

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

thanks again :smiley:

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

Yes! I did it! :smiley:

For future usage:

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? :thinking:

1 Like

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.

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

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 :slight_smile:

Here a more updated version:

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 :frowning:

Thank you!!

1 Like

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:

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 :frowning:
Thank you

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

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:

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

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:

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 :slight_smile:

EDIT
the strange behaviour is fixed!!!

tria.beginShape(TRIANGLE);

:smiley:

Returning to the original question, I fuond this:

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?