Proof of concept for wrapping processing-js

Duncanr-glitch · Apr 22, 2013 · 2121e18 · 2121e18
1 parent 06f7a94
commit 2121e18
Show file tree

Hide file tree

Showing 5 changed files with 240 additions and 3 deletions.
diff --git a/dist/builtin.js b/dist/builtin.js
diff --git a/dist/skulpt.js b/dist/skulpt.js
diff --git a/doc/static/processing-1.4.1.min.js b/doc/static/processing-1.4.1.min.js
diff --git a/doc/static/proctest.html b/doc/static/proctest.html
@@ -0,0 +1,115 @@
+<html>
+<!--
+Example of using the turtle module in skulpt.
+Author:  Brad Miller
+
+Note:  One important convention, since I plan to use
+multiple turtle canvases on a page I am passing the runit
+function a prefix to use in creating the id for the following:
+  - textarea containing the code
+  - pre tag for any printed output
+  - canvas tag for the turtle
+I've enclosed the whole group of them in a div because I was thinking
+at one point about creating the pre tag and the canvas tag on the fly
+the more I think about it the more I wonder...
+-->
+<head>
+<script src="skulpt.js" type="text/javascript"></script>
+<script src="builtin.js" type="text/javascript"></script>
+<script src="processing-1.4.1.min.js" type="text/javascript"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" >
+</script>
+
+</head>
+
+<body>
+<script type="text/javascript">
+function outf(text) {
+   var mypre = document.getElementById(Sk.pre);
+   mypre.innerHTML = mypre.innerHTML + text;
+}
+
+function builtinRead(x)
+{
+    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
+        throw "File not found: '" + x + "'";
+    return Sk.builtinFiles["files"][x];
+}
+
+function runit(myDiv) {
+   var prog = document.getElementById(myDiv+"_code").value;
+   var mypre = document.getElementById(myDiv+"_pre");
+   mypre.innerHTML = '';
+   Sk.canvas = myDiv+"_canvas";
+    var can = document.getElementById(Sk.canvas);
+    can.style.display = 'block';
+    if (can) {
+        can.width = can.width;
+        if (Sk.tg) {
+            Sk.tg.canvasInit = false;
+            Sk.tg.turtleList = [];
+        }
+    }
+
+   Sk.pre = myDiv+"_pre";
+   Sk.configure({output:outf,
+  	        read: builtinRead
+              });
+   try {
+      Sk.importMainWithBody("<stdin>",false,prog);
+   } catch (e) {
+      alert(e);
+   }
+}
+</script>
+<h3>Try This</h3>
+<div id="example1">
+<form>
+<textarea edit_id="eta_5" id="example1_code" cols="60" rows="10">
+from math import sin
+from processing import *
+
+
+X = 30
+Y = 30
+nX = X
+nY = Y
+delay = 16
+radius = 30
+fc = 1
+
+def setup():
+   strokeWeight(10)
+   frameRate(20)
+   size(300,300)
+
+def draw():
+   global X, Y, delay, radius, fc
+   background(100)
+   fill(0,121,184)
+   stroke(255)
+   X += (nX-X)/delay;
+   Y += (nY-Y)/delay;
+
+   radius = radius + sin(fc / 4)
+   fc += 1
+   ellipse(X,Y,radius,radius)
+
+def mouseMoved():
+    global nX, nY
+    nX = mouseX()
+    nY = mouseY()
+
+run()
+</textarea>
+<button onclick="runit('example1')" type="button">Run</button>
+</form>
+
+<canvas id="example1_canvas" height="500" width="800"
+	style="border-style: solid; display: none"></canvas>
+
+<pre id="example1_pre"></pre>
+
+</div>
+</body>
+</html>
diff --git a/src/lib/processing/__init__.js b/src/lib/processing/__init__.js
@@ -0,0 +1,109 @@
+var $builtinmodule = function(name)
+{
+    var mod = {};
+
+    // We need this to store a reference to the actual processing object which is not created
+    // until the run function is called.  Even then the processing object is passed by the
+    // processing-js sytem as a parameter to the sketchProc function.  Why not set it to None here
+    //
+    mod.processing = null
+
+    mod.width = null
+    mod.height = null
+    mod.mouseX = null
+    mod.mouseY = null
+    mod.frameCount = null
+    mod.p = null
+
+    mod.strokeWeight = new Sk.builtin.func(function(wt) {
+        mod.processing.strokeWeight(wt.v)
+
+    });
+
+    mod.ellipse = new Sk.builtin.func(function(x,y,r1,r2) {
+        mod.processing.ellipse(x.v,y.v,r1.v,r2.v)
+
+    });
+
+    mod.background = new Sk.builtin.func(function(r,g,b) {
+        mod.processing.background(r.v)
+
+    });
+
+    mod.stroke = new Sk.builtin.func(function(r,g,b) {
+        mod.processing.stroke(r.v)
+
+    });
+
+    mod.fill = new Sk.builtin.func(function(r,g,b) {
+
+        mod.processing.fill(r.v,g.v,b.v)
+
+    });
+
+
+    mod.frameRate = new Sk.builtin.func(function(fr) {
+        mod.processing.frameRate(fr.v)
+
+    });
+
+    mod.size = new Sk.builtin.func(function(h,w) {
+        mod.processing.size(h.v,w.v)
+
+    });
+
+    mod.mouseX = new Sk.builtin.func(function() {
+        return Sk.builtin.assk$(mod.processing.mouseX, Sk.builtin.nmber.int$);
+
+    });
+
+    mod.mouseY = new Sk.builtin.func(function() {
+        return Sk.builtin.assk$(mod.processing.mouseY, Sk.builtin.nmber.int$);
+
+    });
+
+
+    mod.run = new Sk.builtin.func(function() {
+        function sketchProc(processing) {
+            mod.processing = processing
+
+            mod.frameCount = processing.frameCount
+
+            processing.setup = function() {
+                Sk.misceval.callsim(Sk.globals['setup'])
+            }
+
+            processing.mouseMoved = function() {
+                mod.mouseX = processing.mouseX
+                mod.mouseY = processing.mouseY
+
+                Sk.misceval.callsim(Sk.globals['mouseMoved'])
+            }
+
+            processing.draw = function() {
+                mod.frameCount = processing.frameCount  // does not work -- try the pyprocessing method
+                Sk.misceval.callsim(Sk.globals['draw'])
+            }
+
+
+
+        }
+
+        var canvas = document.getElementById(Sk.canvas)
+        mod.p = new Processing(canvas, sketchProc)
+
+
+    });
+
+
+// Create a class for mouse, frame, etc.. see globs.py in pyprocessing
+// todo... find a way to stop this thing with a button.  the following
+//         is proof of concept for how to do it.
+//                if (processing.frameCount > 300) {
+//                    console.log('time to stop')
+//                    mod.p.exit();
+//                }
+
+
+    return mod;
+}