Mask function with external SVG shape

p5.js Coding Questions
1

Hi,

I’m using using P5.js with a node.js server.
I’m trying to fill a SVG shape (external .svg file), with some drawing functions.
To test it I’ve took some dots filling functions I’ve found, but it’s not the important part for now (it could be something else in the end).
The thing is I’m trying to find a way to fill my SVG shape with this function.

So, I succeed in filling a shape a draw within the code with createGraphics function, and mask function.

let balayageTrig = false;
let cols; let rows;
let spacing = 5;
let size = [];
let balfill;
let shapeCircle;


function setup() {
    createCanvas(1920, 1080);
   
    dim = width/10;

    noStroke();
    ellipseMode(RADIUS);
    cols = 600/spacing;
    rows = 200/spacing;

//The shape I want to fill
    shapeCircle = createGraphics(800,800);
    shapeCircle.ellipse(200,200,200,200);

//The filling
    for(let i=0; i<rows; i++){
      size[i] = [];
      for(let j=0; j<cols; j++){
        size[i][j] = (rows-i)/cols*spacing;
      }
    }
    balfill = createGraphics(600, 600);
    for(let i =0; i<rows; i++){
      for(let j=0; j<cols; j++){
        balfill.fill(i/(rows-1)*800);
        balfill.ellipse(spacing+i*spacing, spacing+j*spacing, size[i][j]+2, size[i][j]+2);
      }
     }

//the mask function call to apply filling
     balfill=balfill.get();
     balfill.mask(shapeCircle);
    }
  
  


  function draw() {
    background(0);
    

     if (balayageTrig) {
      image(balfill, mouseX, mouseY);
     }
    }
     



     function mousePressed(){
       balayageTrig = true;
       }
       
       function mouseReleased(){
         balayageTrig = false;
       }

But when I try to do so with an external SVG I load this way :

let balayageTrig = false;
let silhouet;
let cols; let rows;
let spacing = 5;
let size = [];
let balfill;



function setup() {
    createCanvas(1920, 1080);
   
    dim = width/10;

    noStroke();
    ellipseMode(RADIUS);
    cols = 600/spacing;
    rows = 200/spacing;

//My external SVG file I want to fill
    silhouet = loadImage('/assets/sil.svg');

//Still my filling
    for(let i=0; i<rows; i++){
      size[i] = [];
      for(let j=0; j<cols; j++){
        size[i][j] = (rows-i)/cols*spacing;
      }
    }
    balfill = createGraphics(600, 600);
    for(let i =0; i<rows; i++){
      for(let j=0; j<cols; j++){
        balfill.fill(i/(rows-1)*800);
        balfill.ellipse(spacing+i*spacing, spacing+j*spacing, size[i][j]+2, size[i][j]+2);
      }
     }

//the mask that doesn't work on my SVG file
     balfill=balfill.get();
     balfill.mask(silhouet);
    }
  
  


  function draw() {
    background(0);
    

     if (balayageTrig) {
      image(balfill, mouseX, mouseY);
     }
    }
     

     function mousePressed(){
       balayageTrig = true;
       }
       
       function mouseReleased(){
         balayageTrig = false;
       }

It doesn’t work, but I’ve no error or any output from console.
So I guess there’s something wrong in my approach, maybe, about the way to load my svg file (maybe find a way to load it through a createGraphics function or something like this, but I’m not skilled enough to find it myself…)

Thanks

2

Ok, solved it by deplacing my imageLoad to a preload function, instead of the setup function and it works.
So, I don’t understand why this is necessary, but this work, so it’s ok.

1 Like