rasterjs demos - traffic

Field

Palette

rgb map

Tileset

Colorspace

Screen Splits

Dip Switches

Info

Grid:
Pixel (x,y):
Tile (x,y):
TileID:
Field Value:
Cell (x,y):
Cspace Piece:
Palette Index:
Color:
Scroll X:
Scroll Y:
Split Number:

Colorspaces allow palettes to be assigned to specific regions of the scene, referred to as cells. They can be used to make color cycling effects that happen in a specific location, and that location can move.

Note that, from the palette's perspective, only 1 color is being cycled. When a light fades out and goes completely dark, the colorspace is modified, which changes where the cycling color appears.


const ra = require('raster');
ra.setZoom(6);

let colorValues = ra.loadImage('/img/traffic-colors.png');
colorValues.then(() => {
  let palette = ra.usePalette({entries:[3,15,2,1,0,
                                        3, 0,2,1,0,
                                        7,11,2,1,0]});

  // draw the traffic light image
  let image = ra.loadImage('/img/traffic-light.png');
  image.then(() => {
    ra.paste(image);

    // colorspace component divides the field in cells, each cell uses
    // its own palette
    let colors = new ra.Field();
    colors.setSize(3, 5);
    colors.fillPattern([[1, 1, 1],
                        [1, 0, 1],
                        [1, 1, 1],
                        [2, 1, 2],
                        [2, 2, 2]]);
    ra.useColorspace(colors, {cell_width: 12, cell_height: 12, piece_size: 5});

    ra.run(draw);
  });

  function draw() {
    let t = Math.floor(ra.tick / 12);

    // change which light is in use
    let whichLight = Math.floor(t / 8) % 3;
    ra.colorspace.put(1, 1, 1);
    ra.colorspace.put(1, 2, 1);
    ra.colorspace.put(1, 3, 1);
    ra.colorspace.put(1, whichLight+1, 0);

    // palette changes
    let u = t % 8;
    let lookup = [0, 4, 5, 6, 6, 6, 5, 4];
    let color = (u == 0) ? 0 : lookup[u] + whichLight*4;
    palette.put(1, color);
  }
});