Triangle grid breakdown

this is a reply to @upupzealot asking for more details about this pen.

there is no random so to speak, the PRNG (Pseudo Random Number Generator) creates a seed-based (& therefore reproductible) series of seemingly random numbers.
the first thing I do, line 1 is to create a self contained PRNG object (it’s a Mersenne twister btw):

then I set up a canvas / context, nothing special.

in the update() function, the first thing I do is to reset the PRNG value: PRNG.setSeed(3); to make sure I’ll get the same random sequence each time.

then the first loop creates vertices (2D points)
it’s done in 2 steps, first create count points (lattices) around the center at a random angle a and a random radius r.
then create spawn points around this lattice also at a random angle but with a much smaller radius offset.

then we have some context reset and we call yolo a given amount of times so it renders at different scales.

the yolo() method will build a virtual equilateral triangles’ grid to determine the closest lattices of the grid to each vertex then decide how to render it. it can be either:

  • a line from the vertex to the closest lattice of the grid
  • the closest edge of the grid without connection to the vertex
  • a filled triangle between the 3 closest points of the grid

to compute the equilateral triangles grid, we need to compute some variables, especially an equilateral triangle side length and height.
note that this also work for N-sided regular polygons, in this case we have 3 sides.

here’s a visual helper for the values above:

we now have the dimensions of a module that contains a triangle, and with this module, we can build a grid like this:


having a rectangular grid helps a lot when it comes to finding which is the closest lattice.

for instance cell_x & cell_y can tell us which is the closest lattice without the usual minimum distance computation.

the illustration below show what the code above correspond to:


once we found which celle the vertex belongs to,  we can iterate only on the neighbour cells to find the closests valid lattices. that’s why the loop ranges from cell_x-2 to cell_x+2 & cell_y-2 to cell_y+2. this saves a lot of computations.

the important thing to remember is that there is no random but Pseudo random and time. Since it’s always the same sequence of random numbers, the ‘random’ chances of drawing, an edge or a triangle are always the same ; it doesn’t flicker like it would if we had used a regular Random function.

and that’s it! :)

One Comment

  1. Hello Nico

    Always happy to discover a new post on your blog :)

    I’m back on Paris since October, do you have some time for a beer ?
    (by the way, I still have your shader-book if you want to get it back…)

Leave a Reply

Your email address will not be published. Required fields are marked *