Raphaël :: Habitat Swapping

Drag agents (balls) between habitats (circles).

by klenwell

HTML

<p>Drag balls between circles</p>
<div id="the_canvas"></div>

CSS

body { background-color:white; }
#the_canvas { background-color: #efefef; width:250px; height:250px; }

JavaScript

/*
 * Raphaël :: Habitat Swapping
 * http://jsfiddle.net/user/klenwell/fiddles/
 *
 * TODO:
 *   Add start/stop button
 *
 * NOTES:
 *   Resolves vanishing ball issue by adding last_point method to ball object
 *     for Physics.find_contact_point, but still occasional wedging issues
 *
 *   Uses parasitic inheritance. See:
 *     http://www.crockford.com/javascript/inheritance.html
 */
var __TITLE__ = 'Raphaël :: Habitat Swapping'
var __VERSION__ = "0.6.1";
var inspector = {};


var Graphics = {
    
    fps: 30,
    mspf: 1000/ this.fps,
    Raphael: null,  

    init: function(canvas) {
        this.center_x = canvas.offsetWidth / 2.0;
        this.center_y = canvas.offsetHeight / 2.0;
        this.Raphael = Raphael(canvas, canvas.offsetWidth,
            Graphics.offsetHeight);
    },
    
    get_animation_frame: function() { 
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback, element) {
                window.setTimeout(callback, this.mspf);
            };
    },
    
    draw_circle: function(c) {
        var screen_x = this.world_to_screen_x(c.x);
        var screen_y = this.world_to_screen_y(c.y);
        
        var el = this.Raphael.circle(screen_x, screen_y, c.r).attr({
            fill: c.color,
            stroke: "none",
            opacity: c.opacity || 1.0
        });
        
        if ( c.stroke_width ) {
            el.attr({
                'stroke-width': c.stroke_width,
                stroke: c.stroke_color                
            });
        };

        return el;
    },
    
    draw_ball: function(ball) {
        return this.draw_circle(ball);
    },
    
    draw_world: function(world) {
        return this.draw_circle(world);
    },

    world_to_screen_x: function(x) {
        return this.center_x + x;
    },

   ...