foldi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple System

FloraJS has two major components, a set of classes for elements in a natural system, and a renderer called Burner to draw those elements to the DOM.
To setup a simple Flora system, reference the Burner and Flora .js files from scripts tag in the <head> of your document. Also, reference the Burner and Flora .css files from link tags.
In the body, add a <script> tag and create a new system. Pass the system a function that describes the elements in your world.
You should see a block fall and bounce off the bottom of your browser window.

  
## index.html
<!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');

        this.add('Caption', {
          text: 'Simple',
          opacity: 0.4,
          borderColor: 'transparent',
          position: 'top center'
        });

        this.add('InputMenu', {
          opacity: 0.4,
          borderColor: 'transparent',
          position: 'bottom center'
        });
      });
    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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');

	this.add('Caption', {
	text: 'Simple',
	opacity: 0.4,
	borderColor: 'transparent',
	position: 'top center'
	});

	this.add('InputMenu', {
	opacity: 0.4,
	borderColor: 'transparent',
	position: 'bottom center'
	});
	});
	</script>
	</body>
	</html>