click here for examples
To use this library, all you need is jQuery, and this library itself, no
other external js or css file is required. Here are some code snippets
showing some basic library functionality:
Creating an Environment (check API for more
details on constructor parameters):
const env1 = new Enviroment("env1", 300, 600, "White", 0, 200)
Creating a Matter (check API for more details on
constructor parameters), the code below will create a solid,
optionally, createLiquid(), and createGas() could be called to create
a liquid or a gas respectively:
const env1_solid1 = new Matter(env1, 200, 40, 200.1, 100, 'Orange', 100, false, true, "sand1")
Creating a EnviromentController:
Enviroment(name, height, width, color, temparature, gravity)
Simulates a real environment, with properties such as temparature,
gravity, etc. Objects (Matter)
can be placed
inside an environment, and the objects will interact with the features
of the environment. Objects can be added, and removed from
environment, but objects can't leave an environment, i.e. all
interactions will take place in an objects assigned environment.
name: name of the environment, takes the id of a
div that is in the html document, for example if the environment is
going to be named env1, there should be a div defined such that its
- height: height of the environment
- width: width of the environment
- color: color of the environment
- temparature: temperature of the environment
- gravity: gravity of the environment
createEnviroment(): Initializes the environment
using the properties assigned by the user. Adds event listeners to
the div corresponding to this object.
changeTemparature(temp): Changes the temparature of
the environment to temp, then makes the Matters in the enviroment
react to this changes accordingly.
applyGravity(): Applies gravity to all the objects
applyGravityOnList(lst): Applies gravity to a given
list of Matters inside the environment.
startEnviroment(): This function starts
interactions (such as gravity, reactions, phase changes...) in
environment, this has to be called by developer manually.
initiateReaction(reactant1, reactant2, product):
This is called automatically by the library functions if to
react-able objects collide, but can also be called manually by
developer to induce a reaction. For this function to induce a
reaction, reactant1 and reactant2 should be set reactable to create
the product, for more info check
Removes the passed in Matter (item) from the environment.
Matter(enviroment, width, height, x, y, color="White", mass=0,
movable=true, displayItem=true, name = "")
that the matter is in.
- width: width of the matter
- height: height of the matter
- x: x position
- y: y position
- color: color of the matter, white by default
- mass: mass of the matter, 0 by default
movable: assigns if the matter is movable by
dragging it with mouse, true by default.
displayItem: assigns if the matter should be
displayed right after the initialization, true by default.
name: the name of the matter, this is the main
identifier for a type of matter.
createSolid(): Creates a solid matter with above
createLiquid(): Creates a liquid matter with above
createGas(): Creates a gas matter with above
isColliding(): Returns a list of other matters this
matter is touching.
changeColor(r, g, b):
Changes the color of the matter to the color specified with the
passed red (r), green (g), blue (b) values.
Changes the position of the matter to the x and y.
Sends a console message which has the properties of this matter.
Sets displayItem true and adds the matter
to the DOM.
Makes this matter react-able with the other matter, if a reaction
occurs later, the product is going to be the result of the reaction.
Takes a boolean move as input, if boolean is true, the object is
movable otherwise object is not movable
Returns the product (Matter object) that is formed by reacting with
other, returns null if there is no reaction with other.
Creates another matter with same specifications as this, at x and y
position that is passed in.
Returns if the matters share the same name (are they same type of
This is the environment that the controller controls.
Creates the EnviromentController.