Elija un Arte ASCII a desplegar del Combo Box; o escriba una cadena de texto compuesta de un carácter y un atributo, y una posición entre 0-3998:
Cadena de Texto:
Posición de Memoria (0-3998):

Posición de Cursor (0-1999):
Color de Overscan (0-15):






Modelando una VGA Estándar con HTML5 (Historia Informativa 5)

Acelerando la Emulación VGA de Texto/Atributos


Una Ínfima Optimización con Inmensa Diferencia

En varios tutoriales misceláneos sobre HTML5 y Canvas, se menciona de forma muy breve el hecho de que referenciar directamente la propiedad data de un ImageData hace que la ejecución sea dramáticamente más veloz, al manipular una gran cantidad de pixeles.

Esto se pone a prueba en este emulador de VGA, en el que, en la Parte Anterior (Parte 4) logramos implementar los caracteres parpadeantes y los atributos de color, tanto de fondo como del carácter en cuestión; pero con una deficiencia en el tiempo de escritura de la pantalla, que se llevaba cerca de 1.5 segundos al escribir la pantalla completa.

Con la optimización que hemos aplicado, la eficiencia ganada es una diferencia de tiempo que se redujo de 1.5 segundos a aproximadamente 0.1 segundos (un décimo de segundo).

La parte decisiva de lo que hicimos fue esto:

//2012-08-17:
//{METHOD 1}
//NOTA VITAL: Referenciar 'colored_glyph_0000.data' a través de 'cg_0000'
//            como una propiedd directa, ofrece una mejora de velocidad ENORME
//            comparado a usar 'colored_glyph_0000.data' para cada componente
//            de color de cada pixel cada vez; tan enorme que esta optimización
//            no es obvia.
//
// NOTA: ESTE ASÍ LLAMADO METHOD 1, en el que escribimos hasta 4
//       bytes individuales a través de un Uint8ClampedArray, es mucho
//       más rápido que pretender usar un DataView y actualizar 4 bytes por operación;
//       esto es así por lo menos cuando se trabaja con Canvas (para el Método 2,
//       es obvio que se requieren más "vistas", y por ende seguramente más conversiones,
//       lo cual vuelve lenta la operacion).
//
//       La eficiencia actual alcanzada hasta ahora es el máximo que puedo imaginar
//       actualmente, ¡y es inmensamente rápida con el {METHOD 1}!
//
 var colored_glyph_0000=HTML5_monitor_framebuffer.createImageData(8,16);
 var cg_0000=colored_glyph_0000.data;
     cg_0000.set(raw8x16Glyph_to_HTML5Canvas_data(0));  //Esto solo es relavante
                                                        //para escribir los valores
                                                        //Alpha de cada pixel del
                                                        //glifo a 255, para evitar
                                                        //reescribirlo cada vez que
                                                        //"coloreemos" dinámicamente
                                                        //un glifo, lo cual nos ahorra
                                                        //25% de procesamiento redundante
                                                        //del MISMO valor Alpha,
                                                        //una y otra vez.
                                                        //
                                                        //Aquí no importa qué glifo
                                                        //hay en memoria; sino solamente
                                                        //el hecho de establecer los valores
                                                        //Alpha de cada pixel a 255, de manera
                                                        //elegante (una línea).



El segundo factor decisivo fue que todas las variables que se encargan de manipular y contener datos de pixeles de la función writeVGADisplay_Text80x25 (la cual actualiza solamente la pantalla visible VGA, pero NO la memoria RAM emulada) ahora son globales en lugar de creadas localmente, dentro de la función.

Gracias a esto evitamos crear y liberar 512 bytes cada vez que llamemos esa función, lo que sería reservar/liberar 1024 bytes por carácter, sin contar la escritura del ImageData para ese carácter.

Si llenamos la pantalla, la cual contiene 2000 caracteres, serían 1024000 bytes, 512000 bytes reservados y 512000 liberados (¡casi 1 Megabyte!), además de otros 768000 bytes escritos en los pixeles que le corresponden a cada carácter (son casi 1.75 Megabytes que nos estamos ahorrando tener que manipular por cada pantalla completa).

Al escribir, son 768000 bytes que escribimos en valores de pixeles, gracias a que primero creamos una variable global con una plantilla de caracteres ASCII (colored_glyph_0000) a la que hemos puesto todos sus valores de RGBA de Alpha a 255, y por eso nos ahorramos un 25% de procesamiento de ahí en adelante.

Ahora debemos empezar a emular diferentes componentes de una PC (CPU, timers, espacio de registros de Entrada/Salida, teclado) con el objetivo primario de retroalimentar la comprobación de una correcta emulación de la VGA, y gracias a esto, podremos también implementar los modos gráficos, como 320x200x256, 320x240x256 y 640x480x16; aparte de que tendremos las capacidades más básicas y estandarizadas, empacadas en una aplicación HTML5 Y JavaScript moderna, capaz incluso de correr un sistema DOS real y juegos antiguos, y así tener una máquina virtual x86 que implementar, mejorar y volver más poderosa a lo largo de nuestro tiempo como desarrolladores.

Para terminar, hay que mencionar que esta Parte 5 del Emulador VGA tiene la capacidad de hacer cambiar el color del cursor de forma dinámica, al color del carácter, pero NO del fondo, de la celda sobre la que se encuentra. Por ahora este color a veces falla en cambiar; pero por ahora es suficientemente estable como para permitir que el cursor sea perfectamente visible sin importar el fondo de la celda en el que está (gracias a que ahora toma el color de fondo del carácter de forma dinámica).

Y la deficiencia más fácil que se solucionó en esta Parte 5 es hacer que los caracteres parpadeantes usen solo la versión "opaca" del color de fondo (usando solo los bits 0-2 del color de fondo y forzando el bit 3 de dicho color de fondo a 0 al momento de desplegar el carácter, pero sin cambiarlo en la memoria RAM).

Tengo una laptop HP nx6110 sobre la que estoy haciendo el 99.99% de las pruebas del emulador hasta ahora, y esta tiene un ventilador interno que se acelera audiblemente cada vez que el CPU llega a 75% o más de carga de procesamiento. La Parte 4 de este tutorial de emulador de VGA hacía que este ventilador se acelerara (en otras palabras, el procesamiento se disparaba) casi inmediatamente, especialmente cuando escribía varias veces la pantalla rápidamente, o había caracteres parpadeantes. Con las optimizaciones que se han aplicado, el ventilador tarda más en acelerarse, lo que significa que la carga y el nivel de procesamiento son considerablemente menores, y de forma correspondiente, el tiempo que toma en escribir una pantalla completa, llena de color y caracteres parpadeantes, es dramáticamente menor.

Eso solo significa más capacidad de procesamiento disponible para otros componentes más relevantes de una PC estándar emulada, más allá de solamente el componente VGA.