A very simple port of the second p5js tutorial example.

pmurias · Aug 16, 2014 · be58214 · be58214
1 parent 80adad8
commit be58214
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/examples/webpacked/example.nqp b/examples/webpacked/example.nqp
@@ -1 +1,26 @@
-nqp::say("Hello Browser World");
+my &js := nqp::getcomp("JavaScript");
+my &set-draw := js('(function($CTX, $NAMED, cb) {draw = cb})');
+my &set-setup := js('(function($CTX, $NAMED, cb) {setup = cb})');
+my &fill := js('(function($CTX, $NAMED, color) {fill(color)})');
+my &ellipse := js('(function($CTX, $NAMED, a, b, c, d) {ellipse(a, b, c, d)})');
+my &createCanvas := js('(function($CTX, $NAMED, width, height) {createCanvas(width, height)})');
+my &mouseX := js('(function($CTX, $NAMED) {return mouseX})');
+my &mouseY := js('(function($CTX, $NAMED) {return mouseY})');
+my &mouseIsPressed := js('(function($CTX, $NAMED) {return mouseIsPressed ? 1 : 0})');
+
+sub setup() {
+    createCanvas(640, 480);
+}
+sub draw() {
+    if mouseIsPressed() {
+      fill(0);
+    } else {
+      fill(255);
+    }
+    ellipse(mouseX(), mouseY(), 80, 80);
+}
+
+set-setup(&setup);
+set-draw(&draw);
+
+nqp::say("Hello Fancy Browser World");
diff --git a/examples/webpacked/index.html b/examples/webpacked/index.html
@@ -4,6 +4,6 @@
     </head>
     <body>
         <script type='text/javascript' src='bundle.js' charset='utf-8'></script>
-        The javascript console should contain "Hello Browser World".
+        <script src="http://cdn.jsdelivr.net/p5.js/0.3.2/p5.min.js"></script>
     </body>
 </html>