Para un proyecto en el que estoy trabajando, quiero crear un diagrama de voronoi en un boceto como este: https://editor.p5js.org/adam.bjrk/sketches/BjIm62YfV . El problema que he encontrado hasta ahora es que no puedo encontrar ningún tutorial o ejemplo que genere diagramas de vórtice basados en coordenadas x e y fijas, las ubicaciones de los círculos se generan aleatoriamente. Además, todos los ejemplos parecen dar colores aleatorios a las celdas, en mi caso quiero tener 2 equipos separados, donde el color de las celdas de los equipos azules sea, por ejemplo, azul, y los equipos rojos sean, por ejemplo, rojos. ¿Alguna idea de cómo puedo hacer que esto suceda en Javascript y p5 específicamente?
Cualquier ayuda sería muy apreciada, muchas gracias! :)
Sugeriría probar la biblioteca p5.voronoi de Francisco Moreira, https://github.com/Dozed12/p5.voronoi (vinculado desde https://p5js.org/libraries/ )
El ejemplo 1.js demuestra agregar puntos específicos (no aleatorios) y establecer su color.
//Add array of custom sites with custom colors associated (255 = white) voronoiSites([[5,20,255],[10,20,255],[15,20,255]]); La función toma una matriz de matrices, donde cada matriz es: [x, y, p5js-color] . A partir de este código p5.prototype.voronoiSite(...) puede ver que si no proporciona un objeto de color, entonces se genera uno al azar.
Alternativamente, tal vez este boceto podría ayudar:
https://brianhonohan.com/sketchbook/p5js/tree-rings/
El código fuente del bosquejo de anillos de árboles está en GitHub y la clase de código que genera las ubicaciones de los puntos y llena los voronoiSites es: tree_trunk.js
[x,y,color] y llama a voronoiSites() .