在 P5.js 中快速绘制单个像素

Question

我正在尝试在 P5.js 中制作旧电视静态类型效果，虽然我能够制作效果，但帧率非常低。

我的方法如下：

遍历每个像素
将笔画设置为随机值
调用point()函数绘制像素

最初，我是直接在绘制函数中这样做的，但是速度很慢。我每秒不到 1 帧。所以我切换到以下绘画缓冲区方法：

const SCREEN_WIDTH = 480
const SCREEN_HEIGHT = 480

var ScreenBuffer;

function setup(){
    createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
    ScreenBuffer = createGraphics(SCREEN_WIDTH,SCREEN_HEIGHT);
}

function draw(){
paintBuffer();
image(ScreenBuffer,0,0);
}

function paintBuffer(){
    console.log("Painting Buffer")
    for(var x = 0; x< SCREEN_WIDTH; x++){
        for(var y = 0; y< SCREEN_HEIGHT; y++){
            ScreenBuffer.stroke(Math.random() * 255)
            ScreenBuffer.point(x,y)
        }
    }
}

虽然我的性能得到了提升，但它离我想要的每秒 30 帧还差得很远。有更好的方法吗？

获得合理性能的唯一方法是用小方块填充屏幕，而不是使用以下代码：

for(var x = 0; x< SCREEN_WIDTH-10; x+=10){
        for(var y = 0; y< SCREEN_HEIGHT-10; y+=10){
            //ScreenBuffer.stroke(Math.random() * 255)
            //ScreenBuffer.point(x,y)
            ScreenBuffer.fill(Math.random() * 255);
            ScreenBuffer.noStroke()
            ScreenBuffer.rect(x,y,10,10)
        }
    }

但我真的很想要像素效果 - 最好能填满整个屏幕。

Answer 1

信不信由你，实际上是对 stroke() 的调用拖慢了您的草图。您可以通过直接设置像素值、使用 set() 函数或直接访问 pixels 数组来解决此问题。

可以在 the reference 中找到更多信息，但这里有一个简单的例子：

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

function draw() {

    for (var i = 0; i < width; i++) {
        for (var j = 0; j < height; j++) {
            var c = random(255);
            set(i, j, c);
        }
    }
    updatePixels();

    text(frameRate(), 20, 20);
}

您可能会考虑的另一种方法是提前生成一些包含静态图像的缓冲区，然后使用它们绘制静态图像。真的没有必要让静态完全动态，所以只做一次工作，然后只需从使用 createGraphics() 函数创建的图像文件或缓冲区加载。

在 P5.js 中快速绘制单个像素

Painting individual pixels quickly in P5.js

graphics

p5.js