troufster/gist:7426248

## gistfile1.html
<!DOCTYPE html>
<html ng-app>
<head>
    <title>wow spece</title>
	<script src="http://davidbau.com/encode/seedrandom.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
	<script>
	 function SpaceCtrl($scope) {
		$scope.particles = 0;
		$scope.seed = 15;
		$scope.noiseAffect = 1.0; //fnoise
		$scope.fuzz = 1.0 //ffuzz;
		$scope.resistance = 0.9;
		$scope.vfactor = 0.1;
		$scope.exposure = 1;


	/**
     * Provides requestAnimationFrame in a cross browser way.
     * @author paulirish / http://paulirish.com/
     */

    if ( !window.requestAnimationFrame ) {

        window.requestAnimationFrame = ( function() {

            return window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

                        window.setTimeout( callback, 1000 / 60 );

                    };

        } )();
    }

    /*
     *inspired by http://29a.ch/sandbox/2011/neonflames/
     * */

    var fnoise = 1.0;
    var ffuzz = 1.0;
    var resistance = 0.90;
    var vfactor = 0.1;
    var exposure = 1;
	var bgcolor = '#000';

    function Particle(age, velocity, pos, col, intensity, fuzz, noise){

        this.age = age;
        this.velocity = velocity;
        this.pos = pos;
        this.col = col;
        this.intensity = intensity;
        this.fuzz = fuzz;
        this.noise = noise;
    }

    Particle.prototype.dampen = function(res) {

        var vel = this.velocity;
        var pos = this.pos;

        vel[0] = vel[0] * res + getNoise(pos[0], pos[1], 0)*4*this.noise+rand(0.1)*this.fuzz;
        vel[1] = vel[1] * res + getNoise(pos[0], pos[1], 1)*4*this.noise+rand(0.1)*this.fuzz;
    };

    Particle.prototype.move = function(factor) {
        var vel = this.velocity;
        var pos = this.pos;


        pos[0] = pos[0] + (vel[0] * factor);
        pos[1] = pos[1] + (vel[1] * factor);
    };


    var scene = [];

    var canvas = document.getElementById('space');
    var ctx = canvas.getContext('2d');
    var noiseCanvas = makeOctaveNoise(canvas.width, canvas.height, 4);
    var noise = noiseCanvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;
    var w = canvas.width;
    var h = canvas.height;

	var img,pixels,hdrdata;

	function reset() {
		ctx.fillStyle = bgcolor;
		ctx.fillRect(0,0,w,h);

		noiseCanvas = makeOctaveNoise(canvas.width, canvas.height, 4);
		img = ctx.getImageData(0, 0, canvas.width, canvas.height);
		pixels = img.data;
		hdrdata = new Float32Array(pixels.length);


		for(var i = 0; i < hdrdata.length; i++) {
			hdrdata[i] = 0;
		}
	}
    reset();

    function loop() {

            requestAnimationFrame(loop);

            draw();
    }

    function draw(){
        var l = scene.length;
		var pow = Math.pow;


		function tonemap(n, pow){
			return (1-pow(2, -n * 0.005 * exposure))*255;
		}

        while (l--){
            var obj = scene[l];

            obj.age--;
            obj.dampen(resistance);

            if(obj.age == 0){
                scene.splice(l, 1);
                continue;
            }

            for(var j = 0; j < 10; j++){
                var x = obj.pos[0];
                var y = obj.pos[1];

                obj.move(vfactor);

                if(x < 0 || x >= w || y < 0 || y >= h)
                    continue;

                var index = (~~obj.pos[0]+~~obj.pos[1]*canvas.width)*4;

                pixels[index] = tonemap(hdrdata[index] += obj.col[0] * obj.intensity, pow);
                pixels[index+1] = tonemap(hdrdata[index+1] += obj.col[1] * obj.intensity, pow);
                pixels[index+2] = tonemap(hdrdata[index+2] += obj.col[2] * obj.intensity, pow);
            }
        }

        ctx.putImageData(img, 0, 0);
    }


    function rand(range){
        return (Math.random() -0.5)*range*2;
    }


    function getNoise(x, y, channel) {
        return noise[(~~x+~~y*canvas.width)*4+channel]/127-1.0;
    }


    function makeNoise(width, height){
        var canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d');

        canvas.width = width;
        canvas.height = height;

        var imgData = ctx.getImageData(0, 0, width, height),
                data = imgData.data,
                pixels = data.length;

        for(var i = 0; i < pixels; i+=4){
            data[i] = Math.random()*255;
            data[i+1] = Math.random()*255;
            data[i+2] = Math.random()*255;
            //       data[i+1] = data[i];
            //     data[i+2] = data[i];
            data[i+3] = 255;
        }
        ctx.putImageData(imgData, 0, 0);

        return canvas;
    }

    function makeOctaveNoise(width, height, octaves){
        var canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d');

        canvas.width = width;
        canvas.height = height;

        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,width,height);

        ctx.globalAlpha = 1/octaves;
        ctx.globalCompositeOperation = 'lighter';

        for(var i = 0; i < octaves; i++){
            var octave = makeNoise(width>>i, height>>i);
            ctx.drawImage(octave, 0, 0, width, height);
        }

        return canvas;
    }

    window.onmousedown = function(ev) {
       var n = 100;
        while(n--) {
            scene.push(new Particle(rand(100), [rand(10),rand(10)], [ev.clientX,ev.clientY], [0.1, 0.4,1.0],1));
        }
    };

    function gen() {
        var colseq = [
            [0.1, 0.4,1.0],
            [1.0, 0.0,.6]//,
            //[1.0, .5,.5]
        ];

        for(var i = 0; i<colseq.length; i++) {
            var c = colseq[i];

            var np = 5000;
            var locs = 1;

            while(locs--) {
                var locx = Math.random()*w;
                var locy = Math.random()*h;

                while(np--) {
                    scene.push(new Particle(100, [rand(10),rand(10)], [locx,locy], c, Math.random() * 1.5,ffuzz,fnoise));
                }
                np = 5000;
            }
        }

        for(var i = 0; i<1000; i++) {
            var locx = Math.random()*w;
            var locy = Math.random()*h;
            np = 1;
            while (np--){
                var intensity = Math.random()*1;
                var life = 10;
                scene.push(new Particle(life, [0,.1], [locx,locy], [1.0, 1.0,1.0], intensity,0,.1));
                scene.push(new Particle(life, [0,-.1], [locx,locy], [1.0, 1.0,1.0], intensity,0,.1));
                scene.push(new Particle(life, [.1,0], [locx,locy], [1.0, 1.0,1.0], intensity,0,.1));
                scene.push(new Particle(life, [-.1,0], [locx,locy], [1.0, 1.0,1.0],intensity,0,.1));
            }
        }
    }


		$scope.regen = function() {
			$scope.setVars();
			reset();
			gen();

			//Go
			loop();
		};

		$scope.setVars = function() {
			Math.seedrandom($scope.seed);
			fnoise = $scope.noiseAffect;
			ffuzz = $scope.fuzz;
			resistance = $scope.resistance;
			vfactor = $scope.vfactor;
			exposure = $scope.exposure;
		};

	 }


	</script>
