This repository was archived by the owner on Jun 6, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 30
/
Copy pathindex.html
388 lines (326 loc) · 16.6 KB
/
index.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
---
layout: default
---
<h2>Learning</h2>
<h3>Basic Syntax</h3>
<div class="example200px">
<canvas width="200px" height="200px" data-processing-sources="/sketches/basic-example.pde"></canvas>
<div class="example-links">
Basic Example:
<a href="/sketches/basic-example.pde">Source</a>
</div>
</div>
<p>A brief look at the structure of a Processing sketch reveals how easy it is to program interactive visualizations.</p>
<p>As with any language, you begin by defining your global variables. Then you create a <b class="pre function">setup()</b> function, where you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stroke-weight or background-color.</p>
<p>The next step is to create your <b class="pre function">draw()</b> function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the <b class="pre function">exit()</b> command.</p>
<p>To the right is a basic example of Processing.js in action. If you take a moment to read the source code below, you will see that a few lines of Processing code can go a very long way. You may also notice that Processing syntax is almost identical to Java.</p>
{% highlight java %}
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = height / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 100 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle's next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
{% endhighlight %}
<p>Adding interactivity to your visualization is incredibly simple. There are a host of
built-in functions such as: <b class="pre function">mousePressed()</b>, which controls the
behavior of your script on click events; or <b class="pre function">mouseMoved()</b> which
defines what should happen as your mouse moves across the Canvas.</p>
<p>Processing.js also tracks a range of pre-defined variables like <b>key</b>, which
stores the value of the last key pressed; or <b class="pre reserved">mouseX</b> and
<b class="pre reserved">mouseY</b>, which store the last recorded position of the mouse
pointer.</p>
<h3>Using Processing</h3>
<p>There are two ways of implementing processing. The first way is the recommended one.
Let me illustrate both of these:</p>
<p><b>First Method</b></p>
<p>Needed files:</p>
<ol>
<li>processing.js</li>
<li>anything.html </li>
<li>anything.pde</li>
</ol>
<p>The <b>anything.html</b> file will look like:</p>
<div class="code">
<pre name="code" class="processing">
<script src="processing.js"></script>
<canvas data-processing-sources="anything.pde"></canvas>
</pre></div>
<p>The <b>anything.pde</b> file will look like:</p>
<div class="code">
<pre name="code" class="processing">
void setup()
{
size(200,200);
background(125);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello Web!",20,20);
println("Hello ErrorLog!");
}
</pre></div>
<p><b>Second Method</b></p>
<p>Needed files:</p>
<ol>
<li>processing.js</li>
<li>anything.html</li>
</ol>
<p>In this method the <b>anything.html</b> file will look like:</p>
<div class="code">
<pre name="code" class="processing">
<script src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">
void setup()
{
size(200,200);
background(125);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello Web!",20,20);
println("Hello ErrorLog!");
}
</script>
<canvas id="mycanvas"></canvas>
</pre></div>
<p>Notice no data-processing-sources attribute on the canvas?</p>
<h3>Writing Processing code with JavaScript</h3>
<p>If you love JavaScript and want to write processing examples with it you can. Here are
a couple of examples that showcase how to do this.<p>
<div class="code">
<pre name="code" class="processing">
<html>
<head>
<script src="processing.js"></script>
</head>
<body><h1>Processing.js</h1>
<h2>Simple processing.js via JavaScript</h2>
<p>Clock</p>
<p><canvas id="canvas1" width="200" height="200"></canvas></p>
<script id="script1" type="text/javascript">
// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
// Override draw function, by default it will be called 60 times per second
processing.draw = function() {
// determine center and max clock arm length
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(position, lengthScale, weight) {
processing.strokeWeight(weight);
processing.line(centerX, centerY,
centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
}
// erase background
processing.background(224);
var now = new Date();
// Moving hours arm by small increments
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
// Moving minutes arm by small increments
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
// Moving hour arm by second increments
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
};
}
var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it
</script>
</body>
</html>
</pre></div>
<p>Here is another example that uses 3D</p>
<div class="code">
<pre name="code" class="processing">
<html>
<head>
<script src="processing.js"></script>
</head>
<body><h1>Processing.js</a></h1>
<h2>Advanced processing.js via JavaScript</h2>
<p>Processing.js Cube</p>
<em>Note: runs via a web server or requres local files access in the web browser settings.</em>
Converted to the JavaScript language from the Processing code<br>
Original souce code:<a href="http://processing.org/learning/3d/texturecube.html">TexturedCube</a>
by Dave Bollinger.
<canvas id="canvas1" width="200" height="200"></canvas>
<script id="script1" type="text/javascript">
// Attaching js code to the canvas by using a sketch object
var sketch = new Processing.Sketch();
// define 3D context
sketch.use3DContext = true;
// preload the images
sketch.imageCache.add("pjs.png");
// attach function (also, can be specified as the single parameter
// in the Processing.Sketch object constructor)
sketch.attachFunction = function(processing) {
var tex;
var rotx = Math.PI/4;
var roty = Math.PI/4;
processing.setup = function() {
processing.size(640, 360, processing.P3D);
tex = processing.loadImage("pjs.png");
processing.textureMode(processing.NORMALIZED);
processing.fill(255);
processing.stroke(processing.color(44,48,32));
};
processing.draw = function() {
processing.background(0);
processing.noStroke();
processing.translate(processing.width/2.0,
processing.height/2.0, -100);
processing.rotateX(rotx);
processing.rotateY(roty);
processing.scale(90);
texturedCube(tex);
}
function texturedCube(tex) {
processing.beginShape(processing.QUADS);
processing.texture(tex);
// Given one texture and six faces, we can easily set up the uv coordinates
// such that four of the faces tile "perfectly" along either u or v, but the other
// two faces cannot be so aligned. This code tiles "along" u, "around" the X/Z faces
// and fudges the Y faces - the Y faces are arbitrarily aligned such that a
// rotation along the X axis will put the "top" of either texture at the "top"
// of the screen, but is not otherwised aligned with the X/Z faces. (This
// just affects what type of symmetry is required if you need seamless
// tiling all the way around the cube)
// +Z "front" face
processing.vertex(-1, -1, 1, 0, 0);
processing.vertex( 1, -1, 1, 1, 0);
processing.vertex( 1, 1, 1, 1, 1);
processing.vertex(-1, 1, 1, 0, 1);
// -Z "back" face
processing.vertex( 1, -1, -1, 0, 0);
processing.vertex(-1, -1, -1, 1, 0);
processing.vertex(-1, 1, -1, 1, 1);
processing.vertex( 1, 1, -1, 0, 1);
// +Y "bottom" face
processing.vertex(-1, 1, 1, 0, 0);
processing.vertex( 1, 1, 1, 1, 0);
processing.vertex( 1, 1, -1, 1, 1);
processing.vertex(-1, 1, -1, 0, 1);
// -Y "top" face
processing.vertex(-1, -1, -1, 0, 0);
processing.vertex( 1, -1, -1, 1, 0);
processing.vertex( 1, -1, 1, 1, 1);
processing.vertex(-1, -1, 1, 0, 1);
// +X "right" face
processing.vertex( 1, -1, 1, 0, 0);
processing.vertex( 1, -1, -1, 1, 0);
processing.vertex( 1, 1, -1, 1, 1);
processing.vertex( 1, 1, 1, 0, 1);
// -X "left" face
processing.vertex(-1, -1, -1, 0, 0);
processing.vertex(-1, -1, 1, 1, 0);
processing.vertex(-1, 1, 1, 1, 1);
processing.vertex(-1, 1, -1, 0, 1);
processing.endShape();
}
// mouse event
processing.mouseDragged = function() {
var rate = 0.01;
rotx += (processing.pmouseY-processing.mouseY) * rate;
roty += (processing.mouseX-processing.pmouseX) * rate;
};
};
var canvas = document.getElementById("canvas1");
// attaching the sketch to the canvas
var p = new Processing(canvas, sketch);
</script>
</pre></div>
<p>Read Quick Start Guides for <a href="/articles/p5QuickStart">Processing Developers</a>
or <a href="/articles/jsQuickStart">JavaScript Developers</a>, to
<a href="/learning/">learn</a> about the Processing language.</p>
<div class="demo-screens">
<div class="section wild"><h4><a href="/learning/custom/">Custom Built / "Found In the Wild" Demos</a></h4>
<a href="/learning/custom/molten/"><img src="/learning/screens/molten2.png" /><span>A live, molten, bar and pie chart.</span></a>
<a href="/learning/custom/snake/"><img src="/learning/screens/Picture-15.png" style="border:0px;"/><span>A snake that chases your mouse cursor.</span></a>
<div class="clear"></div>
</div>
<div class="section"><h4><a href="/learning/basic/">Basic Demos</a> (91 Total)</h4>
<p>All of the following demos were written by <a href="http://reas.com">Casey Reas</span></a> and <a href="http://benfry.com">Ben Fry</span></a> unless otherwise stated.</p>
<a href="/learning/basic/creategraphics/"><img src="/learning/screens/Picture-16.png" /><span>Using buffers to draw multiple, simultaneous, canvases.</span><span class="info">(Firefox 3, Opera 9.5)</span></a>
<a href="/learning/basic/recursion/"><img src="/learning/screens/Picture-17.png" /><span>Simple, but elegant, shape drawing.</span></a>
<a href="/learning/basic/distance2d/"><img src="/learning/screens/Picture-18.png" /><span>Drawing lots of simultaneous circles to create an impressive effect.</span></a>
<a href="/learning/basic/arctangent/"><img src="/learning/screens/Picture-19.png" /><span>Eyes following your mouse cursor!</span></a>
<a href="/learning/basic/random/"><img src="/learning/screens/Picture-20.png" /><span>Simple implementation, beautiful result.</span></a>
<a href="/learning/basic/noisewave/"><img src="/learning/screens/Picture-21.png" /><span>Generating smooth waves.</span></a>
<a href="/learning/basic/pointillism/"><img src="/learning/screens/Picture-22.png" /><span>Re-sampling the points of an image.</span></a>
<a href="/learning/basic/createimage/"><img src="/learning/screens/Picture-23.png" /><span>Dynamically drawing multiple, dynamically-generated, transparent, images.</span><span class="info">(Firefox, Opera 9.5)</span></a>
<a href="/learning/basic/mouse2d/"><img src="/learning/screens/Picture-24.png" /><span>Scaling and moving blocks based on mouse position.</span></a>
<a href="/learning/basic/bezierellipse/"><img src="/learning/screens/Picture-25.png" /><span>Random Ellipses drawn using bezier curves.</span></a>
<a href="/learning/basic/storinginput/"><img src="/learning/screens/Picture-26.png" /><span>Remembering the movement of a mouse.</span></a>
<a href="/learning/basic/mousefunctions/"><img src="/learning/screens/Picture-27.png" /><span>Drag, Drop, and Hover with mouse.</span></a>
<a href="/learning/basic/keyboardfunctions/"><img src="/learning/screens/Picture-28.png" /><span>Translating keyboard presses into colors.</span></a>
<a href="/learning/basic/clock/"><img src="/learning/screens/Picture-29.png" /><span>A simple clock.</span></a>
<div class="clear"></div>
</div>
<div class="section"><h4><a href="/learning/topic/">Topical Demos</a> (51 Total)</h4>
<p>All of the following demos were written by <a href="http://reas.com">Casey Reas</span></a> and <a href="http://benfry.com">Ben Fry</span></a> unless otherwise stated.</p>
<a href="/learning/topic/handles/"><img src="/learning/screens/Picture-30.png" /><span>Multiple draggable handles.</span></a>
<a href="/learning/topic/wolfram/"><img src="/learning/screens/Picture-31.png" /><span>Wolfram's Cellular Automata</span></a>
<a href="/learning/topic/conway/"><img src="/learning/screens/Picture-32.png" /><span>Conway's Game of Life</span></a>
<a href="/learning/topic/animator/"><img src="/learning/screens/Picture-33.png" /><span>Animator (builds an animation out of drawing).</span></a>
<a href="/learning/topic/pattern/"><img src="/learning/screens/Picture-34.png" /><span>Drawing a pattern with shapes.</span></a>
<a href="/learning/topic/pixelarray/"><img src="/learning/screens/Picture-35.png" /><span>Dynamically pull colors from an image.</span></a>
<a href="/learning/topic/brightness/"><img src="/learning/screens/Picture-36.png" /><span>Adjusting brightness on an image.</span><span class="info">(Firefox, Opera 9.5)</span></a>
<a href="/learning/topic/linearimage/"><img src="/learning/screens/Picture-37.png" /><span>Scanning the pixels of an image.</span><span class="info">(Firefox, Opera 9.5)</span></a>
<a href="/learning/topic/scrollbar/"><img src="/learning/screens/Picture-38.png" /><span>Drag image portions using a scrollbar.</span></a>
<a href="/learning/topic/histogram/"><img src="/learning/screens/Picture-39.png" /><span>Dynamic histogram drawn over an image.</span></a>
<a href="/learning/topic/bouncybubbles/"><img src="/learning/screens/Picture-40.png" /><span>Bouncing, colliding, bubbles.</span></a>
<a href="/learning/topic/collision/"><img src="/learning/screens/Picture-41.png" /><span>A sort-of pong clone.</span></a>
<a href="/learning/topic/reflection1/"><img src="/learning/screens/Picture-42.png" /><span>Ball bouncing on a dynamic surface.</span></a>
<a href="/learning/topic/reflection2/"><img src="/learning/screens/Picture-43.png" /><span>Ball bouncing on a rocky surface.</span></a>
<a href="/learning/topic/spring/"><img src="/learning/screens/Picture-44.png" /><span>Flexible spring.</span></a>
<a href="/learning/topic/springs/"><img src="/learning/screens/Picture-45.png" /><span>Springy circles</span></a>
<a href="/learning/topic/reach3/"><img src="/learning/screens/Picture-46.png" /><span>Bouncing physics and joints.</span></a>
<a href="/learning/topic/simpleparticlesystem/"><img src="/learning/screens/Picture-47.png" /><span>Simple particle system.</span></a>
<a href="/learning/topic/flocking/"><img src="/learning/screens/Picture-48.png" /><span>Birds flocking together.</span></a>
<a href="/learning/topic/koch/"><img src="/learning/screens/Picture-49.png" /><span>Koch Fractal</span></a>
<a href="/learning/topic/mandelbrot/"><img src="/learning/screens/Picture-50.png" /><span>Mandelbrot Fractal</span><span class="info">(Firefox, Opera 9.5)</span></a>
<a href="/learning/topic/tree/"><img src="/learning/screens/Picture-51.png" /><span>Dynamic Tree Fractal</span></a>
<a href="/learning/topic/softbody/"><img src="/learning/screens/Picture-52.png" /><span>Soft Body Dynamics</span></a>
<div class="clear"></div>
</div>
</div>