Render an array of rgb pixels on a canvas

Question

I have this problem, I have a socket that sends me packets each one containing a row of a frame. Using python I reconstruct the full-frame as an array of RBG pixels. How can I render that array of pixels on a canvas, using WebGL or something similar?

With Python SDL2 was pretty easy, now I need to do the same on a webpage.

Answer 1

I found an interesting way to render ONE pixel here: What's the best way to set a single pixel in an HTML5 canvas?

I don't think there is a way in vanilla JavaScript to render a single pixel at a time, but the library p5.js (that I use a lot) does have this functionality.

A few other ways would be to 1) Just have a 1x1 square render (acting as a pixel). 2) Use 1x1 images like in the stackoverflow link above.

EDIT:

I found anouther stackoverflow about this and apparently I was wrong about vanilla JavaScript: Drawing a dot on HTML5 canvas

Answer 2

Here is my new and improved answer:

The problem is you cant load the pixels very fast, rendering them is the easy part. So why not reuse already loaded pixels? What I've created is an automated way to load an array of pixels and save them to be rendered later. Here's the not-to-optimized code:

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>

I could make this into vanilla JavaScript if you like, but I need to know the format of array of RGB pixels you talk about. Currently I'm using P5.js's color() function (which isn't very optimized) and it's working well enough.

Answer 3

Given RGBA data of the form [[123,32,40,255], [3,233,42,120], ...], this will return a canvas with that data:

function createCanvasFromRGBAData(data, width, height) {
  // `data` should look something like [[123,32,40,255], [3,233,42,120], ...]
  if(width*height !== data.length) throw new Error("width*height should equal data.length");
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  let ctx = canvas.getContext("2d");
  let imgData = ctx.createImageData(width, height);
  for(let i = 0; i < data.length; i++) {
    imgData.data[i*4+0] = data[i][0];
    imgData.data[i*4+1] = data[i][1];
    imgData.data[i*4+2] = data[i][2];
    imgData.data[i*4+3] = data[i][3];
  }
  ctx.putImageData(imgData, 0, 0);
  return canvas;
}