时间戳

首页 > 解决方案 > 在 P5.js 中快速绘制单个像素

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

问题描述

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

我的方法如下：

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

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)
        }
    }

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

标签： graphicsp5.js

解决方案

信不信由你，这实际上是在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()函数创建的图像文件或缓冲区加载。

推荐阅读