Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

New example setting/getting values from a sketch using js

  • Loading branch information...
commit 5038f9fde4bcdca49d27dbacb8fc86599776603b 1 parent 81c6c34
David Humphrey authored
View
1  examples/processing-and-js/index.html
@@ -30,6 +30,7 @@
<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>
View
92 examples/processing-and-js/translation-data-html.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>
Please sign in to comment.
Something went wrong with that request. Please try again.