Pulling variables/data out of a processing sketch in a canvas to javascript so I can trigger page functions with those variables

Question

I am making an simple app where the user logs in and is then sent to a screen where they must tap a button as fast as they can for 30 seconds. I am using Processing to create the sketch with the button in it on a regular HTML page using the canvas element. I have tried linking to the processing file and I have tried just putting the code right into a . Both produce valid results in the terms of placing the sketch onto the page.

I have spent hours searching and attempting for solutions with processing.js and javascript, but none of my searches explain how to use data/variables from INSIDE the sketch to trigger/store them OUTSIDE of the sketch in javascript on the same page.

The goal is when the timer inside the sketch hits "0" then the user will be sent to the scoreboard page and asked if the want to submit their score and if they want to play again.

Since I do not know how to access the timer or the score variables outside of the sketch, I cannot send the user to the next page automatically or store their scores.

I have a working web page with the sketch at http://rwmillerdesigns.com/IM215/final/game.html and I have also been able to put the app on the iPhone with the use of Phonegap.

Here is the way I have put the sketch into the page:

<canvas id="processing" data-processing-sources="processing.pde" width="300" height="350" tabindex="0" style="image-rendering: -webkit-optimize-contrast !important;">
                        <p>Your browser does not support the canvas tag.</p>
                        <!-- Note: you can put any alternative content here. -->
                    </canvas>

If you have any questions on anything else that I am doing, please feel free to ask!

Answer 1

One thing you could have done was actually go to processingjs.org and found out we have an IRC channel so you could have asked us immediately, instead of spending hours =) Sketches don't expose their variables, only their functions, so all you have to do is either a) write getters for the variables that JavaScript should pull from your sketch, or b) bind window to your sketch as a variable called javascript, and then simply make the sketch call JavaScript functions with the right variables as function arguments. To see how to do the latter (in a way that keeps your sketch working in JS as well as Java mode), see http://processingjs.org/articles/PomaxGuide.html