<!-- Created by Zoran M. Alias Vince M. -->

<canvas id="curtain" width="600" height="600"></canvas>
body { width: 100%, height: 100%; background: #402; 
background: #C6FFDD; */
background: -webkit-linear-gradient(to top, #f7797d, #FBD786, #C6FFDD);
background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); 
;
text-align:center;}
background: #C6FFDD;
background: -webkit-linear-gradient(to bottom, #f7797d, #FBD786, #C6FFDD);
background: linear-gradient(to bottom, #f7797d, #FBD786, #C6FFDD); 
#curtain {
background: #FF0099;
background: -webkit-linear-gradient(to top, #493240, #FF0099);
background: linear-gradient(to top, #493240, #FF0099);
background: blue;  
}
var canvas = document.getElementById('curtain');
var ctx = canvas.getContext('2d');
var circleRads = Math.PI*2;
var wid = canvas.width;
var hei = canvas.height;
var cx = wid * 0.8;
var cy = hei * 0.8;
//var mouseX, mouseY;
var i;

var creatures = [];
var numCreatures = 0;

var oscillators = 8;
var speeds = [];
for ( i = 0; i < oscillators; i++ ) {
  speeds[i] = Math.random() * 0.1 + 0.01;
}

var dim = 60;

var x = 0;
while( x < dim ) {
  var y = 0;
	while( y < dim ) {
		createCreature(x,y);
		y++;
	}
	x++;
}



function createCreature( x, y ) {

	var index = x + y * dim;

	var creature = {
		sx: x * 8 + 50,
		sy: y * 8 + 50,
		x: 0,
		y: 0,
		colour: 'rgba(240,' + ~~(50+Math.random() * 40) + ',' + ~~(80+Math.random() * 80) + ',0.8)', //'hsl(' + ~~(Math.random() * 160) + ', 50%, 50%)',
		osc: function() {
			var oscs = [];
			for ( var i = 0; i < oscillators; i++ ) {
				oscs[i] = {
					radX: (x-y) / 100 * circleRads,
					radY: (x+y) / 100 * circleRads
				}
			}
			return oscs;
		}(),
		oscillate: function() {
			var floatx = 0, floaty = 0;
			var i = 0
			while ( i < oscillators ) {
				this.osc[i].radX += speeds[i];
				floatx += Math.sin(this.osc[i].radX) * 10;
				i++;

				this.osc[i].radY += speeds[i];
				floaty += Math.cos(this.osc[i].radY) * 10;
				i++;
			}
			this.x = this.sx + floatx;
			this.y = this.sy + floaty;
		},
		draw: function() {
			ctx.beginPath();
			ctx.fillStyle = this.colour;
			ctx.arc(this.x,this.y,2,0,circleRads, false);
			ctx.fill();
		}
	};

	creature.x = creature.sx;
	creature.y = creature.sy;

	creatures[numCreatures] = creature;
	numCreatures++;
}


function drawIt() {

	ctx.fillStyle = 'rgba(0,0,0,0.9)';
	ctx.fillRect(0, 0, wid, hei);

	i = numCreatures;
	while( i-- ) {
		creatures[ i ].oscillate();
		creatures[ i ].draw();
	}

}

// function mouseMove(e){
// 	mouseX = e.offsetX;
// 	mouseY = e.offsetY;
// }

// function mouseDown(e){
// 	createCreature( mouseX, mouseY )
// }
var canvas = document.getElementById('curtain');
var ctx = canvas.getContext('2d');
var circleRads = Math.PI*2;
var wid = canvas.width;
var hei = canvas.height;
var cx = wid * 0.8;
var cy = hei * 0.8;
//var mouseX, mouseY;
var i;

var creatures = [];
var numCreatures = 0;

var oscillators = 8;
var speeds = [];
for ( i = 0; i < oscillators; i++ ) {
  speeds[i] = Math.random() * 0.1 + 0.01;
}

var dim = 60;

var x = 0;
while( x < dim ) {
  var y = 0;
	while( y < dim ) {
		createCreature(x,y);
		y++;
	}
	x++;
}



function createCreature( x, y ) {

	var index = x + y * dim;

	var creature = {
		sx: x * 8 + 50,
		sy: y * 8 + 50,
		x: 0,
		y: 0,
		colour: 'rgba(240,' + ~~(50+Math.random() * 40) + ',' + ~~(80+Math.random() * 80) + ',0.8)', //'hsl(' + ~~(Math.random() * 160) + ', 50%, 50%)',
		osc: function() {
			var oscs = [];
			for ( var i = 0; i < oscillators; i++ ) {
				oscs[i] = {
					radX: (x-y) / 100 * circleRads,
					radY: (x+y) / 100 * circleRads
				}
			}
			return oscs;
		}(),
		oscillate: function() {
			var floatx = 0, floaty = 0;
			var i = 0
			while ( i < oscillators ) {
				this.osc[i].radX += speeds[i];
				floatx += Math.sin(this.osc[i].radX) * 10;
				i++;

				this.osc[i].radY += speeds[i];
				floaty += Math.cos(this.osc[i].radY) * 10;
				i++;
			}
			this.x = this.sx + floatx;
			this.y = this.sy + floaty;
		},
		draw: function() {
			ctx.beginPath();
			ctx.fillStyle = this.colour;
			ctx.arc(this.x,this.y,2,0,circleRads, false);
			ctx.fill();
		}
	};

	creature.x = creature.sx;
	creature.y = creature.sy;

	creatures[numCreatures] = creature;
	numCreatures++;
}


function drawIt() {

	ctx.fillStyle = 'rgba(0,0,0,0.9)';
	ctx.fillRect(0, 0, wid, hei);

	i = numCreatures;
	while( i-- ) {
		creatures[ i ].oscillate();
		creatures[ i ].draw();
	}

}

// function mouseMove(e){
// 	mouseX = e.offsetX;
// 	mouseY = e.offsetY;
// }

// function mouseDown(e){
// 	createCreature( mouseX, mouseY )
// }

// addEventListener( 'mousemove', mouseMove, true);
// addEventListener( 'mousedown', mouseDown, true);
var drawInterval = setInterval( drawIt, 33 );
// addEventListener( 'mousemove', mouseMove, true);
// addEventListener( 'mousedown', mouseDown, true);
var drawInterval = setInterval( drawIt, 33 );

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.