DIR : /home/kozerus/public_html/jkwii/js/jsdoit/aurora/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/aurora

var context;
var simplex = new SimplexNoise();

/* zz85 aka @blurspline */
/* CPU Based method here*/
/* For GLSL version see http://glsl.heroku.com/e#812.1 */
function createCloudTexture(width, height) {
	var canvas = document.createElement("canvas");
	canvas.width = width;
	canvas.height = height;
	
	context = canvas.getContext('2d');
	
	
	document.body.appendChild(canvas);
	
	this.redraw = function() {
		var now = Date.now();
		var time = now / 8000;
		
		context.clearRect(0, 0, width, height);
		var gradient = context.createLinearGradient( 0,  (Math.sin(time / 2)+1) * 0.5 * height, width, height - (Math.sin(time / 2)+1) * 0.5* height  );

		gradient.addColorStop( 0, 'rgba(200,200,0,0.9)' );
		gradient.addColorStop( (Math.sin(time)+1) * 0.5 * 0.2, 'rgba(100,0,0,1)' );
		
		gradient.addColorStop( (Math.cos(time)+1) * 0.5 * 0.2 + 0.4 , 'rgba(0,200,0,1)' ); // 0.6
		gradient.addColorStop( 0.8, 'rgba(0,0,200,1)' );
		gradient.addColorStop( 1, 'rgba(200,200,200,1)' );

		context.fillStyle = gradient;
		
		context.fillRect(0,0, width, height);
		
		context.save();
		context.globalCompositeOperation = 'lighter';
		var gradient = context.createLinearGradient( 0, 0, 0, height );
		gradient.addColorStop( 0, 'rgba(0,0,0,0.2)' );
		gradient.addColorStop( 1, 'rgba(200,200,200,0.5)' );
		
		
		context.fillStyle = gradient;
		context.fillRect(0,0, width, height);
		
		context.restore();
		
		var image = context.createImageData( width, height );
		var image2 = context.getImageData( 0, 0, width, height );
		
		var imageData = image.data;
		var imageData2 = image2.data;
		
		
		var w,h, n;
		
		// settings
		var octaves = 2;				
		var scaleX = 4 /octaves, scaleY = 0.25 /octaves;
		
		for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++  ) {
		
			h = Math.floor( j/width );
			w = j % width;
		
			n = 0;
			var frequency = 1;
			var persistance = 0.5;
			var amptitude ;
		
			for (var oi=0; oi < octaves; oi++) {
				frequency *= 2;
				amptitude =  Math.pow(persistance, oi);
			
				n += simplex.noise3d(w/width * frequency * scaleX, h/height* frequency * scaleY, time)  * amptitude ;
			}

		
			var m = n;
			var factor = n* 0.5 + 0.5; // + 1 ) * 0.5
			n = Math.floor( factor * 255); //Math.floor
		

			// Multiply ** (best!!!)
			imageData[ i ] = Math.floor( factor * imageData2[ i ]);
			imageData[ i + 1 ] = Math.floor( factor * imageData2[ i + 1]);
			imageData[ i + 2 ] = Math.floor( factor * imageData2[ i + 2 ]);
			imageData[ i + 3 ] = 255;
			


		}
		context.putImageData( image, 0, 0 );
		
		//console.log('done', Date.now() - now);

	}
	
	this.redraw();
	
	return this;
}

// var canvas = createCloudTexture(800, 600)
var canvas = createCloudTexture(465, 465)
animate();


function animate() {

	requestAnimationFrame( animate );
	render();

}

function render() {
	canvas.redraw();
}