How to call Processing.js function from HTML?

Question

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 onclick, as illustrated in this simple example, isn't working:

<html>
  <head>
    <script language="javascript" src="processing.init.js"></script>
    <script language="javascript" src="processing.js"></script>
  </head>
  <body>
    <script type="application/processing">
    void restart()
    { /* does something */ }
    </script><canvas>
      You'll need a browser that supports HTML5 to see this content.
    </canvas><br/><br/>
    <img src="restart-image.png" onclick="restart()">
  </body>
</html>

Any thoughts on how I can call a method in the Processing.js script when an image is clicked? (Maybe I'm making a basic HTML mistake by using img onclick?)

I'd like to know how to import code that is linked on the page with <canvas data-processing-sources="code.pjs"></canvas>. — mcandre
– mcandre, Commented Mar 16, 2011 at 17:35

Manivasagan · Accepted Answer · 2010-08-17 10:27:27Z

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>

edited Aug 17, 2010 at 10:27

answered Aug 17, 2010 at 7:05

Manivasagan

275 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Black · Accepted Answer · 2009-09-12 06:14:51Z

0

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.

answered Sep 12, 2009 at 6:14

James Black

41.9k10 gold badges92 silver badges173 bronze badges

2 Comments

David Koelle Over a year ago

I tried this, but in my error console, I see, "document.getElementById('restartimage') is null". Did I correctly add the ID attribute to my img tag? <img src="restart-image.png" id="restartimage">

James Black Over a year ago

Just make certain that your javascript runs after this page is rendered, but, you have the id tag listed properly. Hopefull you also have an end tag (</img>).

Sadat · Accepted Answer · 2009-09-12 06:16:13Z

0

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.

answered Sep 12, 2009 at 6:16

Sadat

3,4812 gold badges33 silver badges45 bronze badges

2 Comments

Rich Bradshaw Over a year ago

Actually, in HTML5, the default is text/javascript, so the script tags don't need a type or a language.

Sadat Over a year ago

I have tested as below HTML file: <html> <head> <script language="javascript" src="processing.js"></script> </head> <body> <canvas> You'll need a browser that supports HTML5 to see this content. </canvas><br /><br /> <img src="restart.png" onclick="restart()"> </body> </html> JS file: function restart() { /* does something */ alert('hello'); }

Magneon · Accepted Answer · 2010-07-17 16:53:22Z

0

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.

answered Jul 17, 2010 at 16:53

Magneon

3101 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to call Processing.js function from HTML?

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related