Permalink
Browse files

add a demo

  • Loading branch information...
prefork committed Apr 15, 2012
1 parent 0038272 commit b52640a7e3f09d39f989558a5359e018cc1e5253
Showing with 196 additions and 0 deletions.
  1. +34 −0 demo/index.html
  2. +156 −0 demo/main.js
  3. +6 −0 demo/style.css
View
@@ -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>
View
@@ -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)
View
@@ -0,0 +1,6 @@
+body{
+ margin:0;
+ padding:20px;
+ font:12px/17px Arial, sans-serif;
+ background:#f9f9f9;
+}

0 comments on commit b52640a

Please sign in to comment.