</head>
<body>
<canvas id="space" width="1000" height="500"></canvas>
 <div ng-controller="SpaceCtrl">
 <div>
	<label for="seed">Seed</label>
	<input id="seed" type="text" ng-model="seed" width="10">

</div>

<div>
	<label for="seed">Exposure</label>
	<input id="seed" type="text" ng-model="exposure" width="10">
</div>

<div>
	<label for="seed">Noise Affect</label>
	<input id="seed" type="text" ng-model="noiseAffect" width="10">
</div>

<div>
	<label for="seed">Fuzz</label>
	<input id="seed" type="text" ng-model="fuzz" width="10">
</div>

<div>
	<label for="seed">Resistance</label>
	<input id="seed" type="text" ng-model="resistance" width="10">
</div>

<div>
	<label for="seed">Vfactor</label>
	<input id="seed" type="text" ng-model="vfactor" width="10">
</div>

	<input type="button" value="Gen" ng-click="regen()">
 </div>

</body>
</html>
	<!DOCTYPE html>
	<html ng-app>
	<head>
	<title>wow spece</title>
	<script src="http://davidbau.com/encode/seedrandom.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
	<script>
	function SpaceCtrl($scope) {
	$scope.particles = 0;
	$scope.seed = 15;
	$scope.noiseAffect = 1.0; //fnoise
	$scope.fuzz = 1.0 //ffuzz;
	$scope.resistance = 0.9;
	$scope.vfactor = 0.1;
	$scope.exposure = 1;


	/**
	* Provides requestAnimationFrame in a cross browser way.
	* @author paulirish / http://paulirish.com/
	*/

	if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

	return window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( /* function FrameRequestCallback / callback, / DOMElement Element */ element ) {

	window.setTimeout( callback, 1000 / 60 );

	};

	} )();
	}

	/*
	*inspired by http://29a.ch/sandbox/2011/neonflames/
	* */

	var fnoise = 1.0;
	var ffuzz = 1.0;
	var resistance = 0.90;
	var vfactor = 0.1;
	var exposure = 1;
	var bgcolor = '#000';

	function Particle(age, velocity, pos, col, intensity, fuzz, noise){

	this.age = age;
	this.velocity = velocity;
	this.pos = pos;
	this.col = col;
	this.intensity = intensity;
	this.fuzz = fuzz;
	this.noise = noise;
	}

	Particle.prototype.dampen = function(res) {

	var vel = this.velocity;
	var pos = this.pos;

	vel[0] = vel[0] * res + getNoise(pos[0], pos[1], 0)4this.noise+rand(0.1)*this.fuzz;
	vel[1] = vel[1] * res + getNoise(pos[0], pos[1], 1)4this.noise+rand(0.1)*this.fuzz;
	};

	Particle.prototype.move = function(factor) {
	var vel = this.velocity;
	var pos = this.pos;


	pos[0] = pos[0] + (vel[0] * factor);
	pos[1] = pos[1] + (vel[1] * factor);
	};



	var scene = [];

	var canvas = document.getElementById('space');
	var ctx = canvas.getContext('2d');
	var noiseCanvas = makeOctaveNoise(canvas.width, canvas.height, 4);
	var noise = noiseCanvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;
	var w = canvas.width;
	var h = canvas.height;

	var img,pixels,hdrdata;

	function reset() {
	ctx.fillStyle = bgcolor;
	ctx.fillRect(0,0,w,h);

	noiseCanvas = makeOctaveNoise(canvas.width, canvas.height, 4);
	img = ctx.getImageData(0, 0, canvas.width, canvas.height);
	pixels = img.data;
	hdrdata = new Float32Array(pixels.length);


	for(var i = 0; i < hdrdata.length; i++) {
	hdrdata[i] = 0;
	}
	}
	reset();

	function loop() {

	requestAnimationFrame(loop);

	draw();
	}

	function draw(){
	var l = scene.length;
	var pow = Math.pow;


	function tonemap(n, pow){
	return (1-pow(2, -n * 0.005 * exposure))*255;
	}

	while (l--){
	var obj = scene[l];

	obj.age--;
	obj.dampen(resistance);

	if(obj.age == 0){
	scene.splice(l, 1);
	continue;
	}

	for(var j = 0; j < 10; j++){
	var x = obj.pos[0];
	var y = obj.pos[1];

	obj.move(vfactor);

	if(x < 0 \|\| x >= w \|\| y < 0 \|\| y >= h)
	continue;

	var index = (~~obj.pos[0]+~~obj.pos[1]canvas.width)4;

	pixels[index] = tonemap(hdrdata[index] += obj.col[0] * obj.intensity, pow);
	pixels[index+1] = tonemap(hdrdata[index+1] += obj.col[1] * obj.intensity, pow);
	pixels[index+2] = tonemap(hdrdata[index+2] += obj.col[2] * obj.intensity, pow);
	}
	}

	ctx.putImageData(img, 0, 0);
	}



	function rand(range){
	return (Math.random() -0.5)range2;
	}


	function getNoise(x, y, channel) {
	return noise[(~~x+~~ycanvas.width)4+channel]/127-1.0;
	}


	function makeNoise(width, height){
	var canvas = document.createElement('canvas'),
	ctx = canvas.getContext('2d');

	canvas.width = width;
	canvas.height = height;

	var imgData = ctx.getImageData(0, 0, width, height),
	data = imgData.data,
	pixels = data.length;

	for(var i = 0; i < pixels; i+=4){
	data[i] = Math.random()*255;
	data[i+1] = Math.random()*255;
	data[i+2] = Math.random()*255;
	// data[i+1] = data[i];
	// data[i+2] = data[i];
	data[i+3] = 255;
	}
	ctx.putImageData(imgData, 0, 0);

	return canvas;
	}

	function makeOctaveNoise(width, height, octaves){
	var canvas = document.createElement('canvas'),
	ctx = canvas.getContext('2d');

	canvas.width = width;
	canvas.height = height;

	ctx.fillStyle = 'black';
	ctx.fillRect(0,0,width,height);

	ctx.globalAlpha = 1/octaves;
	ctx.globalCompositeOperation = 'lighter';

	for(var i = 0; i < octaves; i++){
	var octave = makeNoise(width>>i, height>>i);
	ctx.drawImage(octave, 0, 0, width, height);
	}

	return canvas;
	}

	window.onmousedown = function(ev) {
	var n = 100;
	while(n--) {
	scene.push(new Particle(rand(100), [rand(10),rand(10)], [ev.clientX,ev.clientY], [0.1, 0.4,1.0],1));
	}
	};

	function gen() {
	var colseq = [
	[0.1, 0.4,1.0],
	[1.0, 0.0,.6]//,
	//[1.0, .5,.5]
	];

	for(var i = 0; i<colseq.length; i++) {
	var c = colseq[i];

	var np = 5000;
	var locs = 1;

	while(locs--) {
	var locx = Math.random()*w;
	var locy = Math.random()*h;

	while(np--) {
	scene.push(new Particle(100, [rand(10),rand(10)], [locx,locy], c, Math.random() * 1.5,ffuzz,fnoise));
	}
	np = 5000;
	}
	}

	for(var i = 0; i<1000; i++) {
	var locx = Math.random()*w;
	var locy = Math.random()*h;
	np = 1;
	while (np--){
	var intensity = Math.random()*1;
	var life = 10;
	scene.push(new Particle(life, [0,.1], [locx,locy], [1.0, 1.0,1.0], intensity,0,.1));
	scene.push(new Particle(life, [0,-.1], [locx,locy], [1.0, 1.0,1.0], intensity,0,.1));
	scene.push(new Particle(life, [.1,0], [locx,locy], [1.0, 1.0,1.0], intensity,0,.1));
	scene.push(new Particle(life, [-.1,0], [locx,locy], [1.0, 1.0,1.0],intensity,0,.1));
	}
	}
	}



	$scope.regen = function() {
	$scope.setVars();
	reset();
	gen();

	//Go
	loop();
	};

	$scope.setVars = function() {
	Math.seedrandom($scope.seed);
	fnoise = $scope.noiseAffect;
	ffuzz = $scope.fuzz;
	resistance = $scope.resistance;
	vfactor = $scope.vfactor;
	exposure = $scope.exposure;
	};

	}


	</script>
	</head>
	<body>
	<canvas id="space" width="1000" height="500"></canvas>
	<div ng-controller="SpaceCtrl">
	<div>
	<label for="seed">Seed</label>
	<input id="seed" type="text" ng-model="seed" width="10">

	</div>

	<div>
	<label for="seed">Exposure</label>
	<input id="seed" type="text" ng-model="exposure" width="10">
	</div>

	<div>
	<label for="seed">Noise Affect</label>
	<input id="seed" type="text" ng-model="noiseAffect" width="10">
	</div>

	<div>
	<label for="seed">Fuzz</label>
	<input id="seed" type="text" ng-model="fuzz" width="10">
	</div>

	<div>
	<label for="seed">Resistance</label>
	<input id="seed" type="text" ng-model="resistance" width="10">
	</div>

	<div>
	<label for="seed">Vfactor</label>
	<input id="seed" type="text" ng-model="vfactor" width="10">
	</div>

	<input type="button" value="Gen" ng-click="regen()">
	</div>

	</body>
	</html>