dozed12 / p5.voronoi Goto Github PK
View Code? Open in Web Editor NEWA Voronoi library for p5.js
License: MIT License
A Voronoi library for p5.js
License: MIT License
Hello @Dozed12 !
Like kitchensjn on this issue : #3, I wanted to make voronoi with others shapes than a rectangle.
I tried to follow your advice by using mask() (with the mask being a circle). However with voronoiDraw nothing happens like in the picture below whereas with a rectangle we see that the mask is applied.
Do you have an idea about what could be the problem ?
Thanks and have a nice day !
Duaran
//////////////////////////
With voronoi as "image" and circle "mask":
With rectangle as "image" and circle "mask" :
You can find my code below :
let masks;
let imgs;
function setup() {
createCanvas(800, 800);
noSmooth();
//Settings for drawing(these are the default values)
//Set Cell Stroke Weight
voronoiCellStrokeWeight(1);
//Set Site Stroke Weight
voronoiSiteStrokeWeight(3);
//Set Cell Stroke
voronoiCellStroke(0);
//Set Site Stroke
voronoiSiteStroke(0);
//Set flag to draw Site
voronoiSiteFlag(true);
noLoop()
imgs = createGraphics(width, height);
masks = createGraphics(width, height);
}
function draw(){
// for(let site=0;site<=10;site++){
// let result = random_inside_circle_voronoid(width/2,width/2,100);
// imgs.voronoiSite(result[0],result[1]);
// }
// imgs.voronoi(width, height, false);
// imgs.voronoiDraw(0,0, false, false);
imgs.fill(120,50,80);
imgs.rect(width/2,width/2,400,400);
masks.translate(width/2,width/2);
masks.stroke(1);
masks.fill(120,50,80);
masks.ellipse(0,0,300,300);
let imgClone = imgs.get();
imgClone.mask(masks.get());
image(imgClone,0,0);
}
function random_inside_circle_voronoid(Xcenter,Ycenter,r){
let result = r * sqrt(random(1))
let theta = random() * 2 * PI
x = Xcenter + result * cos(theta)
y = Ycenter + result * sin(theta)
return [x,y]
}
I'm doing a project where I overlay a diagram on a map to show the location of the nearest hospital in an area. Unfortunately, the mapped area is not very rectangular, so the diagram has very large cells around the edges that go into surrounding areas. Is there an elegant way to create a border on the voronoi diagram that more nearly matches the borders of the mapped area?
Is there any way to access the cell color based on cell id?
Suggestion for a function.
Returns a random point within the cell given the cell ID.
Doable?
Is it possible in the current library to change (eg. through mouseDragged()) the centroids of the cells? I have tried by accessing the sites using the diagram (voronoiGetDiagram()) but it does not work (plus I am guessing the diagram is readonly).
Thank you for making this library!
Currently, the user can set the width and height of the diagram, forming a rectangular frame that acts as the outer boundary. I'm looking to use a Perlin Noise Loop (or any non-rectangular shape) to act as this outer boundary instead. Do you have any insights into how to bound your diagram in that fashion? This feature may not have justification to be added to the base library.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.