FloraJS has some built in Proximity objects that exert a force on Agents that come in direct contact or land within the object's range of influence.
In the example below, we create a Liquid object and an Agent that follows the mouse. You can click and drag to place the Liquid anywhere in the World. Use your mouse to make the Agent pass through the Liquid.
You can replace 'Liquid' with 'Attractor' and 'Repeller' to view how the Proximity objects affect an Agent.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <title>FloraJS | Simulate natural systems with JavaScript</title> | |
| <link rel="stylesheet" href="http://www.florajs.com/demos/css/burner.min.css" type="text/css" charset="utf-8" /> | |
| <link rel="stylesheet" href="http://www.florajs.com/demos/css/flora.min.css" type="text/css" charset="utf-8" /> | |
| <script src="http://www.florajs.com/demos/scripts/burner.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="http://www.florajs.com/demos/scripts/flora.min.js" type="text/javascript" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript" charset="utf-8"> | |
| Burner.System.init(function() { | |
| this.add('Agent', { | |
| followMouse: true | |
| }); | |
| this.add('Liquid', { | |
| draggable: true | |
| }); | |
| this.add('Caption', { | |
| text: 'Liquid', | |
| opacity: 0.4, | |
| borderColor: 'transparent', | |
| position: 'top center' | |
| }); | |
| this.add('InputMenu', { | |
| opacity: 0.4, | |
| borderColor: 'transparent', | |
| position: 'bottom center' | |
| }); | |
| }, { | |
| gravity: new Burner.Vector(), | |
| c: 0 | |
| }); | |
| </script> | |
| </body> | |
| </html> |
