Fork me on GitHub

Move.js Documentation

Generated by Docatron

class Vector

A simple 3D vector.

var v = new Move.Vector({x: 10, y: 0, z: 5});
v.multiplyScalar(2);
console.log(v.x);
> 20
Constructor params:

  • Object options

    Options to initialize this Vector.

    Properties:

    • optional Number x: 0

      x coordinate

    • optional Number y: 0

      y coordinate

    • optional Number z: 0

      z coordinate

Functions:

class Controller

Handles everything relating to a single canvas.

var controller = new Move.Controller({
    context: document.getElementById('canvas').getContext('2d')
});

controller.addSystem(new Move.System({...}));
controller.start();
Constructor params:

  • Object options

    Options for the controller.

    Properties:

    • Context2D context

      The context this controller will draw on.

    • optional Boolean trace: false

      Whether the canvas will be cleared every frame.

    • optional Number speed: 1

      The speed the simulation moves at.

    • optional Function draw(Context2D ctx): Controller.draw

      The function used to draw the particle systems this controller handles to the canvas.

      Params:

      • Context2D ctx

        The context to draw on.

    • optional Function preDraw(Context2D ctx)

      Called right before draw().

      Params:

      • Context2D ctx

        The context to draw on.

    • optional Function postDraw(Context2D ctx)

      Called right after draw().

      Params:

      • Context2D ctx

        The context to draw on.

    • optional Function setContext(Context2D ctx)

      Sets up the context before any draw calls are made.

      Params:

      • Context2D ctx

        The context to draw on.

Functions:

  • reset()

    Resets the Systems this controller is in charge of.

  • addSystem(System system)

    Adds a system to this controller.

    Params:

    • System system

      The system to add.

  • start()

    Begin or resume the simulation.

  • pause()

    Pause the simulation.

  • draw(Context2D ctx)

    Draws the systems this controller is in charge of to the canvas.

    Params:

    • Context2D ctx

      The context to draw on.

Properties:

class System

A particle system.

var system = new Move.System({
    numParticles: 100,
    rules: [...],
    newParticle: function(numParticles) {
        return new Move.Particle({...});
    }
});

controller.addSystem(system);
Constructor params:

  • Object options

    Options for the system.

    Properties:

    • Function newParticle(Number numParticles)

      Creates a new Particle for the system.

      Params:

      • Number numParticles

        The current number of particles in the system.

    • optional Number numParticles: 0

      The number of particles to start this system with.

    • optional Function[] rules: []

      The starting set of Rules for this system.

    • optional Function preDraw(Context2D ctx)

      Called right before the Particles in the system are drawn.

      Params:

      • Context2D ctx

        The context to draw on.

    • optional Function postDraw(Context2D ctx)

      Called right after the Particles in the system are drawn.

      Params:

      • Context2D ctx

        The context to draw on.

    • optional Function preUpdate(Number delta)

      Called right before the update step where the new positions for the Particles in the system are computed.

      Params:

      • Number delta

        The change in time since the last update in seconds.

    • optional Function postUpdate(Number delta)

      Called right after the update step.

      Params:

      • Number delta

        The change in time since the last update in seconds.

    • optional Function setContext(Context2D ctx)

      Sets up the context before any draw calls are made for this system.

      Params:

      • Context2D ctx

        The context to draw on.

    • optional Function onDeath()

      Called when a particle dies.

    • optional Function init()

      Do custom initialization such as adding properties to this.

Functions:

  • reset()

    Resets this system, and regenerates starting particles.

  • addRule(Function rule)

    Adds a rule to this system. Rules are explained more in the Rules object.

    Params:

    • Function rule(Particle particle, Number i, Number delta)

      The rule to add.

      Params:

      • Particle particle

        The particle to operate on.

      • Number i

        The index of the particle in the system.

      • Number delta

        The time in seconds since the last update.

  • addParticle([Particle particle])

    Adds a new Particle to the system.

    Params:

    • optional Particle particle

      The particle to add. Defaults to the result of calling the newParticle() function passed in to the System.

Properties:

class Particle

A particle in a particle system.

