当前位置：文江博客话题详情

在P5J中创建掩码层

发布于 2025-01-21 17:20:02 字数 72 浏览 0 评论 0原文

我想绘制一个模式，然后只有该模式“通过”它与我指定的形状重叠。类似于掩码层在Photoshop中的工作方式。有人知道我如何处理吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

命硬 2025-01-28 17:20:02

我将使用这个4步过程：

使用beginshape（）/endShape创建掩码，而beginContour（）/endContour（）中间，以显示要显示的区域。您可以在缓冲区上执行此操作。

  function setup（）{
  CreateCanvas（400，400）;
  背景（30）
  填充（200,50,60）
  MSK = CreateGraphics（宽度，高度）
  模式= createGraphics（宽度，高度）
  Pixeldenty（1）
  msk.beginshape（）;
  //形状的外部部分，顺时针绕
  msk.vertex（0，0）;
  msk.vertex（400，0）;
  MSK.VERTEX（400，400）;
  msk.vertex（0，400）;
  //内部形状，逆时针绕组
  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（关闭）;
  mpixs = msk.loadpixels（）
}

然后为模式创建不同的缓冲区

  for（让C = 0; C＆lt; 9; C ++）{
  for（令r = 0; r＆lt; 9; r ++）{
    tatter.circle（宽度/8*C，高度/8*r，40）
  }    
}

现在从掩码加载像素，并在图案上每个相应像素的alpha级别上使用每个像素的alpha值。

  staters.loadpixels（）
msk.loadpixels（）
for（让i = 0; i＆lt; pattern.pixels.length; i+= 4）{
    pattern.pixels [i+3] = msk.pixels [i+3]
}
pattern.updatepixels（）

最后，只需使用image（模式，0,0）
将结果缓冲区添加到主画布中

请仔细地查看此工作示例！：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>

I would use this 4 step process:

create your mask with beginShape()/endShape and a beginContour()/endContour() in the middle for the area to be shown. You do this on a buffer.

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()
}

Then create a different buffer for the pattern

for (let c=0; c<9; c++) {
  for (let r=0; r<9; r++) {
    pattern.circle(width/8*c,height/8*r,40)
  }    
}

Now load pixels from the mask and use the alpha value of each pixel on the alpha level of each corresponding pixel on the pattern.

pattern.loadPixels()
msk.loadPixels()
for (let i=0; i < pattern.pixels.length; i+=4){
    pattern.pixels[i+3] = msk.pixels[i+3]
}
pattern.updatePixels()

Finally, just add the resulting buffer to your main canvas with image(pattern,0,0)

Take a look at this working example carefully coded just for you! :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>

回复收藏 0 原文

~没有更多了~