shapesp5.js

How to Fill P5.js Shape with an Image


I have created a shape using beginShape, endShape and curveVertex. My code looks like that:

function setup() {
 createCanvas(400, 400);
}

function draw() {
 background(220);

 strokeWeight(5);
 point(84, 91);
 point(68, 19);
 point(21, 17);
 point(32, 91);
 strokeWeight(1);

 fill(0); // HOW TO FILL WITH IMAGE
 beginShape();
 curveVertex(84, 91);
 curveVertex(84, 91);
 curveVertex(68, 19);
 curveVertex(21, 17);
 curveVertex(32, 91);
 curveVertex(32, 91);
 endShape(CLOSE);
}

Instead of filling shape with a color, I want to fill it with an image. Is it possible with P5.js?


Solution

  • You can do it by using the mask() function. In your case, create a graphics object and draw the shape you want and then use it as a mask for the image:

    let img
    let shape 
    
    function preload(){
     img = loadImage('https://picsum.photos/100')
    }
    
    function setup() {
     createCanvas(300, 100);
     
     // Create new p5 graphics object
     shape = createGraphics(100, 100);
     
     background(220);
    
     // Draw the shape
     shape.strokeWeight(5);
     shape.point(84, 91);
     shape.point(68, 19);
     shape.point(21, 17);
     shape.point(32, 91);
     shape.strokeWeight(1);
    
     shape.fill(0);
     shape.beginShape();
     shape.curveVertex(84, 91);
     shape.curveVertex(84, 91);
     shape.curveVertex(68, 19);
     shape.curveVertex(21, 17);
     shape.curveVertex(32, 91);
     shape.curveVertex(32, 91);
     shape.endShape(CLOSE);
     
     image(img, 0, 0)
     image(shape, 100, 0)
     
     // Use the shape as a mask
     img.mask(shape)
     
     image(img, 200, 0)
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>