rasterjs demos

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:

Inspired by the wonderful write-up: https://lodev.org/cgtutor/plasma.html

The plasma effect is a classic real-time visual effect that showed up in many old school demos. It works by accumulating multiple types of sin functions based upon position and time. These calculations are typically pre-computed and turned into lookup tables.


const ra = require('raster');

let n = 160;
ra.setSize({w: n, h: n});
ra.setZoom(2);
ra.useDips(['horizontal', 'spinning', 'concentric']);

// Grey scale palette
ra.usePalette('grey');

ra.run(function() {
  ra.fillFrame(function(x, y) {
    x /= n;
    y /= n;
    let t = ra.tick / 20;

    let v = 0;
    // Horizontal wave
    if (ra.dip['horizontal']) {
      v += Math.sin(x * 10 + t);
    }
    // Spinning wave
    if (ra.dip['spinning']) {
      v += Math.sin(10 * (x * Math.sin(t / 2) + y * Math.cos(t / 3)) + t);
    }
    // Concentric
    if (ra.dip['concentric']) {
      let cx = x + .5 * Math.sin(t / 5);
      let cy = y + .5 * Math.cos(t / 3);
      v += Math.sin(Math.sqrt(100 * (cx*cx + cy*cy) + 1) + t);
    }
    return valueToColor(Math.sin(v / ra.dip.length * ra.TAU));
  });
});

function valueToColor(v) {
  // v is -1 .. +1
  v = (v + 1.0) / 2;
  // v is 0 .. 1
  v = Math.floor(v * 255);
  // v is 0 .. 255
  return v;
}