Index

A

Acceleration

angular, 123–124

definition, 117

formulas, 469

gravity, 121–122

layman's definition, 117

on one axis, 117–119

on two axes, 119–121

ship controls, 126–129

spaceship, 124–126

Animation, 69, 131, 225, 247, 291, 343

animation loops, 16–19

frame-by-frame animation, 9, 16

JavaScript timer, 19

rendering and displaying frames, 17

rules, 17

using requestAnimationFrame, 19–20

while loop, 18

dragging an object

around canvas, 158

with motion code, 160

dynamic animation, 6–7

easing, 170

frames

as records, 6

definition, 5

programmed frames, 6

rendering and displaying frames, 16

JavaScript, 9–34

motion, 4–5

nontemperal media, 4

pressing and releasing an object

mouse events, 153

using touch events, 156

scripted animation, 17

springing, 180

static animation, 7

temporal media, 4

throwing

definition, 162

drawFrame function, 163

setting velocity, 162

trackVelocity function, 163

time, 4

trigonometry

angles, 36–41

circles and ellipses, 58–61

circular movement, 58–60

definition, 36

distance between two points, 62

elliptical movement, 60–61

formulas, 66–67, 467

Pythagorean theorem, 61–65

right-angle triangle, 36

rotation, 47–50

sine waves, 50–52

cosine waves, 58–60

Array.splice method, 133

B

Backface culling, 414–418

Billiard ball physics

conservation of momentum, 249–273

mass, 248

momentum, 248

Bouncing off angles, 232

code optimization, 238–239

coordinate rotation, 234–238

multiple angles, 243–246

not falling off the edge problem, 240

getBounds method, 240–241

hit testing, 240

under the line problem, 241–243

Bounding rectangle method, 203

C

Canvas drawing API

commands, 76

drawing context, 77

drawing curves

through control point, 81–82

with quadraticCurveTo method, 80–81

Canvas element coordinate system, 38–40

Collision detection

between irregular shaped objects, 211

distance-based collision detection, 212

collision-based springing, 216–218

formula, 224

simple collision detection, 212–216

geometric hit testing methods, 202

between object and point, 209–211

two objects, 202–209

multiple-object collision detection, 218

basic collision detection, 219–220

multiple-object springing, 221–224

with circle's bounding box, 209

with rectangle's bounding box, 208

Combining colors, bitwise operators, 72–73

Conservation of momentum, 249

formulas

in JavaScript, 473

in mathematics, 473

in JavaScript, 273

in mathematics, 273

on one axis, 250

code optimization, 254–255

placing the objects, 253–254

on two axis, 255

angle of collision, 256

checkCollision function, 258

one-dimensional collision, 256

plug-and-play momentum formula, 258

two-dimensional collision, 256

Coordinate rotation

advanced coordinate rotation

multiple objects, 230–232

rotation angle, 228

single objects, 229–230

formulas, 472

in third dimension, 371

simple coordinate rotation

angle and radius calculation, 227

positioning the object, 226

3D basics

bouncing

multiple object, 354–357

single object, 352–354

Z-sorting, 357–358

collision detection, 378–381

coordinate rotation, 371–378

easing, 368–370

gravity, 359–361

perspectives

formula, 346–347

in JavaScript, 347

techniques, 346

springing, 370–371

velocity and acceleration, 350–352

wrapping, 361–368

z axis

left-hand coordinate system, 345

right-hand coordinate system, 344

D

Distance-based collision detection

formulas, 472

3D lighting

clamping, 419

lightMag, 422

3D solid, backface culling and depth

sorting, 427

triangle constructor method, 419

vectors

cross product, 421

dot product, 421

3D lines and fills

modeling 3D solids, 401

cylinder, 407–409

extruded letter A, 405–407

pyramid, 404–405

spinning cube, 401–404

moving 3D solids, 409–411

points and lines, 383–389

Point3D class, 387

point definition, 383

schematic representation, 386

with invisible points, 386

shapes

3D spinning letter E, 393

3D spinning square, 392

plotting points, graph paper, 392

square, 389

using triangles

advantages, 395

benefits, 396

complex polygon, 395

definition, 397

surface normal, 395

Drawframe function, 57

E

Easing

advanced easing, 179

formulas, 471

proportional motion, 170

simple easing

alpha component, 179

calculations, 173

formulas, 199–200

illusion of motion, 170

moving targets, 177–178

on colors, 179

schematic representation, 171

strategies, 171

target rotation, 178

turning off easing, 174–177

verbose syntaxes, 172

Enhanced depth sorting, 417–418

Environmental boundaries, 132

bouncing, 141–146

steps, 142

strategies, 141

vs. screen wrapping, 141

formulas, 470–471

regenerating objects, 137–139

removing objects, 133–137

screen wrapping, 139–141

setting up boundaries, 132–133

F

Forward kinematics (FK)

process automation, 301–308

walk cycle, 302

programming

moving single segment, 293–298

moving two segments, 298–301

Frame-by-frame animation, 9, 16

Friction

angular velocity, 147

definition, 146

scaled-back velocity code, 147

spaceship simulation, 149–150

velocity multiplication, 148–149

G

Geometric hit testing methods, 202

