Load and image, change it to a P.js animation after a click

truffel · July 2017

Hello... I just learned how to load an image to an HTML file using javascript. The original problem I wanted to solve was: How do I change the image that the website first loads in such a way that, after I click a button, I call a .pde animation that takes the place of the image in the canvas. I post my script next, hoping that I can modify it. What the script does is to load an image, and then, after the click, it changes into another image. What if, instead of loading another image, it could load the .pde file instead?

One first confusion I encounter, is that, when using processing.js, I need to use data-processing-sources, in the canvas. Maybe there is a way to create this attribute from JavaScript, when I change the image for the animation? I have also cheked http://processingjs.org/articles/jsQuickStart.html and tried the examples, but I am still a newbie, the code did not work for me and I couldn't troubleshoot it, so I tried in other ways.

Here is the code:

<!DOCTYPE HTML>
<html>
  <head>

  </head>
  <body>

    <canvas id="myCanvas" width="1190" height="1063"></canvas>

<input type="button" value="Cambiar imagen" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
      var img = new Image();

      img.onload = function() {
      ctx.drawImage(img, 69, 50);
          };
      img.src = '18pi.jpeg';

function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);


         var img = new Image();

         img.onload = function() {
         ctx.drawImage(img, 69, 50);
           };
          img.src = '45pi.jpeg';

    }

    </script>
  </body>
</html>

Howdy, Stranger!

Categories

Load and image, change it to a P.js animation after a click