How to run and display processing code (currently in part of the document.body) in an html canvas?

Question

NOTE: I know I can import .pde files but I need to run code on screen so I will not be using this.

My three following attempts failed. I do not know which one was closer to achieving and I do not prefer one as long as it produces desired result. Appreciate the help by helping me get any of the attempts working/suggesting a new one.

1ST ATTEMPT) - use getText function written below but then some text that is not code can be found in the resulting jscode variable and thus the processing instance does not work.

    function getText(n) { 
      var s = []; 
      function getStrings(n, s) { 
        var m; 
        if (n.nodeType == 3) { // TEXT_NODE 
          s.push(n.data); 
        } 
        else if (n.nodeType == 1) { // ELEMENT_NODE 
          for (m = n.firstChild; null != m; m = m.nextSibling) { 
            getStrings(m, s); 
          } 
        } 
      } 
      getStrings(n, s); 
      var result = s.join(" "); 
      return result; 
    } 
            var processingCode = getText(document.body)
    processingCode.replace(/<[^>]+>¦&[^;]+;/g,'').replace(/ {2,}/g,' ');
    var jsCode = Processing.compile(processingCode).sourceCode;
    alert(jsCode); 
    var canvas =  document.getElementById("mysketch");
    var processingInstance = new Processing(canvas, jsCode);

          ....

<span class="sketch">
    <canvas id="mysketch"></canvas>

</span>

2ND ATTEMPT) Same as above but added a tag with id="all_processing_code" but couldn't figure out how to get the text within anyway. This did not work:

    var processingCode = getText(document.getElementbyId(all_processing_code));

3RD ATTEMPT) Removed getText and tried to use JQuery text() to isolate the code. Was having trouble mixing JS and Jquery though. Tried different stuff and none worked. What would be appropriate way to mix it in? What script type should I use? This was confusing.

    <script type="text/jquery">
    var processingCode = $('#all_processing_code').text();
    //processingCode.replace(/<[^>]+>¦&[^;]+;/g,'').replace(/ {2,}/g,' ');
var jsCode = $.Processing.compile(processingCode).sourceCode;
alert(jsCode); 
var canvas =  $(#'mysketch');
var processingInstance = new $.Processing($('canvas'), $('jsCode'));

}
</script>

Did you try `document.getElementbyId(all_processing_code).innerHTML` (that is assuming that your tag is not a textarea)? For textarea you can use `document.getElementbyId(all_processing_code).value` — Germann Arlington, Nov 14 '12 at 13:27
Are you looking for [processingjs](http://processingjs.org)? — v.k., Nov 14 '12 at 13:35

score 0 · Answer 1 · answered Jan 20 '13 at 01:48

First, check if your processing code is wrapped by an html element (like a div or something else) with an id. If it isn't, please do it!

For exemple:

<div id="mycode">
    void setup() {
        background(0);
    }
</div>

After this, check if you have the getProcessingSketchId() function declared in your code. Processing IDE in JavaScript mode already exports html files with that function. If there isn't, please declare it inside your <head>:

<script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'yourcanvasid'; }
</script>

You can include JQuery from google api including this line in your html before you use JQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'yourcanvasid'; }
</script>

Assuming that you want to run your processing code when the page just has loaded, just append this code after the getProcessingSketchId() declaration.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'yourcanvasid'; }
    $(document).ready(function() {
        new Processing(getProcessingSketchId(), $('#mycode').html());
    });
</script>

You can create this code inside any other <script type="text/javascript">.

At the end, you will have something like this:

<html>
    <head>
    <!-- Your title, meta tags, stylesheet and all other stuff here -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        // convenience function to get the id attribute of generated sketch html element
        function getProcessingSketchId () { return 'yourcanvasid'; }
        $(document).ready(function() {
            new Processing(getProcessingSketchId(), $('#mycode').html());
        });
    </script>
    </head>
        <body>
        <div id="mycode">
            void setup() {
                background(0);
            }
        </div>
   </body>
</html>

This was a really simple solution for the problem. Here you can find a more elegant and complete code https://github.com/sbrocher/ace-processing/blob/master/ace-processing.html — Murilo, Jan 20 '13 at 02:42

How to run and display processing code (currently in part of the document.body) in an html canvas?

1 Answers1