GetBounds method, 202

Gravity

description, 277

formulas, 473

gravitational force

collision detection and reaction, 280–281

gravitational constant, 277–279

orbiting, 281–282

slingshot effect, 279

H

Hit testing, 201

HTML5

canvas element support, 10–11

CSS stylessheet, 14

debugging tools, 15–16

document, 12–13

features, 10

performance, 11

utils.js script, 14

Hypotenuse, 40

I

Inverse kinematics (IK)

dragging method

with multiple segments, 322–326

with single segments, 320, 321–322

law of cosines, 335

formula, 339

in JavaScript, 339

programming, 336–339

reaching method

for an object, 332

for the mouse, 326

interaction, 333

multiple segment reaching, 332–334

with single segments, 319, 320–321

J

JavaScript

HTML5 (see HTML5)

objects, 20

constructor function, 21–22

functional iteration, 22–23

name property, 21

prototypes, 22

user interaction, 23

events and event handlers, 23–24

listeners and handlers, 24–34

K

Kinematics

definition, 291

forward kinematics, 292

inverse kinematics, 292

L

Law of cosines, formula, 474

Linear vertical motion, 54–55

LineTo and moveTo method

create multiple curves, 82

closed curves, 87

context.quadraticCurveTo methods, 83

smooth multiple curves, 85

with midpoints, 84

drawing curves

quadraticCurveTo method, 80

through control point, 81

Listeners and handlers

addEventListener method, 24

key code property, 32–34

keyboard events, 31–32

mouse events, 24, 26–27

mousemove, 24

mouseup and mousedown, 25, 26

mouse position, 27–29

removeEventListener method, 24

touch events, 29

touch position, 30–31

M

Mass, 248

Matrix

addition, 432–433

canvas transforms

affine transformation, 437

context.save() and

context.restore() methods, 439

identity matrix, 438

skewing, 439

definition, 431

multiplication, 433

coding with matrices, 436–437

coordinate rotation, 435–436

scaling, 433–435

Momentum, 248

Multiple-object collision detection

formulas, 224, 472

P

Particles, 275–277

Pythagorean theorem, 61–65

Q

Quadratic Bézier curve, 80

R

Rendering techniques

canvas element

CSS-style strings, 69–70

drawing API, 76–77

drawing context, 77

clearRect method, 77

line style properties, 78

color, canvas element

bitwise combination, 72–73

bitwise extraction, 73–74

color utility functions, 74–76

combining colors, 71–72

extracting component colors, 73

hexadecimal color values, 70–71

transparency, 74

formulas, 100–101, 468

lineTo and moveTo method, 78–80

arc method, 87

arcTo method, 87

bezierCurveTo method, 87

multiple curves creation, 82–87

quadraticCurveTo method, 80–82

loading and drawing images, 91

context.drawImage method, 92

using image elements, 92

shapes, 87–88

gradient fills, 88–89

setting gradient color stops, 89–91

S

Speeds, and centers, 56

Springing, 282

chained springs, 186–189

formulas, 199–200, 471

vs. gravity, 282–283

line drawing and gravity additions, 185

to a moving target, 184

multiple objects

three objects connected, 196

two objects connected, 193

multiple springs, 189–191

nodes

with connections, 286–288

with mass, 288–289

offsetting the target, 191–193

in one dimension, 180–182

proportional motion, 170, 180

springy node garden, 283–286

in two dimensions, 183–184

T

Throwing

definition, 162

drawFrame function, 163

setting velocity, 162

trackVelocity function, 163

Trig functions

arcsine, 45

arctangent, 45–47

cosine, 42–44

sine, 41–42

tangent, 44–45

Trigonometry

angles, 36–41

canvas coordinate system, 38–40

radians and degrees, 36–38

context.rotate(angle)method, 37

measurements, 37

triangle sides, 40–41

trig functions, 41–47

circles and ellipses, 58–61

circular movement, 58–60

definition, 36

distance between two points, 62

elliptical movement, 60–61

formulas, 66–67, 467

Pythagorean theorem, 61–65

right-angle triangle, 36

rotation, 47–50

sine waves, 50–52

smooth up and down motion, 52–54

waves

cosine waves, 58–60

linear vertical motion, 54–55

pulsing motion, 55–56

with drawing API, 57–58

with two angles, 56–57

U

User interaction

dragging an object

around canvas, 158–159

with motion code, 160–162

pressing and releasing an object, 153

mouse events, 154

using touch events, 156–158

throwing (see Throwing)

Utils.intersects function, 205

V

Velocity

and vectors, 106

magnitude and direction, 107, 111

negative velocity, 107

angular velocity, 110–113

concepts, 105

extended velocity, 115–116

formulas, 469

layman's definition, 105

mouse follower, 114–115

on one axis, 107–109

on two axes, 109–110

vector addition, 113–114

W,X,Y

Walk cycle

beginnings, 303

calfOffsetSlider, 306

calfRangeSlider, 306

drawFrame function, 304

gravity, 309–310

handling collision, 310–311

handling reaction, 311–312

offset definition, 303

screen wrapping, 313–317

speedSlider, 306

thighBaseSlider, 306

thighRangeSlider, 306

Z

Z-sorting, 357–358