Home :: GUI :: Utilities

  1. Introduction
  2. Reference
    1. Methods
      1. constructor
      2. make_bitmap
      3. make_rows
      4. set_pixel
      5. get_pixel
      6. update
      7. set_pixel_visibility
      8. set_pixel_color
    2. Properties
      1. width
      2. height
      3. cell_width
      4. cell_height
      5. cell_gap
      6. cell_full_width
      7. cell_full_height
      8. grid_width
      9. grid_height
      10. pixels
      11. rows
      12. auto_update
  3. Use
    1. Loading Bitmap into you SVG Document
    2. Creating a Bitmap
    3. Example
  4. Download

Introduction

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.


Reference

Methods

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.

Properties


Use

Loading Bitmap into your SVG document

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:

Creating a Bitmap

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);

Example

Please take a look at Langton's Ants to see an example of Bitmap in action.


Download

Bitmap_1_1.js