The Javascript Particle Simulation Toolkit
So I've released v1.0 of the javascript particle simulation toolkit. There's not too much right now, but I thought it was interesting enough to throw out into the wild.
Features
- Create a bounded "field" for the simulation to live
- Add mulitple particles to your field with varying sizes, masses, and interactive properties
- Add a constant x or y acceleration (Simulates global gravity in a 2d environment)
- Add a constant x or y force (Simulates wind in a 2d environment)
- Register particles to the "Collision Grid" (simulated elastic collisions between multiple particles)
- Lock a particle to the gravitational pull of another (Simulate planetary orbits, comets, etc.)
- Lock a particle to another via an imaginary spring force (Create fluid polygonal structures)
Collision Detection Example
Here is an example of the usage of both constant y-acceleration combined with multiple particles registered to the collision grid. If you are fast enough to catch one of the particles with your mouse pointer it can be "thrown"
Collision Detection Code
<div id="collision" style="width:100%; height:250px; background:#eee; margin-bottom:20px;"></div>
<script type="text/javascript" src="pst.js"></script>
<script type="text/javascript">
//create a new field on the HTML Element with ID 'collision'
var field = new Field(document.getElementById('collision'), {
//no friction due to air (permissivity can be thought of as the opposite of friction, 0 meaning there is no movement)
permissivity: 1,
//how often to calculate the new locations and properties of all particles
interval: 62,
//movement scale, how far to move the particle with each iteration (relative to how fast it is moving)
scale: .2,
//bound all particles to the current field dimensions (stay inside the div)
bouncyWalls: true
});
//a for loop to quickly add a few particles to our field
for(var i=0; i<7; i++){
//add a particle to the field
var particle = field.addParticle({
//x location
x: i*32+40,
//y location
y: 25,
//relative mass (irrelevant if all particles have the same mass)
mass: 15 - i,
//radius of this particle in pixels
radius: 15 - i,
//initial velocity for this particle
xVel: i*3
});
particle.lockToYAccel(1);
particle.lockToMouseDown(true);
particle.registerToCollisionGrid();
}
</script>