How to create a static voronoi diagram on fixed circle coordinates in Javascript?

Question

For a project I'm working on I want to create a voronoi diagram on a sketch such as this: https://editor.p5js.org/adam.bjrk/sketches/BjIm62YfV. The problem I've encountered so far is that I can't find any tutorials or examples that generate vortex diagrams based on fixed x and y coordinates, the locations of the circles are all randomly generated. Also, all examples seem to give random colors to the cells, in my case I want to have 2 separate teams, where the color of the blue teams cells are e.g. blue, and the red teams are e.g. red. Any ideas to how I can make this happen in Javascript and p5 specifically?

My aim is to make it look something like this: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.researchgate.net%2Ffigure%2FVoronoi-diagram-and-Delaunay-triangulation-of-a-soccer-situation_fig1_235245932&psig=AOvVaw0e9jaIpNbzehofSHAdDXme&ust=1651221339660000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCPi0i4SttvcCFQAAAAAdAAAAABAD

Any help would be greatly appreciated, thanks a lot! :)

Answer 1

I would suggest trying out the p5.voronoi library by Francisco Moreira, https://github.com/Dozed12/p5.voronoi (linked from https://p5js.org/libraries/)

The example1.js demonstrates adding specific (non-random) points and setting their color.

//Add array of custom sites with custom colors associated (255 = white)
voronoiSites([[5,20,255],[10,20,255],[15,20,255]]);

The function takes an array of arrays, where each array is: [x, y, p5js-color]. From this code p5.prototype.voronoiSite(...) you can see if you don't provide a color object, then one is generated at random.

Alternatively, perhaps this sketch might help:

https://brianhonohan.com/sketchbook/p5js/tree-rings/

The tree-ring sketch source code is on GitHub and the code class that generates the point locations and populates the voronoiSites is: tree_trunk.js

• this block generates the data about the tree ring (locations of cells, and their type (thus color))
• this block transforms the cell data into the [x,y,color] array and calls voronoiSites().