› › ›

Why does this code work, and this one doesn't?

truffeltruffel
edited July 2017 in JavaScript Mode

Hello... I found a way in which I could avoid including the data-processing-sources in the canvas tag. I am having trouble understanding why, when I click the button, the canvas that is wrapped in the function does not appear.

<!DOCTYPE HTML>
<html>
  <head>
     <script src="/js/processing.js"></script>
  </head>
  <body>


<input type="button" value="imagen" id="clear" onclick="canvas()">

<canvas id="mycanvas"></canvas>



<script type="text/processing" data-processing-target="mycanvas">




function canvas() {

void setup()
{
  size(200,200);
  background(0);
  fill(200);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello!",20,20);

}

}


</script>


  </body>
</html>

On the other hand, this code works well:

<!DOCTYPE HTML>
    <html>
      <head>
         <script src="/js/processing.js"></script>
      </head>
      <body>



<canvas id="mycanvas"></canvas>



<script type="text/processing" data-processing-target="mycanvas">






void setup()
{
  size(300,300);
  background(0);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello!",20,20);
      }




</script>


  </body>
</html>

Thanks in advance

Tagged:

Best Answer

Answers

  • kfrajerkfrajer
    Answer ✓

    In p5.js this would fall under the instance mode topic: https://forum.processing.org/two/discussion/comment/75133/#Comment_75133

    However, I don't think this applies to the Processing.js case. I believe during the transpilation process from java to js, I bet P.js engine is expecting to find setup and draw. But if it encounters js code, would it leave it alone? Even in the case that the engine is able to handle js code in the original java code, then you will be working in instance mode... or at least you should.

    If you want your processing code to execute based on a button event for example, you could attach it to a <div> element and then show and hide it? Or are you looking to execute multiple instances of the same sketch?

    Kf

  • truffeltruffel
    edited July 2017

    Yes, my idea was to execute the processing event, based on a button, and changing from an image/empy div to an animation. Or the second option: execute two different sketches, based on a button aswell. I don't know what is easier!

    Using processing.js to trigger an animation via a button has been very difficult to understand, but I am still trying. Maybe I will get it working... but I will have a look at p5.js.

Sign In or Register to comment.