loadPixels(）不适用于p5.js

loadPixels() not working with p5.js

本文关键字：p5 js 适用于 不适用 loadPixels      更新时间：2024-05-22

我想使用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();
}

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

这是我正在用的电笔。

图像加载良好，但我无法编辑像素？

我在Youtube上学习Daniel Shiffman的教程。

感谢您的帮助。

加载图像需要几秒钟的时间。setup()函数和对draw()函数的第一次调用在几毫秒内完成当你试图绘制图像时，它还没有加载完毕。这就是为什么你会得到一个空白画布。

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

preload（）函数在setup（）之前直接调用，用于处理外部文件的异步加载。如果定义了预加载函数，setup（）将等待，直到内的任何加载调用完成。除了load调用之外，预加载（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>

如果你想玩的话，这里有一个上面的CodePen。

相关文章：