How do you setup processingJS on html?

问题

How do you run a processingJS script on an html page? Could someone send me a test .html and any auxiliary code files for me to get an idea?

Let's say I wanted to run this rectangle:

rect(50,50,50,50);

回答1:

Everything you want to know is on this page: JavaScript Quick Start | Processing.js

But basically, you need to do create an html file that loads the Processing.js library, then write Processing.js code and load the .pde file into a canvas tag on that page. It looks like this:

<!DOCTYPE html>
 <html>
 <head>
   <title>Hello Web - Processing.js Test</title>
   <script src="processing-1.3.6.min.js"></script>
 </head>
 <body>
  <h1>Processing.js Test</h1>
  <p>This is my first Processing.js web-based sketch:</p>
  <canvas data-processing-sources="hello-web.pde"></canvas>
</body>
</html>

The easiest way to do that is to use JavaScript mode from the Processing editor (you might have to use version 2.2.1), then click run. You can then view the files created by the editor (go to view > sketch folder) to get a better idea of what's going on under the hood.

回答2:

To add to Kevin's answer, if you want to use the Processing.js library with javascript rather than pde (java) code this may make it a little easier to dive in.

*Note that some javascript folks may cringe at the use of with(obj){code}, but I give this as an example to unclutter the code and make it less verbose. Use your own judgement depending on the circumstances.

Also make sure that the processing library is in the same folder as your file with the below code and the name of the file is correct in the below code.

Enjoy! :)

<html>
    <head>
    </head>
    <body>
        <canvas id="output-canvas"></canvas>
        <script src="processing.1.4.8.js"></script>

<script> ( function () {

new Processing ( document.getElementById ( "output-canvas"), sketch );

function sketch ( pjs ) {

    // some initilization if you prefer

    // set the canvas size
    pjs.size ( 800, 600 );

    // ( 0, 0, 0, 0 ) - if you want a transparent sketch over some backdrop
    pjs.background ( 255, 255, 255, 255 );

    // make the ugly pjs go away
    with ( pjs ) {

        // red stroke
        stroke ( 255, 0, 0 );

        // thick border
        strokeWeight ( 5 );

        // yellow fill
        fill ( 255, 240, 0 );

        // draw a rectangle
        rect ( 50, 50, 300, 200 );

    }
}

} ) (); </script>

    </body>
</html>

来源：https://stackoverflow.com/questions/39113592/how-do-you-setup-processingjs-on-html

标签

javascript

html

installation

processing.js