add a demo

poligraphapp · Apr 15, 2012 · b52640a7e3f09d39f989558a5359e018cc1e5253 · b52640a
1 parent 0038272
commit b52640a7e3f09d39f989558a5359e018cc1e5253
Unified Split

Showing with 196 additions and 0 deletions.

+34 −0 demo/index.html

+156 −0 demo/main.js

+6 −0 demo/style.css
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>arbor.js project template</title>
+	<link rel="stylesheet" href="style.css" type="text/css">
+</head>
+<body>
+  <canvas id="viewport" width="800" height="600"></canvas>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+
+  <!-- run from the original source files: -->
+  <!-- <script src="../../src/etc.js"></script>
+       <script src="../../src/kernel.js"></script>
+       <script src="../../src/graphics/colors.js"></script>
+       <script src="../../src/graphics/primitives.js"></script>
+       <script src="../../src/graphics/graphics.js"></script>
+       <script src="../../src/tween/easing.js"></script>
+       <script src="../../src/tween/tween.js"></script>
+       <script src="../../src/physics/atoms.js"></script>
+       <script src="../../src/physics/physics.js"></script>
+       <script src="../../src/physics/system.js"></script>
+       <script src="../../src/dev.js"></script> -->
+
+  <!-- run from the minified library file: -->
+  <script src="../../lib/arbor.js"></script>  
+
+  <script src="main.js"></script>
+
+</body>
+</html>
diff --git a/demo/main.js b/demo/main.js
@@ -0,0 +1,156 @@
+//
+//  main.js
+//
+//  A project template for using arbor.js
+//
+
+(function($){
+
+  var Renderer = function(canvas){
+    var canvas = $(canvas).get(0)
+    var ctx = canvas.getContext("2d");
+    var particleSystem
+
+    var that = {
+      init:function(system){
+        //
+        // the particle system will call the init function once, right before the
+        // first frame is to be drawn. it's a good place to set up the canvas and
+        // to pass the canvas size to the particle system
+        //
+        // save a reference to the particle system for use in the .redraw() loop
+        particleSystem = system
+
+        // inform the system of the screen dimensions so it can map coords for us.
+        // if the canvas is ever resized, screenSize should be called again with
+        // the new dimensions
+        particleSystem.screenSize(canvas.width, canvas.height) 
+        particleSystem.screenPadding(80) // leave an extra 80px of whitespace per side
+        
+        // set up some event handlers to allow for node-dragging
+        that.initMouseHandling()
+      },
+      
+      redraw:function(){
+        // 
+        // redraw will be called repeatedly during the run whenever the node positions
+        // change. the new positions for the nodes can be accessed by looking at the
+        // .p attribute of a given node. however the p.x & p.y values are in the coordinates
+        // of the particle system rather than the screen. you can either map them to
+        // the screen yourself, or use the convenience iterators .eachNode (and .eachEdge)
+        // which allow you to step through the actual node objects but also pass an
+        // x,y point in the screen's coordinate system
+        // 
+        ctx.fillStyle = "white"
+        ctx.fillRect(0,0, canvas.width, canvas.height)
+        
+        particleSystem.eachEdge(function(edge, pt1, pt2){
+          // edge: {source:Node, target:Node, length:#, data:{}}
+          // pt1:  {x:#, y:#}  source position in screen coords
+          // pt2:  {x:#, y:#}  target position in screen coords
+
+          // draw a line from pt1 to pt2
+          ctx.strokeStyle = "rgba(0,0,0, .333)"
+          ctx.lineWidth = 1
+          ctx.beginPath()
+          ctx.moveTo(pt1.x, pt1.y)
+          ctx.lineTo(pt2.x, pt2.y)
+          ctx.stroke()
+        })
+
+        particleSystem.eachNode(function(node, pt){
+          // node: {mass:#, p:{x,y}, name:"", data:{}}
+          // pt:   {x:#, y:#}  node position in screen coords
+
+          // draw a rectangle centered at pt
+          var w = 10
+          ctx.fillStyle = (node.data.alone) ? "orange" : "black"
+          ctx.fillRect(pt.x-w/2, pt.y-w/2, w,w)
+        })    			
+      },
+      
+      initMouseHandling:function(){
+        // no-nonsense drag and drop (thanks springy.js)
+        var dragged = null;
+
+        // set up a handler object that will initially listen for mousedowns then
+        // for moves and mouseups while dragging
+        var handler = {
+          clicked:function(e){
+            var pos = $(canvas).offset();
+            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+            dragged = particleSystem.nearest(_mouseP);
+
+            if (dragged && dragged.node !== null){
+              // while we're dragging, don't let physics move the node
+              dragged.node.fixed = true
+            }
+
+            $(canvas).bind('mousemove', handler.dragged)
+            $(window).bind('mouseup', handler.dropped)
+
+            return false
+          },
+          dragged:function(e){
+            var pos = $(canvas).offset();
+            var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
+            if (dragged && dragged.node !== null){
+              var p = particleSystem.fromScreen(s)
+              dragged.node.p = p
+            }
+
+            return false
+          },
+
+          dropped:function(e){
+            if (dragged===null || dragged.node===undefined) return
+            if (dragged.node !== null) dragged.node.fixed = false
+            dragged.node.tempMass = 1000
+            dragged = null
+            $(canvas).unbind('mousemove', handler.dragged)
+            $(window).unbind('mouseup', handler.dropped)
+            _mouseP = null
+            return false
+          }
+        }
+        
+        // start listening
+        $(canvas).mousedown(handler.clicked);
+
+      },
+      
+    }
+    return that
+  }    
+
+  $(document).ready(function(){
+    var sys = arbor.ParticleSystem(1000, 600, 0.5) // create the system with sensible repulsion/stiffness/friction
+    sys.parameters({gravity:true}) // use center-gravity to make the graph settle nicely (ymmv)
+    sys.renderer = Renderer("#viewport") // our newly created renderer will have its .init() method called shortly by sys...
+
+    // add some nodes to the graph and watch it go...
+    sys.addEdge('a','b')
+    sys.addEdge('a','c')
+    sys.addEdge('a','d')
+    sys.addEdge('a','e')
+    sys.addNode('f', {alone:true, mass:.25})
+
+    // or, equivalently:
+    //
+    // sys.graft({
+    //   nodes:{
+    //     f:{alone:true, mass:.25}
+    //   }, 
+    //   edges:{
+    //     a:{ b:{},
+    //         c:{},
+    //         d:{},
+    //         e:{}
+    //     }
+    //   }
+    // })
+    
+  })
+
+})(this.jQuery)
diff --git a/demo/style.css b/demo/style.css
@@ -0,0 +1,6 @@
+body{
+  margin:0;
+  padding:20px;
+  font:12px/17px Arial, sans-serif;
+  background:#f9f9f9;
+}