var particle = new Move.Particle({
    pos: new Move.Vector({x: 10, y: 5}),
    vel: new Move.Vector({x: 1, y: 1}),
    r: 10, g: 100, b: 255
});

system.addParticle(particle);
Constructor params:

  • Object options

    Options for the particle.

    Properties:

    • optional Vector pos: new Vector()

      The starting position of the particle.

    • optional Vector vel: new Vector()

      The starting velocity of the particle.

    • optional Number r: 255

      Red value.

    • optional Number g: 0

      Green value.

    • optional Number b: 0

      Blue value.

    • optional Number a: 1

      Alpha value.

    • optional Number size: 2

      Size of the particle.

    • optional Number trail: 0

      Whether this particle will have a trail. The trail created by drawing increasingly transparent versions of the particle at previous positions. A trail of 10 will use the 10 last positions.

    • optional Function draw(Context2D ctx, Number opacity, Vector pos): Particle.draw

      Determines how this particle should be drawn on the canvas. The default draw function draws the particle as a circle.

      Params:

      • Context2D ctx

        The context to draw on.

      • Number opacity

        If this particle has a trail, the opacity will be a number from 0 - 1 that represents how transparent the particle should be. 0 means completely transparent and 1 means completely opaque.

      • Vector pos

        The position to draw at. This may be different than the particle's position if one of the tail sections is being drawn.

    • optional Function preUpdate(Number delta)

      Function called before particle update.

      Params:

      • Number delta

        The change in time since the last update in seconds.

    • optional Function postUpdate(Number delta)

      Function called after particle update.

      Params:

      • Number delta

        The change in time since the last update in seconds.

    • optional Function isDead()

      Function called after every update. If it returns true, the particle is removed from the System, and System.onDeath is called.

    • optional Function init()

      Do custom initialization on this particle.

Functions:

  • draw(Context2D ctx, Number opacity, Vector pos)

    The default draw function. Draws the particle as a circle.

    Params:

    • Context2D ctx

      The context to draw on.

    • Number opacity

      If this particle has a trail, the opacity will be a number from 0 - 1 that represents how transparent the particle should be. 0 means completely transparent and 1 means completely opaque.

    • Vector pos

      The position to draw at. This may be different than the particle's position if one of the tail sections is being drawn.

Properties:

  • Vector pos

    The position of the particle.

  • Vector vel

    The velocity of the particle.

  • Vector origPos

    The original position of the particle.

  • Number r

    The red value of the color of the particle.

  • Number g

    The green value of the color of the particle.

  • Number b

    The blue value of the color of the particle.

  • Number a

    The alpha value of the color of the particle.

  • Number size

    The size of the particle.

object Rules

Rules can be added to a system to specify its behavior. The Rules object has some starter rules, but a complex system will probably have some custom rules.

Rules are functions of the form:

function(particle, i, delta) {
    ...
}

Where particle is a Particle, i is the index of the particle in the system, and delta is the time in seconds since the last update.

Functions:

  • Function gravity(Number strength)

    Pulls the particle downward.

    Params:

    • Number strength

      The strength of the gravity.

    Returns: Function

    A gravity rule that can be passed to System.addRule.

  • Function resistance(Number strength)

    Slows a particle over time.

    Params:

    • Number strength

      The strength of the resistance.

    Returns: Function

    A resistance rule that can be passed to System.addRule.

  • Function attract(Number strength, [Vector pos])

    Attracts a particle to a point with the formula 1/distance.

    Params:

    • Number strength

      The strength of the attraction.

    • optional Vector pos: Particle.origPos

      The point to attract to.

    Returns: Function

    An attraction rule that can be passed to System.addRule.

  • Function magnet(Number strength, [Vector pos])

    Attracts a particle to a point with the formula 1/distance^2.

    Params:

    • Number strength

      The strength of the attraction.

    • optional Vector pos: Particle.origPos

      The point to attract to.

    Returns: Function

    A magnetism rule that can be passed to System.addRule.

  • Function wall(Vector pos, String coord)

    Creates a wall that particles will bounce off of.

    Params:

    • Vector pos

      The position of the wall.

    • String coord

      The coordinate of the wall. Can be 'x', 'y', or 'z'.

    Returns: Function

    A wall rule that can be passed to System.addRule.