Skip to content
A simple javascript library for creating educational molecular dynamics demos using webGL.
JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Build status Flory

Flory lets both educators and students show simple and beautiful molecular dynamics simulations directly in a browser.


Checkout the website or alternatively open your trusty terminal to try out the demos:

git clone
cd Flory

Start a local webserver to access the demos, a python webserver will do:

python -m SimpleHTTPServer 8888

Check it out:

======= To modify the demos open up the demo/ folder and modify the .js files, then rebuild the app.

##Installation Download the minified library and include it in your html. Alternatively, build it yourself.

Getting Started

The goal of Flory is to provide a simple framework for designing educational molecular dynamic simulations in browser. At its base, Flory provides an Flory.Environment class that defines basic events that occur during a simulation and visualization.

var env = new Flory.Environment()
var monomer = new Flory.Monomer({"radius":1,"charge":0,"mass":1,"position":[0,0,0],"name" : "atom"})
//add more monomers

var numberOfSteps = 10000
    //This will update the positions of the particles
    //and render any thing that is renderable that was called with

Flory.Environment is an empty class that does not define any physical simulations. In order to create you own simulation you need to inherit from Flory.Environment and define your own update() function. On each call to Flory.Environment.advance your subclassed update() function is called. For example, the Flory.RandomWalk is implemented as :

Flory.RandomWalk.prototype.update = function(additional){
	var len = this.entities.length;
	var entity;
	var number_of_dimensions;
	var dimension_increment;
	var dimension_to_choose;
	var rnum;
	var number_of_steps = 1;

	if(additional.number_of_steps != undefined){
		number_of_steps = additional.number_of_steps;

	for(var k = 0; k < number_of_steps;k++){
		for( var i = 0;i<len;i++){
			entity = this.entities[i];
			if(entity instanceof Flory.Monomer){
				prob_right = 0.5;
				number_of_dimensions = entity.position.dimension();
				dimension_increment = (1.0/number_of_dimensions);
				dimension_to_choose = 0;
                                //Choose the dimension to move in
				rnum = this.randomGen.random();
				rnum -= dimension_increment;
				while(rnum > 0){
					rnum -= dimension_increment;
				//Choose the direction of movement in the dimension
				rnum = this.randomGen.random();
				if(rnum < prob_right){
				} else {

	return this;

A demo with this example simulation can be found in flory/demo/randomWalk/randomWalk.js. Some basic experiments are already subclassed for you such as :

  • Flory.RandomWalk
  • Float.LennardJones
  • Flory.Newtonian
  • Flory.Newtonian2D

The idea behind an environment is that Flory.Entities objects can be added to the scenes.Almost all classes are descendants from Flory.Entities. If an object is also a descendant of Flory.Renderable ( a descendant of Flory.Entity), then it can be rendered by the Environment.

For example, a set of Flory.Particles( a descendant of Flory.Renderable) particles can be added to a Flory.Newtonian environment along with a different Flory.ContinuousField. On each call to Flory.Newtonian.advance(), the positions of the particles will be updated in accordance with forces applied by the various Flory.ContinuousField.

##Build Usage usage: grunt [-h] [--include INCLUDE] [--externs EXTERNS [--minify] [--output OUTPUT] [--sourcemaps]

Optional arguments: -h, --help Show this help message and exit. --include INCLUDE --externs EXTERNS --amd --minify --output OUTPUT --sourcemaps

You can’t perform that action at this time.