Preface |
|
xi | |
|
|
1 | (8) |
|
Sketching and Prototyping |
|
|
2 | (1) |
|
|
3 | (1) |
|
|
3 | (2) |
|
|
5 | (1) |
|
|
5 | (4) |
|
|
9 | (8) |
|
|
9 | (1) |
|
|
9 | (1) |
|
|
10 | (3) |
|
Example 2-1 Draw an Ellipse |
|
|
11 | (1) |
|
|
12 | (1) |
|
|
13 | (1) |
|
|
14 | (1) |
|
|
15 | (2) |
|
|
17 | (24) |
|
|
18 | (1) |
|
Example 3-1 Create a Canvas |
|
|
18 | (1) |
|
|
19 | (1) |
|
|
19 | (6) |
|
|
21 | (1) |
|
Example 3-4 Draw Basic Shapes |
|
|
21 | (1) |
|
Example 3-5 Draw a Rectangle |
|
|
22 | (1) |
|
Example 3-6 Draw an Ellipse |
|
|
22 | (1) |
|
Example 3-7 Draw Part of an Ellipse |
|
|
23 | (1) |
|
Example 3-8 Draw with Degrees |
|
|
24 | (1) |
|
Example 3-9 Use angleMode |
|
|
25 | (1) |
|
|
25 | (2) |
|
Example 3-10 Control Your Drawing Order |
|
|
26 | (1) |
|
Example 3-11 Put It in Reverse |
|
|
27 | (1) |
|
|
27 | (2) |
|
Example 3-12 Set Stroke Weight |
|
|
28 | (1) |
|
Example 3-13 Set Stroke Attributes |
|
|
28 | (1) |
|
|
29 | (4) |
|
Example 3-14 Paint with Grays |
|
|
31 | (1) |
|
Example 3-15 Control Fill and Stroke |
|
|
31 | (1) |
|
Example 3-16 Draw with Color |
|
|
32 | (1) |
|
Example 3-17 Set Transparency |
|
|
33 | (1) |
|
|
33 | (3) |
|
Example 3-18 Draw an Arrow |
|
|
34 | (1) |
|
Example 3-19 Close the Gap |
|
|
34 | (1) |
|
Example 3-20 Create Some Creatures |
|
|
35 | (1) |
|
|
36 | (2) |
|
|
38 | (3) |
|
|
41 | (18) |
|
|
41 | (2) |
|
Example 4-1 Reuse the Same Values |
|
|
41 | (1) |
|
Example 4-2 Change Values |
|
|
42 | (1) |
|
|
43 | (1) |
|
|
43 | (1) |
|
Example 4-3 Adjust the Canvas, See What Follows |
|
|
44 | (1) |
|
|
44 | (2) |
|
Example 4-4 Basic Arithmetic |
|
|
45 | (1) |
|
|
46 | (8) |
|
Example 4-5 Do the Same Thing Over and Over |
|
|
47 | (1) |
|
Example 4-6 Use a for Loop |
|
|
47 | (2) |
|
Example 4-7 Flex Your for Loop's Muscles |
|
|
49 | (1) |
|
Example 4-8 Fanning Out the Lines |
|
|
50 | (1) |
|
Example 4-9 Kinking the Lines |
|
|
50 | (1) |
|
Example 4-10 Embed One for Loop in Another |
|
|
51 | (1) |
|
Example 4-11 Rows and Columns |
|
|
51 | (1) |
|
Example 4-12 Pins and Lines |
|
|
52 | (1) |
|
Example 4-13 Halftone Dots |
|
|
53 | (1) |
|
|
54 | (5) |
|
|
59 | (30) |
|
|
59 | (2) |
|
Example 5-1 The draw() Function |
|
|
59 | (1) |
|
Example 5-2 The setup() Function |
|
|
60 | (1) |
|
Example 5-3 setup(), Meet draw() |
|
|
61 | (1) |
|
|
61 | (7) |
|
Example 5-4 Track the Mouse |
|
|
62 | (1) |
|
Example 5-5 The Dot Follows You |
|
|
62 | (1) |
|
Example 5-6 Draw Continuously |
|
|
63 | (1) |
|
Example 5-7 Set Thickness on the Fly |
|
|
64 | (1) |
|
Example 5-8 Easing Does It |
|
|
65 | (2) |
|
Example 5-9 Smooth Lines with Easing |
|
|
67 | (1) |
|
|
68 | (4) |
|
Example 5-10 Click the Mouse |
|
|
68 | (2) |
|
Example 5-11 Detect When Not Clicked |
|
|
70 | (1) |
|
Example 5-12 Multiple Mouse Buttons |
|
|
71 | (1) |
|
|
72 | (6) |
|
Example 5-13 Find the Cursor |
|
|
73 | (1) |
|
Example 5-14 The Bounds of a Circle |
|
|
74 | (1) |
|
Example 5-15 The Bounds of a Rectangle |
|
|
75 | (3) |
|
|
78 | (3) |
|
|
78 | (1) |
|
Example 5-17 Draw Some Letters |
|
|
79 | (1) |
|
Example 5-18 Check for Specific Keys |
|
|
79 | (1) |
|
Example 5-19 Move with Arrow Keys |
|
|
80 | (1) |
|
|
81 | (1) |
|
Example 5-20 Touch the Screen |
|
|
81 | (1) |
|
Example 5-21 Track the Finger |
|
|
82 | (1) |
|
|
82 | (2) |
|
Example 5-22 Map Values to a Range |
|
|
82 | (1) |
|
Example 5-23 Map with the map() Function |
|
|
83 | (1) |
|
|
84 | (5) |
|
6 Translate, Rotate, Scale |
|
|
89 | (14) |
|
|
89 | (2) |
|
Example 6-1 Translating Location |
|
|
90 | (1) |
|
Example 6-2 Multiple Translations |
|
|
91 | (1) |
|
|
91 | (5) |
|
Example 6-3 Corner Rotation |
|
|
92 | (1) |
|
Example 6-4 Center Rotation |
|
|
93 | (1) |
|
Example 6-5 Translation, Then Rotation |
|
|
93 | (1) |
|
Example 6-6 Rotation, Then Translation |
|
|
94 | (1) |
|
Example 6-7 An Articulating Arm |
|
|
95 | (1) |
|
|
96 | (2) |
|
|
97 | (1) |
|
Example 6-9 Keeping Strokes Consistent |
|
|
97 | (1) |
|
|
98 | (1) |
|
Example 6-10 Isolating Transformations |
|
|
98 | (1) |
|
Robot 4 Translate, Rotate, Scale |
|
|
99 | (4) |
|
|
103 | (18) |
|
|
104 | (6) |
|
Example 7-1 Load an Image |
|
|
104 | (1) |
|
Example 7-2 Load More Images |
|
|
105 | (1) |
|
Example 7-3 Mousing Around with Images |
|
|
106 | (2) |
|
Example 7-4 Transparency with a GIF |
|
|
108 | (1) |
|
Example 7-5 Transparency with a PNG |
|
|
108 | (1) |
|
Example 7-6 Displaying an SVG Image |
|
|
109 | (1) |
|
|
110 | (2) |
|
Example 7-7 Demonstrating Asynchronicity |
|
|
110 | (1) |
|
Example 7-8 Loading with a Callback |
|
|
111 | (1) |
|
|
112 | (5) |
|
Example 7-9 Drawing with Fonts |
|
|
112 | (1) |
|
Example 7-10 Use a Webfont |
|
|
113 | (1) |
|
Example 7-11 Load a Custom Font |
|
|
114 | (1) |
|
Example 7-12 Set the Text Stroke and Fill |
|
|
115 | (1) |
|
Example 7-13 Draw Text in a Box |
|
|
116 | (1) |
|
Example 7-13 Store Text in a Variable |
|
|
116 | (1) |
|
|
117 | (4) |
|
|
121 | (18) |
|
|
121 | (1) |
|
Example 8-1 See the Frame Rate |
|
|
121 | (1) |
|
Example 8-2 Set the Frame Rate |
|
|
122 | (1) |
|
|
122 | (4) |
|
|
123 | (1) |
|
|
124 | (1) |
|
Example 8-5 Bounce Off the Wall |
|
|
125 | (1) |
|
|
126 | (1) |
|
Example 8-6 Calculate Tween Positions |
|
|
126 | (1) |
|
|
127 | (3) |
|
Example 8-7 Generate Random Values |
|
|
128 | (1) |
|
Example 8-8 Draw Randomly |
|
|
128 | (1) |
|
Example 8-9 Move Shapes Randomly |
|
|
129 | (1) |
|
|
130 | (1) |
|
|
130 | (1) |
|
Example 8-11 Triggering Timed Events |
|
|
130 | (1) |
|
|
131 | (5) |
|
Example 8-12 Sine Wave Values |
|
|
133 | (1) |
|
Example 8-13 Sine Wave Movement |
|
|
133 | (1) |
|
Example 8-14 Circular Motion |
|
|
134 | (1) |
|
|
135 | (1) |
|
|
136 | (3) |
|
|
139 | (14) |
|
|
140 | (2) |
|
Example 9-1 Roll the Dice |
|
|
140 | (1) |
|
Example 9-2 Another Way to Roll |
|
|
141 | (1) |
|
|
142 | (6) |
|
|
142 | (1) |
|
Example 9-4 Two's Company |
|
|
143 | (1) |
|
Example 9-5 An Owl Function |
|
|
144 | (2) |
|
Example 9-6 Increasing the Surplus Population |
|
|
146 | (1) |
|
Example 9-7 Owls of Different Sizes |
|
|
147 | (1) |
|
|
148 | (1) |
|
Example 9-8 Return a Value |
|
|
148 | (1) |
|
|
149 | (4) |
|
|
153 | (12) |
|
|
153 | (1) |
|
|
154 | (5) |
|
|
159 | (3) |
|
Example 10-1 Make an Object |
|
|
159 | (1) |
|
Example 10-2 Make Multiple Objects |
|
|
160 | (2) |
|
|
162 | (3) |
|
|
165 | (16) |
|
|
165 | (3) |
|
Example 11-1 Many Variables |
|
|
165 | (1) |
|
Example 11-2 Too Many Variables |
|
|
166 | (1) |
|
Example 11-3 Arrays, Not Variables |
|
|
167 | (1) |
|
|
168 | (3) |
|
Example 11-4 Declare and Assign an Array |
|
|
169 | (1) |
|
Example 11-5 Assigning to an Array in One Go |
|
|
170 | (1) |
|
Example 11-6 Revisiting the First Example |
|
|
170 | (1) |
|
|
171 | (3) |
|
Example 11-7 Filling an Array in a for Loop |
|
|
171 | (1) |
|
Example 11-8 Track Mouse Movements |
|
|
172 | (2) |
|
|
174 | (3) |
|
Example 11-9 Managing Many Objects |
|
|
175 | (1) |
|
Example 11-10 Sequences of Images |
|
|
176 | (1) |
|
|
177 | (4) |
|
|
181 | (20) |
|
|
181 | (1) |
|
|
182 | (5) |
|
Example 12-1 Read the Table |
|
|
183 | (1) |
|
Example 12-2 Draw the Table |
|
|
184 | (1) |
|
Example 12-3 29,740 Cities |
|
|
185 | (2) |
|
|
187 | (4) |
|
Example 12-4 Read a JSON File |
|
|
189 | (1) |
|
Example 12-5 Visualize Data from a JSON File |
|
|
189 | (2) |
|
|
191 | (5) |
|
Example 12-6 Parsing the Weather Data |
|
|
194 | (1) |
|
Example 12-7 Chaining Methods |
|
|
195 | (1) |
|
|
196 | (5) |
|
|
201 | (10) |
|
|
202 | (4) |
|
Example 13-1 Play a Sample |
|
|
202 | (1) |
|
Example 13-2 Listen to a Mic |
|
|
203 | (2) |
|
Example 13-3 Create a Sine Wave |
|
|
205 | (1) |
|
|
206 | (5) |
|
Example 13-4 Access the Webcam |
|
|
207 | (1) |
|
Example 13-5 Create a Slider |
|
|
208 | (1) |
|
Example 13-6 Create an Input Box |
|
|
208 | (3) |
A Coding Tips |
|
211 | (4) |
B Order of Operations |
|
215 | (2) |
C Variable Scope |
|
217 | (4) |
Index |
|
221 | |