Fill a mesh Delaunay object

BrokenCode · September 7, 2018, 7:57am

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

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

Thank you!

MxFxM · September 7, 2018, 8:44am

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.

BrokenCode · September 8, 2018, 7:53am

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?

solub · September 8, 2018, 10:29am

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

BrokenCode · September 8, 2018, 3:38pm

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

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

thanks again

solub · September 8, 2018, 3:48pm

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

BrokenCode · September 8, 2018, 3:51pm

Yes! I did it!

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?

solub · September 8, 2018, 3:59pm

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.

BrokenCode · September 8, 2018, 4:20pm

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

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

Thank you!!

GoToLoop · September 8, 2018, 5:39pm

BrokenCode · September 9, 2018, 8:07am

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

BrokenCode · September 9, 2018, 8:54am

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

BrokenCode · September 9, 2018, 11:51am

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

EDIT
the strange behaviour is fixed!!!

tria.beginShape(TRIANGLE);

BrokenCode · September 10, 2018, 7:29am

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?

Topic		Replies	Views
Creating animated Triangle Patterns Libraries	3	794	December 19, 2018
Delaunay Triangulation in Processing 4 Libraries	4	82	September 13, 2024
Generate random not overlapping triangles Coding Questions	9	1488	December 26, 2020
Selecting the nearest grid vertices with Delaunay triangulation Processing.py	3	1730	September 11, 2018
Grid of custom designs using beginShape(); vertex(); endShape(CLOSE); Coding Questions	8	239	October 26, 2022

Fill a mesh Delaunay object

Related topics