Using the data-processing-sources attribute on the canvas, and having Processing.js load an external file is the preferred and recommended way to include scripts in a web page. However, it is also possible to write in-line Processing code.
A few changes are necessary to make the example above work with inline Processing code:
1 <script src="processing-1.3.6.min.js"></script>
2 <script type="text/processing" data-processing-target="processing-canvas">
3 void setup() {
4 size(200, 200);
5 background(100);
6 stroke(255);
7 ellipse(50, 50, 25, 25);
8 println('hello web!');
9 }
10 </script>
11 <canvas id="processing-canvas"> </canvas>
This code is more complex because it has to figure out which canvas goes with which script (i.e., you can have multiple Processing sketches living in the same page, and therefore, multiple canvases). Also note that the scripts include a type attribute, which distinguishes between JavaScript and Processing code (the browser will ignore Processing scripts). Finally, note the use of the id and target attributes to connect the Processing script with the associated canvas