Me gustaría dibujar un patrón, y luego solo mostrar ese patrón donde se superpone con una forma que especifique. Similar a cómo funciona una capa de máscara en Photoshop. ¿Alguien sabe cómo puedo abordar esto?
Solución del problema
Esto debería usar un proceso de 4 pasos:
cree su máscara con beginShape()/endShape y beginContour()/endContour() en el medio para que se muestre el área. Haces esto en un búfer.
function setup() {
createCanvas(400, 400);
background(30)
fill(200,50,60)
msk = createGraphics(width,height)
pattern = createGraphics(width,height)
pixelDensity(1)
msk.beginShape();
// Exterior part of shape, clockwise winding
msk.vertex(0, 0);
msk.vertex(400, 0);
msk.vertex(400, 400);
msk.vertex(0, 400);
// Interior part of shape, counter-clockwise winding
msk.beginContour();
msk.vertex(20, 20);
msk.vertex(50, 220);
msk.vertex(120, 380);
msk.vertex(370, 320);
msk.vertex(240, 160);
msk.vertex(350, 40);
msk.endContour();
msk.endShape(CLOSE);
mPixs = msk.loadPixels()
}
Luego crea un búfer diferente para el patrón.
for (let c=0; c<9; c++) {
for (let r=0; r<9; r++) {
pattern.circle(width/8*c,height/8*r,40)
}
}
Ahora cargue píxeles de la máscara y use el valor alfa de cada píxel en el nivel alfa de cada píxel correspondiente en el patrón.
pattern.loadPixels()
msk.loadPixels()
for (let i=0; i < pattern.pixels.length; i+=4){
pattern.pixels[i+3] = msk.pixels[i+3]
}
pattern.updatePixels()
Finalmente, simplemente agregue el búfer resultante a su lienzo principal conimage(pattern,0,0)
¡Eche un vistazo a este ejemplo de trabajo cuidadosamente codificado solo para usted!:D
let msk, pattern, mPixs
function setup() {
createCanvas(400, 400);
background(30)
fill(200,50,60)
msk = createGraphics(width,height)
pattern = createGraphics(width,height)
pixelDensity(1)
msk.beginShape();
// Exterior part of shape, clockwise winding
msk.vertex(0, 0);
msk.vertex(400, 0);
msk.vertex(400, 400);
msk.vertex(0, 400);
// Interior part of shape, counter-clockwise winding
msk.beginContour();
msk.vertex(20, 20);
msk.vertex(50, 220);
msk.vertex(120, 380);
msk.vertex(370, 320);
msk.vertex(240, 160);
msk.vertex(350, 40);
msk.endContour();
msk.endShape(CLOSE);
mPixs = msk.loadPixels()
}
function draw() {
for (let c=0; c<9; c++) {
for (let r=0; r<9; r++) {
pattern.circle(width/8*c,height/8*r,40)
}
}
for (let c=0; c<9; c++) {
for (let r=0; r<9; r++) {
let xo=random(-5,5), yo=random(-5,5)
circle(width/8*c+xo,height/8*r+yo,50)
}
}
pattern.loadPixels()
msk.loadPixels()
for (let i=0; i < pattern.pixels.length; i+=4){
pattern.pixels[i+3] = msk.pixels[i+3]
}
pattern.updatePixels()
image(pattern,0,0)
}html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
No hay comentarios.:
Publicar un comentario