Bobbin

by XcsN

HTML

<div id="canvas_container"></div>

CSS

#canvas_container {
    position:relative;
    float:left;
}

JavaScript

var R = Raphael("canvas_container",
600, 600),
    centerX = 150,
    centerY = 130,
    bobbinR = 80,
    border = R.rect(0, 0, R.width, R.height).attr({
        fill: "aqua"
    }),
    disc = R.circle(centerX, centerY, bobbinR).attr({
        fill: "hsb(0.2, 1, 1)",
        stroke: "black"
    }),
    angle = -7.5;

R.raphael.mousedown(function () {
    for (var x = 0; x < 2; x++) {
        sticks[x].Rotate(angle);
    }
    for (var x = 0; x < array.length; x++) {
        array[x].Rotate(angle, disc.attr('cx'),disc.attr('cy'));
    }
    for (var x = 0; x < array.length; x++) {
        if (!(array[x].collision)) {
            var model = array[x].Circle.getBBox();
            array[x].RotateRect(-angle, model.attr('cx'),model.attr('cy');
        }
    }
    
});
/*R.raphael.mouseup(function () {
    for (var x = 0; x < 2; x++) {
        sticks[x].Rotate(angle);
    }
    for (var x = 0; x < array.length; x++) {
        array[x].Rotate(angle, centerX, centerY);
    }
});*/


function Rectangle(x, y, w, h, color) {
    this.x = x;
    this.y = y;
    this.h = h;
    this.w = w;
    this.Rect = R.rect(this.x, this.y, this.w, this.h).attr({
        fill: color,
        stroke: "black",
    });
    this.Rotate = function (deg, ox, oy) {
        this.Rect.rotate(deg, ox, oy);
    }
}
var sticks = new Array();
sticks[0] = new Rectangle(70, 124, 160, 12, "blue");
sticks[1] = new Rectangle(144, 50, 12, 160, "blue");

function Stick_Circle(x, y, w, h, r, col) {
    this.collision = !col;
    this.x = x;
    this.y = y;
    this.h = h;
    this.w = w;
    this.r = r;
    this.Rect = R.rect(this.x, this.y + this.r, this.w, this.h).attr({  
        fill: "black"
    });
    this.Circle = R.circle(this.x + this.r, this.y, this.r).attr({
        fill: "red"
    });
    this.Rotate = function (deg, ox, oy) {
        this.Circle.rotate(deg, ox, oy);
        this.Rect.rotate(deg, ox, oy);
    }
    this.RotateRect = function (deg, ox, oy) {
        this.Rect.rotate(deg, ox,...