Finish up demos

iamdustan · Nov 6, 2012 · 8151860 · 8151860
1 parent e7b469f
commit 8151860
Show file tree

Hide file tree

Showing 9 changed files with 4,985 additions and 3 deletions.
diff --git a/4/custom-bonsai.js b/4/custom-bonsai.js
diff --git a/4/index.html b/4/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>Bonsai Boilerplate</title>
+  <link rel="stylesheet" href="../assets/styles.css">
+  <link href="//fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
+  <link href="//fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet">
+</head>
+<body class="demo">
+  <h1>A Node Runner with Socket.io</h1>
+  <a href="../">Back to article</a>
+  <div id="movie"></div>
+
+  <div id="editor"></div>
+
+  <script src="//localhost:4000/socket.io/socket.io.js"></script>
+  <script src="/4/custom-bonsai.js"></script>
+  <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
+  <script>
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/monokai");
+    editor.getSession().setMode("ace/mode/javascript");
+    editor.setReadOnly(true);
+    editor.blur()
+  </script>
+  <script src="/4/main.js"></script>
+</body>
+</html>
+
+
+
diff --git a/4/index.js b/4/index.js
diff --git a/4/main.js b/4/main.js
@@ -0,0 +1,39 @@
+var movie = document.getElementById('movie')
+var runnerContext = function (runnerUrl) {
+  this.socket = io.connect(runnerUrl);
+};
+
+// some boilerplate to connext via socket.io
+var proto = runnerContext.prototype = bonsai.tools.mixin({
+  init: function () {
+    var self = this;
+    this.socket.on('message', function(msg) {
+      self.emit('message', msg[0]);
+    });
+  },
+  notify: function (message) {
+    this.socket.emit('message', message);
+  },
+  notifyRunner: function (message) {
+    this.socket.emit('message', message);
+  },
+  run: function (code) {
+    this.notifyRunner({
+      command: 'runScript',
+      code: code
+    });
+  }
+}, bonsai.EventEmitter);
+
+proto.notifyRunnerAsync = proto.notifyRunner;
+
+bonsai
+  .setup({
+    runnerContext: runnerContext,
+    runnerUrl: 'http://localhost:4000'
+  })
+  .run(movie, {
+    width: 600,
+    height: 400
+  });
+
diff --git a/4/movie.js b/4/movie.js
@@ -0,0 +1,39 @@
+// movie.js
+// this is read by and run on the server
+// @todo REWRITE THIS YOURSELF
+var centerX = 250,
+    centerY = 250,
+    circles = 180,
+    distance = 180,
+    frames = 14,
+    radiusMin = 10,
+    radiusVar = 10;
+
+var circle, random = Math.random;
+
+for (var i = 0; i < circles; ++i) {
+    var f = i / circles,
+        x = centerX + distance * Math.sin(f*2*Math.PI),
+        y = centerY + distance * -Math.cos(f*2*Math.PI),
+        radius = random() * radiusVar + radiusMin;
+
+    circle = new Circle(x, y, radius).
+      attr({fillColor: 'random', fillGradient: bonsai.gradient.radial(['#FFFFFF88', '#FFFFFF00'])});
+
+    circle.x = x;
+    circle.y = y;
+
+    stage.addChild(circle);
+}
+
+var c = stage.children();
+stage.length(frames);
+var spread = 80;
+stage.on(0, function() {
+  for (var i = 0, circle; (circle = c[i++]); ) {
+    circle.animate(frames, {
+      x: circle.x + spread * random() - spread / 2,
+      y: circle.y + spread * random() - spread / 2
+    }, {easing: 'sineInOut'});
+  }
+});
diff --git a/4/server.js b/4/server.js
@@ -0,0 +1,30 @@
+var bonsai = require('bonsai');
+var fs = require('fs');
+
+var bonsaiCode = fs.readFileSync(__dirname + '/movie.js');
+var socketRenderer = function (socket) {
+  this.socket = socket;
+};
+
+var socket = require('socket.io').listen(4000);
+
+socket.sockets.on('connection', function (socket) {
+  var movie = bonsai.run(null, {
+    code: bonsaiCode,
+    plugins: []
+  });
+
+  movie.runnerContext.on('message', function () {
+    socket.emit('message', arguments);
+  });
+
+  movie.on('message', function (msg) {
+    movie.runnerContext.notifyRunner(msg);
+  });
+
+  socket.on('disconnect', function () {
+    movie.destroy();
+  });
+
+});
+
diff --git a/index.html b/index.html
@@ -13,8 +13,7 @@
     <a href="/1/">Getting started</a>
     <a href="/2/">The Runner Code</a>
     <a href="/3/">User Interaction</a>
-    <a href="/4-start/">Fourth demo</a>
-    <a href="/5-start/">Fifth demo</a>
+    <a href="/4/">Running Node</a>
   </nav>
 
   <article class="markdown-body entry-content" itemprop="mainContentOfPage"><h1>

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "url": "http://github.com/cloudhead/node-static"
   },
   "scripts": {
-    "start": "./node_modules/node-static/bin/cli.js"
+    "start": "./run"
   },
   "version": "0.0.1",
   "dependencies": {

diff --git a/run.js b/run.js
@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+// run static server on 8080
+require('child_process').exec('./node_modules/node-static/bin/cli.js')
+
+// run socket.io server on 4000
+require('4/server')
+