Bitmap-test

"Kind of" slow; maybe replacing the table with rows and columns of letters would speed it up. Next phase is to read (C header file -style) X PixMaps with XmlHttpRequest and display them add a 1-D Game of Life.

Bitmap.js:

function Bitmap( sizex, sizey, root, defaultcolor)
{
  this._sizeX =sizex;
  this._sizeY =sizey;
  
  this._scanline =[ ];
  this._tablename = root + 'BitmapTable';
  $( '#'  +root).append( '<table id=\"' +this._tablename +'\"></table>');
  for( var i =0; i <this._sizeY; i++)
  {
    this._scanline[ i] =[ ];
    $( '#' +this._tablename).append( '<tr id=\"' +this._tablename +'row' +i +'\"></tr>');
    for( var j =0; j <this._sizeX; j++)
    {
      this._scanline[ i][ j] =defaultcolor;
      $( '#' +this._tablename +'row' +i).append( '<td class=\"' +root +'BitmapTableCell\" id=\"' +this._tablename +'row' +i +'col' +j +'\"></td>').css( 'background-color', defaultcolor);
    }
    window.status =i + ' ' + j;
  }
}

Bitmap.prototype._sizeX;
Bitmap.prototype._sizeY;
Bitmap.prototype._scanline;
Bitmap.prototype._tablename;

Bitmap.prototype.getSizeX =function( )
{
  return this._sizex;
}
  
Bitmap.prototype.getSizeY =function( )
{
  return this._sizeY;
}

Bitmap.prototype.setPixel =function( x, y, color)
{
  this._scanline[ y][ x] =color;
}

Bitmap.prototype.getPixel =function( x, y)
{
  return this._scanline[ y][ x];
}

Bitmap.prototype.flip =function( )
{
  for( var i =0; i <this._sizeY; i++)
    {
      for( var j =0; j <this._sizeX; j++)
      {
        $( '#' +this._tablename +'row' +i +'col' +j).css( 'background-color', this._scanline[ i][ j]);
      }
    }
}

main.js:

function time( )
{
  return (new Date()).getTime();
}

$(document).ready( function() {
    var w =32;
    var h =32;

    var tinit =time( );
    var bitmap =new Bitmap( w, h, 'root', 'red');

    var tmanip =time( );
    for( var i =0; i <h; i++)
    {
      for( var j =0; j <w; j++)
      {
        bitmap.setPixel( j, i, ( i +j) %2 ? 'blue' :'green');
      }
    }

    var tflip =time( );
    bitmap.flip( );

    var tfinal =time( );
    var pixels =w *h;
    alert( 'create took ' + (tmanip -tinit) + ' ms (' + ( (tmanip -tinit) /pixels) + ' ms / pixel)\n'
    +'manip took ' + (tflip -tmanip) + ' ms (' + ( (tflip -tmanip) /pixels) + ' ms / pixel)\n'
    +'flip took ' + (tfinal -tflip) + ' ms (' + ( (tfinal -tflip) /pixels)   + ' ms / pixel)\n'
    +'total ' + (tfinal -tinit) + ' ms (' +  ( (tfinal -tinit) /pixels) + ' ms / pixel)\n');

    // load X pixmap image
    // ...
  });

main.css:

body {
    font-family : 'Lucida Grande', Arial, Helvetica, sans-serif;
    background : #000;
    color : #333;
    margin : 35px;
}

#rootBitmapTable {
    border : solid 4px #111;
    padding : 0px;
    border-spacing : 5px;
}

.rootBitmapTableCell {
    min-width : 10px;
    width : 10px;
    max-width : 10px;
    min-height : 10px;
    height : 10px;
    max-height : 10px;
    padding : 0px;
    margin : 0px;
    border : solid 1px #111;
}