Permalink
Browse files

Merge pull request #5 from humphd/master

New examples and tools
  • Loading branch information...
David Humphrey
David Humphrey committed Oct 26, 2011
2 parents 98996df + 5038f9f commit 0f284f0412730c28fbffae742ed46ba5f6f10207
@@ -0,0 +1,37 @@
+<html>
+
+<h2>Evolution of Processing/JavaScript Hybrids</h2>
+
+<ol>
+
+<li><a href="translation.html">A simple case study: Translation</a>
+
+<li><a href="translation.pde">Pure Processing (.pde)</a>
+
+<li><a href="translation.js">Processing "compiled" to JavaScript (.js)</a>
+
+<li><a href="translation.pjs">Processing mixed with JavaScript (.pjs)</a>
+
+<li><a href="translation.html">Processing.js using external .pde files</a>
+
+<li><a href="translation-inline.html">Processing.js using inline Processing code</a>
+
+<li><a href="translation-js.html">Processing.js sketch rewritten in pure JavaScript, using Processing.js as API</a>
+
+<li><a href="translation-html.html">Controlling a sketch from user interaction with HTML/JavaScript</a>
+
+<li><a href="translation-jquery.html">Processing.js mixed with JavaScript libraries: jQuery</a>
+
+<li><a href="translation-fullscreen.html">Fine control over sketch startup and initialization using jQuery</a>
+
+<li><a href="translation-many-sketches.html">Dynamic sketch creation using JavaScript, multiple sketches</a>
+
+<li><a href="translation-data-window.html">Sharing data between JavaScript and Processing</a>
+
+<li><a href="translation-data-sketch.html">Accessing data, functions within the sketch</a>
+
+<li><a href="translation-data-html.html">Access and alter data in a sketch from the DOM/JavaScript</a>
+</ol>
+
+</html>
+
@@ -0,0 +1,92 @@
+<!-- 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>
+
+ <script type="text/javascript">
+ // Run this function every 50ms to print values of variables in
+ // the sketch without putting them in the global scope.
+ setInterval(function() {
+ // Grab running sketch instance and call its getCurrentX function
+ var p = Processing.getInstanceById('sketch');
+ var x = p.getCurrentX();
+
+ var output = document.getElementById('output');
+ output.innerHTML = "x=" + x;
+ }, 50);
+
+ // Called when user clicks "Update X" button
+ function updateX() {
+ // Get new x value from HTML form and convert to integer
+ var x = (document.getElementById('xvalue').value)|0;
+
+ // Grab running sketch instance and set the current x value
+ var p = Processing.getInstanceById('sketch');
+ var x = p.setCurrentX(x);
+ }
+ </script>
+
+ <!-- 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;
+
+ void setup() {
+ size(640, 360);
+ noStroke();
+ }
+
+ void draw() {
+ background(102);
+
+ // x, y, and dim come from the global scope
+ 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);
+ }
+
+ // Add function we can call from JS
+ int getCurrentX() {
+ return x;
+ }
+
+ // Set the value of X (called from JS only)
+ void setCurrentX(int newX) {
+ x = newX;
+ }
+ </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>
+
+ <!-- Display info about globals here (see interval above) -->
+ <div id="output"></div>
+
+ <p>Change the value of x <input type="textfield" id="xvalue"/> <button onclick="updateX();">Update X</button></p>
+</body>
+</html>
@@ -0,0 +1,75 @@
+<!-- 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>
+
+ <script type="text/javascript">
+ // Run this function every 50ms to print values of variables in
+ // the sketch without putting them in the global scope.
+ setInterval(function() {
+ // Grab running sketch instance and call its getCurrentX function
+ var p = Processing.getInstanceById('sketch');
+ var x = p.getCurrentX();
+
+ var output = document.getElementById('output');
+ output.innerHTML = "x=" + x;
+ }, 50);
+ </script>
+
+ <!-- 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
+
+ int x, y;
+ float dim = 80;
+
+ void setup() {
+ size(640, 360);
+ noStroke();
+ }
+
+ void draw() {
+ background(102);
+
+ // x, y, and dim come from the global scope
+ 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);
+ }
+
+ // Add function we can call from JS
+ int getCurrentX() {
+ return x;
+ }
+ </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>
+
+ <!-- Display info about globals here (see interval above) -->
+ <div id="output"></div>
+</body>
+</html>
@@ -0,0 +1,67 @@
+<!-- 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>
+
+ <script type="text/javascript">
+ // Three global variables, shared across all scripts (including Processing)
+ var x = 0, y = 0;
+ var dim = 80;
+
+ // Run this function every 50ms to print global values, showing
+ // how they get changed in the Processing sketch below (see draw).
+ setInterval(function() {
+ var output = document.getElementById('output');
+ output.innerHTML = "x=" + x + "<br>y=" + y + "<br>dim=" + dim;
+ }, 50);
+ </script>
+
+ <!-- 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
+
+ void setup() {
+ size(640, 360);
+ noStroke();
+ }
+
+ void draw() {
+ background(102);
+
+ // x, y, and dim come from the global scope
+ 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>
+
+ <!-- Display info about globals here (see interval above) -->
+ <div id="output"></div>
+</body>
+</html>
@@ -0,0 +1,75 @@
+<!-- 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>
+
+ <!-- Include jQuery, using CDN link -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.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, this time using jQuery...
+ $(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() {
+ // Use jQuery to get the window's width and height
+ processing.size($(window).width(), $(window).height());
+ 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);
+
+ });
+ </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,37 @@
+<!-- Make sure you include the HTML5 doc type (esp. for IE9) -->
+<!doctype html>
+<head>
+ <!-- Include Processing.js -->
+ <script src="../../processing.js"></script>
+
+ <!-- Some JavaScript that can interact with the sketch once running -->
+ <script>
+ function stopClicked() {
+ // Get the running sketch instance using the id of the canvas
+ var processingInstance = Processing.getInstanceById('sketch');
+ processingInstance.noLoop();
+ }
+
+ function startClicked() {
+ // Get the running sketch instance using the instances array,
+ // which only has 1 element in it, the single sketch.
+ var processingInstance = Processing.instances[0];
+ processingInstance.loop();
+ }
+ </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>
+
+ <div>
+ <p>Some simple form interation from HTML that triggers things in the Processing sketch.</p>
+ <button onclick="stopClicked();">Stop Sketch</button>
+ <button onclick="startClicked();">Start Sketch</button>
+ </div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 0f284f0

Please sign in to comment.