PaperJS Goban Renderer

by nate

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.12/paper.js"></script>
<canvas id="gokibitz" width="100%" height="100%" resize="true"></canvas>

CSS

html, body {
    margin: 0;
    padding: 0;
}

canvas {
    display: block;
    margin: 0;
}

JavaScript

paper.install(window);

// Setup directly from canvas id:
paper.setup('gokibitz');

// Sizes are all percentages
var settings = {
    margin: .1,
    colors: {
        background: new Color({
            hue: 20,
            saturation: 0.5,
            lightness: 0.5
        }),
        goban: new Color({
            hue: 50,
            saturation: 0.5,
            lightness: 0.6
        }),
        shadow: new Color({
            hue: 0,
            saturation: 0,
            lightness: 0,
            alpha: .5
        }),
        line: new Color({
            hue: 50,
            saturation: 0.5,
            lightness: 0.3
        })   
    }
};

function render() {
    var viewWidth = view.size._width;
    var viewHeight = view.size._height;
    var margin = settings.margin * Math.min(viewWidth, viewHeight);
    
    var background = new Path.Rectangle(view.bounds);
    background.fillColor = settings.colors.background;
    
    var goban;
    
    function renderGoban(dimensions) {
        dimensions = dimensions || [19, 19];
        console.log(view.center);
        var gobanSize = Math.min(viewWidth, viewHeight) - (margin * 2);
        var start = view.center.subtract([gobanSize / 2, gobanSize / 2]);
        var start = new Point(start, start);
        var size = new Size(gobanSize, gobanSize);
        var rectangle = new Rectangle(start, size);
        var corner = new Size(1, 1);
        goban = new Path.RoundRectangle(rectangle, corner);
        
        goban.fillColor = settings.colors.goban;
        goban.shadowColor = settings.colors.shadow;
        goban.shadowBlur = gobanSize * .2;
        goban.shadowOffset = new Point(0, 0);
        
        function renderGrid() {
            var strokeWidth = 1;
            var strokeCap = 'square';
            console.log('render grid');
            console.log(rectangle.topLeft);
            console.log('size', size);
            var xIncrement = gobanSize / dimensions[0];
            var yIncrement =...