处理（Java）到p5js-毛刺效应

Question

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

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

要修改图像中某些像素的颜色，这里有一些要记住的事情。

• 当我们调用loadPixels时，像素数组是一个数字数组。
• 每个像素得到多少个数字由像素密度决定
• 如果像素密度为1，则每个像素将在数组中得到4个数字，每个数字的值从0到255。
• 第一个数字决定像素中红色的数量，第二个绿色，第三个红色，第四个是透明度的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>