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?
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>