Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

92 lines (72 sloc) 3.044 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>
Jump to Line
Something went wrong with that request. Please try again.