March Madness 10 – Circles

Just a quickie today, circle patterns done in canvas. Source after the break as usual.

JPLT.Class.create("JPLT.Circles", JPLT.Object,
	function() {
		this.width = 800;
		this.height = 600;
		this.minWidth = -this.width/8;
		this.maxWidth = this.width+this.width/8;
		this.minHeight = -this.height/8;
		this.maxHeight = this.height+this.height/8;
		
		this.direction = [ {x:5, y:5}, {x:-5, y:5}, {x:5, y:-5}, {x:-5, y:-5} ];
		this.position = [ 
			{x:Math.random()*this.width, y:Math.random()*this.height},
			{x:Math.random()*this.width, y:Math.random()*this.height},
			{x:Math.random()*this.width, y:Math.random()*this.height},
			{x:Math.random()*this.width, y:Math.random()*this.height}
		];
		
		this.createElement();
		this.run();
	},
	
	{
		createElement: function() {
			var body = document.documentElement || document.body;
			
			var element = document.createElement("canvas");
			element.width = this.width;
			element.height = this.height;
			element.style.position = "absolute";
			element.style.top = window.innerHeight/2 - this.height/2;
			element.style.left = window.innerWidth/2 - this.width/2;
			body.appendChild(element);
			this.element = element;
		},
		
		context: function() {
			return this.element.getContext("2d");
		},

		run: function() {
			if (!this.timer) {
				this.timer = window.setInterval(this.delegate(this.paint), this.delay);	
			}
		},
		
		stop: function() {
			window.clearInterval(this.timer);			
			this.timer = null;
		},
		
		clear: function() {
			var ctx = this.context();
			ctx.clearRect(0,0,this.width,this.height);
		},
		
		paint: function(i) {
			
			try {
				this.clear();
				
				for (var i=0; i<4; i++) {
					var ctx = this.context();
					var pos = this.position[i];
					var dir = this.direction[i];
				
					pos.x += dir.x;
					if (pos.x > this.maxWidth || pos.x < this.minWidth) {
						dir.x = -dir.x;
					}
				
					pos.y += dir.y;
					if (pos.y > this.maxHeight || pos.y < this.minHeight) {
						dir.y = -dir.y;
					}
		
					ctx.save();
					ctx.strokeStyle = "rgba(0,0,0,0.3)";
					ctx.lineWidth = 25;
					ctx.translate(pos.x, pos.y);
				
					for (var r=5; r