اسم المؤلف
Lauren McCarthy, Casey Reas & Ben Fry
التاريخ
30 أبريل 2024
المشاهدات
127
التقييم

Make – Getting Started with p5.js – Making Interactive Graphics in JavaScript and Processing
Lauren McCarthy, Casey Reas & Ben Fry
Contents
Preface . xi
1/Hello 1
Sketching and Prototyping . 2
Flexibility . 3
Giants 3
Family Tree . 5
Join In . 5
2/Starting to Code . 9
Environment 9
Example 2-1: Draw an Ellipse 11
Example 2-2: Make Circles 12
The Console . 13
Making a New Project 14
Examples and Reference . 15
3/Draw . 17
The Canvas 18
Example 3-1: Create a Canvas . 18
Example 3-2: Draw a Point 19
Basic Shapes . 19
Example 3-3: Draw a Line . 21
Example 3-4: Draw Basic Shapes . 21
Example 3-5: Draw a Rectangle 22
Example 3-6: Draw an Ellipse 22
Example 3-7: Draw Part of an Ellipse 23
Example 3-8: Draw with Degrees . 24
Example 3-9: Use angleMode 25
Drawing Order 25
Example 3-10: Control Your Drawing Order 26
iiiExample 3-11: Put It in Reverse 27
Shape Properties . 27
Example 3-12: Set Stroke Weight . 28
Example 3-13: Set Stroke Attributes 28
Color . 29
Example 3-14: Paint with Grays 31
Example 3-15: Control Fill and Stroke . 31
Example 3-16: Draw with Color 32
Example 3-17: Set Transparency . 33
Custom Shapes . 33
Example 3-18: Draw an Arrow . 34
Example 3-19: Close the Gap 34
Example 3-20: Create Some Creatures 35
Robot 1: Draw 38
4/Variables 41
First Variables 41
Example 4-1: Reuse the Same Values . 41
Example 4-2: Change Values . 42
Making Variables 43
p5.js Variables . 43
Example 4-3: Adjust the Canvas, See What Follows 44
A Little Math . 44
Example 4-4: Basic Arithmetic . 45
Repetition . 46
Example 4-5: Do the Same Thing Over and Over 47
Example 4-6: Use a for Loop . 47
Example 4-7: Flex Your for Loop’s Muscles . 49
Example 4-8: Fanning Out the Lines . 50
Example 4-9: Kinking the Lines . 50
Example 4-10: Embed One for Loop in Another . 51
Example 4-11: Rows and Columns 51
Example 4-12: Pins and Lines 52
Example 4-13: Halftone Dots 53
Robot 2: Variables 54
5/Response 59
Once and Forever . 59
Example 5-1: The draw() Function 59
Example 5-2: The setup() Function 60
Example 5-3: setup(), Meet draw() 61
Example 5-4: Track the Mouse . 62
Example 5-5: The Dot Follows You 62
Example 5-6: Draw Continuously . 63
Example 5-7: Set Thickness on the Fly 64
Example 5-8: Easing Does It . 65
Example 5-9: Smooth Lines with Easing . 67
Click 68
Example 5-10: Click the Mouse 68
Example 5-11: Detect When Not Clicked . 70
Example 5-12: Multiple Mouse Buttons 71
Location . 72
Example 5-13: Find the Cursor . 73
Example 5-14: The Bounds of a Circle . 74
Example 5-15: The Bounds of a Rectangle . 75
Type 78
Example 5-16: Tap a Key . 78
Example 5-17: Draw Some Letters 79
Example 5-18: Check for Specific Keys 79
Example 5-19: Move with Arrow Keys . 80
Touch . 81
Example 5-20: Touch the Screen . 81
Example 5-21: Track the Finger 82
Map 82
Example 5-22: Map Values to a Range . 82
Example 5-23: Map with the map() Function 83
Robot 3: Response 84
6/Translate, Rotate, Scale 89
Translate 89
Example 6-1: Translating Location 90
Example 6-2: Multiple Translations 91
Rotate 91
Example 6-3: Corner Rotation 92
Example 6-4: Center Rotation 93
Example 6-5: Translation, Then Rotation . 93
Example 6-6: Rotation, Then Translation . 94
Example 6-7: An Articulating Arm . 95
Scale . 96
Example 6-8: Scaling . 97
Example 6-9: Keeping Strokes Consistent 97
Push and Pop 98
Contents vExample 6-10: Isolating Transformations . 98
Robot 4: Translate, Rotate, Scale 99
7/Media 103
Images . 104
Example 7-1: Load an Image 104
Example 7-2: Load More Images 105
Example 7-3: Mousing Around with Images 106
Example 7-4: Transparency with a GIF 108
Example 7-5: Transparency with a PNG . 108
Example 7-6: Displaying an SVG Image . 109
Asynchronicity . 110
Example 7-7: Demonstrating Asynchronicity . 110
Fonts 112
Example 7-9: Drawing with Fonts 112
Example 7-10: Use a Webfont . 113
Example 7-11: Load a Custom Font 114
Example 7-12: Set the Text Stroke and Fill 115
Example 7-13: Draw Text in a Box . 116
Example 7-13: Store Text in a Variable . 116
Robot 5: Media 117
8/Motion . 121
Frames . 121
Example 8-1: See the Frame Rate . 121
Example 8-2: Set the Frame Rate 122
Speed and Direction 122
Example 8-3: Move a Shape 123
Example 8-4: Wrap Around . 124
Example 8-5: Bounce Off the Wall . 125
Tweening . 126
Example 8-6: Calculate Tween Positions 126
Random 127
Example 8-7: Generate Random Values . 128
Example 8-8: Draw Randomly . 128
Example 8-9: Move Shapes Randomly 129
Timers . 130
Example 8-10: Time Passes 130
Example 8-11: Triggering Timed Events 130
Circular 131
Example 8-12: Sine Wave Values 133
vi ContentsExample 8-13: Sine Wave Movement . 133
Example 8-14: Circular Motion 134
Example 8-15: Spirals . 135
Robot 6: Motion . 136
9/Functions 139
Function Basics 140
Example 9-1: Roll the Dice . 140
Example 9-2: Another Way to Roll . 141
Make a Function . 142
Example 9-3: Draw the Owl . 142
Example 9-4: Two’s Company . 143
Example 9-5: An Owl Function 144
Example 9-6: Increasing the Surplus Population 146
Example 9-7: Owls of Different Sizes . 147
Return Values . 148
Example 9-8: Return a Value 148
Robot 7: Functions . 149
10/Objects 153
Properties and Methods . 153
Define a Constructor . 154
Create Objects 159
Example 10-1: Make an Object 159
Example 10-2: Make Multiple Objects 160
Robot 8: Objects . 162
11/Arrays 165
From Variables to Arrays 165
Example 11-1: Many Variables 165
Example 11-2: Too Many Variables 166
Example 11-3: Arrays, Not Variables . 167
Make an Array . 168
Example 11-4: Declare and Assign an Array . 169
Example 11-5: Assigning to an Array in One Go 170
Example 11-6: Revisiting the First Example 170
Repetition and Arrays . 171
Example 11-7: Filling an Array in a for Loop . 171
Example 11-8: Track Mouse Movements 172
Arrays of Objects 174
Example 11-9: Managing Many Objects . 175
Example 11-10: Sequences of Images 176
Contents viiRobot 9: Arrays . 177
12/Data 181
Data Summary 181
Tables 182
Example 12-1: Read the Table 183
Example 12-2: Draw the Table 184
Example 12-3: 29,740 Cities . 185
JSON 187
Example 12-4: Read a JSON File 189
Example 12-5: Visualize Data from a JSON File 189
Network Data and APIs . 191
Example 12-6: Parsing the Weather Data . 194
Example 12-7: Chaining Methods 195
Robot 10: Data 196
13/Extend 201
p5.sound . 202
Example 13-1: Play a Sample . 202
Example 13-2: Listen to a Mic 203
Example 13-3: Create a Sine Wave 205
p5.dom 206
Example 13-4: Access the Webcam 207
Example 13-5: Create a Slider 208
Example 13-6: Create an Input Box 208
A/Coding Tips 211
B/Order of Operations . 215
C/Variable Scope 217
Index 221
Index
Symbols
!= (not equal to) operator, 49
&& (logical AND) operator, 76
// (double slashes) for code comments, 36-37
< (less than) operator, 49
<= (less than or equal to) operator,
49
= (assignment) operator, 69
== (equal to) operator, 49, 69, 79

