README
[PIXELSPACE]
Pixelspace is minimalist toolkit for drawing pixels to an HTML5 Canvas. If features a concise drawing API, simple animation loop and a handful of helpful utilities.
Tested in Chrome, Firefox & Safari
Demo Site:
http://jeremyfromearth.com/pixelspace/demo/
Getting Started
Installation
npm install
Build Pixelspace
npm run build
Watch/build Pixelspace
npm run watch
Build Demos
npm run build-demos
Run Demos (python required)
npm run demos
This will start a simple Python based HTTP server and open your default browser to http://localhost:8000/demo
. You may need to refresh the page if it does not load right away. Alternatively, you can run the demos using jekyll serve
and navigating to http://localhost:4000/demo/
.
Anatomy of a Pixelspace App
A Pixelspace app consists of two components a Player
and a Renderer
. The Player
is mainly responsible for setting up a context for a Renderer
sub class to funtion within. Developing sketches for Pixelspace mostly involves sub-classing Renderer
, creating an instance of it and passing it to the Player
. Below is a very basic ES6 example of this.
import Pixelspace from 'lib/pixelspace';
class CustomApp extends Pixelspace.Renderer {
init() { /* initialize variables here */ }
step() { /* update variables here */ }
draw() { /* draw graphics here */ }
}
let canvas = document.getElementById("canvas");
let player = new Pixelspace.Player(canvas);
let custom_app = new CustomApp();
player.setRenderer(custom_app);
player.play();