Быстрая покраска отдельных пикселей в P5.js - PullRequest
Новая
       12

Быстрая покраска отдельных пикселей в P5.js

0 голосов
/ 29 октября 2018

Я пытаюсь создать эффект статического типа старого телевизора в 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)
        }
    }

Но мне бы очень хотелось получить эффект пикселя - в идеале, чтобы заполнить весь экран.

1 Ответ

0 голосов
/ 29 октября 2018

Верьте или нет, но на самом деле вызов 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().

...