Admin
مدير المنتدى
عدد المساهمات : 18761
التقييم : 34807
تاريخ التسجيل : 01/07/2009
الدولة : مصر
العمل : مدير منتدى هندسة الإنتاج والتصميم الميكانيكى
 |  موضوع: كتاب Make - Getting Started with p5.js - Making Interactive Graphics in JavaScript and Processing الثلاثاء 30 أبريل 2024, 1:13 am | |
| 
أخواني في الله
أحضرت لكم كتاب
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
Download and File Setup 9
Your First Program 10
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
Comments . 36
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
iv ContentsFollow . 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
Example 7-8: Loading with a Callback 111
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
comments, 213
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
comments, 36-37, 213
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
loading custom, 114
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
headers, 186
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
loading, 104-106
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
loadImage() function, 110
loadTable() function, 183
lowercase/uppercase letters in
code, 213
M
map() function, 82-84, 133
math, and programming, 44-46
media, 103-118
and asynchronicity, 110-111
downloading online example
files, 103-104
fonts, 112-117
(see also fonts)
images, 104-109
(see also images)
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
preload() function, 104, 110, 111,
183
primitives, 181
print() function, 65
PrintWriter class, 196
properties, 153-154
push() function, 98
R
radians() function, 24
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
(see also for loops)
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
generating and reading data
files, 196-198
loading images from SVG/PNG
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
The Unzip Password : books-world.net
أتمنى أن تستفيدوا من محتوى الموضوع وأن ينال إعجابكم
رابط من موقع عالم الكتب لتنزيل كتاب Make - Getting Started with p5.js - Making Interactive Graphics in JavaScript and Processing
رابط مباشر لتنزيل كتاب Make - Getting Started with p5.js - Making Interactive Graphics in JavaScript and Processing 
|
|
