Kaan.js

a 2D physics simulation library for JavaScript

click here for examples

click here for GitHub repo

Getting Started

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):

                <script>
                const env1 = new Enviroment("env1", 300, 600, "White", 0, 200)
                env1.createEnviroment()
                </script>

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:

                <script>
                const env1_solid1 = new Matter(env1, 200, 40, 200.1, 100, 'Orange', 100, false, true, "sand1")
                env1_solid1.createSolid()
                </script>

Creating a EnviromentController:

                <script>
                new EnviromentController(env4).create()
                </script>

API

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.

Constructor Parameters:

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 id="env1".
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

Functions:

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 in environment.
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 Matter.setReactable(other, product).
removeItem(item): Removes the passed in Matter (item) from the environment. Matter.setReactable(other, product).

Matter(enviroment, width, height, x, y, color="White", mass=0, movable=true, displayItem=true, name = "")

Constructor Parameters:

enviroment: Environment 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.

Functions:

createSolid(): Creates a solid matter with above specifications.
createLiquid(): Creates a liquid matter with above specifications.
createGas(): Creates a gas matter with above specifications.
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.
changePosition(x, y): Changes the position of the matter to the x and y.
logProperties(): Sends a console message which has the properties of this matter.
showItem(): Sets displayItem true and adds the matter to the DOM.
setReactable(other, product): 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.
setMovable(move): Takes a boolean move as input, if boolean is true, the object is movable otherwise object is not movable
getProduct(other)(): Returns the product (Matter object) that is formed by reacting with other, returns null if there is no reaction with other.
duplicateMatter(x, y): Creates another matter with same specifications as this, at x and y position that is passed in.
isSame(): Returns if the matters share the same name (are they same type of matter)

EnviromentController(enviroment)

Constructor Parameters:

enviroment: This is the environment that the controller controls.

Functions:

create(): Creates the EnviromentController.