Orbs

by meatHucker

HTML

<script src="https://raw.github.com/AdmiralPotato/npos2d/master/src/vec2.js"></script>

CSS

.Orb {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: .8;
    position: absolute;
}

JavaScript

var scene = {
    que: [],
    intervalId: 0,
    frameRate: 30,
    update: function () {
        var t = this,
            i,
            length = t.que.length;
        for (i = 0; i < length; i += 1) {
            t.que[i].update();
        }
    },
    start: function () {
        var t = this,
            callback = function () {
                t.update();
            };
        t.intervalId = setInterval(callback, 1000 / t.frameRate);
    },
    stop: function () {
        clearInterval(this.intervalId);

    }
};

scene.start();

var tau = Math.PI * 2;
var deg = tau / 360;
var Orb = function () {
    var t = this,
        type = "Orb";
    if (t.type !== type) {
        throw type + ' constructor requires the use of the `new` keyword.';
    }
    //t.x = window.innerWidth * Math.random();
    //t.y = window.innerHeight * Math.random();
    t.radius = 32;
    t.pos = new Vec2(
    ((window.innerWidth - (t.radius * 2)) * Math.random()) + t.radius, ((window.innerHeight - (t.radius * 2)) * Math.random()) + t.radius
    //window.innerHeight * Math.random()
    );
    t.vel = new Vec2(4, 0);
    t.vel.rotate(Math.random() * tau);
    t.element = document.createElement('div');
    t.element.className = t.type;
    t.element.style.backgroundColor = 'hsl(' + (360 * Math.random()) + ', 100%, 50%)';
    document.body.appendChild(t.element);
    scene.que.push(t);
};

Orb.prototype = {
    type: 'Orb',
    wrap: function () {
        var t = this;
        if (t.pos.x + t.radius > window.innerWidth || t.pos.x - t.radius < 0) {
            t.vel.x *= -1;
        }
        if (t.pos.y + t.radius > window.innerHeight || t.pos.y - t.radius < 0) {
            t.vel.y *= -1;
        }
    },
    update: function () {
        var t = this;
        t.vel.rotate(deg * 5);
        t.pos.add(t.vel);
        t.wrap();
        //t.element.style.left = t.pos.x + 'px';
        //t.element.style.top = t.pos.y + 'px';
        t.element.style.WebkitTransform = 'translate3d(' + t.pos.x...