Preface |
|
xi | |
1 Hello |
|
1 | (6) |
|
Sketching and Prototyping |
|
|
2 | (1) |
|
|
2 | (1) |
|
|
3 | (1) |
|
|
4 | (1) |
|
|
5 | (2) |
2 Starting to Code |
|
7 | (6) |
|
|
8 | (2) |
|
Example 2-1: Draw an Ellipse |
|
|
9 | (1) |
|
Example 2-2: Make Circles |
|
|
9 | (1) |
|
|
10 | (1) |
|
|
11 | (1) |
|
|
11 | (1) |
|
|
11 | (2) |
3 Draw |
|
13 | (22) |
|
|
13 | (1) |
|
Example 3-1: Draw a Window |
|
|
14 | (1) |
|
Example 3-2: Draw a Point |
|
|
14 | (1) |
|
|
14 | (6) |
|
|
16 | (1) |
|
Example 3-4: Draw Basic Shapes |
|
|
16 | (1) |
|
Example 3-5: Draw a Rectangle |
|
|
16 | (1) |
|
Example 3-6: Draw an Ellipse |
|
|
17 | (1) |
|
Example 3-7: Draw Part of an Ellipse |
|
|
18 | (1) |
|
Example 3-8: Draw with Degrees |
|
|
19 | (1) |
|
|
20 | (1) |
|
Example 3-9: Control Your Drawing Order |
|
|
20 | (1) |
|
Example 3-10: Put It in Reverse |
|
|
20 | (1) |
|
|
21 | (1) |
|
Example 3-11: Set Stroke Weight |
|
|
21 | (1) |
|
Example 3-12: Set Stroke Caps |
|
|
21 | (1) |
|
Example 3-13: Set Stroke Joins |
|
|
22 | (1) |
|
|
22 | (1) |
|
Example 3-14: On the Corner |
|
|
23 | (1) |
|
|
23 | (5) |
|
Example 3-15: Paint with Grays |
|
|
25 | (1) |
|
Example 3-16: Control Fill and Stroke |
|
|
25 | (1) |
|
Example 3-17: Draw with Color |
|
|
26 | (1) |
|
Example 3-18: Set Transparency |
|
|
27 | (1) |
|
|
28 | (2) |
|
Example 3-19: Draw an Arrow |
|
|
28 | (1) |
|
Example 3-20: Close the Gap |
|
|
28 | (1) |
|
Example 3-21: Create Some Creatures |
|
|
29 | (1) |
|
|
30 | (2) |
|
|
32 | (3) |
4 Variables |
|
35 | (14) |
|
|
35 | (1) |
|
Example 4-1: Reuse the Same Values |
|
|
35 | (1) |
|
Example 4-2: Change Values |
|
|
36 | (1) |
|
|
36 | (2) |
|
|
38 | (1) |
|
Example 4-3: Adjust the Size, See What Follows |
|
|
38 | (1) |
|
|
38 | (2) |
|
Example 4-4: Basic Arithmetic |
|
|
39 | (1) |
|
|
40 | (7) |
|
Example 4-5: Do the Same Thing Over and Over |
|
|
41 | (1) |
|
Example 4-6: Use a for Loop |
|
|
41 | (2) |
|
Example 4-7: Flex Your for Loop's Muscles |
|
|
43 | (1) |
|
Example 4-8: Fanning Out the Lines |
|
|
43 | (1) |
|
Example 4-9: Kinking the Lines |
|
|
44 | (1) |
|
Example 4-10: Embed One for Loop in Another |
|
|
44 | (1) |
|
Example 4-11: Rows and Columns |
|
|
45 | (1) |
|
Example 4-12: Pins and Lines |
|
|
46 | (1) |
|
Example 4-13: Halftone Dots |
|
|
46 | (1) |
|
|
47 | (2) |
5 Response |
|
49 | (26) |
|
|
49 | (2) |
|
Example 5-1: The draw() Function |
|
|
49 | (1) |
|
Example 5-2: The setup() Function |
|
|
50 | (1) |
|
Example 5-3: Global Variable |
|
|
51 | (1) |
|
|
51 | (5) |
|
Example 5-4: Track the Mouse |
|
|
51 | (1) |
|
Example 5-5: The Dot Follows You |
|
|
52 | (1) |
|
Example 5-6: Draw Continuously |
|
|
53 | (1) |
|
Example 5-7: Set Line Thickness |
|
|
53 | (1) |
|
Example 5-8: Easing Does It |
|
|
54 | (1) |
|
Example 5-9: Smooth Lines with Easing |
|
|
55 | (1) |
|
|
56 | (10) |
|
Example 5-10: Click the Mouse |
|
|
57 | (1) |
|
Example 5-11: Detect When Not Clicked |
|
|
58 | (1) |
|
Example 5-12: Multiple Mouse Buttons |
|
|
59 | (2) |
|
|
61 | (1) |
|
Example 5-13: Find the Cursor |
|
|
62 | (1) |
|
Example 5-14: The Bounds of a Circle |
|
|
63 | (1) |
|
Example 5-15: The Bounds of a Rectangle |
|
|
64 | (2) |
|
|
66 | (4) |
|
|
67 | (1) |
|
Example 5-17: Draw Some Letters |
|
|
68 | (1) |
|
Example 5-18: Check for Specific Keys |
|
|
68 | (2) |
|
Example 5-19: Move with Arrow Keys |
|
|
70 | (1) |
|
|
70 | (2) |
|
Example 5-20: Map Values to a Range |
|
|
70 | (1) |
|
Example 5-21: Map with the map() Function |
|
|
71 | (1) |
|
|
72 | (3) |
6 Translate, Rotate, Scale |
|
75 | (14) |
|
|
75 | (2) |
|
Example 6-1: Translating Location |
|
|
76 | (1) |
|
Example 6-2: Multiple Translations |
|
|
76 | (1) |
|
|
77 | (5) |
|
Example 6-3: Corner Rotation |
|
|
78 | (1) |
|
Example 6-4: Center Rotation |
|
|
78 | (1) |
|
Example 6-5: Translation, then Rotation |
|
|
79 | (1) |
|
Example 6-6: Rotation, Then Translation |
|
|
80 | (1) |
|
Example 6-7: An Articulating Arm |
|
|
80 | (2) |
|
|
82 | (1) |
|
|
82 | (1) |
|
Example 6-9: Keeping Strokes Consistent |
|
|
83 | (1) |
|
|
83 | (2) |
|
Example 6-10: Isolating Transformations |
|
|
84 | (1) |
|
Robot 4: Translate, Rotate, Scale |
|
|
85 | (4) |
7 Media |
|
89 | (14) |
|
|
90 | (4) |
|
Example 7-1: Load an Image |
|
|
90 | (1) |
|
Example 7-2: Load More Images |
|
|
91 | (1) |
|
Example 7-3: Mousing Around with Images |
|
|
92 | (1) |
|
Example 7-4: Transparency with a GIF |
|
|
93 | (1) |
|
Example 7-5: Transparency with a PNG |
|
|
94 | (1) |
|
|
94 | (3) |
|
Example 7-6: Drawing with Fonts |
|
|
95 | (1) |
|
Example 7-7: Draw Text in a Box |
|
|
96 | (1) |
|
Example 7-8: Store Text in a String |
|
|
97 | (1) |
|
|
97 | (4) |
|
Example 7-9: Draw with Shapes |
|
|
98 | (1) |
|
Example 7-10: Scaling Shapes |
|
|
98 | (1) |
|
Example 7-11: Creating a New Shape |
|
|
99 | (2) |
|
|
101 | (2) |
8 Motion |
|
103 | (18) |
|
|
103 | (1) |
|
Example 8-1: See the Frame Rate |
|
|
103 | (1) |
|
Example 8-2: Set the Frame Rate |
|
|
104 | (1) |
|
|
104 | (4) |
|
Example 8-3: Move a Shape |
|
|
104 | (1) |
|
|
105 | (2) |
|
Example 8-5: Bounce Off the Wall |
|
|
107 | (1) |
|
|
108 | (1) |
|
Example 8-6: Calculate Tween Positions |
|
|
108 | (1) |
|
|
109 | (2) |
|
Example 8-7: Generate Random Values |
|
|
109 | (1) |
|
Example 8-8: Draw Randomly |
|
|
109 | (1) |
|
Example 8-9: Move Shapes Randomly |
|
|
110 | (1) |
|
|
111 | (2) |
|
Example 8-10: Time Passes |
|
|
112 | (1) |
|
Example 8-11: Triggering Timed Events |
|
|
112 | (1) |
|
|
113 | (5) |
|
Example 8-12: Sine Wave Values |
|
|
115 | (1) |
|
Example 8-13: Sine Wave Movement |
|
|
115 | (1) |
|
Example 8-14: Circular Motion |
|
|
116 | (1) |
|
|
116 | (2) |
|
|
118 | (3) |
9 Functions |
|
121 | (14) |
|
|
122 | (2) |
|
Example 9-1: Roll the Dice |
|
|
122 | (1) |
|
Example 9-2: Another Way to Roll |
|
|
123 | (1) |
|
|
124 | (6) |
|
Example 9-3: Draw the Owl |
|
|
124 | (1) |
|
Example 9-4: Two's Company |
|
|
125 | (1) |
|
Example 9-5: An Owl Function |
|
|
126 | (2) |
|
Example 9-6: Increasing the Surplus Population |
|
|
128 | (1) |
|
Example 9-7: Owls of Different Sizes |
|
|
129 | (1) |
|
|
130 | (1) |
|
Example 9-8: Return a Value |
|
|
130 | (1) |
|
|
131 | (4) |
10 Objects |
|
135 | (14) |
|
|
136 | (1) |
|
|
137 | (5) |
|
|
142 | (3) |
|
Example 10-1: Make an Object |
|
|
142 | (1) |
|
Example 10-2: Make Multiple Objects |
|
|
143 | (2) |
|
|
145 | (2) |
|
|
147 | (2) |
11 Arrays |
|
149 | (16) |
|
|
149 | (3) |
|
Example 11-1: Many Variables |
|
|
149 | (1) |
|
Example 11-2: Too Many Variables |
|
|
150 | (1) |
|
Example 11-3: Arrays, Not Variables |
|
|
151 | (1) |
|
|
152 | (3) |
|
Example 11-4: Declare and Assign an Array |
|
|
153 | (1) |
|
Example 11-5: Compact Array Assignment |
|
|
154 | (1) |
|
Example 11-6: Assigning to an Array in One Go |
|
|
154 | (1) |
|
Example 11-7: Revisiting the First Example |
|
|
154 | (1) |
|
|
155 | (3) |
|
Example 11-8: Filling an Array in a for Loop |
|
|
155 | (1) |
|
Example 11-9: Track Mouse Movements |
|
|
156 | (2) |
|
|
158 | (4) |
|
Example 11-10: Managing Many Objects |
|
|
159 | (1) |
|
Example 11-11: A New Way to Manage Objects |
|
|
159 | (1) |
|
Example 11-12: Sequences of Images |
|
|
160 | (2) |
|
|
162 | (3) |
12 Data |
|
165 | (18) |
|
|
165 | (1) |
|
|
166 | (6) |
|
Example 12-1: Read the Table |
|
|
168 | (1) |
|
Example 12-2: Draw the Table |
|
|
168 | (2) |
|
Example 12-3: 29,740 Cities |
|
|
170 | (2) |
|
|
172 | (4) |
|
Example 12-4: Read a JSON File |
|
|
173 | (1) |
|
Example 12-5: Visualize Data from a JSON File |
|
|
174 | (2) |
|
|
176 | (4) |
|
Example 12-6: Parsing the Weather Data |
|
|
178 | (1) |
|
Example 12-7: Chaining Methods |
|
|
179 | (1) |
|
|
180 | (3) |
13 Extend |
|
183 | (18) |
|
|
184 | (5) |
|
Example 13-1: Play a Sample |
|
|
185 | (1) |
|
Example 13-2: Listen to a Microphone |
|
|
186 | (2) |
|
Example 13-3: Create a Sine Wave |
|
|
188 | (1) |
|
|
189 | (4) |
|
Example 13-4: Saving Images |
|
|
190 | (1) |
|
Example 13-5: Draw to a PDF |
|
|
191 | (2) |
|
|
193 | (8) |
|
Example 13-6: Read a Sensor |
|
|
194 | (1) |
|
Example 13-7: Read Data from the Serial Port |
|
|
195 | (1) |
|
Example 13-8: Visualizing the Data Stream |
|
|
196 | (2) |
|
Example 13-9: Another Way to Look at the Data |
|
|
198 | (3) |
A Coding Tips |
|
201 | (6) |
B Data Types |
|
207 | (2) |
C Order of Operations |
|
209 | (2) |
D Variable Scope |
|
211 | (2) |
Index |
|
213 | |