Qqwy/LICENSE.txt

## README.md

      
    Raw
  

              README.md
            
          
    140Byt.es Particle Explosion effect

This function draws a Particle effect on the screen, using a very compact procedural algorithm.
This means that we don't have to use an array to store x and y coordinates as well as speeds for each particle, and thus it fits in this small size.
It should be noted that since for each particle multiple trigonometry calculations are done each frame, that this approach is obviously slower.
Check out a JSFiddle Demo here!
Features


Configurable X,Y center of explosion.
Configurable number of particles
Gravity in the vertical direction: Have your particles fall down or fly up!
Seedable, each seed has its own explosion and will show exactly that explosion each time, across computers.
Slowmotion, Fast Forward and playing explosions Backwards is all possible.
Size:138 bytes.


## annotated.js
function(	a,         	//Handle to the 2d canvas context
					t,					//Frame of the particle explosion animation (increment with each call. Or decrement, to play backwards! :D )
					x,					//X position of particle explosion center
					y,					//Y position of particle explosion center
					n,					//Total number of particles to render
					g,					//Amount of gravity that should affect the particles.
					s,					//Seed for the explosion function. Each seed always produces the exact same particle effect.
					i,					//Placeholder: particle index
					d){					//Placeholder: Procedural function algorithm shorthand. (since we use it twice, we save some bytes this way)

	with(Math)						//Ensure we don't need to use Math in front of all trigonometry.

	for(i=n;					//For total number of particles
		i--;											//As long as decrementing i doesn't result in 0  (putting the decremention part here saves 1 byte)
		d=cos(i*sin(i*s)),				//Procedural particle direction algorithm
		a.globalAlpha=n/t/i,			//Set the alpha to value depending on the index of the particle. As times goes on, more and more particles fade away.
		a.fillRect(x+t*sin(i)*d,	//Draw a tiny rectangle on the coordinates. i again determines the direction, and the procedural algorithm determines the speed at which the particle travels.
						y+t*cos(i)*d+t*g	//For the y coordinate, also add the gravity.
						,1,1)							//Dimensions of 1x1 pixel.
	);
}

## index.js
function(a,t,x,y,n,g,s,i,d){with(Math)for(i=n;i--;d=cos(i*sin(i*s)),a.globalAlpha=n/t/i,a.fillRect(x+t*sin(i)*d,y+t*cos(i)*d+t*g,1,1));}

## LICENSE.txt
            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

## package.json
{
  "name": "particleExplosion",

  "description": "A fully procedural(so without arrays or objects) particle explosion fitting in 140 bytes.",

  "keywords": [
    "particles",
    "explosion",
    "animation",
    "procedural",
    "canvas"

  ]
}

## test.html
<!DOCTYPE html>
<title>Foo</title>
<canvas id="particleExplosionCanvas"></canvas>
<script>
  // write a small example that shows off the API for your example
  // and tests it in one fell swoop.

  var p=function(a,t,x,y,n,g,s,i,d){with(Math)for(i=n;i--;d=cos(i*sin(i*s)),a.globalAlpha=n/t/i,a.fillRect(x+t*sin(i)*d,y+t*cos(i)*d+t*g,1,1));}


var a=document.getElementById('view').getContext('2d');
var t=0;
var s=Math.random();
setInterval("a.clearRect(0,0,300,300);p(a,(t++,t%200), 100,100,1024,0.5,s)",10)

</script>
	function( a, //Handle to the 2d canvas context
	t, //Frame of the particle explosion animation (increment with each call. Or decrement, to play backwards! :D )
	x, //X position of particle explosion center
	y, //Y position of particle explosion center
	n, //Total number of particles to render
	g, //Amount of gravity that should affect the particles.
	s, //Seed for the explosion function. Each seed always produces the exact same particle effect.
	i, //Placeholder: particle index
	d){ //Placeholder: Procedural function algorithm shorthand. (since we use it twice, we save some bytes this way)

	with(Math) //Ensure we don't need to use Math in front of all trigonometry.

	for(i=n; //For total number of particles
	i--; //As long as decrementing i doesn't result in 0 (putting the decremention part here saves 1 byte)
	d=cos(isin(is)), //Procedural particle direction algorithm
	a.globalAlpha=n/t/i, //Set the alpha to value depending on the index of the particle. As times goes on, more and more particles fade away.
	a.fillRect(x+tsin(i)d, //Draw a tiny rectangle on the coordinates. i again determines the direction, and the procedural algorithm determines the speed at which the particle travels.
	y+tcos(i)d+t*g //For the y coordinate, also add the gravity.
	,1,1) //Dimensions of 1x1 pixel.
	);
	}
	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.

	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

	0. You just DO WHAT THE FUCK YOU WANT TO.
	{
	"name": "particleExplosion",

	"description": "A fully procedural(so without arrays or objects) particle explosion fitting in 140 bytes.",

	"keywords": [
	"particles",
	"explosion",
	"animation",
	"procedural",
	"canvas"

	]
	}
	<!DOCTYPE html>
	<title>Foo</title>
	<canvas id="particleExplosionCanvas"></canvas>
	<script>
	// write a small example that shows off the API for your example
	// and tests it in one fell swoop.

	var p=function(a,t,x,y,n,g,s,i,d){with(Math)for(i=n;i--;d=cos(isin(is)),a.globalAlpha=n/t/i,a.fillRect(x+tsin(i)d,y+tcos(i)d+t*g,1,1));}


	var a=document.getElementById('view').getContext('2d');
	var t=0;
	var s=Math.random();
	setInterval("a.clearRect(0,0,300,300);p(a,(t++,t%200), 100,100,1024,0.5,s)",10)

	</script>