Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (72 sloc) 2.97 KB
<!DOCTYPE html>
<html>
<head>
<title>Processing.js Example Page</title>
<meta charset="UTF-8">
<script type="text/javascript" src="processing.js"></script>
<!--
This is a source-file-less sketch, loaded from inline source code in
the html header. This only works if the script specifies a data-processing-target
-->
<script type="text/processing" data-processing-target="targetcanvas">
// Processing.js example sketch
int fontsize = 24;
void setup() {
size(200, 200);
stroke(0);
fill(0);
textFont(createFont("Arial",fontsize));
noLoop();
}
void draw() {
background(#F0F0E0);
String textstring = "header example";
float twidth = textWidth(textstring);
text(textstring, (width-twidth)/2, height/2);
}
</script>
</head>
<body>
<h3>Processing.js Example Page - Loading Sketches</h3>
<p>This is a sketch that is loaded from source. If you want to be able
to use this sketch after loading, for instance in your own JavaScript
code, it needs an id='...' so that you can request it using:</p>
<pre> Processing.getIntanceById('...')</pre>
<p>You can also load a sketch from multiple source files by putting
them all in a canvas data-processing-sources attribute string, separated
with spaces:</p>
<pre> &lt;canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...&gt;</pre>
<canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
<hr/>
<p>This is a source-less sketch, loaded from inline source code. Note
that in order for an on-page inline sketch to be loaded into a canvas,
the sketch must either immediately preceed the &lt;canvas&gt; it is to be
loaded in, or the script needs to indicate the id for the canvas.</p>
<p>This means you can either place your script inside the &lt;body&gt; element,
above its associated &lt;canvas&gt;, or in the &lt;head&gt; element, pointing to
its associated &lt;canvas&gt; element.</p>
<script type="text/processing">
// Processing.js example sketch
int fontsize = 24;
void setup() {
size(200, 200);
stroke(0);
fill(0);
textFont(createFont("Arial",fontsize));
noLoop();
}
void draw() {
background(#F0F0E0);
String textstring = "inline example";
float twidth = textWidth(textstring);
text(textstring, (width-twidth)/2, height/2);
}
</script>
<canvas style="border: 1px solid black;"></canvas>
<hr/>
<p>This sketch is loaded from a &lt;script&gt; in the html header block
which specifies this canvas as its target, referencing its id:</p>
<pre> &lt;script type="text/processing" data-processing-target="targetcanvas"&gt;...&lt;/script&gt;</pre>
<canvas id="targetcanvas" style="border: 1px solid black;"></canvas>
</body>
</html>
Something went wrong with that request. Please try again.