Filling in a triangle with points

p5.js Coding Questions
1

Hello,
I’m drawing triangles.
I’d like to fill in these triangles with lots of points.
I believe in order to do so I’d need to know the coordinates of each point belonging within the triangle.
I could find solutions to compute the surface of a triangle but I can’t think about a way to get an array containing all x,y coordinates of each points inside a specific triangle.
Here iy my code so far:

function setup() {
  createCanvas(1000, 1000);
  colorMode(HSB);
  noStroke();
}

function draw() {

let myTriangles = [];
  let myTriangleValue1 = [500,500,750,0,1000,500];
  myTriangles.push(myTriangleValue1);

  for (let i = 0; i < myTriangles.length; i++) {
 
    triangle(myTriangles[i][0],myTriangles[i][1],myTriangles[i][2],myTriangles[i][3],myTriangles[i][4],
      myTriangles[i][5],myTriangles[i][6]);
    
  }

  

  
}

}
2

When you draw the triangle with a fill color you can make random points and check its color using get()

When the color is the triangle color then you are inside the triangle. Draw your point then. Repeat

1 Like
3

If you’re trying fill in every point within the triangle, this is the fundamental algorithm you are looking for: https://web.cs.ucdavis.edu/~ma/ECS175_S00/Notes/0411_b.pdf

If you want to know if an arbitrary point is inside or outside a triangle you can use the scanline algorithm used to find intersections in the algorithm above. Here’s an example:

Using get() and checking the color is, in my humble opinion, an issue prone hack and I do not recommend it.

3 Likes
4

Thank you guys for your support this very much appreciated

1 Like