2dcanvas

Sample to demonstrate the Turbulenz Engine Canvas 2D WebGL module.

by jamesaustin

HTML

<script src="http://turbulenz.github.io/turbulenz_jslib/jslib/webgl/turbulenzengine.js"></script>
<script src="http://turbulenz.github.io/turbulenz_jslib/jslib/webgl/graphicsdevice.js"></script>
<script src="http://turbulenz.github.io/turbulenz_jslib/jslib/canvas.js"></script>
<canvas id="canvas" width="800px" height="800px"></canvas>

JavaScript

TurbulenzEngine = WebGLTurbulenzEngine.create({
    canvas: document.getElementById("canvas")
});

var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});

var crateImage, cratePattern;
var crateImageParameters = {
    src: "http://www.corsproxy.com/biz.turbulenz.com/sample_assets/staticmax/crate_5Yhd75LjDeV3WEvRsKnGSQ.jpg",
    mipmaps: true,
    onload: function (texture) {
        crateImage = texture;
    }
};
graphicsDevice.createTexture(crateImageParameters);

var canvas = Canvas.create(graphicsDevice);
var ctx = canvas.getContext('2d');
var previousFrameTime = TurbulenzEngine.time;

var concavePoints = [
    [204, 49],
    [48, 233],
    [296, 328],
    [261, 244],
    [87, 228],
    [211, 206],
    [170, 178],
    [274, 132]
];

function calculateSpirograph(R, r, O) {
    var points = []; /*jshint bitwise: false*/
    var dRO = ((R - O) | 0);
    var Rr = (R + r);
    var rO = (r + O);
    var Rrr = (Rr / r);
    var pi72 = (Math.PI / 72);
    var cos = Math.cos;
    var sin = Math.sin;
    points[0] = [
    dRO, 0];
    var x1i = dRO,
        y1i = 0;
    var x2, y2;
    var i = 1;
    do {
        var ipi = (i * pi72);
        var Rrripi = (Rrr * ipi);
        x2 = ((Rr * cos(ipi)) - (rO * cos(Rrripi)));
        y2 = ((Rr * sin(ipi)) - (rO * sin(Rrripi)));
        var x2i = (x2 | 0);
        var y2i = (y2 | 0);
        if (x1i !== x2i || y1i !== y2i) {
            x1i = x2i;
            y1i = y2i;
            points.push([
            x2, y2]);
            if (x2i === dRO && y2i === 0) {
                break;
            }
        }
        i += 1;
    } while (i < 2000); /*jshint bitwise: true*/
    return points;
}

var spirographPoints = [];
for (var i = 0; i < 3; i += 1) {
    for (var j = 0; j < 3; j += 1) {
        spirographPoints[(i * 3) + j] = calculateSpirograph(20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
    }
}

var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0,...