Updated to Processing Version 1.4.8

History.md

@@ -1,3 +1,12 @@
+0.4.0 / 2014-10-28
+==================
+
+  * Processing.js v1.4.8
+  * API Changed 
+  * Removed dependency upon nsdom
+  * Added the ability to generate server side animations (see examples)
+  * Updated server.js to show latest tests
+
 
 0.3.0 / 2012-08-13 
 ==================

Readme.md

@@ -3,34 +3,138 @@
 
   [Processing.js](http://processingjs.org/) for [Node.js](http://nodejs.org)
 
-![screenshot](http://cl.ly/1R1L2S2n190c0L2j1I32/node-processing.png)
+![screenshot](https://raw.github.com/sudsy/node-processing/master/testServer.png)
+
 
 ## Installation
 
 ```
 $ npm install processing
 ```
 
+## Issues
+1. Currently does not support 3d sketches 
+2. Has buggy support for loadImage and loadSVG (run make test-server to see examples that are not working) 
+
 ## Usage
 
 ```javascript
 var fs = require('fs')
   , sketch = __dirname + '/scribbleplotter.pde'
-  , processing = require('processing');
+  , Processing = require('processing')
+  , Canvas = require("canvas")
+  , canvas = new Canvas(200,200);
 
 fs.readFile(sketch, function(err, data) {
-  var p5 = processing.createInstance(data, sketch)
+  var p5 = new Processing(canvas, data)
     , out = fs.createWriteStream(__dirname + '/scribbleplotter.png')
-    , stream = p5.canvas.createPNGStream();
+    , stream = canvas.createPNGStream();
 
   stream.pipe(out);
 });
 ```
 
+## Usage
+
+```javascript
+// Compile processing code into javascript, so it can be used in a LAMP webapp more effectively (no p5 lang parsing step by client needed)
+// Intended to use with Grunt when developing and deploying web applications
+// contribution by kroko.me
+
+var fs = require('fs');
+var Processing = require('processing');
+if (process.argv.length != 5) {
+    console.log("Usage: node compile.js <input-sketch.pde> <output-filename.js> <variable-name-to-store-p5js-app-into>");
+    process.exit(code = 1);
+}
+else {
+    console.log("Reading file: " + process.argv[2]);
+    console.log("Output will be: " + process.argv[3]);
+    console.log("Variable will be: " + process.argv[4]);
+}
+console.log("Compiling sketch...");
+
+fs.readFile(process.argv[2], function(err, data) {
+    var compiled = Processing.compile(data.toString('utf-8'));
+    compiled = "var " + process.argv[4] + " = " + compiled + ";";
+    fs.writeFile(process.argv[3], compiled, function(err) {
+        if (err) {
+            console.log(err);
+        } else {
+            console.log("...done!");
+        }
+    });
+});
+
+// Usage in web
+// var domCanvas = document.getElementById('id-of-canvas-dom-element');
+// pjsPtr = new Processing(domCanvas, valiable-name-as-passed-to-this-script);
+// if (pjsPtr) { }
+```
+
+## Usage - Animation
+
+![Animated Example](https://raw.github.com/sudsy/node-processing/master/examples/animation/bobbingball.gif)
+
+```javascript
+// Generate server side animations with processing
+
+var fs = require('fs'),
+  sketch = __dirname + '/bobbingball.pde',
+  Processing = require('../../'),
+  Canvas = require("canvas"),
+  GIFEncoder = require("gifencoder");
+
+
+
+ var canvas = new Canvas(400,400);
+ var ctx = canvas.getContext('2d');
+
+ var encoder = new GIFEncoder(400, 400);
+ encoder.createReadStream().pipe(fs.createWriteStream('bobbingball.gif'));
+ encoder.setDelay(40); 
+
+
+fs.readFile(sketch, {"encoding": "utf-8"}, function(err, data) {
+  if(err){
+    console.log(err);
+  }
+
+  var p5 = new Processing(canvas, data);
+
+  p5.onAfterDraw = function(){
+
+    encoder.addFrame(ctx);
+  }
+
+  encoder.start();
+
+  //Finish the animation
+  setTimeout(function(){
+      //stop encoding the gif
+      encoder.finish();
+      //Stop Processing from looping
+      p5.noLoop();
+
+  }, 3600);
+
+
+});
+
+
+```
+
+
 ## Authors
 
   - Seiya Konno &lt;[email protected]&gt; ([nulltask](https://github.com/nulltask))
 
+## Contributors
+
+  - Reinis Adovičs ([kroko](https://github.com/kroko))
+  - Ben Sudbury ([sudsy](https://github.com/sudsy))
+
+
 ## License
 
 (The MIT License)

examples/animation/bobbingball.js

@@ -0,0 +1,41 @@
+var fs = require('fs'),
+  sketch = __dirname + '/bobbingball.pde',
+  Processing = require('../../'),
+  Canvas = require("canvas"),
+  GIFEncoder = require("gifencoder");
+
+
+
+ var canvas = new Canvas(400,400);
+ var ctx = canvas.getContext('2d');
+
+ var encoder = new GIFEncoder(400, 400);
+ encoder.createReadStream().pipe(fs.createWriteStream('bobbingball.gif'));
+ encoder.setDelay(40); 
+
+
+fs.readFile(sketch, {"encoding": "utf-8"}, function(err, data) {
+	if(err){
+		console.log(err);
+	}
+	// console.log(data);
+  var p5 = new Processing(canvas, data);
+
+  p5.onAfterDraw = function(){
+    // console.log("fired");
+    encoder.addFrame(ctx);
+  }
+
+  encoder.start();
+
+  //Finish the animation
+  setTimeout(function(){
+      //stop encoding the gif
+      encoder.finish();
+      //Stop Processing from looping
+      p5.noLoop();
+
+  }, 3600);
+
+
+});

examples/animation/bobbingball.pde

@@ -0,0 +1,98 @@
+Ball ball;
+float angle = 0;
+float centerY = 200;
+float range = 100;
+float speed = 0.2;
+
+void setup() {
+  size(400, 400);
+  frameRate(25);
+
+  initialize();
+}
+
+void initialize() {
+  smooth();
+  noStroke();
+  background(255);
+  ball = new Ball();
+  centerY = height/2;
+  ball.x = width/2;
+  ball.y = centerY;
+  ball.radius = 50;
+  ball.setFillColor(color(255, 0, 0));
+  ball.update();
+
+}
+
+void draw() {
+  background(255);
+  ball.y = centerY + sin(angle) * range;
+  angle += speed;    
+  ball.update();
+}
+
+////////////////////////////////
+
+class Ball extends Sprite {
+  float radius;
+
+  Ball() {
+    super();
+  }
+
+  void draw() {
+    ellipse(0, 0, radius*2, radius*2);
+  }
+}
+
+////////////////////////////////
+
+class Sprite {
+  float x, y;
+  float scaleX, scaleY;
+  float width, height;
+  float rotation;
+  boolean visible;
+  color strokeColor;
+  color fillColor;
+  Boolean isStroke;
+  Boolean isFill;
+
+  Sprite() {
+    x = 0.0;
+    y = 0.0;
+    scaleX = 1.0;
+    scaleY = 1.0;
+    rotation = 0.0;
+    strokeColor = color(0);
+    fillColor = color(0);
+    isStroke = false;
+    isFill = false;
+    visible = true;
+  }
+
+  void update() {
+    if(! visible) return;
+    pushMatrix();
+    translate(x, y);
+    scale(scaleX, scaleY);
+    rotate(rotation * PI / 180.0);
+    if(isStroke) stroke(strokeColor);
+    if(isFill) fill(fillColor);
+    draw();
+    popMatrix();
+  }
+
+  void setStrokeColor(color strokeColor) {
+    this.strokeColor = strokeColor;
+    isStroke = true;
+  }
+
+  void setFillColor(color fillColor) {
+    this.fillColor = fillColor;
+    isFill = true;
+  }
+
+  void draw() {}
+}

examples/compile/compile.js

@@ -0,0 +1,34 @@
+// Compile processing code into javascript, so that can be used in webpage more effectively (no p5 lang parsing step by client needed)
+// Intended to use with Grunt when developing and deploying web applications
+// contribution by kroko.me
+
+var fs = require('fs');
+var Processing = require('../../');
+if (process.argv.length != 5) {
+    console.log("Usage: node compile.js <input_sketch.pde> <output_filename.js> <variable_name_to_store_p5js_app_into>");
+    process.exit(code = 1);
+}
+else {
+    console.log("Reading file: " + process.argv[2]);
+    console.log("Output will be: " + process.argv[3]);
+    console.log("Variable will be: " + process.argv[4]);
+}
+console.log("Compiling sketch...");
+// console.log(Processing);
+
+fs.readFile(process.argv[2], function(err, data) {
+    var compiled = Processing.compile(data.toString('utf-8'));
+    compiled = "var " + process.argv[4] + " = " + compiled + ";";
+    fs.writeFile(process.argv[3], compiled, function(err) {
+        if (err) {
+            console.log(err);
+        } else {
+            console.log("...done!");
+        }
+    });
+});
+
+// Usage in web
+// var domCanvas = document.getElementById('id_of_canvas_dom_element');
+// pjsPtr = new Processing(domCanvas, valiable_name_as_passed_to_this_script);
+// if (pjsPtr) { }

examples/scribbleplotter/scribbleplotter.js

@@ -1,11 +1,22 @@
 var fs = require('fs')
   , sketch = __dirname + '/scribbleplotter.pde'
-  , processing = require('../../');
+  , Processing = require('../../')
+  , Canvas = require("canvas");
 
-fs.readFile(sketch, function(err, data) {
-  var p5 = processing.createInstance(data, sketch)
+
+
+ var canvas = new Canvas(200,200);
+
+
+fs.readFile(sketch, {"encoding": "utf-8"}, function(err, data) {
+	if(err){
+		console.log(err);
+	}
+	// console.log(data);
+  var p5 = new Processing(canvas, data)
     , out = fs.createWriteStream(__dirname + '/scribbleplotter.png')
-    , stream = p5.canvas.createPNGStream();
+    , stream = canvas.createPNGStream();
+
 
   stream.pipe(out);
 });