处理Java到 p5js - 故障效果

问题描述

我是 p5js 的新手，我想用它在图像中创建噪声效果。我在处理中使用 Java 创建了一个功能草图，但是当我将它传递给 p5j 时，出现了问题。图像是在我放置的 html 字段中下载的，但像素 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);
}```

解决方法

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

当我们调用 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);
}

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

p5.js processing processing processing