Skip to content Skip to sidebar Skip to footer
Home / Html / Installation / Javascript / Processing.js

How Do You Setup Processingjs On Html?

Post a Comment
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 rectangl

Solution 1:

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><canvasid="output-canvas"></canvas><scriptsrc="processing.1.4.8.js"></script><script> ( function () {

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

functionsketch ( 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 awaywith ( 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>

Solution 2:

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><scriptsrc="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><canvasdata-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.

Post a Comment for "How Do You Setup Processingjs On Html?"