How To Call Processing.js Function From Html?

I'm exploring HTML5 and Processing.js. When the user clicks on an image on my webpage, I'd like to call a function in the Processing.js code. Just calling the function in onclic

Solution 1:

This should work, enclose you image inside the anchor tag <a> image </a> Use href tag to call the function.

<a href="javascript:restart()"> image source </a>

Solution 2:

I would start by pulling the javascript for the onclick out of the img tag.

In a separate javascript file you can have:

document.getElementById('restartimage').onclick = function() { Processing.setup(); }

Obviously I put an id attribute on your img tag.

The setup function I noticed on this page: http://processingjs.org/

The basic idea is that by pulling the onclick into a javascript file it will be easier to code what it should do.

Solution 3:

you need to change the script-type to text/javascript or application/javascript first.

then place 'function' before 'restart()' function reducing 'void'.

i have used firefox 3.0.14 on ubuntu 9.04.

Solution 4:

You can call processing functions using the Processing js object's getInstanceById function.

For example here is a function:

$(window).resize(function(){
    var p=Processing.getInstanceById('processing_canvas_id');
    p.resize($("#main").width(),$("#main").height());
  });

Where resize is my processing function inside the processing file associated with processing_canvas_id.