rasterjs demos - starfield

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:

The classic starfield is nice looking and easy to make effect. By tying together the star's speed and sprite size, a subtle 3-d effect is produced.


const ra = require('raster');

ra.setSize(256, 256);
ra.setZoom(2);

let stars = new Array(64);
for (let k = 0; k < stars.length; k++) {
  stars[k] = {};
  stars[k].x = Math.floor(Math.random() * 256);
  stars[k].y = Math.floor(Math.random() * 256);
  stars[k].s = Math.random() * 3 + 0.5;
}

ra.setColor(34);

function draw() {
  ra.fillColor(0);
  for (let k = 0; k < stars.length; k++) {
    ra.fillCircle({x: stars[k].x, y: stars[k].y, r: stars[k].s});
    stars[k].x += stars[k].s;
    if (stars[k].x >= 256) {
      stars[k].x -= 288;
      stars[k].y = Math.floor(Math.random() * 256);
      stars[k].s = Math.random() * 3 + 0.5;
    }
  }
}

ra.run(draw);