Is it possible to fill a shape in with multiple colors/patterns if they are intersecting with an underlying shape or intersected with a line?
For example, we can see that the square has two different fills in the top-left half and bottom-right half.
1 Answers
One option would be to use mask().
This works on both PImage and PGraphics instances.
If you have an image of the top left diagonals (let's call it diagonals) and another of the green grid (let's call it grid), then you simply need to apply a masks (let's call it gridMask) one of the images, for example, the lower right triangle:
grid.mask(gridMask);
What's what will be be revealed, what's black will be masked.
You could use the same principle with PGraphics:
size(300, 300);
PGraphics diagonalsLayer = createGraphics(width, height);
diagonalsLayer.beginDraw();
diagonalsLayer.strokeWeight(3);
diagonalsLayer.fill(#114866);
diagonalsLayer.triangle(0, 0, width, 0, 0, height * 0.5);
diagonalsLayer.fill(#FFFFFF);
diagonalsLayer.triangle(width, 0, 0, height * 0.5, 0, height);
diagonalsLayer.fill(0);
diagonalsLayer.rectMode(CENTER);
diagonalsLayer.rect(width * 0.5, height * 0.5, 75, 75, 30, 30, 30, 30);
diagonalsLayer.endDraw();
PGraphics gridLayer = createGraphics(width, height);
gridLayer.beginDraw();
gridLayer.background(#d1e5f0);
gridLayer.stroke(#127e6c);
gridLayer.strokeWeight(3);
int gridSize = width / 5;
for(int i = 0; i < 5; i++){
gridLayer.line(gridSize * i, 0, gridSize * i, height);
gridLayer.line(0, gridSize * i, width, gridSize * i);
}
gridLayer.rectMode(CENTER);
gridLayer.noFill();
gridLayer.stroke(#000000);
gridLayer.rect(width * 0.5, height * 0.5, 75, 75, 30, 30, 30, 30);
gridLayer.endDraw();
PGraphics gridMask = createGraphics(width, height);
gridMask.beginDraw();
gridMask.background(0);
gridMask.noStroke();
gridMask.triangle(width, 0, width, height, 0, height);
gridMask.endDraw();
gridLayer.mask(gridMask);
image(diagonalsLayer, 0, 0);
image(gridLayer, 0, 0);
Related