forked from processing-js/processing-js
-
Notifications
You must be signed in to change notification settings - Fork 10
/
example.html
91 lines (72 loc) · 2.97 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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> <canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...></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 <canvas> 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 <body> element,
above its associated <canvas>, or in the <head> element, pointing to
its associated <canvas> 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 <script> in the html header block
which specifies this canvas as its target, referencing its id:</p>
<pre> <script type="text/processing" data-processing-target="targetcanvas">...</script></pre>
<canvas id="targetcanvas" style="border: 1px solid black;"></canvas>
</body>
</html>