Permalink
Browse files

Examples of using pde, pjs, js and mixing together.

  • Loading branch information...
1 parent 8e6f7b7 commit 95c5408c4a5c8de578422c29ee9652b434e26a05 David Humphrey committed Oct 26, 2011
@@ -0,0 +1,52 @@
+<!-- Make sure you include the HTML5 doc type (esp. for IE9) -->
+<!doctype html>
+<head>
+ <!-- Include Processing.js. No 'type' attribute, the browser assumes text/javascript -->
+ <script src="../../processing.js"></script>
+</head>
+<body>
+
+ <!-- Inline Processing script. "Is that Java code in a script tag!?" -->
+ <!-- Yes, yes it is! The 'type' of text/processing (application/processing -->
+ <!-- also works) means it gets ignored by the browser, and found by -->
+ <!-- Processing.js. The 'data-processing-target' attribute gives the id -->
+ <!-- of the canvas to use for this code. -->
+ <script type="text/processing" data-processing-target="sketch">
+ // Original Translation sketch from processing.org
+ float x, y;
+ float dim = 80.0;
+
+ void setup() {
+ size(640, 360);
+ noStroke();
+ }
+
+ void draw() {
+ background(102);
+
+ x = x + 0.8;
+
+ if (x > width + dim) {
+ x = -dim;
+ }
+
+ translate(x, height/2-dim/2);
+ fill(255);
+ rect(-dim/2, -dim/2, dim, dim);
+
+ // Transforms accumulate. Notice how this rect moves
+ // twice as fast as the other, but it has the same
+ // parameter for the x-axis value
+ translate(x, dim);
+ fill(0);
+ rect(-dim/2, -dim/2, dim, dim);
+ }
+ </script>
+
+ <!-- Now a canvas to create our drawing area. We rely -->
+ <!-- on the 'id' attribute of our canvas to bind the -->
+ <!-- script to the canavs at run-time. This way you can -->
+ <!-- have multiple sketches per page. -->
+ <canvas id="sketch"></canvas>
+</body>
+</html>
@@ -0,0 +1,71 @@
+<!-- Make sure you include the HTML5 doc type (esp. for IE9) -->
+<!doctype html>
+<head>
+ <!-- Include Processing.js. No 'type' attribute, the browser assumes text/javascript -->
+ <script src="../../processing.js"></script>
+</head>
+<body>
+
+ <!-- Inline JavaScript which uses Processing.js as a canvas drawing API. -->
+ <!-- Note that we have to create and start our sketch manually. -->
+ <script type="text/javascript">
+ // Original Translation sketch from processing.org
+
+ // Wait until the DOM is ready...
+ document.addEventListener('DOMContentLoaded', function() {
+
+ // Processing.js will use this function as the body of the sketch,
+ // and pass us a processing instance, which we can use to attach
+ // things like setup() and draw(), and to access all the various
+ // Processing types, functions and values.
+ var sketchBody = function(processing) {
+ var x = 0,
+ y = 0,
+ dim = 80;
+
+ processing.setup = function() {
+ processing.size(640, 360);
+ processing.noStroke();
+ }
+
+ processing.draw = function() {
+ processing.background(102);
+
+ x = x + 0.8;
+
+ if (x > processing.width + dim) {
+ x = -dim;
+ }
+
+ processing.translate(x, processing.height/2-dim/2);
+ processing.fill(255);
+ processing.rect(-dim/2, -dim/2, dim, dim);
+
+ // Transforms accumulate. Notice how this rect moves
+ // twice as fast as the other, but it has the same
+ // parameter for the x-axis value
+ processing.translate(x, dim);
+ processing.fill(0);
+ processing.rect(-dim/2, -dim/2, dim, dim);
+ }
+ };
+
+ // Wrap our code in a Processing.Sketch object to setup the
+ // rest of the bits we'll need later. It takes a function that
+ // accepts one argument, a processing instance.
+ var sketch = new Processing.Sketch(sketchBody);
+
+ // Pass in the 'id' of the canvas (or the canvas element itself)
+ // and a Processing.Sketch object.
+ var processingInstance = new Processing("sketch", sketch);
+
+ }, false);
+ </script>
+
+ <!-- Now a canvas to create our drawing area. We rely -->
+ <!-- on the 'id' attribute of our canvas to bind the -->
+ <!-- script to the canavs at run-time. This way you can -->
+ <!-- have multiple sketches per page. -->
+ <canvas id="sketch"></canvas>
+</body>
+</html>
@@ -0,0 +1,15 @@
+<!-- Make sure you include the HTML5 doc type (esp. for IE9) -->
+<!doctype html>
+<head>
+ <!-- Include Processing.js -->
+ <script src="../../processing.js"></script>
+</head>
+<body>
+
+ <!-- Now a canvas to create our drawing area. We use -->
+ <!-- data-processing-sources to load our Processing code. -->
+ <!-- NOTE: some browsers will not load this from file:/// -->
+ <!-- and will instead want you to use http:// (web server).-->
+ <canvas id="sketch" data-processing-sources="translation.pde"></canvas>
+</body>
+</html>
@@ -0,0 +1,34 @@
+// Converted Translation sketch from in JavaScript (Processing.compile)
+
+// this code was autogenerated from PJS
+(function($p) {
+
+ var x = 0,
+ y = 0;
+ var dim = 80.0;
+
+ function setup() {
+ $p.size(640, 360);
+ $p.noStroke();
+ }
+ $p.setup = setup;
+
+ function draw() {
+ $p.background(102);
+
+ x = x + 0.8;
+
+ if (x > $p.width + dim) {
+ x = -dim;
+ }
+
+ $p.translate(x, $p.height / 2 - dim / 2);
+ $p.fill(255);
+ $p.rect(-dim / 2, -dim / 2, dim, dim);
+
+ $p.translate(x, dim);
+ $p.fill(0);
+ $p.rect(-dim / 2, -dim / 2, dim, dim);
+ }
+ $p.draw = draw;
+})
@@ -0,0 +1,29 @@
+// Original Translation sketch from processing.org
+float x, y;
+float dim = 80.0;
+
+void setup() {
+ size(640, 360);
+ noStroke();
+}
+
+void draw() {
+ background(102);
+
+ x = x + 0.8;
+
+ if (x > width + dim) {
+ x = -dim;
+ }
+
+ translate(x, height/2-dim/2);
+ fill(255);
+ rect(-dim/2, -dim/2, dim, dim);
+
+ // Transforms accumulate. Notice how this rect moves
+ // twice as fast as the other, but it has the same
+ // parameter for the x-axis value
+ translate(x, dim);
+ fill(0);
+ rect(-dim/2, -dim/2, dim, dim);
+}
@@ -0,0 +1,31 @@
+// Original Translation sketch from processing.org
+
+// No data types, and everything still works!
+var x, y;
+var dim = 80.0;
+
+void setup() {
+ size(640, 360);
+ noStroke();
+}
+
+void draw() {
+ background(102);
+
+ x = x + 0.8;
+
+ if (x > width + dim) {
+ x = -dim;
+ }
+
+ translate(x, height/2-dim/2);
+ fill(255);
+ rect(-dim/2, -dim/2, dim, dim);
+
+ // Transforms accumulate. Notice how this rect moves
+ // twice as fast as the other, but it has the same
+ // parameter for the x-axis value
+ translate(x, dim);
+ fill(0);
+ rect(-dim/2, -dim/2, dim, dim);
+}

0 comments on commit 95c5408

Please sign in to comment.