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

Question

我是 p5js 的新手，我想用它在图像中创建噪点效果。我在处理中使用 Java 创建了一个功能草图，但是当我将它传递给 p5j 时出现了问题。该图像是在我放置的 html 字段中下载的，但像素位置工作人员没有。谁能帮我！！这是我的草图：


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>

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

Processing(Java) to p5js - glitch effect

processing

p5.js