(greater than) operator, 49
= (greater than or equal to) operator, 49
|| (logical OR) operator, 80
A
alpha value, 33
angleMode() function, 25
animation, 121-137
bouncing shapes off wall, 125
circular motion, 131-135
frames/frame rates, 121-122
moving shapes, 123
random drawing/moving of
shapes, 127
sine wave values/movement,
133
speed and direction, 122-126
spirals, 135
timers, 130-131
tween positions, 126
wrapping shapes around screen,
124-124
APIs (application programming
interfaces), 191-195
arc() function, 23
arithmetic operations, 44-46
operators, 45-46
order of, 46
arrays, 165
creating, 168-170
declaring and assigning, 169-170
filling in a for loop, 171
JSONArray, 188
of objects, 174-177
repetition and, 171-174
sequences of images stored in,
176-177
tracking mouse movements
with, 172-174
variables versus, 165-168
arrow keys, detecting, 80
arrows, drawing, 34
assignment operator, 46
asynchronicity, 110-111
B
background() function, 29, 62, 82,
129, 212
basic shapes, 19-25
beginShape() function, 34
block, 48
boolean variables, 68
bugs, minimizing, 211
C
callback function, 111
canvas, 17-19
chaining methods, 195
circles
cursor position relative to, 74-75
drawing, 12-13
circular motion, 131-135
clicks, mouse, 68-72
code editors, 9
coding basics, 9-15
221coding tips, 211-214
functions and parameters,
212-213
style and formatting, 213
upper/lowercase letters, 213
color
controlling fill and stroke, 31-32
grayscale, 29-32
RGB color, 32
transparency control, 33
columns and rows, creating with for
loops, 51
console, 13-14, 214
constrain() function, 129
constructor functions, 154-159
cos() and sin() functions, 131-135
createButton() function, 208
createCanvas() function, 18, 92
createCapture() function, 207
createInput() function, 208
createSlider() function, 208
createWriter() function, 196
creatures, drawing, 35
cross-origin error, 103
CSV (comma-separated values)
file, 182
cursor location, 72-78
D
data, 181-198
and APIs, 191-195
chaining methods, 195
JSON, 187
JSONArray, 188
network (see APIs (application
programming interfaces))
overview, 181
tables, 182-187
debugging, 13
degree measurements, 24
dist() function, 64, 74
Document Object Model (DOM)
library (see see p5.dom library)
draw() function, 11, 43, 59-61, 121,
129
drawing, 17-39
angleMode, 25
arrows, 34
canvas, 17-19
closing gaps, 34
color, 29-33
continuous, 63
creatures, 35-36
with degrees, 24
drawing order, 25-27
ellipses, 22-24
lines, 19-21
points, 19
randomly, 128
rectangles, 22
shapes
basic, 19-25
custom, 33-36
properties, 27-29
tables, 184-185
E
easing, 65-67
elements, in arrays, 168
ellipseMode() function, 29
ellipses, 22
embedded for loops, 51
endShape() function, 34
error messages, in console, 13-14
Examples page, 15
F
fill() function, 29, 115
filter() function, 207
float values, 131
fonts, 112-117
drawing text in a box, 116
drawing with, 112
setting test stroke and fill, 115
storing text in a variable, 116
webfonts, 113
for loops, 46-54, 171, 183
222 Indexcreating rows and columns with,
51-52
embedding within each other, 51
for fanning out lines, 50
for halftone dots, 53
for kinking lines, 50
for pins and lines, 52
formatting/style of code, 213
frame rates, 121-122
frameRate() function, 121
frames, 59, 121
functions, 18, 139-151, 212-213
basics of, 140-141
creating, 142-148
return values, 148
G
get() function, 184
getRowCount() function, 183
GIF image format, 107
global variables, 43
H
halftone dots, creating, 53
hide() function, 207
HTML elements, external (see
p5.dom library)
I
if blocks, 130
if statements, 80
image() function, 105
images, 104-109
formats, 107
resizing, 107
sequences of, 176
transparency, 107-109
index values, 168
initialization statement (init), 48
input box, creating, 208-209
J
JavaScript, 5
JPEG image format, 107
JSON files, 187-191
JSON objects, 187
JSONArray, 188
K
key variable, 78
keyCode variable, 80
keyIsPressed variable, 78
keystroke responses, 78-81
L
length property, 171
libraries, 201-209
p5.dom library, 206-209
p5.sound audio library, 202-206
lines
drawing, 19-21
fanning out, 50
fanning out with for loops, 50
kinking with for loops, 50
setting thickness of, 64
smoothing with easing, 67
lowercase/uppercase letters in
code, 213
M
map() function, 82-84, 133
math, and programming, 44-46
media, 103-118
and asynchronicity, 110-111
files, 103-104
fonts, 112-117
images, 104-109
methods, 153-154, 158
millis() function, 130
motion (see animation)
mouse clicks, 68-72
mouse movement tracking, with
arrays, 172-174
Index 223mouseIsPressed variable, 68
mouseX/mouseY variables, 82-84
N
naming variables, 43
new keyword, 160
new project, 14-14
nf() function, 176
noFill() function, 31
noStroke() function, 115
O
object-oriented programming
(OOP), 153
objects, 153-163
arrays of, 174-177
constructor functions, 154-159
creating, 159-161
multiple, 160-161
properties and methods,
153-154
OpenType (.otf) fonts, 114
operators, 45-46
order of operations, 46, 215
P
p5.dom library, 206-209
create a slider, 208
create an input box, 208-209
webcam access, 207
p5.sound audio library, 202-206
creating sine waves, 205-206
listening through microphone,
203-205
playing samples, 202-203
parameters, 18, 212-213
PEMDAS acronym, 46
persistence of vision, 121
pixels, 17
pmouseX/pmouseY variables, 63
PNG image format, 107, 108
point() function, 19, 148
pop() function, 98
position() function, 208
183
primitives, 181
print() function, 65
PrintWriter class, 196
properties, 153-154
push() function, 98
R
random() function, 127, 140, 148
randomSeed() function, 130
rect() function, 22
rectangles, 22
cursor position relative to, 75-78
drawing, 22
rectMode() function, 29
Reference page, 15
relational operators, 48
repetition, 46-54
response to input, 59-86
cursor location, 72-78
easing , 65-67
keystrokes, 78-81
mapping, 82-84
mouse clicks, 68-72
mouse movement tracking,
61-67
setup and draw, 59-61
touchscreens, 81
robot programs (examples)
arrays of objects, 177-179
draw, 38-39
drawRobot function, 149-151
files, 196-198
files, 117-118
modifying code with variables,
54-56
mouse-responding shapes,
84-86
objects, 162-163
random and circular motion,
136-137
224 Indextranslate, rotate, and scale in,
99-101
rotate() function, 91
rows and columns, creating with for
loops, 51
rule of variable scope, 217
S
scale() function, 96-98
servers, running, 103
setup() function, 11, 43, 60-61, 110,
169
setXY() function, 186
shapes
bouncing off wall, 125
closing gap, 34
drawing basic, 19-25
drawing custom, 33-36
moving (see animation)
properties
stroke attributes, 28-29
stroke weight, 27
random drawing/moving of, 127
wrapping around screen,
124-124
sin() and cos() functions, 131-135
sine wave frequencies, 205-206
sine wave values/movement, 133
sketch folder, 105, 107
sketch.js file, 10
sketching with code overview, 1-5
slider, creating, 208
sound (see p5.sound audio library)
spirals, creating, 135
step variable, 126
stroke() function, 29, 115
strokeCap() function, 28
strokeJoin() function, 28-29
strokeWeight() function, 28-29
SVG image format, 107, 109
system fonts, 112
T
table data, 182-187
test statement, 48-49
text (see fonts)
text() function, 79, 112
textAlign() function, 79
textFont() function, 112
textSize() function, 79, 112
this keyword, 157, 160
timers, in animation, 130-131
touchIsDown variable, 81
touchX/touchY variables, 81
transformations, 89
translate() function, 89-91, 93-96,
142
translating locations, 89-91
transparency control, 33
TrueType (.ttf) fonts, 114
TSV (tab-separated values) file, 182
tweening, in animation, 126
typing, responses to, 78-81
U
uppercase/lowercase letters in
code, 213
V
value() function, 208
var keyword, 160
variable scope rule, 217
variables, 41-56
arrays versus, 165-168
changing values, 42
creating, 43
declared, 43
global, 43
p5.js, 43-44
and repetition, 46-54
reusing identical values, 41
storing text in, 116
vector images, 107
vertex() function, 34, 35
W
webcam, 207
webfonts, 113
X
x and y coordinates, 17

كلمة سر فك الضغط : books-world.net