loadPixels() 不适用于 p5.js

Question

我想使用 p5.js 编辑图像（或只是画布）的像素，它显示在他们网站的文档中：

var img;
function preload() {
  img = loadImage("assets/rockies.jpg");
}

function setup() {
  image(img, 0, 0);
  var d = pixelDensity();
  var halfImage = 4 * (img.width * d) *
      (img.height/2 * d);
  loadPixels();
  for (var i = 0; i < halfImage; i++) {
    pixels[i+halfImage] = pixels[i];
  }
  updatePixels();
}

所以我在 codepen 中尝试了正确链接 p5.js 的代码，但它不起作用（当然是我自己的图像）。

我在 Processing IDE 中自己做了一个版本，它可以工作，所以我尝试将它转换为 JS，我不明白为什么它不工作？

var img;

function setup() {
  createCanvas(500, 400);
  img = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/379903/image.png");  // Load the image

}

function draw() {
  background(255);

  image(img, 0, 0, 500, 400);



  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
        pixels[i] = color(255, i, 0);
  }

  updatePixels();
}

我只是希望能够编辑画布的像素，但它不允许我。

Here 是我正在使用的代码笔。

图像加载正常，但我无法编辑像素？

我在 Youtube 上关注了 Daniel Shiffman 的 tutorials。

感谢您的帮助，谢谢。

Answer 1

图片需要几秒钟才能加载。 setup() 函数和对draw() 函数的第一次调用在几毫秒内完成。 当您尝试绘制图像时，该图像未完成加载。这就是您得到空白画布的原因。

为了解决这个问题，p5.js 提供了一个preload() 函数：

在 setup() 之前直接调用，preload() 函数用于处理外部文件的异步加载。如果定义了预加载函数，setup() 将等到其中的任何加载调用完成。除了加载调用之外，什么都不应该在预加载（loadImage、loadJSON、loadFont、loadStrings 等）中。

将您的图像加载到 preload() 而不是 setup() 函数中：

var img;

function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw(){
  image(img, 0, 0, 500, 400);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

我不确定您要对像素做什么，因为您的其余代码没有多大意义。想想你的i 变量是什么以及color(255, i, 0) 应该返回什么。但希望该代码只是一个占位符，您现在可以继续加载图像了。

您可能想阅读pixels[] 数组。这是一个显示您的图像但每个像素强度减半的示例：

var img;
    
function preload(){
  img = loadImage("https://graph.facebook.com/100001230751686/picture?type=large");  
}

function setup() {
  createCanvas(500, 400);
  noLoop();
}

function draw() {
  background(0);
  image(img, 0, 0, 500, 400);
  loadPixels();

  for (var i = 0; i < pixels.length; i++) {
    pixels[i] = pixels[i]/2;
  }
  updatePixels();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>

Here is a CodePen 以上的如果你想玩的话。