mohayonao / gretro

:art: JavaScript graphic library for retro CG

gretro

Gretro (grétrou, グレトロ) is a JavaScript graphic library for retro CG.

Features

• 16 colors chosen from available 4096 colors
• 16 default tile patterns and 16 custom tile patterns
• drawing in pixels, no anti aliasing
• plugin architecture for extending gretro.Canvas

Online Playground

• http://mohayonao.github.io/gretro/

Install

browser

• gretro.js
• gretro.min.js

$ bower install gretro

<script src="/path/to/gretro.js"></script>

node.js

% npm install gretro

Usage

var canvas = new gretro.Canvas(220, 110);

canvas
  .stroke(13).circle( 40, 40, 30)
  .stroke( 7).circle(110, 40, 30)
  .stroke(10).circle(180, 40, 30)
  .stroke(14).circle( 75, 70, 30)
  .stroke(12).circle(145, 70, 30);

Rendering

browser

var gretroCanvas = new gretro.Canvas(640, 400).draw(fn);

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageData = context.createImageData(640, 400);

imageData.data.set(gretroCanvas.toRGBA());

context.putImageData(imageData, 0, 0);

draw directly to the html-canvas

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageData = context.getImageData(0, 0, 640, 400);

new gretro.Canvas(640, 400, imageData.data).draw(fn);

context.putImageData(imageData, 0, 0);

node.js

use node-png npm install png

var Png = require("png").Png;
var fs  = require("fs");

var png = new Png(new Buffer(gretroCanvas.toRGB()), 640, 400, "rgb");
var png_image = png.encodeSync();

fs.writeFileSync("./image.png", png_image.toString("binary"), "binary");

API

Canvas

Constructor

• new Canvas(width:int=640, height:int=400, buffer:Uint8Array=null) : Canvas

Instance methods

Environment

• getWidth() : int
• getHeight() : int
• getRawData() : Uint8Array

Setting

• getColor(index:int) : int
• setColor(index:int, rgb:int) : Canvas
• getTile(index:int) : int
• setTile(index:int, pattern:int) : Canvas

Color

• fill(color:[int|array|function]) : Canvas
• noFill() : Canvas
• stroke(color:[int|array|function]) : Canvas
• noStroke() : Canvas

Region

• clear() : Canvas
• clip(x1:int, y1:int, x2:int, y2:int) : Canvas
• noClip() : Canvas
• mask(mask:[Uint8Array|Canvas]) : Canvas
• noMask() : Canvas

Shape

• arc() (NOT IMPLEMENTED YET)
• circle(cx:int, cy:int, r:int) : Canvas
• ellipse(cx:int, cy:int, rx:int, ry:int) : Canvas
• line(x1:int, y1:int, x2:int, y2:int) : Canvas
• point(x:int, y:int) : Canvas
• polygon(vtx:array) : Canvas
• quad(x1:int, y1:int, x2:int, y2:int, x3:int, y3:int, x4:int, y4:int) : Canvas
• rect(x:int, y:int, width:int, height:int) : Canvas
• triangle(x1:int, y1:int, x2:int, y2:int, x3:int, y3:int) : Canvas

Image

• clone() : Canvas
• copy(x1:int, y1:int, x2:int, y2:int) : Canvas
• paste(cnv:Canvas, x:int, y:int) : Canvas

Output

• toMask() : Uint8Array
• toRGB() : Uint8Array
• toRGBA(alpha:int=255) : Uint8Array
• toIndexedColor() : Uint8Array

Utility

• draw(fn:function) : Canvas

Color

You can use 16 colors on a canvas. It is possible to select from 4096 colors.

default color palette

customize color

canvas
  .setColor(0, 0x44dd77).setColor(1, 0x22aa88)
  .fill(1).rect(20, 20, 60, 60);

color generator

set a function that returns a calculated color number instead of a color number.

canvas
  .fill(function(x, y) {
    return 16 * Math.random();
  }).rect(20, 20, 60, 60);

Tile

A tile is a 4 x 4 dot pattern with 2 colors that is used to express gradation in generally.

usage

Set array that contains color1, color2 and tile-index instead of a color number.

canvas.fill([ color1, color2, tileIndex ]);

default tile palette

custom tile

TileIndex 16-31 are customizable.

canvas
  .setTile(16, 0x4a12)
  .stroke(13).fill([ 0, 13, 16 ])
  .circle(50, 50, 40, 40);
/* 1 2 4 8
   □ ■ □ □ = 2
   ■ □ □ □ = 1
   □ ■ □ ■ = a
   □ □ ■ □ = 4
            0x */

Plugins

gretro-text

plugin to draw a text

gretro-paint

plugin to paint a region

Contribution

1. Fork (https://github.com/mohayonao/gretro/fork)
2. Create a feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'add some feature')
4. Run test suite with the gulp travis command and confirm that it passes
5. Push to the branch (git push origin my-new-feature)
6. Create new Pull Request

License

Gretro is available under the The MIT License.

gretro's Issues

add apis

• canvas.triangle
• canvas.quad
• canvas.arc

remove apis

below builtin apis will be removed. please use plugins instead.

• canvas.char => gretro-text
• canvas.text => gretro-text
• canvas.paint => gretro-paint

polygon is not filled correctly

canvas.stroke(13).fill(5)
  .polygon([
    [ 50, 20 ], [ 30, 80 ], [ 80, 40 ], [ 20, 40 ], [ 70, 80 ]
  ]);

rename api

canvas.dot -> canvas.point