Tengo este problema, tengo un socket que me envía paquetes, cada uno de los cuales contiene una fila de un marco. Usando python, reconstruyo el cuadro completo como una matriz de píxeles RBG. ¿Cómo puedo representar esa matriz de píxeles en un lienzo, usando WebGL o algo similar?
Con Python SDL2 fue bastante fácil, ahora necesito hacer lo mismo en una página web.
Encontré una forma interesante de representar UN píxel aquí: ¿Cuál es la mejor manera de configurar un solo píxel en un lienzo HTML5?
No creo que haya una forma en Vanilla JavaScript de representar un solo píxel a la vez, pero la biblioteca p5.js (que uso mucho) tiene esta funcionalidad.
Algunas otras formas serían 1) Solo tener un renderizado cuadrado de 1x1 (actuando como un píxel). 2) Use imágenes 1x1 como en el enlace de stackoverflow de arriba.
EDITAR:
Encontré otro desbordamiento de pila sobre esto y aparentemente me equivoqué con el JavaScript estándar: dibujar un punto en el lienzo HTML5
Aquí está mi nueva y mejorada respuesta:
El problema es que no puedes cargar los píxeles muy rápido, renderizarlos es la parte fácil. Entonces, ¿por qué no reutilizar los píxeles ya cargados? Lo que he creado es una forma automatizada de cargar una matriz de píxeles y guardarlos para renderizarlos más tarde. Aquí está el código no optimizado:
let render; let pixelArray; function setup() { createCanvas(640, 480); render = new renderPixels(); pixelArray = Array(width*height).fill(0); pixelArray = pixelArray.map( r => {return color(random(255), random(255), random(255)) }); render.newImage("random", pixelArray, height, width); pixelArray = pixelArray.map( r => {return color(random(255), random(255), random(255)) }); render.newImage("random2", pixelArray, height, width); pixelArray = pixelArray.map( r => {return color(random(255), random(255), random(255)) }); render.newImage("random3", pixelArray, height, width); frameRate(5) //<-- Decrease to see full potential } function draw() { background(220); if(frameCount % 3 == 0){ render.loadImage(0, 0, "random"); } else if(frameCount % 3 == 1){ render.loadImage(0, 0, "random2"); } else { render.loadImage(0, 0, "random3"); } } class renderPixels { constructor(){ this.loadedImages = {} } newImage(name, arr, height, width){ let img = createImage(height, width); img.loadPixels(); for(let p = 0; p < (4 * height * width); p+=4){ const l = arr[p/4].levels; img.pixels[p] = l[0]; img.pixels[p+1] = l[1]; img.pixels[p+2] = l[2]; img.pixels[p+3] = l[3]; } img.updatePixels(); this.loadedImages[name] = img; } loadImage(x, y, name){ image(this.loadedImages[name], x, y); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>color() de P5.js (que no está muy optimizada) y funciona lo suficientemente bien.