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);
Previous: Using color | Table of Contents | Next: Full fills |