aboutsummaryrefslogtreecommitdiff
path: root/externals/gridflow/doc/tutorials
diff options
context:
space:
mode:
Diffstat (limited to 'externals/gridflow/doc/tutorials')
-rw-r--r--externals/gridflow/doc/tutorials/gf_sampling_quantization.pd57
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_grid_1.pd25
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_grid_2.pd64
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_grid_3.pd30
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_1.pd65
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_2.pd63
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_3.pd84
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_4.pd49
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_5.pd52
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_6.pd66
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_7.pd36
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_8.pd61
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_image_9.pd65
-rw-r--r--externals/gridflow/doc/tutorials/gf_tutorial_intro.pd86
-rw-r--r--externals/gridflow/doc/tutorials/grid-intro.pd10
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-1.pd71
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-2.pd73
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-3.pd70
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-4.pd87
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-5.pd108
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-6.pd92
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-7.pd106
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-8.pd89
-rw-r--r--externals/gridflow/doc/tutorials/pure-data-9.pd43
24 files changed, 1552 insertions, 0 deletions
diff --git a/externals/gridflow/doc/tutorials/gf_sampling_quantization.pd b/externals/gridflow/doc/tutorials/gf_sampling_quantization.pd
new file mode 100644
index 00000000..4f60217d
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_sampling_quantization.pd
@@ -0,0 +1,57 @@
+#N canvas 740 0 704 805 10;
+#X obj 2 5 cnv 15 650 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 2 -30 cnv 15 700 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 0 741 cnv 15 700 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 14 746 GridFlow 0.9.1;
+#X text 7 -23 Principles of new media;
+#X text 218 152 <-- reduces the size of the image;
+#X text 5 3 1.1 sampling;
+#X obj 4 314 cnv 15 650 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 7 313 1.2 quantization;
+#X text 330 85 <-- change the resampling factor (1 to 8);
+#X obj 55 80 #in;
+#X obj 55 32 tgl 15 0 empty empty empty 17 7 0 10 -4034 -1 -1 1 1;
+#X obj 75 259 #out window \, title sampling;
+#X obj 55 204 #scale_by;
+#X obj 202 86 hradio 15 1 0 8 empty empty empty 0 -8 0 10 -257985 -1
+-1 0;
+#X obj 202 108 + 1;
+#X obj 202 130 t a a;
+#X text 218 152 <-- reduces the size of the image;
+#X msg 123 55 open babbage.jpg;
+#X obj 55 419 #out window \, title quantization;
+#X text 230 53 <-- open image first;
+#X floatatom 124 365 5 0 0 0 - - -;
+#X obj 24 449 #downscale_by 32 smoothly;
+#X obj 25 518 display;
+#X obj 34 470 #out window \, title really_small_window;
+#X text 133 385 <-- reduces the number of possible pixel values;
+#X text 121 201 <-- increases the image size by the same factor \,
+letting us see the loss of information from the original image;
+#X obj 55 152 #downscale_by \, smoothly;
+#X obj 127 343 hsl 128 15 2 16 0 0 empty empty empty -2 -8 0 10 -257985
+-1 -1 3300 1;
+#X obj 55 54 metro 100;
+#X obj 55 385 #posterize 2;
+#X text 262 342 <-- number of tones per channel;
+#X connect 10 0 27 0;
+#X connect 11 0 29 0;
+#X connect 13 0 12 0;
+#X connect 13 0 30 0;
+#X connect 14 0 15 0;
+#X connect 15 0 16 0;
+#X connect 16 0 27 1;
+#X connect 16 1 13 1;
+#X connect 18 0 10 0;
+#X connect 21 0 30 1;
+#X connect 22 0 23 0;
+#X connect 22 0 24 0;
+#X connect 27 0 13 0;
+#X connect 28 0 21 0;
+#X connect 29 0 10 0;
+#X connect 30 0 19 0;
+#X connect 30 0 22 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_grid_1.pd b/externals/gridflow/doc/tutorials/gf_tutorial_grid_1.pd
new file mode 100644
index 00000000..e86ff88f
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_grid_1.pd
@@ -0,0 +1,25 @@
+#N canvas 363 183 701 242 10;
+#X obj 2 5 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 2 -30 cnv 15 700 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 5 5 1.1 What is a grid?;
+#X text 7 -23 1 Introduction to Grids;
+#X obj 0 178 cnv 15 700 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 523 56 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1
+-1;
+#X obj 537 119 #out window;
+#X obj 537 88 #in david.jpg;
+#X text 14 183 GridFlow 0.9.0;
+#X text 5 28 A grid is composed of rows and columns that contain numeric
+data. GridFlow usually interprets images as three-dimensional grids
+with rows (height) and columns (width). Each channel is a single colour
+\, usually red \, green and blue (RGB). The channels make up the colour
+information of an image. Videos are also interpreted as grids since
+each frame is a still image.;
+#X text 5 125 GridFlow objects that accept or produce grids are identified
+by the number sign "#" (a mini grid). From now on \, the term "grid"
+is used to identify an image or video.;
+#X connect 5 0 7 0;
+#X connect 7 0 6 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_grid_2.pd b/externals/gridflow/doc/tutorials/gf_tutorial_grid_2.pd
new file mode 100644
index 00000000..59aecb1a
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_grid_2.pd
@@ -0,0 +1,64 @@
+#N canvas 376 138 1022 422 10;
+#X obj 1 14 cnv 15 460 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 4 14 1.2 How to create a grid.;
+#X obj 1 14 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 5 14 1.2 Creating a grid using the [#import] object.;
+#X text 5 40 GridFlow can create a grid from a list of numbers. The
+[#import] object permits you to set the desired amount of rows and
+columns. A message box must be connected to tell the grid which numbers
+to display.;
+#X text 6 109 Steps to create a grid:;
+#X text 7 134 1 - Create a list of numbers using a message box (the
+numbers must be seperated by a space). The list can have as many numbers
+as you want but only the amount defined by [#import] will be displayed.
+As you click on the message box the numbers will appear in the grid.
+Note how the numbers are positioned in the grid from left to right
+and from the top to the bottom.;
+#X text 7 229 2 - Create the [#import] object and indicate the parameters
+you want as grid dimensions. By indicating 3 3 in brackets following
+[#import] \, you are creating a grid that has 3 rows and 3 columns.
+A 3 by 3 grid will displays 9 numbers.;
+#X text 8 291 3 - Connect the objects to a [display] object or a [print]
+object to see the resulting grid. You can alter your grid without actually
+seeing the image.;
+#X obj 1 -30 cnv 15 1020 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 1 -30 cnv 15 780 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 6 -23 1 Introduction to Grids;
+#X obj 1 356 cnv 15 1020 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 479 285 display;
+#X msg 547 154 reset;
+#X obj 476 15 cnv 15 545 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 476 15 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 673 50 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 478 223 cnv 15 92 15 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 478 222 #import (3 3);
+#X msg 478 51 1 2 3 4 5 6 7 8 9;
+#X msg 535 99 1 2 3 4;
+#X text 483 15 1.2 Patch example.;
+#X text 610 155 <-- resets the grid to only display the numbers from
+the list;
+#X obj 652 217 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 610 97 <-- click here three times to see how [#import] only
+outputs a grid once it recieves the number of values associated with
+its dimensions;
+#X text 590 217 <-- step 2: click here to create a grid that has 3
+rows and 3 columns (try changing these numbers to alter the dimensions
+of the grid).;
+#X text 592 287 <-- the display object outputs results.;
+#X text 611 50 <-- step 1: click here to view the numbers from the
+list in a grid.;
+#X text 9 363 GridFlow 0.9.0;
+#X connect 14 0 19 0;
+#X connect 19 0 13 0;
+#X connect 20 0 19 0;
+#X connect 21 0 19 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_grid_3.pd b/externals/gridflow/doc/tutorials/gf_tutorial_grid_3.pd
new file mode 100644
index 00000000..4e5e5778
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_grid_3.pd
@@ -0,0 +1,30 @@
+#N canvas 106 132 652 402 10;
+#X obj 7 11 cnv 15 640 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 10 11 1.2 How to create a grid.;
+#X obj 7 11 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 11 11 1.3 Creating a grid using the [# + 0] object.;
+#X obj 7 -29 cnv 15 640 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 12 -22 1 Introduction to Grids;
+#X obj 279 117 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 216 255 <-- the display object outputs results.;
+#X text 217 116 <-- step 1: click on either message box to view the
+numbers from the list in a grid.;
+#X text 9 36 The [# + 0] object works like [#import] but allows you
+to put your grid parameters and values into one message box instead
+of having to insert them into the object box.;
+#X obj 5 337 cnv 15 640 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X msg 16 113 3 3 # 6 1 3 6 3 324 6 3 4;
+#X msg 37 159 3 3 # 1 0 0 0;
+#X obj 17 254 display;
+#X obj 16 204 cnv 15 37 15 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 16 203 # + 0;
+#X text 14 345 GridFlow 0.8.4;
+#X connect 11 0 15 0;
+#X connect 12 0 15 0;
+#X connect 15 0 13 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_1.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_1.pd
new file mode 100644
index 00000000..1c0fa483
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_1.pd
@@ -0,0 +1,65 @@
+#N canvas 523 65 902 461 10;
+#X obj 4 323 cnv 15 900 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 5 -67 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 5 -106 cnv 15 900 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 5 -106 cnv 15 780 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 12 -99 2 Introduction to Images;
+#X obj 450 -67 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 453 -67 1.2 How to create a grid.;
+#X obj 450 -67 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 112 167 bng 15 250 50 0 empty empty empty 0 -6 0 8 -262144 -1
+-1;
+#X obj 621 48 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 621 100 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 557 99 <-- step #2 : click here to update the image;
+#X text 556 47 <-- step #1 : click here to load the image;
+#X text 8 169 step 3: Add a;
+#X text 7 136 step 2: Create [#in] object;
+#X text 8 202 step 4: Create a [#out window];
+#X text 6 98 step 1:;
+#X obj 450 264 cnv 15 25 15 empty empty empty 20 12 0 14 -260818 -66577
+0;
+#X text 449 264 Tip:;
+#X text 485 263 Remember \, as with the rest of PD \, you can obtain
+information regarding specific objects by right-clicking on it. Try
+this for [#in].;
+#X text 6 250 GridFlow accepts several image formats including .jpg
+\, .png \, .tiff.;
+#X text 449 213 The [#out window] object must be deleted in order to
+close the display window the image is in.;
+#X text 8 -46 The following steps outline the items that you need to
+open a grid. Whether it be an image or a video you want to open theses
+four steps are necessary.;
+#X text 8 2 In order for GridFlow to recognize your media files by
+file name you have to put them in the "images" folder (located within
+the GridFlow directory). Another way to locate an image is to specify
+the path to where it is saved on your hard drive in the message box.
+;
+#X text 452 -46 To view the image you must initialize the patch. Click
+on the message box \, and then on the bang (this must be done in the
+run mode). The image will appear in a display window \, off to the
+side of the patch. Sometimes the display window opens behind the patch
+\, try moving the patch if the display seems to be missing.;
+#X text 459 -66 2.1 Patch Example;
+#X text 8 -68 2.1 Opening an Image;
+#X obj 450 140 cnv 15 22 15 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 450 180 #out window;
+#X msg 450 48 open b001.jpg;
+#X obj 534 99 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1
+-1;
+#X obj 450 139 #in;
+#X text 62 113 extension you want to open;
+#X text 63 99 Create message box [open< with the file name and;
+#X text 11 329 GridFlow 0.9.0;
+#X connect 29 0 31 0;
+#X connect 30 0 31 0;
+#X connect 31 0 28 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_2.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_2.pd
new file mode 100644
index 00000000..affb33b7
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_2.pd
@@ -0,0 +1,63 @@
+#N canvas 257 0 660 624 10;
+#X obj 3 -37 cnv 15 653 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 3 -72 cnv 15 653 30 empty empty empty 20 12 0 14 -233017 -355
+0;
+#X obj 3 517 cnv 15 653 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 268 271 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 152 134 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 88 133 <-- step #2 : start the metro;
+#X obj 203 363 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 246 465 cnv 15 20 15 empty empty empty 20 12 0 14 -260818 -66577
+0;
+#X text 111 159 the metro refreshes the display window so you don't
+have to reload the grid every time it's altered.;
+#X text 204 271 <-- step #1 : load the image;
+#X text 245 464 Tip: try replacing this number box with a slider.;
+#X text 139 363 <-- step #3 : change the grid's vertical parameters
+;
+#X obj 247 405 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 15 -38 2.2 Resizing an image;
+#X text 10 82 [# pack] lets you resize grids by altering the vertical
+and horizontal parameters.;
+#X text 10 34 If you want to make your image four times its size \,
+you would have to insert a 4 into the object \; [#scale_by 4].;
+#X text 9 -10 [#scale_by] resizes grids by multiplying its parameters
+(width and height). To resize an image proportionatly a specific scaling
+size must be identified within the object.;
+#X text 183 405 <-- step #4 : change the grid's horizontal parameters
+;
+#X text 17 -67 2 Introduction to Images;
+#X obj 16 177 metro 10;
+#X obj 16 135 tgl 15 0 empty empty empty 0 -6 0 8 -24198 -1 -1 0 1
+;
+#X floatatom 74 368 5 1 4 0 - - -;
+#X obj 16 482 #out window;
+#X obj 53 295 #in;
+#X msg 53 272 load bluemarble.jpg;
+#X obj 74 431 #pack 2;
+#X obj 16 319 #store;
+#X obj 16 319 #store;
+#X obj 53 249 loadbang;
+#X obj 17 458 cnv 15 63 15 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 16 457 #scale_by;
+#X floatatom 118 406 5 0 0 0 - - -;
+#X text 11 524 GridFlow 0.8.4;
+#X connect 19 0 26 0;
+#X connect 19 0 27 0;
+#X connect 20 0 19 0;
+#X connect 21 0 25 0;
+#X connect 23 0 26 1;
+#X connect 23 0 27 1;
+#X connect 24 0 23 0;
+#X connect 25 0 30 1;
+#X connect 27 0 30 0;
+#X connect 28 0 24 0;
+#X connect 30 0 22 0;
+#X connect 31 0 25 1;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_3.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_3.pd
new file mode 100644
index 00000000..03d8c056
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_3.pd
@@ -0,0 +1,84 @@
+#N canvas 0 87 993 482 10;
+#X obj 6 38 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 6 3 cnv 15 1000 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 5 149 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 530 134 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1
+-1;
+#X obj 484 163 #in;
+#X obj 484 191 cnv 15 42 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X text 8 180 In this section we will introduce some very basic functions
+of the numeric operator \, one of the most common methods used for
+image transformation.;
+#X text 7 69 GridFlow performs high level grid processing \; in other
+words its main function is the manipulation of images and video. There
+are several ways to modify images in GridFlow \, some are very basic
+while others are more advanced.;
+#X text 9 234 Numeric Operators (numop): transform grids by applying
+a mathematical operation to each pixel value.;
+#X obj 6 455 cnv 15 1000 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 18 37 2.3 Image Manipulation;
+#X text 17 148 Image Manipulation Using Numeric Operators;
+#X text 8 277 To transform a grid the numop must first be given an
+argument. That argument will be applied to every pixel in the grid.
+The following three examples show some ways to give the numop an argument.
+;
+#X obj 460 38 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 465 62 Altering a grid by placing an argument directly into
+the numop object.;
+#X obj 560 343 cnv 15 42 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 561 382 display;
+#X msg 483 278 1 2 3 4 5 6 7 8 9;
+#X obj 483 307 #import (3 3);
+#X obj 484 382 display;
+#X obj 10 38 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 22 37 2.3 Image Manipulation;
+#X obj 10 38 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 22 37 2.3 Image Manipulation;
+#X obj 672 103 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 11 352 cnv 15 20 15 empty empty empty 20 12 0 14 -260818 -66577
+0;
+#X text 422 361 --->;
+#X text 608 103 <-- step #1 : click here to load the image;
+#X obj 672 133 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 624 189 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 608 133 <-- step #2 : click here to view the image;
+#X text 658 201 the value (42);
+#X text 560 188 <-- step #3 : try altering the argument by changing
+;
+#X obj 691 276 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 691 342 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 627 276 <-- step #1 : click here to load the grid;
+#X text 20 8 2 Introduction to Images;
+#X text 472 37 2.3 Patch Example 1;
+#X text 9 352 Tip: To understand how pixels are affected by the numop
+test out this numeric grid patch. Each grid value that is output is
+multiplied by 42;
+#X obj 484 220 #out window;
+#X obj 484 191 # * 42;
+#X text 727 360 by changing the value (42);
+#X text 628 342 <-- step #2 : try altering the argument;
+#X obj 560 343 # * 42;
+#X text 14 463 GridFlow 0.8.4;
+#X msg 484 106 open working.jpg;
+#X connect 3 0 4 0;
+#X connect 4 0 40 0;
+#X connect 17 0 18 0;
+#X connect 18 0 19 0;
+#X connect 18 0 43 0;
+#X connect 40 0 39 0;
+#X connect 43 0 16 0;
+#X connect 45 0 4 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_4.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_4.pd
new file mode 100644
index 00000000..ca6eae3f
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_4.pd
@@ -0,0 +1,49 @@
+#N canvas 240 75 554 435 10;
+#X obj 23 -109 #in;
+#X obj 95 -59 cnv 15 25 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 95 -84 cnv 15 25 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 96 -34 cnv 15 25 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X msg 95 -59 67;
+#X msg 95 -84 2;
+#X msg 96 -34 199;
+#X text 146 -153 <--;
+#X text 145 -82 <--;
+#X text 145 -59 <--;
+#X text 145 -37 <--;
+#X obj 58 -148 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1
+-1;
+#X obj 4 -299 cnv 15 550 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 4 -334 cnv 15 550 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 5 69 cnv 15 550 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 18 -329 2 Introduction to Images;
+#X text 15 -301 2.3 Patch Example 2;
+#X text 12 -269 Altering a grid by sending numop an argument using
+a message box. This method allows you to send the numop several different
+arguments.;
+#X obj 209 -206 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 210 -152 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 145 -206 <-- step #2 : click here to load the image;
+#X text 174 -153 Step #3: click on the bang to see the updated image
+;
+#X obj 215 -59 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 179 -59 step #1 : click on one of the arguments;
+#X text 14 77 GridFlow 0.8.4;
+#X obj 23 33 #out window;
+#X msg 23 -206 open working.jpg;
+#X obj 23 -35 # * 1;
+#X connect 0 0 27 0;
+#X connect 4 0 27 1;
+#X connect 5 0 27 1;
+#X connect 6 0 27 1;
+#X connect 11 0 0 0;
+#X connect 26 0 0 0;
+#X connect 27 0 25 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_5.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_5.pd
new file mode 100644
index 00000000..a0226c88
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_5.pd
@@ -0,0 +1,52 @@
+#N canvas 559 20 560 533 10;
+#X obj 2 37 cnv 15 550 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 2 2 cnv 15 550 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 2 501 cnv 15 550 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 16 7 2 Introduction to Images;
+#X text 14 36 2.3 Patch Example 3;
+#X text 2 58 Altering a grid using numop with slider and metro. This
+combination allows you to scroll through values and modify a grid in
+real time.;
+#X obj 19 338 cnv 15 38 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 225 207 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 280 294 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 314 306 the slider;
+#X obj 223 122 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 224 162 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 21 252 #in;
+#X obj 54 295 hsl 128 15 0 255 0 0 empty empty empty -2 -6 0 8 -260818
+-1 -1 0 1;
+#X obj 53 228 metro 33.3;
+#X obj 53 206 tgl 15 0 empty empty empty 0 -6 0 8 -24198 -1 -1 1 1
+;
+#X floatatom 72 326 5 0 0 0 - - -;
+#X obj 50 165 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1
+-1;
+#X obj 21 398 #out window;
+#X msg 21 121 open scissors.jpg;
+#X obj 21 338 # + 0;
+#X text 159 122 <-- step #1 : click here to load the image;
+#X text 161 206 <-- step #2 : start the metro;
+#X text 160 162 <-- step #2 : click here to view the image;
+#X text 223 184 or;
+#X text 216 294 <-- step #3 : try altering the argument by using;
+#X text 11 509 GridFlow 0.9.0;
+#X text 4 443 These examples use the [# +] numop. There are several
+numeric operators \; they can be found in the numeric operator help
+patch (right click on the [# + 0] and select help to view them).;
+#X connect 12 0 20 0;
+#X connect 13 0 16 0;
+#X connect 13 0 20 1;
+#X connect 14 0 12 0;
+#X connect 15 0 14 0;
+#X connect 17 0 12 0;
+#X connect 19 0 12 0;
+#X connect 20 0 18 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_6.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_6.pd
new file mode 100644
index 00000000..e595e5b1
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_6.pd
@@ -0,0 +1,66 @@
+#N canvas 130 10 767 676 10;
+#X obj 7 -69 cnv 15 760 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 2 425 cnv 15 760 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 4 -220 cnv 15 760 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 18 -215 2 Introduction to Images;
+#X obj 5 -183 cnv 15 760 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X text 12 -155 When an image is represented as a grid every pixel
+value will vary between 0 and 255 Colour wrapping occurs when the result
+of an operation on the pixel value is higher than 255 Values above
+255 are counted from 0 For example: if a pixel has a red value of 240
+and 20 is added to it \, you get 5 instead of displaying 260 (240 +
+20 - 255 = 5).;
+#X text 17 -184 2.4 Colour Wrapping;
+#X text 15 -69 2.4 [#clip];
+#X text 11 -44 The [#clip] object is used with numops in order to set
+a lower and upper range to pixel values. This allows you to avoid over
+saturating the colours of your grid.;
+#X obj 163 83 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 19 254 cnv 15 38 17 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 53 161 hsl 128 15 0 255 0 0 empty empty empty -2 -6 0 8 -260818
+-1 -1 0 1;
+#X obj 20 56 tgl 15 0 empty empty empty 0 -6 0 8 -24198 -1 -1 0 1;
+#X obj 50 353 #clip;
+#X obj 20 78 metro 33.3;
+#X obj 75 185 #color;
+#X obj 20 385 #out window;
+#X obj 20 314 shunt;
+#X obj 50 288 tgl 15 0 empty empty empty 0 -6 0 8 -24198 -1 -1 0 1
+;
+#X obj 3 107 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1 -1
+;
+#X text 296 211 channel at a time;
+#X text 268 196 <-- use colour specific sliders to add values to one
+;
+#X obj 147 288 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 179 288 click here to redirect the flow of data using the [shunt]
+object and see the effect of [#clip];
+#X text 100 83 <-- step #1 : start the metro;
+#X text 199 160 <-- use slider to add values to all channels at once
+;
+#X text 9 432 GridFlow 0.8.4;
+#X obj 20 136 #store;
+#X obj 66 136 #in sewing.jpg;
+#X obj 20 254 # + 0;
+#X obj 66 117 loadbang;
+#X text 84 288 <-- step #2 :;
+#X connect 11 0 29 1;
+#X connect 12 0 14 0;
+#X connect 13 0 16 0;
+#X connect 14 0 27 0;
+#X connect 15 0 29 1;
+#X connect 17 0 16 0;
+#X connect 17 1 13 0;
+#X connect 18 0 17 1;
+#X connect 19 0 27 0;
+#X connect 27 0 29 0;
+#X connect 28 0 27 1;
+#X connect 29 0 17 0;
+#X connect 30 0 28 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_7.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_7.pd
new file mode 100644
index 00000000..d7704291
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_7.pd
@@ -0,0 +1,36 @@
+#N canvas 79 206 438 353 10;
+#X obj 2 -37 cnv 15 430 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 2 -72 cnv 15 430 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 3 244 cnv 15 430 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 4 -15 To convert an image to greyscale use [#rgb_to_greyscale].
+It converts a colour information into a black to white gradient.;
+#X obj 12 207 cnv 15 25 15 empty empty empty 20 12 0 14 -260818 -66577
+0;
+#X text 11 207 Tip:;
+#X text 48 201 If you have trouble opening this image refer back to
+previous tutorials.;
+#X text 16 -67 2 Introduction to Images;
+#X text 16 -37 2.5 Greyscale;
+#X obj 14 125 cnv 15 110 16 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 15 71 #in;
+#X obj 27 51 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1 -1
+;
+#X msg 15 27 open working.jpg;
+#X text 11 252 GridFlow 0.9.0;
+#X obj 15 124 #rgb_to_greyscale;
+#X obj 15 145 #greyscale_to_rgb;
+#X obj 15 172 #out window \, title greyscale;
+#X obj 157 91 #out window \, title original;
+#X obj 15 94 t a a;
+#X text 124 144 [#out window] still only accepts rgb images;
+#X connect 10 0 18 0;
+#X connect 11 0 10 0;
+#X connect 12 0 10 0;
+#X connect 14 0 15 0;
+#X connect 15 0 16 0;
+#X connect 18 0 14 0;
+#X connect 18 1 17 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_8.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_8.pd
new file mode 100644
index 00000000..1697e73b
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_8.pd
@@ -0,0 +1,61 @@
+#N canvas 29 52 836 433 10;
+#X obj 3 347 cnv 15 830 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 4 -18 cnv 15 830 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj 4 -52 cnv 15 830 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 11 -46 2 Introduction to Images;
+#X text 10 -18 2.6 Remap Image;
+#X obj 261 229 cnv 15 25 15 empty empty empty 20 12 0 14 -260818 -66577
+0;
+#X text 260 229 Tip:;
+#X text 290 228 This is a numeric operator. Right click on it for more
+information or go back to the tutorial about the numeric operator.
+;
+#X obj 272 77 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 321 188 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 355 200 number box to transform image;
+#X obj 21 267 cnv 15 85 15 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X obj 20 77 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1 -1
+;
+#X obj 20 166 #in;
+#X obj 20 104 t b b;
+#X obj 99 290 #print;
+#X obj 191 128 bng 15 250 50 0 empty empty empty 0 -6 0 8 -24198 -1
+-1;
+#X floatatom 210 189 5 0 0 0 - - -;
+#X obj 180 152 #for (0 0) (240 320) (1 1);
+#X obj 180 102 metro 100;
+#X obj 180 77 tgl 15 0 empty empty empty 0 -6 0 8 -24198 -1 -1 1 1
+;
+#X obj 20 266 #remap_image;
+#X obj 180 227 # / 1;
+#X obj 20 315 #out window;
+#X text 231 228 <--;
+#X text 11 354 GridFlow 0.8.4;
+#X msg 50 135 open working.jpg;
+#X obj 110 77 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 12 7 Each numeric operator applies unique effects to a grid.
+The standard effect changes when numop is used in combination with
+the [#remap_image] object.;
+#X text 46 75 <-- step #1;
+#X text 207 77 <-- step #2 : start the metro;
+#X text 258 188 <-- step #3 : click and drag cursor over;
+#X connect 12 0 14 0;
+#X connect 13 0 21 0;
+#X connect 14 0 13 0;
+#X connect 14 1 26 0;
+#X connect 16 0 18 0;
+#X connect 17 0 22 1;
+#X connect 18 0 22 0;
+#X connect 19 0 18 0;
+#X connect 20 0 19 0;
+#X connect 21 0 23 0;
+#X connect 21 1 15 0;
+#X connect 22 0 21 1;
+#X connect 26 0 13 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_image_9.pd b/externals/gridflow/doc/tutorials/gf_tutorial_image_9.pd
new file mode 100644
index 00000000..b7684734
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_image_9.pd
@@ -0,0 +1,65 @@
+#N canvas 157 13 867 556 10;
+#X obj -14 522 cnv 15 862 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj -14 34 cnv 15 865 15 empty empty empty 20 12 0 14 -228992 -66577
+0;
+#X obj -14 -1 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text -9 5 2 Introduction to Images;
+#X text -9 33 2.6 [#convolve];
+#X obj 147 258 #store;
+#X obj 147 362 # / 9;
+#X msg 297 372 3 3 # 1 1 1 1 1 1 1 1 1;
+#X obj -5 353 #out window;
+#X obj -5 160 #in;
+#X obj 147 177 tgl 15 0 empty empty empty 0 -6 0 8 -24198 -1 -1 0 1
+;
+#X obj -5 119 loadbang;
+#X obj 147 206 metro 33.3667;
+#X obj -5 218 t a;
+#X obj 147 335 #convolve \, seed 4;
+#X obj 297 339 loadbang;
+#X obj 297 445 display;
+#X obj 147 411 #clip;
+#X obj 529 390 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 228 141 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X obj 229 175 cnv 15 15 15 empty empty empty 20 12 0 14 -259603 -66577
+0;
+#X text 164 140 <-- step #1 : load image;
+#X text 166 175 <-- step #3 : start metro;
+#X obj 297 316 cnv 15 110 15 empty empty empty 20 12 0 14 -241291 -66577
+0;
+#X text 331 316 Blurs;
+#X text 562 389 apply effect by selecting a message box;
+#X text 202 253 <-- The [#store] object stores the last grid that [#convolve]
+was applied to. Everytime time the metro bangs \, [#convolve] is applied
+to the grid retained in this object \, therefore applying effect on
+top of effect.;
+#X text 465 390 <-- step #2 :;
+#X text -8 529 GridFlow 0.9.0;
+#X text -18 502 ((Source convolve.pd : Copyright Mathieu Bouchard 2002)
+;
+#X msg 296 415 3 3 # 4 0 -1 3 1 0 0 0 4;
+#X text -9 55 [#convolve] allows you to apply preset effects such as
+blur \, edge sharpen and emboss onto a grid. In this example you can
+create two different kinds of "blurs" on an image.;
+#X msg -5 140 load working.jpg;
+#X obj 147 387 # abs-;
+#X connect 5 0 14 0;
+#X connect 6 0 33 0;
+#X connect 7 0 14 1;
+#X connect 9 0 13 0;
+#X connect 10 0 12 0;
+#X connect 11 0 32 0;
+#X connect 12 0 5 0;
+#X connect 13 0 5 1;
+#X connect 13 0 8 0;
+#X connect 14 0 6 0;
+#X connect 15 0 7 0;
+#X connect 17 0 13 0;
+#X connect 30 0 14 1;
+#X connect 30 0 16 0;
+#X connect 32 0 9 0;
+#X connect 33 0 17 0;
diff --git a/externals/gridflow/doc/tutorials/gf_tutorial_intro.pd b/externals/gridflow/doc/tutorials/gf_tutorial_intro.pd
new file mode 100644
index 00000000..9113ebb0
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/gf_tutorial_intro.pd
@@ -0,0 +1,86 @@
+#N canvas 160 16 884 589 10;
+#X obj 5 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 5 550 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 6 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 4 232 cnv 15 430 145 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 25 271 pddp_open pure-data-1;
+#X obj 25 294 pddp_open pure-data-2;
+#X obj 25 317 pddp_open pure-data-3;
+#X obj 25 340 pddp_open pure-data-4;
+#X text 200 271 Pure-Data Introduction;
+#X text 200 294 GUI Objects for Interaction;
+#X text 200 317 Creating your first patch;
+#X text 200 340 Control: metro \, random & counter;
+#X obj 444 233 cnv 15 430 145 empty empty empty 20 12 0 14 -179884
+-66577 0;
+#X obj 5 391 cnv 15 430 145 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 25 416 pddp_open pure-data-5;
+#X obj 25 439 pddp_open pure-data-6;
+#X text 200 439 The powerful message object;
+#X obj 25 462 pddp_open pure-data-7;
+#X text 200 462 More about lists;
+#X text 200 485 Nesting collections of objects;
+#X text 200 416 Connectionless communications;
+#X obj 25 485 pddp_open pure-data-8;
+#X text 200 509 Using GUI's in abstractions;
+#X obj 25 509 pddp_open pure-data-9;
+#X obj 445 391 cnv 15 430 145 empty empty empty 20 12 0 14 -179884
+-66577 0;
+#X obj 468 271 pddp_open GridFlow-1;
+#X obj 468 294 pddp_open GridFlow-2;
+#X obj 468 317 pddp_open GridFlow-3;
+#X obj 468 340 pddp_open GridFlow-4;
+#X text 642 319 Introduction to video;
+#X obj 446 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 645 477 Interfacing with sensors;
+#X obj 467 426 pddp_open GridFlow-6;
+#X obj 467 452 pddp_open GridFlow-7;
+#X text 451 236 2 Introduction to GridFlow;
+#X obj 448 236 cnv 15 15 15 empty empty empty 20 12 0 14 -262144 -66577
+0;
+#X text 451 236 2 Introduction to GridFlow;
+#X obj 8 395 cnv 15 15 15 empty empty empty 20 12 0 14 -262144 -66577
+0;
+#X obj 449 395 cnv 15 15 15 empty empty empty 20 12 0 14 -262144 -66577
+0;
+#X obj 7 235 cnv 15 15 15 empty empty empty 20 12 0 14 -262144 -66577
+0;
+#X text 452 395 4 Intermediate GridFlow;
+#X text 10 235 1 Introduction to Pure-Data;
+#X text 11 395 3 Intermediate Pure-Data;
+#X text 582 563 Stephanie Brodeur and Darsha Hewitt 2006;
+#X text 451 46 What is GridFlow?;
+#X text 500 550 What is GridFlow? and GridFlow tutorials developed
+by;
+#X text 453 84 GridFlow is a plug-in for PureData that introduces the
+grid (#) data type into the PD environment. GridFlow allows you to
+work with live video \, still images and video files in a real-time
+environment.;
+#X text 11 46 What is PureData (aka PD)?;
+#X text 14 85 PureData is an open-source patching environment for multi-media
+(audio+image). PureData is a programming language where you create
+relationships by connecting visual boxes (rather than typing complex
+commands).;
+#X text 454 144 This section deals with the particular objects related
+to GridFlow. GridFlow uses the usual PD "control" objects \, as well
+as a set of GridFlow specific objects.;
+#X text 15 141 A basic understanding of PureData is useful when using
+GridFlow. If you are new to the PureData programming environment it
+is recommended that you follow the Introduction to PureData before
+you move onto the GridFlow tutorials.;
+#X text 10 13 Welcome to PureData;
+#X text 13 551 What is PureData? and PureData tutorials copyright Ben
+Bogart 2005 \; (See COPYING.TXT for details);
+#X text 642 340 Introduction to live video;
+#X text 641 273 Introduction to grids;
+#X text 639 296 Introduction to images;
+#X text 653 480;
+#X obj 467 477 pddp_open GridFlow-8;
+#X text 646 451 Motion detection;
+#X text 646 426 Advanced video effects;
diff --git a/externals/gridflow/doc/tutorials/grid-intro.pd b/externals/gridflow/doc/tutorials/grid-intro.pd
new file mode 100644
index 00000000..e3aa53b8
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/grid-intro.pd
@@ -0,0 +1,10 @@
+#N canvas 0 0 476 213 10;
+#X text 29 30 GridFlow is a plug-in for PureData that introduces the
+frid (#) data type into the PD environment. GridFlow allows you to
+work with live video \, still images and video files in a rel-time
+environment.;
+#X text 32 97 This section deals with the particular objects related
+to GridFlow. GridFlow uses the usual PD "control" objects \, as well
+as a set of GridFlow specific objects. Before we get into the tutorials
+we will explain the grid "#" \, the most important concept in GridFlow.
+;
diff --git a/externals/gridflow/doc/tutorials/pure-data-1.pd b/externals/gridflow/doc/tutorials/pure-data-1.pd
new file mode 100644
index 00000000..7be2a91a
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-1.pd
@@ -0,0 +1,71 @@
+#N canvas 221 110 894 498 10;
+#N canvas 0 22 450 300 this 0;
+#X obj 192 128 inlet;
+#X obj 192 171 outlet;
+#X text 8 7 If you're looking at this you're just going to confuse
+yourself!;
+#X connect 0 0 1 0;
+#X restore 499 380 pd this is an object;
+#X text 509 358 <- This is a connection;
+#X msg 499 319 10;
+#X text 13 348 Objects are like filters \, they change the way messages
+flow through them.;
+#X text 13 153 You can think of a patch as plumbing. The way water
+flows through the plumbing of your house \, messages flow through the
+connections in your patch. Objects change the flow of the messages
+to allow different things to happen. Messages always go into objects
+at the top \, called the inlet \, and always come out at the bottom
+\, called the outlet. In PD messages flow from top to bottom.;
+#X text 458 236 This is a very simple example of a patch \, the message
+"10" can be sent through the "pd this is an object" and can be seen
+being passed out the outlet.;
+#X floatatom 499 416 5 0 0 0 - - -;
+#X text 539 415 <- This number box shows the float message;
+#X text 553 334 and watch the output!;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 13 252 You can work with PD in two ways \, the first is in
+"edit mode". Edit-mode is where you create your patch by adding objects
+and the connections between them. "Run mode" is when you're done with
+the construction of your patch \, and you wish to send messages through
+it. In run-mode your cursor is an arrow (as it is right now since we
+are in run-mode) \, in edit-mode your cursor is a pointing hand.;
+#X text 458 136 Messages are what allow objects to communicate with
+one and other. Messages can change the way an object acts \, and/or
+express the work the object is doing. Messages come in different types.
+They can contain words \, numbers and groups of these. The main types
+of messages we will be dealing with are floats (numbers). You can click
+on a message \, when in run-mode \, to send it through your patch.
+;
+#X obj 448 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 448 290 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 8 447 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 449 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#X text 12 20 DESCRIPTION: What is a patch? An object? A message?;
+#N canvas 0 22 466 316 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: metaphor object message GUI introduction;
+#X restore 16 453 pd META;
+#X text 457 67 GUI objects allow you to interact with your PD patch
+as it is running. They allow you to change what your patch is doing
+without reconnecting the objects. The simplest GUI object is the "Message"
+that simply contains a message you want to send in your patch.;
+#X text 453 290 A patch that connects a GUI to an object to a second
+GUI.;
+#X text 531 320 <- This GUI sends a float message (click on it);
+#X text 13 66 When working with PD you are dealing primarily with objects
+\, GUI (Graphical User Interface) objects \, connections and messages.
+These are the building blocks of PD programming. When you connect objects
+\, GUI objects \, and messages you are creating a "patch". Patching
+is making something complex out of smaller building blocks.;
+#X text 13 46 The "patch" \, "objects" and "connections";
+#X text 453 46 "GUI objects" and "messages";
+#X text 12 8 1 Introduction to Pure-Data & its Metaphors;
+#X connect 0 0 6 0;
+#X connect 2 0 0 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-2.pd b/externals/gridflow/doc/tutorials/pure-data-2.pd
new file mode 100644
index 00000000..151af26f
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-2.pd
@@ -0,0 +1,73 @@
+#N canvas 197 100 899 548 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 448 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 8 497 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 499 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 470 320 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: GUI slider toggle number message introduction
+;
+#X restore 16 503 pd META;
+#X text 12 20 DESCRIPTION: Message \, slider \, toggle \, bang and
+number;
+#X msg 93 145 hello world;
+#X obj 93 168 print;
+#X text 181 146 <- Click on this message;
+#X text 18 74 Messages control the behavior of objects and it is the
+objects that change what a patch does. The first object we're going
+to learn is "print". All "print" does is print out the messages you
+send it to the terminal:;
+#X text 19 197 TIP: If you forget what an object does you can always
+double-click (on a mac) or right-click (on a PC) and then choose "help".
+;
+#X text 19 250 In this tutorial we will use two different types of
+objects: "objects" (of which "print" is an example) and GUI objects
+\, (of which "message" is an example). GUI objects allow you to interact
+with your patch \, control PD and change parameters of objects. We
+are going to learn four types of GUI objects (but there are many more):
+Slider \, Toggle \, Bang \, and Number.;
+#X obj 76 355 hsl 300 30 0 127 0 0 empty empty This_is_a_HSlider_(Horizontal)
+10 15 1 10 -262144 -1 -1 0 1;
+#X obj 73 393 print;
+#X text 21 421 This "hslider" is connected to the print object. This
+way we can see what messages the "hslider" sends. Try clicking and
+dragging in the Slider. You can change the scale (and other properties)
+of some GUI Objects by double-clicking (mac) or right-clicking (pc)
+and choosing "properties".;
+#X text 13 46 The "message" and "hslider" GUI Objects:;
+#X text 453 46 "toggle" \, "bang" \, "number";
+#X obj 519 176 tgl 30 0 empty empty empty 0 -6 0 8 -262144 -1 -1 0
+1;
+#X obj 629 176 bng 30 250 50 0 empty empty empty 0 -6 0 8 -262144 -1
+-1;
+#X obj 629 210 print Bang;
+#X obj 519 210 print Toggle;
+#X obj 739 210 print Number;
+#X floatatom 739 192 5 0 0 0 - - -;
+#X text 466 76 "slider" \, "toggle" and "number" all send messages
+made up of floats (numbers). "bang" is a special case and it only sends
+the message "bang". Below we're using an argument to the print object
+that tags each message sent to the terminal. This way when we have
+multiple "print" objects in one patch we can differenciate thier output.
+;
+#X text 465 268 "toggle" sends the message "1" or "0" \, "bang" always
+sends "bang" and if you click and drag on the "number" you can see
+it acts a lot like a Slider. With "number" you can also click once
+\, and then type a number to send.;
+#X text 467 335 TIP: You can send floating point numbers by holding
+down the SHIFT key as you click and drag on the "number".;
+#X text 467 375 There are other types of GUI objects not covered here.
+See the guis-about.pd PDDP patch:;
+#X text 12 8 2 PD Introduction - Some Useful GUI Objects in Pure-Data
+;
+#X connect 7 0 8 0;
+#X connect 13 0 14 0;
+#X connect 18 0 21 0;
+#X connect 19 0 20 0;
+#X connect 23 0 22 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-3.pd b/externals/gridflow/doc/tutorials/pure-data-3.pd
new file mode 100644
index 00000000..729b2dc7
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-3.pd
@@ -0,0 +1,70 @@
+#N canvas 261 121 900 544 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 448 366 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 8 497 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 499 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 474 324 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: patch first connecting placing place connect
+;
+#X restore 16 503 pd META;
+#X text 12 20 DESCRIPTION: Using PD to create your first patch;
+#X text 13 46 Adding Objects:;
+#X text 19 75 In order to create a patch you need to first place objects
+and GUI objects \, and second make connections between these objects.
+To place an object you need to be in "edit-mode". You should now be
+in run mode \, so please go to the "Edit" pull-down menu and choose
+"Edit mode" at the bottom. You should see your cursor change from an
+arrow to a pointing hand.;
+#X text 19 175 SHORTCUT: You can press "Control" and "e" simultaneously
+in order to toggle (switch) between edit and Run modes.;
+#X obj 448 386 cnv 15 430 100 empty empty empty 20 12 0 14 -233017
+-66577 0;
+#X floatatom 506 406 5 0 0 0 - - -;
+#X text 19 355 SHORTCUT: You can press "Control" and "3" simultaneously
+in order to place a number. All shortcuts are listed next to the items
+in the "Put" menu.;
+#X text 453 366 Patch work area:;
+#X text 19 215 Once you are in "edit-mode" you are now free to place
+objects. To place an object go to the "Put" pull-down menu and choose
+"Number". Once you have chosen this menu item you will see that a "number"
+gui is attached to your mouse pointer. In order to place the number
+into the patch move your pointer to the grey area to the right (in
+the "Patch work area" -> Click once to release it from your mouse.
+Note that the number is coloured blue. The blue colour shows that an
+item in your patch is selected. To unselect any item simply click once
+on the blank (white) space between items.;
+#X obj 520 440 print;
+#X obj 448 156 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 156 Connecting Objects:;
+#X text 19 411 Next we're going to place the familar "print" object
+beneath the "number" GUI. Press "Control" and "1" to place an object
+box. Again the object gets attached to your mouse and again click once
+to place it in the patch area somewhere under the "number".;
+#X text 459 41 While the number box is still selected (coloured blue)
+you can see a flashing cursor. Type the word "print" into the object
+box. The object will retain a dashed line while you type. In order
+to create the object you simply need to unselect \, by clicking somewhere
+outside the object. Note that once you have clicked to create the object
+the dashed line turns solid and an inlet (small rectangle) gets drawn
+around the word "print". The objects have now been created!;
+#X text 459 185 All connections between objects in PD are created from
+outlet to inlet (top to bottom). To start making a connection move
+your hand-pointer over the outlet of the "number" gui. When over the
+outlet your pointer will change to a circle. When you see the circle
+press and hold the mouse button. As you drag (holding the mouse button
+down) the pointer you see a line being drawn from the outlet to your
+pointer. To attach this connection to another object drag your mouse
+to an inlet of another object. The pointer will again change to a circle
+and at this point you can release the mouse button. Once released the
+objects are now connected! To play with your patch go back into run-mode
+and click and drag on the number-box while watching the terminal.;
+#X text 12 8 3 PD Introduction - Creating your first patch;
+#X connect 11 0 15 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-4.pd b/externals/gridflow/doc/tutorials/pure-data-4.pd
new file mode 100644
index 00000000..4d38f41d
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-4.pd
@@ -0,0 +1,87 @@
+#N canvas 183 61 890 531 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 96 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 8 487 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 489 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 478 328 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: metro counter random;
+#X restore 16 493 pd META;
+#X text 12 20 DESCRIPTION: Learning "metro" \, "counter" & "random"
+;
+#X text 13 96 Using the "metro" object:;
+#X text 21 47 In this section we will learn three new objects \, "metro"
+\, "counter" \, and "random". Metro sends a bang at regular intervals
+\, just like a metronome.;
+#X obj 164 142 metro 250;
+#X obj 164 123 tgl 15 0 empty empty empty 0 -6 0 8 -262144 -1 -1 0
+1;
+#X obj 164 163 bng 15 100 50 0 empty empty empty 0 -6 0 8 -262144 -1
+-1;
+#X floatatom 222 123 5 0 0 0 - - -;
+#X text 21 187 You can turn a Metro on and off by sending it a "1"
+or "0" message. Because a toggle sends 0/1 messages \, we can simply
+connect it directly. Metro also accepts an argument (words or numbers
+wirtten after the object name). This argument is how fast the metro
+should send out bangs (in milliseconds). You can always change the
+speed of the metro by sending it number messages through the rightmost
+inlet.;
+#X obj 8 306 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 13 306 Using the "random" object:;
+#X text 21 277 For more info see the metro-help.pd patch.;
+#X obj 168 385 bng 15 100 50 0 empty empty empty 0 -6 0 8 -262144 -1
+-1;
+#X obj 168 425 print;
+#X obj 168 404 random 100;
+#X floatatom 233 385 5 0 0 0 - - -;
+#X text 20 327 The Random object returns a number between 0 and the
+(number) argument when it receives a bang message in the leftmost inlet.
+You can also change the upper limit by sending a message to the rightmost
+inlet.;
+#X obj 448 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 46 Using the "random" object:;
+#X obj 559 154 bng 15 100 50 0 empty empty empty 0 -6 0 8 -262144 -1
+-1;
+#X floatatom 590 154 3 1 3 0 - - -;
+#X floatatom 621 174 3 0 0 0 - - -;
+#X floatatom 652 194 3 0 0 0 - - -;
+#X obj 652 234 bng 15 250 50 0 empty empty empty 0 -6 0 8 -262144 -1
+-1;
+#X floatatom 559 234 8 0 0 0 - - -;
+#X obj 559 213 counter 0 10 1;
+#X text 21 447 For more info see the random-help.pd patch.;
+#X text 461 77 "counter" is simply an object that counts. It can count
+up \, count down and count up and then down. Where it starts and where
+it stops are all definable. This is the counter that in included with
+Gem \, it is not compatible with other counter objects.;
+#X text 461 274 The first argument for counter is the lower limit (number
+to start counting at). The second is the upper limit to count to. The
+third argument is the direction in which to count. "1" means forward
+\, "2" means backward and "3" means forward and then backward. You
+can also use the three rightmost inlets to change the behaviour of
+counter. The rightmost inlet is the upper limit \, the second right-most
+the lower limit \, and the third right-most as the direction. The rightmost
+outlet sends out a bang message when the counter loops.;
+#X text 681 193 Rightmost inlet;
+#X text 651 173 Second Rightmost inlet;
+#X text 621 153 Third Rightmost inlet;
+#X text 461 407 For more info see the counter-help.pd patch.;
+#X text 12 8 4 Introduction to PD - More objects;
+#X connect 8 0 10 0;
+#X connect 9 0 8 0;
+#X connect 11 0 8 1;
+#X connect 16 0 18 0;
+#X connect 18 0 17 0;
+#X connect 19 0 18 1;
+#X connect 23 0 29 0;
+#X connect 24 0 29 1;
+#X connect 25 0 29 2;
+#X connect 26 0 29 3;
+#X connect 29 0 28 0;
+#X connect 29 1 27 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-5.pd b/externals/gridflow/doc/tutorials/pure-data-5.pd
new file mode 100644
index 00000000..dc357bb1
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-5.pd
@@ -0,0 +1,108 @@
+#N canvas -235 0 891 673 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 8 627 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 629 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 482 332 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: send receive netsend netreceive cordless communication
+network TCP/IP UDP internet;
+#X restore 16 633 pd META;
+#X obj 448 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 12 20 DESCRIPTION: Communicating between objects w/out connections
+;
+#X text 13 46 "send" & "receive";
+#X obj 86 223 send invisible-link;
+#X obj 86 248 receive invisible-link;
+#X floatatom 86 273 5 0 0 0 - - -;
+#X msg 86 198 10;
+#X floatatom 266 273 5 0 0 0 - - -;
+#X floatatom 266 203 5 0 0 0 - - -;
+#X obj 266 223 s invisible-link2;
+#X obj 266 248 r invisible-link2;
+#X obj 102 483 r send-from-number;
+#X floatatom 102 508 5 0 0 0 - - -;
+#X floatatom 102 462 5 0 0 0 - - send-from-number;
+#X floatatom 242 462 5 0 0 0 - - -;
+#X obj 242 483 s send-to-number2;
+#X floatatom 242 508 5 0 0 0 - send-to-number2 -;
+#X text 19 385 Note: Many GUI objects have built-in send and receive
+objects. The tag names are specified in the GUI properties. Remeber
+to get the GUI properties Right-Click or Control-Click on the GUI object
+and select "Properties".;
+#X text 453 46 "netsend" & "netreceive";
+#X text 19 575 For more info see: send-help.pd \, receive-help.pd \,
+netsend-help.pd and netreceive-help.pd;
+#X text 459 75 While "send" and "receive" allow you to send messages
+without connecting objects with patch-cords "netsend" and "netreceive"
+do the same but communicate between objects using TCP/IP the internet
+protocol. This means that you can send messages from a patch running
+on one machine to a second patch running on a second machine on the
+same network \, or even over the internet.;
+#X text 19 545 You can also send messages using UDP rather than TCP/IP.
+See "more info" below for details.;
+#X obj 589 292 netreceive 8001;
+#X text 459 185 The first argument of "netreceive" is the port the
+netrecive should listen on. "netsend" can connect to this port from
+other machines. "netreceive" has two outlets. The first outlet sends
+out the messages it receives over network \, and the second argument
+send a "1" when netsend is connected and "0" when netsend disconnects.
+;
+#X obj 589 318 print;
+#X obj 689 318 tgl 16 0 empty empty empty 0 -6 0 8 -262144 -1 -1 1
+1;
+#X obj 503 563 netsend;
+#X text 459 355 "netsend" is controlled using three messages: "connect"
+\, "disconnect" and "send". "connect" has two arguments \, the host
+or IP and the port number you wish to connect to. There needs to be
+a "netreceive" listening on the port you connect to. "disconnect" drops
+the current connection. "send" sends any arguments to the "netreceive"
+over the network. The single outlet of "netsend" prints "1" when a
+connection is made and "0" when the connection is lost.;
+#X obj 503 586 tgl 16 0 empty empty empty 0 -6 0 8 -262144 -1 -1 1
+1;
+#X msg 503 486 connect localhost 8001;
+#X msg 516 511 disconnect;
+#X msg 525 537 send hello from the internet;
+#X text 602 510 Close connection;
+#X text 673 486 Connect to this machine;
+#X text 733 536 Send message;
+#X text 19 75 In some cases you will want to send messages without
+connecting objects. You may be sending one message to many different
+places that would make connections too laborious. "send" and "receive"
+both have a single argument. This argument is the tag name for the
+communication. "send" will always send any messages it gets in it inlet
+to any number of "receive" objects in a patch with the same tag name.
+"s" and "r" can be used in the place of "send" and "receive".;
+#X obj 86 336 s broadcast;
+#X floatatom 86 317 5 0 0 0 - - -;
+#X obj 176 316 r broadcast;
+#X floatatom 176 339 5 0 0 0 - - -;
+#X obj 266 316 r broadcast;
+#X floatatom 266 339 5 0 0 0 - - -;
+#X text 12 8 5 Intermediate Pure-Data - send and receive;
+#X msg 585 598 send \$1;
+#X floatatom 584 567 5 0 0 0 - - -;
+#X text 651 596 send variables to another computer;
+#X connect 9 0 10 0;
+#X connect 11 0 8 0;
+#X connect 13 0 14 0;
+#X connect 15 0 12 0;
+#X connect 16 0 17 0;
+#X connect 19 0 20 0;
+#X connect 27 0 29 0;
+#X connect 27 1 30 0;
+#X connect 31 0 33 0;
+#X connect 34 0 31 0;
+#X connect 35 0 31 0;
+#X connect 36 0 31 0;
+#X connect 42 0 41 0;
+#X connect 43 0 44 0;
+#X connect 45 0 46 0;
+#X connect 48 0 31 0;
+#X connect 49 0 48 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-6.pd b/externals/gridflow/doc/tutorials/pure-data-6.pd
new file mode 100644
index 00000000..01e6dcd7
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-6.pd
@@ -0,0 +1,92 @@
+#N canvas 304 98 891 675 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 627 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 629 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 486 336 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: message comma semicolon dollersign receive
+list;
+#X restore 16 633 pd META;
+#X text 12 20 DESCRIPTION: Advanced uses for the message object;
+#X text 19 45 In Pure-Data there are two distinct concepts with the
+name "message". Messages are the data that gets send in PD from object
+to object. There is also the Messsage object that contains a message
+you want to send. The message object is the first GUI object we covered
+in this tutorial. The message is not the only way to send messages
+in a patch \, since all GUI objects also send messages. So what makes
+the message object different? The message object can sent messages
+of any type \, where a number for example can only send float (number)
+messages. There are a number of powerful features in the message object.
+We are familar with the "usual" way of using the message object:;
+#X msg 163 208 hello;
+#X msg 212 208 bye;
+#X obj 196 238 print messages;
+#X text 459 556 Note: It is a very common mistake to confuse the message
+object with an object box. The object box is framed in a rectangle.
+The message object has a notch removed from the right edge.;
+#X obj 106 385 print messages;
+#X msg 106 358 hello \, bye;
+#X text 19 305 You can send multiple messages in succession from a
+single message box by using a comma " \, " between the messages. The
+messages get send from left to right.;
+#X obj 8 276 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X obj 8 416 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 13 416 Semicolon in message boxes;
+#X text 13 276 Comma in message boxes;
+#X text 19 445 Just like you can specify receive tags directly in GUI
+objects you can also use a message box to send a message directly to
+a particular "receive".;
+#X obj 34 536 r myreceive;
+#X floatatom 34 560 5 0 0 0 - - -;
+#X text 189 360 Click to send both messages;
+#X text 136 502 send "10" to receive tag "myreceive";
+#X text 19 585 For more info see: message-help.pd 04.messages.pd 10.more.messages.pd
+;
+#X msg 34 498 \; myreceive 10;
+#X obj 448 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 46 Dollarsign in message boxes;
+#X msg 534 175 \$1 \$1 \$1;
+#X msg 534 154 10;
+#X text 459 75 In messages there are placeholders that start with "$".
+These placeholders are variables that get replaced with messages you
+send to the message box. In the example below we have a single message
+"10". Each "$1" in the message box gets replaced with the message "10".
+;
+#X text 601 175 \$1 placeholder gets replaced;
+#X text 570 154 message sent to message box;
+#X msg 534 304 list 1 2;
+#X text 600 304 a list with items "1" and "2";
+#X msg 534 325 \$2 \$1;
+#X text 584 325 \$1 becomes "1" and \$2 becomes "2";
+#X obj 534 347 print reverse-list;
+#X text 459 235 The "$1" placeholder refers to the first element of
+the list the message box gets from its inlet. We can use this to use
+a message box to reverse the order of elements (called atoms) in a
+list.;
+#X text 459 385 In this case the list "1 2" has two elements (called
+atoms) when this list gets sent to the inlet of a message box its atoms
+are available to the message box through the $ variables. \$1 gets
+replaced with the first element \, \$2 the second and so on.;
+#X obj 534 197 print repeated-message;
+#X obj 480 511 print complex-message;
+#X msg 480 468 list Fred Marcus;
+#X text 607 468 a list with two symbol atoms;
+#X msg 480 489 Hi \$1. \, Ya know \$2?;
+#X text 623 489 Becomes: "Hi Fred \, Ya know Marcus?";
+#X text 12 8 6 Intermediate Pure-Data - Using the message object;
+#X connect 6 0 8 0;
+#X connect 7 0 8 0;
+#X connect 11 0 10 0;
+#X connect 18 0 19 0;
+#X connect 26 0 38 0;
+#X connect 27 0 26 0;
+#X connect 31 0 33 0;
+#X connect 33 0 35 0;
+#X connect 40 0 42 0;
+#X connect 42 0 39 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-7.pd b/externals/gridflow/doc/tutorials/pure-data-7.pd
new file mode 100644
index 00000000..0d8360ec
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-7.pd
@@ -0,0 +1,106 @@
+#N canvas 280 89 936 678 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 627 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 629 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 482 332 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: send receive netsend netreceive cordless communication
+network TCP/IP UDP internet;
+#X restore 16 633 pd META;
+#X obj 8 266 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 13 266 "pack" object;
+#X msg 96 543 2;
+#X msg 45 521 1;
+#X obj 45 588 print mylist;
+#X text 12 20 DESCRIPTION: Using pack \, unpack and route with lists
+;
+#X text 19 75 In the Pure-Data introduction we discussed the three
+different types of data in PD. These are floats (numbers) \, symbols
+(words) and lists (groups of floats and words). Floats and symbols
+are known as atoms. Atoms are single elements \, they do not contain
+spaces or other special characters. Atoms can be grouped into lists.
+;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 13 46 What is a list?;
+#X msg 145 216 list one two three;
+#X obj 145 239 print this is a list;
+#X text 19 155 Lists can be created in a number of ways \, but we are
+going to cover the two most common ways of creating lists. The most
+simple way to create a list is to type the list into a message box
+starting with the word (symbol) "list":;
+#X text 19 295 The "pack" object is the second most common way to create
+a list. "pack" allows you to take individual atoms and combine them
+into a single list. "pack" accepts a number of arguments. Each argument
+defines the type of atom in the resulting list. The "f" argument creates
+an inlet that accepts float atoms. The "s" argument creates an inlet
+accepts symbol atoms. The number of arguments is the same as the number
+of elements in the resultant list.;
+#X text 19 405 "pack" is the first object we are going to learn that
+has a "cold" inlet. Some control objects in PD have "hot" and "cold"
+inlets. When you send a message to a "cold" inlet the object does not
+generate any output (it does not send any messages). When "hot" inlets
+get messages then the object does generate output. The leftmost inlet
+is always the "hot" inlet and all other inlets are "cold" or in some
+cases all inlets are "hot";
+#X text 75 521 sets the first atom "1" and then sends the list;
+#X text 132 543 sets the second atom "2";
+#X obj 45 566 pack f f;
+#X text 459 45 Note that if you do not set the second and onwards atoms
+via thier "cold" inlets and you generate the list by setting the first
+atom via the "hot" inlet then all float atoms will be set to "0" and
+all symbol atoms will be set to "symbol" in the resultant list.;
+#X obj 448 126 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 126 "unpack" object;
+#X obj 596 241 unpack f f f;
+#X msg 596 219 list 1 2 3;
+#X floatatom 596 294 5 0 0 0 - - -;
+#X floatatom 635 277 5 0 0 0 - - -;
+#X floatatom 675 262 5 0 0 0 - - -;
+#X text 639 293 First Atom;
+#X text 678 277 Second Atom;
+#X text 718 261 Third Atom;
+#X text 459 156 The "unpack" object is very similar to the "pack" object
+except it works in reverse. "unpack" takes a list and splits it up
+into a number of atoms. It uses the same arguments as "pack" but generates
+outlets rather than inlets.;
+#X obj 448 319 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 319 "route" object;
+#X text 459 349 The "route" object sorts lists based on the first atom
+of the list. It as a number of float or symbol arguments. For each
+argument "route" creates one outlet. "route" also creates one additional
+rightmost outlet for rejections. For each list route gets it compares
+the first atom to all its arguments. If the first atom matches one
+of the arguments it the rest of the list \, without the first atom
+\, gets send through the outlet corresponding to that argument. If
+the first atom of the list does not match any arguments the entire
+list \, including the first atom \, gets sent out the rejection outlet.
+;
+#X msg 688 493 rejection 1;
+#X obj 685 553 print rejection;
+#X msg 538 493 o1 2;
+#X msg 613 493 o2 3;
+#X obj 613 531 route o1 o2;
+#X obj 613 593 print o1;
+#X obj 649 573 print o2;
+#X text 12 8 7 Intermediate Pure-Data - Working with lists;
+#X connect 6 0 20 1;
+#X connect 7 0 20 0;
+#X connect 13 0 14 0;
+#X connect 20 0 8 0;
+#X connect 24 0 26 0;
+#X connect 24 1 27 0;
+#X connect 24 2 28 0;
+#X connect 25 0 24 0;
+#X connect 36 0 40 0;
+#X connect 38 0 40 0;
+#X connect 39 0 40 0;
+#X connect 40 0 41 0;
+#X connect 40 1 42 0;
+#X connect 40 2 37 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-8.pd b/externals/gridflow/doc/tutorials/pure-data-8.pd
new file mode 100644
index 00000000..aa95c087
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-8.pd
@@ -0,0 +1,89 @@
+#N canvas 238 94 891 621 10;
+#X obj 8 6 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 577 cnv 15 870 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 668 579 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 482 332 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: send receive netsend netreceive cordless communication
+network TCP/IP UDP internet;
+#X restore 16 583 pd META;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 12 20 DESCRIPTION: nested patches using abstractions & subpatches
+;
+#X text 13 46 What is an abstraction?;
+#X text 23 76 Since objects are very simple in Pure-Data doing complex
+tasks often leads to very complex patches. Often it is useful to use
+the same bit of patching you do for one project for another. Pure-Data
+has a facility to "nest" \, that is to take a number of objects in
+a collection and place them into a group that looks like a single object.
+This is also handy to make a complex patch look simple and clear by
+hiding the nitty-gritty details. There are two types of these collections
+\, the subpatch and the abstraction.;
+#X obj 8 216 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 13 216 The subpatch;
+#X text 23 246 Subpatches are collections of objects that get "hidden"
+inside a container that looks like a normal PD object. Subpatches are
+created by creating an object box \, and typing the word "pd" followed
+by whatever you want to describe the contents of the subpatch. Subpatches
+are saved at the same time as the "parent" patch. Here is a subpatch:
+;
+#N canvas 0 22 460 310 subpatch 0;
+#X obj 30 34 inlet;
+#X obj 30 77 outlet;
+#X text 99 35 This is inside the subpatch.;
+#X connect 0 0 1 0;
+#X restore 178 359 pd subpatch;
+#X floatatom 178 336 5 0 0 0 - - -;
+#X floatatom 178 387 5 0 0 0 - - -;
+#X text 23 416 To open a subpatch simply click once on the subpatch
+in run-mode or control-click (or right-click) and select open in edit-mode.
+Both subpatches and abstractions communicate with the parent patch
+through special objects called "inlet" and "outlet" for each "inlet"
+in a subpatch or abstraction an inlet is created on the subpatch. This
+example has one inlet and one outlet.;
+#X obj 448 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 46 The abstraction;
+#X text 463 76 Abstractions are very similar to subpatches. They are
+collections of objects that are "hidden" inside PD objects \, and they
+both use "inlet" and "outlet" objects to communicate with the parent
+patch. The difference between subpatches and abstractions is that abstractions
+are saved in a separate file from the parent. This means when you save
+the parent patch containing abstractions the abstractions are not saved.
+The abstractions are saved as separate files so that they can be used
+in multiple patches. A second feature that exists in abstractions and
+not in subpatches is the ability to use arguments. "send" and "receive"
+can be used inside abstractions to send data without connections (patch-cords).
+;
+#X obj 682 253 r output;
+#X obj 682 277 print;
+#X obj 564 253 abstraction 1 2;
+#X text 463 316 To create an abstraction all you need to do is create
+a new PD patch ("File" -> "New"). Create the contents of the abstraction
+and then save it in the same directory as the patch you want to use
+it in. In this case the abstraction is saved as "abstraction.pd". Once
+saved you can easily embed the abstraction simply by typing its name
+\, without the .pd extension \, into an object box.;
+#X obj 448 416 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 453 416 Dollarsign in object boxes;
+#X text 463 446 If you open the above example you will see that the
+familiar "pack" object has a number of "$" arguments. The "$" arguments
+in a object box differ entirely from the "$" used in message objects.
+When you use a "$" in an object box inside an abstraction the values
+get replaced with the arguments to that abstraction. In the case above
+the "pack" object's first argument "$1" gets replaced with the first
+argument of the abstraction "1" "$2" gets replaced with the second
+argument "2".;
+#X text 23 536 For more info see: 12.PART2.subpatch.pd 14.dollersign.pd
+;
+#X text 12 8 8 Intermediate Pure-Data - Using abstractions and subpacthes
+;
+#X connect 11 0 13 0;
+#X connect 12 0 11 0;
+#X connect 18 0 19 0;
diff --git a/externals/gridflow/doc/tutorials/pure-data-9.pd b/externals/gridflow/doc/tutorials/pure-data-9.pd
new file mode 100644
index 00000000..e5188ee0
--- /dev/null
+++ b/externals/gridflow/doc/tutorials/pure-data-9.pd
@@ -0,0 +1,43 @@
+#N canvas 291 108 450 562 10;
+#X obj 8 6 cnv 15 430 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X obj 8 517 cnv 15 430 30 empty empty empty 20 12 0 14 -233017 -66577
+0;
+#X text 228 519 Copyright Ben Bogart 2005 \; (See COPYING.TXT for details)
+;
+#N canvas 0 22 486 336 META 0;
+#X text 12 5 CATEGORY: tutorial;
+#X text 12 15 KEYWORDS: GOP graph parent abstraction nesting ui interface
+;
+#X restore 16 523 pd META;
+#X obj 8 46 cnv 15 430 15 empty empty empty 20 12 0 14 -179884 -66577
+0;
+#X text 12 20 DESCRIPTION: Using Graph on Parent abstractions;
+#X text 13 46 What is Graph on Parent?;
+#X text 13 76 Graph on Parent is a feature of PD that allows you to
+show the GUI objects contained in an abstraction on the parent patch.
+This means that you can create abstractions that not only include a
+collection of objects but can also include a user interface. To use
+graph on parent you simply need to create an abstraction the usual
+way but before saving it you need should Control-Click (Right-Click)
+on the background (white area) in the abstraction and choose "properties".
+From the properties menu check the "graph on parent" option. Now when
+you save the patch and embed it in a second patch all GUI objects will
+be visible.;
+#X obj 154 250 gop_abstraction;
+#X text 13 331 In this simple example there is only one GUI object
+\, a slider. Inside the abstraction the slider is connected to an inlet
+and an outlet. If you move the slider you can see the result in the
+outlet. If you set a value in the inlet with the number GUI you can
+see the position of the slider change.;
+#X floatatom 154 231 5 0 0 0 - - -;
+#X floatatom 154 297 5 0 0 0 - - -;
+#X text 13 421 Note you can change the size of the abstractions bounding
+box by Control-Click (Right-Click) on the abstraction and choose "properties".
+The size of the bounding-box is specified by the "screen width" and
+"screen height".;
+#X text 13 487 For more info see:;
+#X text 12 8 9 Intermediate Pure-Data - Using GUI's in abstractions
+;
+#X connect 8 0 11 0;
+#X connect 10 0 8 0;