new ParticleSystem(canvasId)
Creates an instance for a particle system and initializes all the WebGL
related commands so we can start drawing. It also sets event handlers.
Parameters:
Name | Type | Description |
---|---|---|
canvasId |
string | The canvas id associated with the particle system. |
Properties:
Name | Type | Description |
---|---|---|
NUM_ITERATIONS |
number | The number of times to run the method to satisfy the constraints. |
TIMESTEP |
number | Used for the velvet integration. The smaller the more precise. |
curPositions |
list | Current positions of the particles in system. |
oldPositions |
list | Positions of the particles in the previous step. |
posData |
list | Particle positoins ready to be sent to WebGL. |
constraints |
list | List containing all the constraints. It might be of type PinConstraint or SpringConstraint. |
conData |
conData | The constraints will be drawn too, so this stores an array of indices of the posData that will be drawn using an EBO so we don't send duplicate data to WebGL. For example [2,3,4,8] means there are two constraints that need to be drawin, one drawing a line between particle with index 2 and 3 and the other one between 4 and 8. |
gravity |
object | Has an x and y property to represent gravity. For this example this is what will populate the force accumulators list. So each element in the force accumulators list will have the same value as gravity. |
forceAccumulators |
list | List of forces represented as an object with x and y properties that will be used by the verlet integration, before the constraint projection, to advect the particles. Think of a force accumulator as an external (not internal) force that acts on the particles. |
num_springs |
number | Stores how many constraints are of type SpringConstraint, it's needed for drawing the right amount of lines. |
clickCon |
object | Click events create constraints dynamically. Once
a mouse down event is registered we look around the clicked point by a given
radius and if some particles exists within the range we append them to the
constrained property of this object as well as the
x and y coordinates of the mouse. If the mouse is
released the constraints will be removed from the system. And if the
breakable flag is true the spring constraints will be deleted if
they exceed 200px distance. |
w |
number | Width of the canvas (on resize glViewport is called). |
h |
number | Height of the canvas (on resize glViewport is called). |
Methods
accumulateForces()
Accumulates forces for each particle
addParticle()
Places a new particle at a given position.
draw()
Draws all the particles in the scene.
initializeGL()
Initializes all the WebGL-reladeltated operations
satisfyConstraints()
All the constraints will be satisfied by modifying the current positions.
sendDataToGL()
Packs all data into single flat array and sends it to client WebGL.
step()
This is basically the game loop. It accumulates the forces, then performs the
Velvet integration, then project all the positions so they satisfy the
constraints, then sends the data to the WebGL buffers so it's ready to be
drawn.
verlet()
Perform the Verlet integration step