Animation

You can make more than just still pictures with raster.js. To animate a scene, pass a draw function to ra.run (it can be named anything, but draw is a common choice). This function is invoked every frame, and can use the special value ra.time, which represents the number of seconds that have passed since the app was started. By multiplying by 3, the fill color changes 3 times a second.

const ra = require('raster'); ra.setSize(20, 25); ra.setZoom(4); function draw() { ra.fillColor(32 + (ra.time * 3) % 16); } ra.run(draw);

Most animations will want to start with a call to ra.fillColor to erase the previous frame.

An easy animation effect is using ra.oscil to get an oscilating value. This method only uses named parameters: 'max' is for the maximum value to reach.

const ra = require('raster'); ra.setSize(20, 25); ra.setZoom(4); function draw() { ra.fillColor(29); ra.fillSquare({x: 4, y: 4, size: ra.oscil({max:12})}); } ra.run(draw);

There's also a few methods for manipulating shapes, such as ra.rotatePolygon:

const ra = require('raster'); ra.setSize(20, 25); ra.setZoom(4); ra.setColor(32); let polygon = [ [2, 1], [16, 3], [14, 15], [4, 13], ]; function draw() { ra.fillColor(36); let rot = ra.rotatePolygon(polygon); ra.drawPolygon(rot, 1, 2); } ra.run(draw);