Skip to content

Instantly share code, notes, and snippets.

@Qqwy

Qqwy/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Last active Mar 8, 2018
Embed
What would you like to do?

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.
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.
);
}
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));}
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(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment