foldi

Step 5

• Create a System._update() function to iterate over items and update their properties.
• Create System._draw() and System.getCSSText() functions to update items' style properties and render them in the browser's viewport.
• Add requestAnimFrame to create an animation loop.

foldi

Step 6

• Add style rules in main.css
• Use modernizr to detect css transforms support.
• Create a css text string to use for positioning items.

foldi

(function(exports) {

  /**
   * Creates a new Vector.
   *
   * @param {number} [opt_x = 0] The x location.
   * @param {number} [opt_y = 0] The y location.
   * @constructor
   */
  function Vector(opt_x, opt_y) {

foldi

Step 7

• Add Vector library.
• Add acceleration property to Item.
• Add velocity property to Item.

foldi

Step 8

• Add applyForce() function to Item and update Item.step().
• Add 'wind' and 'thermal' properties to World.
• Add 'mass' property to Item.
• Add Item.checkWorldEdges() function to keep items inside browser viewport.
• Use a cache vector in Item.applyForce() as an optimization.

foldi

Step 9

• Add a resize event and handler to System.
• Add a devicemotion event and handler for mobile browsers.
• Update Item.step() to limit item velocity.
• Add 'bounciness' property to Item.
• Extend SimpleSim.Item to custom objects (Pebble and Boulder).
• Add 'borderRadius' property to Item to render round objects.
• Add 'angle' property to Item to render rotation.

foldi

Step 10

• Add pause, reset and step forward playback controls.
• Add camera control.

foldi

Step 11

• Adds mouse input to control World gravity.

foldi

colors = {
  empty: 0,
  brown: 1,
  green: 2,
  blue: 3,
  cyan: 4,
  magenta: 5,
  yellow: 6,
  black: 7,
  gray: 8

foldi

/*! Burner v2.1.4 - 2013-09-16 07:09:49 
Vince Allen |Brooklyn, NY | [email protected] | @vinceallenvince | License: MIT */

body{background-color:transparent}.world{position:absolute;top:0;left:0;margin:0;padding:0}.item{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}