Embeddable Drips

by whelkaholism

HTML

<canvas width="400" height="200" id="c"></canvas>

CSS

body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

JavaScript

"use strict";
if(typeof(cFront) === 'undefined') var cFront = {};
if(typeof(cFront.Drawing) === 'undefined') cFront.Drawing = {};

cFront.Drawing.World = function(c, options)
{
    var _this = this;
    var _frame;
    var _start;
    var _delta;
    var _animid;
    var _running = false;
    var _actors = [];

    this.options = options || {};    
    this.options.clearEveryFrame = this.options.clearEveryFrame !== false;
    this.options.fitCanvas = this.options.fitCanvas !== false;
    
    this.canvas = c;
    this.ctx = c.getContext("2d");    
    
    this.init = function()
    {
        if(this.options.fitCanvas)
        {            
            var w, h;
            
            if(c.parentNode.nodeName == 'BODY')
            {
                w = window.innerWidth;
                h = window.innerHeight;
            }
            else
            {
                w = c.parentNode.offsetWidth;
                h = c.parentNode.offsetHeight;
            }
            
            c.width = w;
            c.height = h;
        }
    };
    
    this.run = function()
    {
        _running = true;
        
        _start = new Date().getTime();
        _delta = 0;
        _frame = 0;     
        
        for(var i = 0; i < _actors.length; i++)
            actors[i].init();            
        
        _animid = requestAnimationFrame(_drawFrame);
    };
    
    this.end = function()
    {
        _running = false;
        _animid && cancelAnimationFrame(_animid);
    };
    
    this.addActor = function(actor)
    {
        _actors.push(actor);
        
        if(_running)
            actor.init();
    };
    
    this.width = function()
    {
        return this.canvas.width;
    }

    this.height = function()
    {
        return this.canvas.height;
    }
    
    var _drawFrame = function()
    {        
        if(!_running)
            return;              
        
        var w = _this.canvas.width;
        var h = _this.canvas.height;
        
   ...