处理(Java)到p5js -小故障效应

Question

我是p5js的新手，我想用它在图像中产生噪声效果。我在处理过程中使用Java创建了一个函数草图，但是当我将它传递给p5j时，有些地方出错了。图片是下载在html字段hwne，但像素loc工作人员没有。谁能帮我！这是我的素描：

function  setup()
{
  createCanvas(400,300);
  img = loadImage("data/monja.jpg");
  //surface.setResizable(true);
  //surface.setSize(img.width, img.height);
  background(0);
}

function  draw()
{
  loadPixels();
  img.loadPixels();
  for (let x = 0; x < img.width; x++)
  {
    for (let y = 0; y < img.height; y++)
    {
      let loc = x+y*width;
      let c = brightness(img.pixels[loc]);
      let r = red(img.pixels[loc]);
      let g = green(img.pixels[loc]);
      let b = blue(img.pixels[loc]);
      if (c < 70){
          img.pixels[loc]= color(random(255));
      }
      else {
          img.pixels[loc] = color(r, g, b);
      }
    }
  }
  updatePixels();
  //image(img, 0, 0);
}```

Answer 1

要修改图像中某些像素的颜色，请记住以下几点。

当我们调用像素数组时，像素数组是一个数字数组。如果像素密度为1，则每个像素得到多少个数字，如果像素密度为1，则每个像素将在数组中得到4个数字，每个数字的值从0到255。transparency.的第一个数字决定像素中红色的数量，第二个绿色，第三个红色和第四个是transparency.的alpha值。

下面是一个示例，它将具有高红色值的像素更改为随机灰度，从而产生故障效果。

​

var img;
var c;
function preload(){
  img = loadImage("https://i.imgur.com/rpQdRoY.jpeg");
}

function  setup()
{
  createCanvas(img.width, img.height);
  background(0);
  let d = pixelDensity();
  img.loadPixels();
  for (let i = 0; i < 4 * (img.width*d * img.height*d); i += 4) {
    if (img.pixels[i] > 150 && img.pixels[i+1] <100&&img.pixels[i+2] < 100){
    let rColor = random(255);
    img.pixels[i] = rColor;
    img.pixels[i + 1] = rColor;
    img.pixels[i + 2] = rColor;
    img.pixels[i + 3] = rColor;
    }
  }
  img.updatePixels(); 
}
function draw() {
  image(img,0,0);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>

​