Coder Social home page Coder Social logo

p5.voronoi's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

p5.voronoi's Issues

Non-rectangular Diagram with mask() and createGraphics()

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":
image
With rectangle as "image" and circle "mask" :
image

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]
  }

Is there a way to create an irregularly-shaped diagram instead of a rect?

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?

Possibility to change centroids?

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).

Non-rectangular Diagram

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.