Estoy tratando de escribir un emulador basado en la web para una computadora de la vieja escuela que tiene gráficos asignados a la memoria. En este momento, solo estoy usando JavaScript y un lienzo HTML básico para intentar implementar esto, pero el rendimiento no está ahí para que sea una buena solución.

Básicamente, lo que quiero hacer es tener una gran variedad de valores de 8 bits que representen toda la RAM de la máquina que estoy emulando, donde una parte de ese espacio se designa como memoria de video. A medida que la CPU se ejecuta y posiblemente modifica esa memoria de video, el hardware de gráficos/pantalla sondearía esa misma área y presentaría la información (poco a poco) en la pantalla, quizás 50 o 60 veces por segundo.

Este sistema en particular tiene una pantalla monocromática, por lo que los datos en la memoria de video representarían cada píxel usando solo 1 bit (por lo que cada byte en la memoria representa 8 píxeles en la pantalla, encendido o apagado).

Mi primer intento (realmente solo como una prueba) fue solo una implementación de fuerza bruta usando el contexto de dibujo del lienzo (ctx en el código a continuación) y llamando a putImageData por píxel. Pero incluso si ignoramos la sobrecarga de analizar la información de 8 bits en el espacio de la memoria y solo escribimos un bucle for básico para activar cada píxel en la pantalla, el rendimiento de hacer esto usando este método es demasiado lento para algo parecido. a un bucle de visualización de 50 Hz:

 let row; let col; function draw() { for(row = 0; row < 256; row++) { for(col = 0; col < 512; col++) { canvas_context.putImageData(pixel_on, row, col); } } }

Realmente solo estoy buscando una comprensión de alto nivel sobre cuál es el mejor enfoque para implementar datos de gráficos mapeados en memoria usando JavaScript. Hay bibliotecas como Phaser que pueden ofrecer un mejor método, pero tal vez haya una buena manera con JavaScript simple y sencillo.