SVG.js Balls

Just a default setup to start fiddling

by sikuda

HTML

<div id="drawing"></div>

JavaScript

// initialize SVG.js
var draw = SVG('drawing')
var width = 158;
var height = 100;
var offset = 10;
var rect = draw.rect(width,height).fill('#008');
//var circle1 = draw.circle(5).fill('#f06').animate().move(100, 50);

var Balls = [ new ball(), new ball(), new ball()];
// draw pink square
//raw.rect(100, 100).animate().move(100, 50).fill('#f06');
function run() {
    var beginTime = new Date();

		var c1 = draw.circle(6).fill('white').x(50).y(40);
	  var c2 = draw.circle(6).fill('white').x(40).y(50);

    //step(Balls);
    //draw();
    //Balls[0].x(100).y(200);

    var endTime = new Date();
    endTime = endTime.getTime() - beginTime.getTime();
    if (endTime !== 0) endTime = 1000 / endTime;
    else endTime = "Max1000";
    //rtext.attr('text',"Visible FPS:" + (1000 / timeFrame) + " Max FPS: " + endTime);
    
    //setTimeout(function () {
    //    run();
    //}, timeFrame);
}

function ball() {
    this.r = 3 + 7*Math.random();
    this.x = offset + (width-2*offset) * Math.random();
    this.y = offset + (height-2*offset) * Math.random();
    this.vx = 3*Math.random();
    this.vy = 3*Math.random();
    
    //alert(this.y)
    this.draw = function () {
        this.x(this.x).y(this.y);
    };
    draw.circle(this.r).fill('white');
    return this;
}

function draw(){
    //for (var i = 0; i < Lines.length; i++){
    //    Lines[i].draw();
    //}
    //for (var i = 0; i < LinesMouse.length; i++){
    //    LinesMouse[i].draw(point);
    //}
    for (var i = 0; i < Balls.length; i++){
        Balls[i].draw();
    }
}

run();