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

[Duaran]

Hello @Dozed12 !

Like kitchensjn on this issue : https://github.com/Dozed12/p5.voronoi/issues/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]
  }

[Dozed12]

Hello Duaran

voronoiDraw draws to the canvas directly so you need to read the canvas to "imgs":

let masks;
let imgs;
let canvas;
function setup() {

    canvas = 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);
        voronoiSite(result[0], result[1]);

    }
    voronoi(width, height, false);
    voronoiDraw(0, 0, false, false);

    imgs.image(canvas, 0, 0);

    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());
    clear();
    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]
}

[Duaran]

Hello,

Thank you for your help and quick answer !