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);
How do you setup processingJS on html?
Asked Answered
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>
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.
© 2022 - 2024 — McMap. All rights reserved.