Commit 82e3c588 by Jonathan Wilkes

### update ds tutorials

parent 187602fa
 #N struct drawtut-one float x float y; #N struct drawtut-one float x float y; #N canvas 1 25 495 603 10; #N canvas 2 25 495 603 10; #X text 0 1 New Drawing Commands: draw; #X text 0 1 New Drawing Commands: draw; #X text 0 1 __________________________; #X text 0 1 __________________________; #X obj 53 47 struct drawtut-one float x float y; #X obj 53 47 struct drawtut-one float x float y; #X text 53 67 The first argument "drawtut-one" is a name we will associated #X text 53 185 Now let's define a shape to associate with this [struct]: with our shape.; #X text 53 98 The other arguments define data to associate with this data structure. The fields "x" and "y" are names for data fields \, and the word "float" that precedes each one tells Pd that each one should hold a floating point number.; #X text 53 195 Now let's define a shape to associate with this [struct]: ; ; #X text 53 241 This object starts with the word "draw" followed by #X text 53 231 This object starts with the word "draw" followed by the name of an svg shape-- "rect" here. Any arguments after that are the name of an svg shape-- "rect" here. Any arguments after that are coordinates and other data telling Pd how to draw the shape. For convenience coordinates and other data telling Pd how to draw the shape. For convenience \, coordinates are relative to the x/y fields.; \, coordinates are relative to the x/y fields.; #X text 53 369 So how do we draw something? We just type the name we #X text 53 359 So how do we draw something? We just type the name we gave to the [struct] into an object box. This will create an object gave to the [struct] into an object box. This will create an object \, referred to in Pd as a "scalar". It will have data for "x" and "y" \, referred to in Pd as a "scalar". It will have data for "x" and "y" fields and will use the info in our [draw] object to draw itself on fields and will use the info in our [draw] object to draw itself on the canvas.; the canvas.; #X text 53 439 Type our [struct] name "drawtut-one" in the box below: #X text 53 429 Type our [struct] name "drawtut-one" in the box below: ; ; #X text 53 152 The field names "x" and "y" are special in Pd. Their #X text 53 142 The field names "x" and "y" are special in Pd. Their values will be associated with the base x/y coordinates of what we values will be associated with the base x/y coordinates of what we draw to represent an object created from the [struct] above.; draw to represent an object created from the [struct] above.; #X text 53 23 Let's draw something! First \, we need a [struct]:; #X text 53 499 That's it! To sum up: once you have a [struct] and some #X text 53 509 That's it! To sum up: once you have a [struct] and some [draw] objects \, you can create a scalar like the one above on any [draw] objects \, you can create a scalar like the one above on any canvas in the running Pd instance. For convenience we created everything canvas in the running Pd instance. For convenience we created everything in the main patch \, but since there's only one [struct] per canvas in the main patch \, but since there's only one [struct] per canvas you typically will want to keep your [struct] and any [draw] objects you typically will want to keep your [struct] and any [draw] objects in their own subpatch.; in their own subpatch.; #X obj 56 463; #X obj 56 453; #X obj 53 219 draw rect 40 40 0 0; #X obj 53 209 draw rect 40 40 0 0; #X text 53 298 Any [draw] object on the same canvas as our [struct] #X text 53 288 Any [draw] object on the same canvas as our [struct] will be used to draw a shape to represent the data structure we've will be used to draw a shape to represent the data structure we've defined here. To keep things organized Pd expects there to be only defined here. To keep things organized Pd expects there to be only one [struct] object per canvas. That way it's simple to know which one [struct] object per canvas. That way it's simple to know which [draw] commands go with which data structure.; [draw] commands go with which data structure.; #X text 178 218 <- rectangle \, 40x40 pixels at offset (0 \, 0); #X text 178 208 <- rectangle \, 40x40 pixels at offset (0 \, 0); #N canvas 291 300 450 300 META 0; #N canvas 291 300 450 300 META 0; #X text 16 26 LICENSE SIBSD; #X text 16 26 LICENSE SIBSD; #X text 16 66 AUTHOR Jonathan Wilkes; #X text 16 66 AUTHOR Jonathan Wilkes; ... @@ -47,3 +40,10 @@ one [struct] object per canvas. That way it's simple to know which ... @@ -47,3 +40,10 @@ one [struct] object per canvas. That way it's simple to know which #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 46 DESCRIPTION introducing the [draw] command; #X text 16 46 DESCRIPTION introducing the [draw] command; #X restore 435 575 pd META; #X restore 435 575 pd META; #X text 53 23 Let's draw something! First we need a [struct]:; #X text 53 67 The first argument "drawtut-one" is a name for our data. ; #X text 53 88 The other arguments define our data fields. The fields "x" and "y" are names for data fields \, and the word "float" that precedes each one tells Pd that each one should hold a floating point number.;
 ... @@ -4,33 +4,33 @@ ... @@ -4,33 +4,33 @@ #X text 0 1 New Drawing Commands: rect; #X text 0 1 New Drawing Commands: rect; #X obj 53 87 struct drawtut-rect float x float y; #X obj 53 87 struct drawtut-rect float x float y; #X text 53 63 Let's start with another [struct]:; #X text 53 63 Let's start with another [struct]:; #X scalar drawtut-rect 56 369 \;; #X scalar drawtut-rect 56 374 \;; #X text 53 115 As stated in the previous tutorial \, all [draw] objects #X text 53 115 As stated in the previous tutorial \, all [draw] objects have the same interface. The first word (called the selector) is always have the same interface. The first word (called the selector) is always "draw". The first argument is the name of the svg shape to draw. Finally "draw". The first argument is the name of the svg shape to draw. Finally \, any arguments after that are coordinate and other data that define \, any arguments after that are coordinate and other data that define how to draw the shape.; how to draw the shape.; #X text 53 475 You can select the scalar like any other Pd object \, #X text 53 480 You can select the scalar like any other Pd object \, move it \, cut/paste it \, and undo/redo any actions you take.; move it \, cut/paste it \, and undo/redo any actions you take.; #X text 53 23 So what can we draw with [draw]? All shapes from the #X text 53 23 So what can we draw with [draw]? All shapes from the svg specification. These are "rect" \, "polygon" \, "polyline" \, "ellipse" svg specification. These are "rect" \, "polygon" \, "polyline" \, "ellipse" \, "circle" \, "line" \, and "path".; \, "circle" \, "line" \, and "path".; #X text 53 505 Also note that you can define a [struct] without any #X text 53 510 Also note that you can define a [struct] without any "x" or "y" fields. This is because data structures may be used for "x" or "y" fields. This is because data structures may be used for purposes other than visualizing data. But if you do draw objects with purposes other than visualizing data. But if you do draw objects with x/y fields \, it will draw the scalar at 0/0 and you won't be able x/y fields \, it will draw the scalar at 0/0 and you won't be able to move it with the mouse in "edit mode".; to move it with the mouse in "edit mode".; #X text 53 336 Below is a scalar defined by the [struct] above. As #X text 53 341 Below is a scalar defined by the [struct] above. As you can tell it's just two rectangles. Pretty boring stuff so far... you can tell it's just two rectangles. Pretty boring stuff so far... ; ; #X obj 53 239 draw rect 100 40 0 0; #X obj 53 244 draw rect 100 40 0 0; #X obj 193 239 draw rect 40 100 120 0; #X obj 193 244 draw rect 40 100 120 0; #X text 53 265 You can use positive and negative numbers for the first #X text 53 270 You can use positive and negative numbers for the first two arguments \, but only positive numbers for the width and height. two arguments \, but only positive numbers for the width and height. Coordinates and dimensions can be integers or floats. (One exception Coordinates and dimensions can be integers or floats. (One exception are "flag" values in path arcs but these will just be converted automatically are "flag" values in path arcs but these will just be converted automatically to integers.); to integers.); #X text 53 179 In the case of "rect" \, there are only four coordinates. #X text 53 184 In the case of "rect" \, there are only four coordinates. The first two are the width and height of the rectangle. The third The first two are the width and height of the rectangle. The third and fourth arguments are the x/y coordinates of the top-left corner and fourth arguments are the x/y coordinates of the top-left corner of the rectangle. That's it!; of the rectangle. That's it!; ... ...
 #N struct drawtut-attr float x float y; #N struct drawtut-attr float x float y; #N canvas 1 25 517 671 10; #N canvas 2 25 517 671 10; #X text 0 1 New Drawing Commands: attributes; #X text 0 1 New Drawing Commands: attributes; #X text 0 1 ________________________________; #X text 0 1 ________________________________; #X text 53 23 Our shapes are pretty boring so far. Black lines around #X text 53 23 Our shapes are pretty boring so far. Black lines around ... @@ -30,11 +30,9 @@ by hexadecimal values like "#ccddcc" or "#68ef68". (You can also use ... @@ -30,11 +30,9 @@ by hexadecimal values like "#ccddcc" or "#68ef68". (You can also use the 3-digit shorthands if you wish.); the 3-digit shorthands if you wish.); #X text 53 526 * rgb color values using 3 float arguments. Each float #X text 53 526 * rgb color values using 3 float arguments. Each float should be in the range 0-255.; should be in the range 0-255.; #X text 53 556 * rgba \, with 4 float arguments. Same as above with the fourth argument specifying opacity.; #X floatatom 244 253 5 0 0 0 - - -, f 5; #X floatatom 244 253 5 0 0 0 - - -, f 5; #X msg 244 274 fill 0 \\$1 0; #X msg 244 274 fill 0 \\$1 0; #X text 54 597 You can set attributes like "fill" automatically by #X text 54 596 You can set attributes like "fill" automatically by using a [loadbang] message. Notice that attributes will be the same using a [loadbang] message. Notice that attributes will be the same for all scalars created from this [struct]. Later you will see how for all scalars created from this [struct]. Later you will see how to set attributes to be different for each scalar.; to set attributes to be different for each scalar.; ... @@ -47,7 +45,9 @@ to set attributes to be different for each scalar.; ... @@ -47,7 +45,9 @@ to set attributes to be different for each scalar.; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 46 DESCRIPTION basic attributes for the [draw] command; #X text 16 46 DESCRIPTION basic attributes for the [draw] command; #X restore 450 639 pd META; #X restore 450 639 pd META; #X connect 8 0 19 0; #X text 53 560 Note: there are also hsl \, hcl \, and lab colors but #X connect 15 0 16 0; the interface isn't stable yet.; #X connect 16 0 19 0; #X connect 8 0 18 0; #X connect 18 0 19 0; #X connect 14 0 15 0; #X connect 15 0 18 0; #X connect 17 0 18 0;
 #N struct drawtut-attr-cont float x float y; #N struct drawtut-attr-cont float x float y; #N canvas 1 25 638 671 10; #N canvas 2 25 638 671 10; #X msg 93 112 fill red; #X msg 93 112 fill red; #X text 0 1 New Drawing Commands: attributes (continued); #X text 0 1 New Drawing Commands: attributes (continued); #X text 0 1 ____________________________________________; #X text 0 1 ____________________________________________; ... @@ -21,30 +21,30 @@ the appearance of a shape:; ... @@ -21,30 +21,30 @@ the appearance of a shape:; #X text 164 291 y value for rounded rectangle corner; #X text 164 291 y value for rounded rectangle corner; #X text 214 317 stroke color. 1 symbol \, 3 floats (rgb) \, or 4 floats #X text 214 317 stroke color. 1 symbol \, 3 floats (rgb) \, or 4 floats (rgba); (rgba); #X text 274 344 list of numbers to specify dash lengths; #X text 278 374 list of numbers to specify dash lengths; #X msg 140 371 stroke-linecap 0; #X msg 144 401 stroke-linecap 0; #X text 254 371 for ends of open subpaths. 0 = butt \, 1 = round \, #X text 258 401 for ends of open subpaths. 0 = butt \, 1 = round \, 2 = square; 2 = square; #X text 264 399 shape of path corners. 0 = miter \, 1 = round \, 2 #X text 268 429 shape of path corners. 0 = miter \, 1 = round \, 2 = bevel; = bevel; #X text 286 425 limit miter length; #X text 290 455 limit miter length; #X text 286 452 opacity for the stroke. float in range 0-1; #X text 290 482 opacity for the stroke. float in range 0-1; #X text 286 478 width of the stroke.; #X text 261 343 width of the stroke.; #X msg 146 398 stroke-linejoin 0; #X msg 150 428 stroke-linejoin 0; #X msg 151 425 stroke-miterlimit 0; #X msg 155 455 stroke-miterlimit 0; #X msg 155 452 stroke-opacity 0.4; #X msg 159 482 stroke-opacity 0.4; #X text 286 556 affine transformation on the object.; #X text 286 556 affine transformation on the object.; #X msg 158 479 stroke-width 10; #X msg 133 344 stroke-width 10; #X floatatom 161 511 5 0 0 0 - - -, f 5; #X floatatom 161 511 5 0 0 0 - - -, f 5; #X msg 161 556 transform skewx \\$1; #X msg 161 556 transform skewx \\$1; #X text 275 600 Read more about svg attributes here:; #X text 275 600 Read more about svg attributes here:; #X obj 275 621 pddp/pddplink http://www.w3.org/TR/SVG11/painting.html #X obj 275 621 pddp/pddplink http://www.w3.org/TR/SVG11/painting.html ; ; #X msg 107 196 fill-rule 0; #X msg 107 196 fill-rule 0; #X msg 134 344 stroke-dasharray 5 10; #X msg 138 374 stroke-dasharray 5 10; #X msg 127 317 stroke purple; #X msg 127 317 stroke purple; #X obj 127 141 hsl 128 15 0 1 0 0 empty empty empty -2 -8 0 10 -262144 #X obj 127 141 hsl 128 15 0 1 0 0 empty empty empty -2 -8 0 10 -262144 -1 -1 0 1; -1 -1 6600 1; #X text 107 141 0; #X text 107 141 0; #X text 268 141 1; #X text 268 141 1; #X text 25 348 (scalar); #X text 25 348 (scalar); ... ...
 ... @@ -15,10 +15,6 @@ boxes with commas separating each attribute:; ... @@ -15,10 +15,6 @@ boxes with commas separating each attribute:; saved as the "x" and "y" fields for each scalar. Each scalar has its saved as the "x" and "y" fields for each scalar. Each scalar has its own values for "x" and "y"-- that's we can put the two scalars above own values for "x" and "y"-- that's we can put the two scalars above at separate locations in the patch.; at separate locations in the patch.; #X text 52 434 We can define more data fields than just "x" and "y". Later we will use new fields to associate a scalar's data with the svg attributes \, which will let use change the visual appearance of each scalar.; #X text 228 280 <- Create another scalar in the empty object box by #X text 228 280 <- Create another scalar in the empty object box by typing the struct name "drawtut-attr-saving" into it.; typing the struct name "drawtut-attr-saving" into it.; #X obj 53 153 draw rect 50 50 0 0; #X obj 53 153 draw rect 50 50 0 0; ... @@ -30,5 +26,9 @@ typing the struct name "drawtut-attr-saving" into it.; ... @@ -30,5 +26,9 @@ typing the struct name "drawtut-attr-saving" into it.; #X text 16 46 DESCRIPTION specifying display attributes with the [draw] #X text 16 46 DESCRIPTION specifying display attributes with the [draw] command; command; #X restore 573 520 pd META; #X restore 573 520 pd META; #X text 52 434 We can define more data fields than just "x" and "y". Later we will use new fields to associate a scalar's data with the svg attributes. That allows us to change the visual appearance of each scalar.; #X connect 3 0 6 0; #X connect 3 0 6 0; #X connect 6 0 11 0; #X connect 6 0 10 0;
 ... @@ -29,7 +29,6 @@ past the end point.; ... @@ -29,7 +29,6 @@ past the end point.; #X text 105 138 butt; #X text 105 138 butt; #X text 173 138 rounded; #X text 173 138 rounded; #X text 258 138 square; #X text 258 138 square; #X msg 53 107 stroke blue \, stroke-width 15; #N canvas 290 275 450 300 META 0; #N canvas 290 275 450 300 META 0; #X text 16 26 LICENSE SIBSD; #X text 16 26 LICENSE SIBSD; #X text 16 66 AUTHOR Jonathan Wilkes; #X text 16 66 AUTHOR Jonathan Wilkes; ... @@ -37,9 +36,10 @@ past the end point.; ... @@ -37,9 +36,10 @@ past the end point.; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 46 DESCRIPTION drawing a line with the [draw] command; #X text 16 46 DESCRIPTION drawing a line with the [draw] command; #X restore 567 601 pd META; #X restore 567 601 pd META; #X connect 0 0 21 0; #X msg 53 107 stroke blue \, stroke-width 25; #X connect 0 0 22 0; #X connect 10 0 5 0; #X connect 10 0 5 0; #X connect 15 0 10 0; #X connect 15 0 10 0; #X connect 16 0 10 0; #X connect 16 0 10 0; #X connect 17 0 10 0; #X connect 17 0 10 0; #X connect 21 0 5 0; #X connect 22 0 5 0;
 ... @@ -9,7 +9,7 @@ have any effect.; ... @@ -9,7 +9,7 @@ have any effect.; #X text 53 23 Circles are another simple shape.; #X text 53 23 Circles are another simple shape.; #X obj 53 57 struct drawtut-circle float x float y; #X obj 53 57 struct drawtut-circle float x float y; #X scalar drawtut-circle 157 283 \;; #X scalar drawtut-circle 157 283 \;; #X text 248 270 <- a circle; #X text 268 273 <- a circle; #X msg 53 117 fill yellow; #X msg 53 117 fill yellow; #X msg 228 117 stroke-width \\$1; #X msg 228 117 stroke-width \\$1; #X floatatom 228 93 5 0 0 0 - - -, f 5; #X floatatom 228 93 5 0 0 0 - - -, f 5; ... ...
 #N struct drawtut-ellipse float x float y; #N struct drawtut-ellipse float x float y; #N canvas 3 25 509 498 10; #N canvas 1 25 509 498 10; #X msg 141 117 stroke blue; #X msg 141 117 stroke blue; #X msg 54 117 fill yellow; #X msg 54 117 fill yellow; #X msg 228 117 stroke-width \\$1; #X msg 228 117 stroke-width \\$1; ... ...
 #N struct drawtut-path float x float y; #N struct drawtut-path float x float y; #N canvas 1 25 850 556 10; #N canvas 2 25 850 556 10; #X text 0 1 New Drawing Commands: path; #X text 0 1 New Drawing Commands: path; #X text 1 1 __________________________; #X text 1 1 __________________________; #X text 53 23 Paths are complex drawings.; #X text 53 23 Paths are complex drawings.; ... ...
 #N struct drawtut-transform float x float y; #N struct drawtut-transform float x float y; #N canvas 22 32 867 625 10; #N canvas 1 25 867 625 10; #X text 0 1 New Drawing Commands: transform; #X text 0 1 New Drawing Commands: transform; #X text 1 1 _______________________________; #X text 1 1 _______________________________; #X text 53 23 All [draw] objects understand the "transform" message. #X text 53 23 All [draw] objects understand the "transform" message. ... ...
 #N struct drawtut-group float x float y; #N struct drawtut-group float x float y; #N canvas 2 51 648 468 10; #N canvas 2 25 648 468 10; #X scalar drawtut-group 54 159 \;; #X scalar drawtut-group 54 159 \;; #X text 1 1 ___________________________; #X text 1 1 ___________________________; #X text 0 1 New Drawing Commands: group; #X text 0 1 New Drawing Commands: group; ... ...
 ... @@ -37,6 +37,7 @@ gets sent to the outlet of the corresponding [draw] object.; ... @@ -37,6 +37,7 @@ gets sent to the outlet of the corresponding [draw] object.; #X text 16 46 DESCRIPTION mouse events for the [draw] command; #X text 16 46 DESCRIPTION mouse events for the [draw] command; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X text 16 6 KEYWORDS tutorial data_structure draw gui; #X restore 506 578 pd META; #X restore 506 578 pd META; #X text 53 525 drag - convenience function for click-dragging; #X connect 3 0 10 0; #X connect 3 0 10 0; #X connect 7 0 24 0; #X connect 7 0 24 0; #X connect 8 0 22 0; #X connect 8 0 22 0; ... ...
 #N struct drawtut-animation float x float y; #N struct drawtut-animation float x float y; #N canvas 14 48 537 571 10; #N canvas 1 25 537 571 10; #X scalar drawtut-animation 47 309 \;; #X scalar drawtut-animation 47 309 \;; #X obj 47 131 struct drawtut-animation float x float y; #X obj 47 131 struct drawtut-animation float x float y; #X text 0 1 New Drawing Commands: animation; #X text 0 1 New Drawing Commands: animation; ... ...
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!