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

Question

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

我的方法如下：

• 循环遍历每个像素
• 将描边设置为随机值
• 调用point()函数绘制像素

最初，我直接在draw函数中执行此操作，但速度非常慢。我只得到不到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)
        }
    }

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

- shaunakde

Answer 1

相信不相信，其实是调用stroke()导致你的画板速度变慢。你可以通过直接设置像素值，使用set()函数或直接访问pixels数组来解决这个问题。

更多信息可以在参考文献中找到，但这里有一个简单的例子：

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()函数创建的缓冲区加载即可。

- Kevin Workman