Bitmap allows you to simulate a bitmap (single-colored image) in SVG. This can be used to show an enlarged bitmap while maintaining a low memory profile and a relatively quick startup time. Potential effects with Bitmap include building up an image one line at a time or having an image appear with the convergence of seemingly random lines.
constructor - new Bitmap(parent, width, height, cw, ch, cg);
parent is the parent node to which the bitmap will be appended.
width is the number of columns in the bitmap.
height is the number of rows in the bitmap.
cw is the width of a pixel in user-coordinates.
ch is the height of a pixel in user-coordinates.
cg is the space between pixels in user coordinates.
make_bitmap - make_bitmap(parent) - create the SVG tree that represents the bitmap
make_bitmap() creates the nodes and DOM structure needed to represent the bitmap. The resulting tree is appended to the specified parent. This is used internally to the Bitmap class. There should be no need to call this method.
parent is the parent node to which the bitmap DOM tree will be appended.
make_rows - make_rows(parent) - create the SVG elements for each row
make_rows() creates the individual <line> elements, one for each row in the Bitmap. Each row's DOM tree is appended to the specified parent. There should be no need to call this method.
parent is the parent node to which the bitmap DOM tree will be appended
set_pixel - set_pixel(x, y, value) - set the value of a pixel
set_pixel() sets the pixel value at the specified x and y coordinates. The x and y coordinates are checked to make sure they are in a valid range.
x is the horizontal integer coordinate of the pixel to set.
y is the vertical integer coordinate of the pixel to set.
value is the value to which the pixel is set. Zero turns off the pixel. Any other number, turns on the pixel
get_pixel - get_pixel(x, y) - get the value of a pixel
get_pixel() returns the pixel value at the specified x and y coordinates. The x and y coordinates are checked to make sure they are in a valid range.
x is the horizontal integer coordinate of the pixel to get.
y is the vertical integer coordinate of the pixel to get.
update - update() - redraw all lines in the Bitmap
update() forces all rows in the Bitmap to redraw. This can be used to post-pone an update to the Bitmap until all changes are finalized. This can have the benefit of reduces redraw times if used carefully.
set_pixel_visibility - set_pixel(setting) - set the current visibility of all pixels
set_pixel_visibility() sets the current visibility of all pixels. Valid values are "inline" and "none". Use this to show and hide the pixels of a Bitmap.
set_pixel_color - set_pixel(color) - set the color of all pixels
set_pixel_color() sets the color of all pixels.
width is the width of the Bitmap.
height is the height of the Bitmap.
cell_width is the number of columns in the Bitmap.
cell_height is the number of rows in the Bitmap.
cell_gap is the distance between pixels.
cell_full_width is a convenience property that is the width of a pixel plus the space following it.
cell_full_height is a convenience property that is the height of a pixel plus the space following it.
grid_width is convenience property that is the total width of the bitmap. This value takes into account the width of a pixel and the space between pixels. This is the true width of the Bitmap in user-coordinates.
grid_height is convenience property that is the total height of the bitmap. This value takes into account the height of a pixel and the space between pixels. This is the true height of the Bitmap in user-coordinates.
pixels is the <g> element that is created to contain all of the rows of the Bitmap.
rows is an array of the rows of the Bitmap.
auto_update is a boolean. When this value is true, the row referenced in set_pixel will be automatically updated once the new pixel value has been set. This can be useful when you are changing only a pixel or two at a time as "update" refreshes all rows in the Bitmap. However, if you are making a large number of updates that effect most rows in the Bitmap, then it is better to leave this value at is default of "false" and then call "update" once you have completed your operations on the Bitmap.
In order to use the Bitmap object in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if Bitmap.js is in the same directory as your SVG document, then you would include the Bitmap object with the following text:
<script xlink:href="Bitmap.js" />
In order to create a new Bitmap object, you need to know the following: the node to which to append the Bitmap, the number of columns and rows in the Bitmap, the pixel width and height, and the space between pixels. The following line creates a Bitmap that has 100 columns and 200 rows with pixels are 2 units wide and 4 units tall with 2 units between them. The textbox is appended to the grid.
bitmap = new Bitmap(grid, 100, 200, 2, 4, 2);
Please take a look at Langton's Ants to see an example of Bitmap in action.