Question

我正在尝试在P5.js中制作旧的电视静态类型的效果，尽管我能够使该效果起作用，但是帧速率却很低。

我的方法如下：

遍历每个像素
将笔划设置为随机值
调用point（）函数绘制像素

最初，我是直接在draw函数中执行此操作的，但速度非常慢。我每秒不到一帧。因此，我切换到以下绘画缓冲区方法：

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中快速绘制单个像素

1 个答案: