[tinkering] swirls

Another iteration of the previous canvas circle demos. Felix recommended trying to fade out the progression of the drawing to make the new circles pop a bit more (btw, Felix has some rad OpenGL demos!). Finally, just added some really simple swirling to the circles.


There is probably a ‘better’ way to do fade out the drawing over time, but I stuck with the simple. I am just drawing a slightly opaque black box on to the canvas every tick.

(function(){
		
	var cnvs = document.getElementById('drawhere_cicles3');
	var cx = cnvs.getContext('2d');
	var wid = cnvs.width;
	var hgt = cnvs.height;
	var circles = [];
	var max = 300;
	var count = 0;
	var clrs = ['#CC0000', '#993300', '#FF6B2A', '#FFAD0B', '#AF8E2A'];
	var rad360 = Math.PI*2;
	var running = false;
	
	var startTimeout, interval;
	
	fillCanvas('#000000', 1);
	
	cnvs.addEventListener('click', handleClick, false);
	
	start();
	startTimeout = setTimeout(stop, 4000);
	
	function tick() {
		var keep = [];
		for( var i = 0, l = circles.length, t; i < l; i++ ) {
			t = circles[i];
			if(t.radius > 0) {
				// draw circle
				cx.beginPath();
				cx.arc(t.x, t.y, t.radius, 0, rad360);
				cx.fillStyle = t.fclr;
				cx.fill();
				cx.strokeStyle = t.sclr;
				cx.stroke();
				cx.closePath();
				
				// update its properties
				t.angle += t.aV;
				t.radius -= 2;
				t.x += t.radius/8 * Math.cos(t.angle);
				t.y += t.radius/8 * Math.sin(t.angle);
				
				keep.push(t);
			}
		}
		
		circles = keep;
		
		if( circles.length < max ) {
			createCircle();
		}
		
		fillCanvas('#000000', 0.01);
	}
	
	function createCircle() {
		var clr = clrs[count%clrs.length];
		
		var data = {};
		data.x = Math.random() * wid;
		data.y = Math.random() * hgt;
		data.radius = Math.random() * 100;
		data.fclr = getRGBA(clr, 0.1);
		data.sclr = getRGBA(clr, 0.2);
		data.angle = Math.random()*rad360;
		data.aV = Math.random()*getPosNeg();
		
		circles.push(data);
		
		count++;
	}
	
	function fillCanvas(hex, alpha){
		cx.beginPath();
		cx.rect(0, 0, wid, hgt);
		cx.fillStyle = getRGBA(hex, alpha);
		cx.fill();
		cx.closePath();
	}
	
	function getRGBA(clr, alpha) {
		hex = clr.substring(1,7);
		return 'rgba(' + parseInt(hex.substring(0,2), 16) + ',' + parseInt(hex.substring(2,4), 16) + ',' + parseInt(hex.substring(4,6), 16) + ',' + alpha + ')';
	}
	
	function getPosNeg() {
		return (Math.random() > 0.5) ? 1 : -1;
	}
	
	function stop() {
		running = false;
		clearInterval(interval);
	}
	
	function start() {
		clearTimeout(startTimeout);
		running = true;
		interval = setInterval(tick, 32);
	}
	
	function handleClick() {
		(running) ? stop() : start();
	}
})();

2 Responses to '[tinkering] swirls'

Leave a Reply to Sue Ellen Readinger on Facebook Cancel reply

Your email address will not be published. Required fields are marked *

*