├── 9781430263371.jpg ├── 9781430263371 ├── README.pdf ├── chapter1 │ ├── bouncing-ball.html │ ├── bouncing-ball.js │ └── style.css ├── chapter10 │ ├── attractors.html │ ├── attractors.js │ ├── black-holes.html │ ├── black-holes.js │ ├── central-forces.html │ ├── central-forces.js │ ├── electric-field-examples.html │ ├── electric-field-examples.js │ ├── electric-field.html │ ├── electric-field.js │ ├── force-fields.html │ ├── force-fields.js │ ├── gravity-field.html │ ├── gravity-field.js │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ └── style4.css │ ├── lorentz-force.html │ ├── lorentz-force.js │ ├── objects │ │ ├── ball.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── triangle.js │ │ └── vector2D.js │ ├── orbits.html │ ├── orbits.js │ ├── rocket.js │ ├── spring-gravity.html │ └── spring-gravity.js ├── chapter11 │ ├── ball-collision.html │ ├── ball-collision.js │ ├── bouncing-off-inclined-wall.html │ ├── bouncing-off-inclined-wall.js │ ├── bouncing-off-inclined-wall2.html │ ├── bouncing-off-inclined-wall2.js │ ├── bouncing-off-multiple-inclined-walls.html │ ├── bouncing-off-multiple-inclined-walls.js │ ├── bouncing-off-multiple-inclined-walls2.html │ ├── bouncing-off-multiple-inclined-walls2.js │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ └── style4.css │ ├── molecules.html │ ├── molecules.js │ ├── molecules2.html │ ├── molecules2.js │ ├── multiple-ball-collision.html │ ├── multiple-ball-collision.js │ ├── objects │ │ ├── ball.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── triangle.js │ │ ├── vector2D.js │ │ └── wall.js │ ├── wall-bouncing.html │ ├── wall-bouncing.js │ ├── wall-object.html │ └── wall-object.js ├── chapter12 │ ├── fire-effect.html │ ├── fire-effect.js │ ├── fireworks.html │ ├── fireworks.js │ ├── fireworks2.html │ ├── fireworks2.js │ ├── galaxy.html │ ├── galaxy.js │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ ├── style4.css │ │ ├── style5.css │ │ └── style6.css │ ├── long-range.html │ ├── long-range.js │ ├── multigravity.html │ ├── multigravity.js │ ├── objects │ │ ├── ball.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── spark.js │ │ ├── star.js │ │ ├── triangle.js │ │ ├── vector2D.js │ │ └── wall.js │ ├── particle-emitter.html │ ├── particle-emitter.js │ ├── smoke-effect.html │ ├── smoke-effect.js │ ├── spark-example.html │ ├── spark-example.js │ ├── sparks.html │ ├── sparks.js │ ├── splash.html │ ├── splash.js │ ├── wormhole.html │ └── wormhole.js ├── chapter13 │ ├── ball-rotate.html │ ├── ball-rotate.js │ ├── cloth.html │ ├── cloth.js │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ ├── style4.css │ │ ├── style5.css │ │ └── style6.css │ ├── objects │ │ ├── ball.js │ │ ├── ballrb.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── polygon.js │ │ ├── polygonrb.js │ │ ├── rigidbody.js │ │ ├── spark.js │ │ ├── star.js │ │ ├── triangle.js │ │ ├── vector2D.js │ │ └── wall.js │ ├── polygon-rotate.html │ ├── polygon-rotate.js │ ├── rigid-body-bouncing.html │ ├── rigid-body-bouncing.js │ ├── rigid-body-collisions.html │ ├── rigid-body-collisions.js │ ├── rigid-body-dynamics.html │ ├── rigid-body-dynamics.js │ ├── rigid-body-dynamics2.html │ ├── rigid-body-dynamics2.js │ ├── rigid-body-test.html │ ├── rigid-body-test.js │ ├── rolling.html │ ├── rolling.js │ ├── rope.html │ ├── rope.js │ ├── rope2.html │ ├── rope2.js │ ├── wheel-rotate.html │ ├── wheel-rotate.js │ ├── wheel.js │ ├── wind-turbine.html │ ├── wind-turbine.js │ ├── wind-turbines.html │ └── wind-turbines.js ├── chapter14 │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ ├── style4.css │ │ ├── style5.css │ │ └── style6.css │ ├── objects │ │ ├── ball.js │ │ ├── ballrb.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── polygon.js │ │ ├── polygonrb.js │ │ ├── rigidbody.js │ │ ├── spark.js │ │ ├── star.js │ │ ├── triangle.js │ │ ├── vector2D.js │ │ └── wall.js │ ├── orbits.html │ ├── orbits.js │ ├── projectile.html │ ├── projectile.js │ ├── rope-explicit-euler.html │ ├── rope-explicit-euler.js │ ├── scale-model.html │ ├── scale-model.js │ ├── schemes-test.html │ ├── schemes-test.js │ ├── springs.html │ └── springs.js ├── chapter15 │ ├── bouncing-ball.html │ ├── bouncing-ball.js │ ├── cube-rotation-euler-angles.html │ ├── cube-rotation-euler-angles.js │ ├── cube-rotation-quaternion.html │ ├── cube-rotation-quaternion.js │ ├── cube-rotation.html │ ├── cube-rotation.js │ ├── earth-moon.html │ ├── earth-moon.js │ ├── earth.html │ ├── earth.js │ ├── images │ │ └── earth.jpg │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ ├── style4.css │ │ ├── style5.css │ │ └── style6.css │ ├── objects │ │ ├── ball.js │ │ ├── ballrb.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── forces3D.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── polygon.js │ │ ├── polygonrb.js │ │ ├── rigidbody.js │ │ ├── spark.js │ │ ├── star.js │ │ ├── triangle.js │ │ ├── vector2D.js │ │ ├── vector3D.js │ │ └── wall.js │ └── three.min.js ├── chapter16 │ ├── airplane.html │ ├── airplane.js │ ├── images │ │ └── earth.jpg │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ ├── style4.css │ │ ├── style5.css │ │ ├── style6.css │ │ ├── style7.css │ │ └── style8.css │ ├── objects │ │ ├── astro.js │ │ ├── ball.js │ │ ├── ballrb.js │ │ ├── box.js │ │ ├── forces.js │ │ ├── forces3D.js │ │ ├── graph.js │ │ ├── matrix3D.js │ │ ├── particle.js │ │ ├── phys.js │ │ ├── polygon.js │ │ ├── polygonrb.js │ │ ├── rigidbody.js │ │ ├── spark.js │ │ ├── star.js │ │ ├── triangle.js │ │ ├── vector2D.js │ │ ├── vector3D.js │ │ └── wall.js │ ├── planets_data │ │ ├── Earth_XYZ.csv │ │ ├── Mars_XYZ.csv │ │ ├── Mercury_XYZ.csv │ │ ├── Venus_XYZ.csv │ │ └── initial_conditions.txt │ ├── rk4test3d.html │ ├── rk4test3d.js │ ├── single-planet.html │ ├── single-planet.js │ ├── solar-system-animated.html │ ├── solar-system-animated.js │ ├── solar-system-basic.html │ ├── solar-system-basic.js │ ├── solar-system-nasa.html │ ├── solar-system-nasa.js │ ├── solar-system.html │ ├── solar-system.js │ ├── sub.js │ ├── submarine.html │ ├── submarine.js │ └── three.min.js ├── chapter2 │ ├── Thumbs.db │ ├── ball-object.html │ ├── ball-object.js │ ├── ball.js │ ├── bouncing-ball-drag-drop.html │ ├── bouncing-ball-drag-drop.js │ ├── bouncing-ball-object.html │ ├── bouncing-ball-object.js │ ├── bouncing-ball-pause.html │ ├── bouncing-ball-pause.js │ ├── bouncing-ball-random.html │ ├── bouncing-ball-random.js │ ├── bouncing-ball-recycled.html │ ├── bouncing-ball-recycled.js │ ├── bouncing-balls.html │ ├── bouncing-balls.js │ ├── canvas-example.html │ ├── canvas-overlap.html │ ├── drawing-api-fills.html │ ├── drawing-api-fills.js │ ├── drawing-api-gradients.html │ ├── drawing-api-gradients.js │ ├── drawing-api-grid.html │ ├── drawing-api-grid.js │ ├── drawing-api-straight-line.html │ ├── drawing-api-straight-line.js │ ├── frame-example.html │ ├── frame-example.js │ ├── frame-timer-example.html │ ├── frame-timer-example.js │ ├── getTime-example.html │ ├── getTime-example.js │ ├── style.css │ ├── style1.css │ ├── timer-example.html │ └── timer-example.js ├── chapter3 │ ├── ball.js │ ├── gradient-function.html │ ├── gradient-function.js │ ├── graph-example.html │ ├── graph-example.js │ ├── graph-functions.html │ ├── graph-functions.js │ ├── graph.js │ ├── integration.html │ ├── integration.js │ ├── move-circle-parametric.html │ ├── move-circle-parametric.js │ ├── move-circle.html │ ├── move-circle.js │ ├── move-curve.html │ ├── move-curve.js │ ├── periodic-functions.html │ ├── periodic-functions.js │ ├── style.css │ ├── style1.css │ ├── trig-animations.html │ ├── trig-animations.js │ ├── trig-functions.html │ ├── trig-functions.js │ ├── vector-examples.html │ ├── vector-examples.js │ └── vector2D.js ├── chapter4 │ ├── ball-move.html │ ├── ball-move.js │ ├── ball-particle-inheritance-test.html │ ├── ball-test.html │ ├── ball-test.js │ ├── ball.js │ ├── ball2.js │ ├── balls-move.html │ ├── balls-move.js │ ├── energy-example.html │ ├── energy-example.js │ ├── forces-example.html │ ├── forces-example.js │ ├── graph.js │ ├── particle-example.html │ ├── particle-example.js │ ├── particle.js │ ├── projectile-test.html │ ├── projectile-test.js │ ├── style.css │ ├── style1.css │ └── vector2D.js ├── chapter5 │ ├── ball.js │ ├── collisions-test.html │ ├── collisions-test.js │ ├── floating-ball.html │ ├── floating-ball.js │ ├── forces-example2.html │ ├── forces-example2.js │ ├── forces-test.html │ ├── forces-test.js │ ├── forces.js │ ├── graph.js │ ├── particle.js │ ├── projectile-energy.html │ ├── projectile-energy.js │ ├── style.css │ ├── style1.css │ ├── style2.css │ └── vector2D.js ├── chapter6 │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ └── style4.css │ ├── objects │ │ ├── ball.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── triangle.js │ │ └── vector2D.js │ ├── orbits.html │ ├── orbits.js │ ├── plot-g.html │ ├── plot-g.js │ ├── readme.txt │ ├── rocket-object.html │ ├── rocket-object.js │ ├── rocket-test.html │ ├── rocket-test.js │ ├── rocket.js │ ├── triangle-object.html │ ├── triangle-object.js │ ├── two-masses.html │ └── two-masses.js ├── chapter7 │ ├── airplane.html │ ├── airplane.js │ ├── balloon.html │ ├── balloon.js │ ├── bubbles-turbulence.html │ ├── bubbles-turbulence.js │ ├── bubbles-wind.html │ ├── bubbles-wind.js │ ├── floating-ball.html │ ├── floating-ball.js │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ └── style4.css │ ├── objects │ │ ├── ball.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── triangle.js │ │ └── vector2D.js │ ├── parachute.html │ ├── parachute.js │ ├── plane-object.html │ ├── plane-object.js │ ├── plane.js │ ├── sliding.html │ └── sliding.js ├── chapter8 │ ├── basic-oscillations.html │ ├── basic-oscillations.js │ ├── bungee.html │ ├── bungee.js │ ├── coupled-oscillations.html │ ├── coupled-oscillations.js │ ├── damped-oscillations.html │ ├── damped-oscillations.js │ ├── damped-oscillations2.html │ ├── damped-oscillations2.js │ ├── dragging-oscillations.html │ ├── dragging-oscillations.js │ ├── forced-oscillations.html │ ├── forced-oscillations.js │ ├── free-oscillations.html │ ├── free-oscillations.js │ ├── free-oscillations2.html │ ├── free-oscillations2.js │ ├── includes │ │ ├── style.css │ │ ├── style1.css │ │ ├── style2.css │ │ ├── style3.css │ │ └── style4.css │ ├── objects │ │ ├── ball.js │ │ ├── forces.js │ │ ├── graph.js │ │ ├── particle.js │ │ ├── triangle.js │ │ └── vector2D.js │ └── stickman.js └── chapter9 │ ├── car-demo.html │ ├── car-demo.js │ ├── circular-orbits.html │ ├── circular-orbits.js │ ├── includes │ ├── style.css │ ├── style1.css │ ├── style2.css │ ├── style3.css │ └── style4.css │ ├── objects │ ├── ball.js │ ├── box.js │ ├── forces.js │ ├── graph.js │ ├── particle.js │ ├── triangle.js │ └── vector2D.js │ ├── pendulum.html │ ├── pendulum.js │ ├── pendulum2.html │ ├── pendulum2.js │ ├── satellite-demo.html │ ├── satellite-demo.js │ ├── satellite-demo2.html │ ├── satellite-demo2.js │ ├── satellite-object.html │ ├── satellite-object.js │ ├── satellite.js │ ├── wheel-demo.html │ ├── wheel-demo.js │ ├── wheel-object.html │ ├── wheel-object.js │ └── wheel.js ├── LICENSE.txt ├── README.md └── contributing.md /9781430263371.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/physics-for-javascript-games-animation-simulations/ad5e13fd2a175bb0ff4e5dae74d602edf1712af5/9781430263371.jpg -------------------------------------------------------------------------------- /9781430263371/README.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/physics-for-javascript-games-animation-simulations/ad5e13fd2a175bb0ff4e5dae74d602edf1712af5/9781430263371/README.pdf -------------------------------------------------------------------------------- /9781430263371/chapter1/bouncing-ball.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter10/attractors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Attractors 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter10/black-holes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Black holes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /9781430263371/chapter10/central-forces.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Central forces 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter10/electric-field-examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Electric field examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter10/electric-field.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Electric field 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter10/force-fields.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Force fields 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter10/gravity-field.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gravity field 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter10/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter10/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter10/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter10/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter10/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter10/lorentz-force.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lorentz force 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter10/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter10/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter10/objects/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle(x,y,width,height,color,alpha,empty){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(alpha)==='undefined') alpha = 1; if(typeof(empty)==='undefined') empty = false; this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.alpha = alpha; this.empty = empty; } Triangle.prototype = { draw: function (context) { context.save(); if (this.empty){ context.strokeStyle = this.color; }else{ context.globalAlpha = this.alpha; context.fillStyle = this.color; } context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x+this.width,this.y); context.lineTo(this.x+this.width/2,this.y-this.height); context.lineTo(this.x,this.y); context.closePath(); if (this.empty) { context.stroke(); }else{ context.fill(); } context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter10/orbits.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Orbits 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter10/rocket.js: -------------------------------------------------------------------------------- 1 | function Rocket(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 40; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Rocket.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context,firing) { // firing is a Boolean if (firing){ var exhaust = new Triangle(this.x,this.y+0.5*this.height,this.width,this.height,'#ffff00',0.8); exhaust.draw(context); } var capsule = new Triangle(this.x,this.y,this.width,this.height,this.color); capsule.draw(context); } }; -------------------------------------------------------------------------------- /9781430263371/chapter10/spring-gravity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spring Gravity 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter11/ball-collision.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ball collision 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter11/bouncing-off-inclined-wall.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing off inclined wall 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter11/bouncing-off-inclined-wall2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing off inclined wall 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter11/bouncing-off-multiple-inclined-walls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing off multiple inclined walls 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter11/bouncing-off-multiple-inclined-walls2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing off multiple inclined walls 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter11/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter11/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter11/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter11/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter11/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter11/molecules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Molecules 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter11/molecules2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Molecules 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter11/multiple-ball-collision.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multiple ball collision 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter11/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter11/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter11/objects/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle(x,y,width,height,color,alpha,empty){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(alpha)==='undefined') alpha = 1; if(typeof(empty)==='undefined') empty = false; this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.alpha = alpha; this.empty = empty; } Triangle.prototype = { draw: function (context) { context.save(); if (this.empty){ context.strokeStyle = this.color; }else{ context.globalAlpha = this.alpha; context.fillStyle = this.color; } context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x+this.width,this.y); context.lineTo(this.x+this.width/2,this.y-this.height); context.lineTo(this.x,this.y); context.closePath(); if (this.empty) { context.stroke(); }else{ context.fill(); } context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter11/objects/wall.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Wall(p1,p2){ this.p1 = p1; this.p2 = p2; this.side = 1; } Wall.prototype = { get dir (){ return this.p2.subtract(this.p1); }, get normal (){ return this.dir.perp(1); }, draw: function (context) { context.save(); context.strokeStyle = '#000000'; context.lineWidth = 1; context.beginPath(); context.moveTo(this.p1.x,this.p1.y); context.lineTo(this.p2.x,this.p2.y); context.closePath(); context.stroke(); context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter11/wall-bouncing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wall bouncing 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter11/wall-bouncing.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var canvas_bg = document.getElementById('canvas_bg'); var context_bg = canvas_bg.getContext('2d'); var ball; var wallX = 400; var t0, dt; window.onload = init; function init() { // create a ball ball = new Ball(15,'#000000',1,0,false); ball.pos2D = new Vector2D(100,100); ball.velo2D = new Vector2D(200,50); ball.draw(context); // create a wall context_bg.strokeStyle = '#333333'; context_bg.beginPath(); context_bg.moveTo(wallX,50); context_bg.lineTo(wallX,350); context_bg.closePath(); context_bg.stroke(); // make the ball move t0 = new Date().getTime(); animFrame(); }; function animFrame(){ animId = requestAnimationFrame(animFrame,canvas); onTimer(); } function onTimer(){ var t1 = new Date().getTime(); dt = 0.001*(t1-t0); t0 = t1; if (dt>0.2) {dt=0;}; move(); } function move(){ moveObject(ball); checkBounce(ball); } function moveObject(obj){ obj.pos2D = obj.pos2D.addScaled(obj.velo2D,dt); context.clearRect(0, 0, canvas.width, canvas.height); obj.draw(context); } function checkBounce(obj){ if (obj.x > wallX - obj.radius){ obj.x = wallX - obj.radius; obj.vx *= -1; } } -------------------------------------------------------------------------------- /9781430263371/chapter11/wall-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wall object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter11/wall-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var p1 = new Vector2D(100,200); 5 | var p2 = new Vector2D(250,400); 6 | //Wall(p1,p2) 7 | var wall = new Wall(p1,p2); 8 | wall.draw(context); 9 | 10 | console.log(wall.dir.x,wall.dir.y); 11 | console.log(wall.normal.x,wall.normal.y); -------------------------------------------------------------------------------- /9781430263371/chapter12/fire-effect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fire effect 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/fireworks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fireworks 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/fireworks2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fireworks 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/galaxy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Galaxy 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style5.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(3px); 7 | -moz-filter: blur(3px); 8 | -ms-filter: blur(3px); 9 | -o-filter: blur(3px); 10 | filter: blur(3px); 11 | } 12 | -------------------------------------------------------------------------------- /9781430263371/chapter12/includes/style6.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(1px) brightness(2); 7 | } 8 | -------------------------------------------------------------------------------- /9781430263371/chapter12/long-range.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Long range 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /9781430263371/chapter12/multigravity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multigravity 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter12/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter12/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter12/objects/spark.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Spark(radius,r,g,b,alpha,mass){ if(typeof(radius)==='undefined') radius = 2; if(typeof(r)==='undefined') r = 255; if(typeof(g)==='undefined') g = 255; if(typeof(b)==='undefined') b = 255; if(typeof(alpha)==='undefined') alpha = 1; if(typeof(mass)==='undefined') mass = 1; this.radius = radius; this.r = r; this.g = g; this.b = b; this.alpha = alpha; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Spark.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = "rgba("+ this.r +","+ this.g +","+ this.b +","+ this.alpha +")"; context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter12/objects/star.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Star(radius,color,mass){ if(typeof(radius)==='undefined') radius = 5; if(typeof(color)==='undefined') color = '#ffff00'; if(typeof(mass)==='undefined') mass = 1; this.radius = radius; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Star.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter12/objects/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle(x,y,width,height,color,alpha,empty){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(alpha)==='undefined') alpha = 1; if(typeof(empty)==='undefined') empty = false; this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.alpha = alpha; this.empty = empty; } Triangle.prototype = { draw: function (context) { context.save(); if (this.empty){ context.strokeStyle = this.color; }else{ context.globalAlpha = this.alpha; context.fillStyle = this.color; } context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x+this.width,this.y); context.lineTo(this.x+this.width/2,this.y-this.height); context.lineTo(this.x,this.y); context.closePath(); if (this.empty) { context.stroke(); }else{ context.fill(); } context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter12/objects/wall.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Wall(p1,p2){ this.p1 = p1; this.p2 = p2; this.side = 1; } Wall.prototype = { get dir (){ return this.p2.subtract(this.p1); }, get normal (){ return this.dir.perp(1); }, draw: function (context) { context.save(); context.strokeStyle = '#000000'; context.lineWidth = 1; context.beginPath(); context.moveTo(this.p1.x,this.p1.y); context.lineTo(this.p2.x,this.p2.y); context.closePath(); context.stroke(); context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter12/particle-emitter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Particle emitter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/smoke-effect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Smoke effect 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/spark-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spark example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter12/spark-example.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var spark = new Spark(5,255,255,0,0.5,1); spark.pos2D = new Vector2D(200,200); spark.draw(context); -------------------------------------------------------------------------------- /9781430263371/chapter12/sparks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sparks 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter12/splash.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Splash 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter12/wormhole.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wormhole 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter13/ball-rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ball rotate example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter13/ball-rotate.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var r = 50; // ball radius 5 | var w = 0.2; // angular velocity in radians per second 6 | var dt = 30/1000; // timestep = 1/FPS 7 | var fac = 1; // slipping/sliding factor 8 | 9 | var ball = new Ball(r,'#0000ff',1,0,true,true); 10 | ball.x = 100; 11 | ball.y = 200; 12 | ball.rotation = 0.6; 13 | ball.draw(context); 14 | 15 | var v = fac*r*w; // v = r w 16 | var angDispl = 0; 17 | setInterval(onTimer, 1/dt); 18 | 19 | function onTimer(evt){ 20 | ball.x += v*dt; 21 | angDispl = w*dt; 22 | ball.rotation = angDispl; 23 | context.clearRect(0, 0, canvas.width, canvas.height); 24 | ball.draw(context); 25 | } -------------------------------------------------------------------------------- /9781430263371/chapter13/cloth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cloth simulation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style5.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(3px); 7 | -moz-filter: blur(3px); 8 | -ms-filter: blur(3px); 9 | -o-filter: blur(3px); 10 | filter: blur(3px); 11 | } 12 | -------------------------------------------------------------------------------- /9781430263371/chapter13/includes/style6.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(1px) brightness(2); 7 | } 8 | -------------------------------------------------------------------------------- /9781430263371/chapter13/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter13/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter13/objects/polygon.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Polygon(vertices,color,mass){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.vertices = vertices; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Polygon.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, set rotation (angle){ // value of rotation is not itself of interest; use it to rotate vertices for (var i=0; i 2 | 3 | 4 | 5 | Polygon rotate example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter13/polygon-rotate.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var v = 10; // linear velocity in pixels per second 5 | var w = 1; // angular velocity in radians per second 6 | var angDispl = 0; // initial angular displacement in radians 7 | var dt = 30/1000; // time step in seconds = 1/FPS 8 | 9 | // create a polygon 10 | v1 = new Vector2D(-100,100); 11 | v2 = new Vector2D(100,100); 12 | v3 = new Vector2D(150,0); 13 | v4 = new Vector2D(100,-100); 14 | v5 = new Vector2D(-100,-100); 15 | var vertices = new Array(v1,v2,v3,v4,v5); 16 | var polygon = new Polygon(vertices); 17 | polygon.x = 300; 18 | polygon.y = 300; 19 | polygon.draw(context); 20 | 21 | setInterval(onTimer, 1/dt); 22 | 23 | function onTimer(evt){ 24 | polygon.x += v*dt; 25 | angDispl = w*dt; 26 | polygon.rotation = angDispl; 27 | context.clearRect(0, 0, canvas.width, canvas.height); 28 | polygon.draw(context); 29 | } -------------------------------------------------------------------------------- /9781430263371/chapter13/rigid-body-bouncing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rigid body bouncing 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rigid-body-collisions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rigid body collisions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rigid-body-dynamics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rigid body dynamics 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rigid-body-dynamics2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rigid body dynamics 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rigid-body-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rigid body test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rigid-body-test.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var v = 10; // linear velocity in pixels per second 5 | var w = 1; // angular velocity in radians per second 6 | var angDispl = 0; // initial angular displacement in radians 7 | var dt = 30/1000; // time step in seconds = 1/FPS 8 | 9 | // create a ball 10 | var ball = new BallRB(50,'#ff0000',1,0,true,true); 11 | ball.x = 100; 12 | ball.y = 200; 13 | ball.rotation = Math.PI/4; 14 | ball.draw(context); 15 | 16 | // create a rectangular polygon 17 | v1 = new Vector2D(-100,100); 18 | v2 = new Vector2D(100,100); 19 | v3 = new Vector2D(100,-100); 20 | v4 = new Vector2D(-100,-100); 21 | var vertices = new Array(v1,v2,v3,v4); 22 | var polygon = new PolygonRB(vertices); 23 | polygon.x = 300; 24 | polygon.y = 300; 25 | polygon.draw(context); 26 | 27 | setInterval(onTimer, 1/dt); 28 | 29 | function onTimer(evt){ 30 | polygon.x += v*dt; 31 | angDispl = w*dt; 32 | polygon.rotation = angDispl; 33 | ball.rotation = -0.5*angDispl; 34 | context.clearRect(0, 0, canvas.width, canvas.height); 35 | ball.draw(context); 36 | polygon.draw(context); 37 | } -------------------------------------------------------------------------------- /9781430263371/chapter13/rolling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rolling 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rope.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rope simulation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/rope2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rope simulation 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/wheel-rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wheel rotate example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter13/wheel-rotate.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var r = 50; // outer radius 5 | var w = 1; // angular velocity in radians per second 6 | var dt = 30/1000; // timestep = 1/FPS 7 | var fac = 1; // slipping/sliding factor 8 | 9 | var wheel = new Wheel(r-10,r,12); 10 | wheel.x = 100; 11 | wheel.y = 200; 12 | wheel.draw(context); 13 | 14 | var v = fac*r*w; // v = r w 15 | var angle = 0; 16 | setInterval(onTimer, 1/dt); 17 | 18 | function onTimer(evt){ 19 | wheel.x += v*dt; 20 | angle += w*dt; 21 | wheel.rotation = angle; 22 | context.clearRect(0, 0, canvas.width, canvas.height); 23 | wheel.draw(context); 24 | } -------------------------------------------------------------------------------- /9781430263371/chapter13/wheel.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Wheel(innerRadius,outerRadius,numSpokes){ this.ir = innerRadius; this.or = outerRadius; this.nums = numSpokes; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.rotation = 0; } Wheel.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { var ir = this.ir; var or = this.or; var nums = this.nums; context.save(); context.fillStyle = '#000000'; context.beginPath(); context.arc(this.x, this.y, or, 0, 2*Math.PI, true); context.closePath(); context.fill(); context.fillStyle = '#ffffaa'; context.beginPath(); context.arc(this.x, this.y, ir, 0, 2*Math.PI, true); context.closePath(); context.fill(); context.strokeStyle = '#000000'; context.lineWidth = 4; context.beginPath(); for (var n=0; n 2 | 3 | 4 | 5 | Wind turbine 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter13/wind-turbines.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wind turbines 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style5.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(3px); 7 | -moz-filter: blur(3px); 8 | -ms-filter: blur(3px); 9 | -o-filter: blur(3px); 10 | filter: blur(3px); 11 | } 12 | -------------------------------------------------------------------------------- /9781430263371/chapter14/includes/style6.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(1px) brightness(2); 7 | } 8 | -------------------------------------------------------------------------------- /9781430263371/chapter14/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter14/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter14/objects/polygon.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Polygon(vertices,color,mass){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.vertices = vertices; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Polygon.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, set rotation (angle){ // value of rotation is not itself of interest; use it to rotate vertices for (var i=0; i 2 | 3 | 4 | 5 | Orbits 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter14/projectile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Projectile 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter14/rope-explicit-euler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rope simulation with explicit Euler scheme 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter14/scale-model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scale model 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter14/schemes-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Schemes test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter14/springs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Springs 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter15/bouncing-ball.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball 3D 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter15/cube-rotation-euler-angles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cube rotation with Euler angles and spring force 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter15/cube-rotation-quaternion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cube rotation using quaternions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter15/cube-rotation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cube rotation 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter15/earth-moon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Earth-Moon 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter15/earth.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Earth 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /9781430263371/chapter15/earth.js: -------------------------------------------------------------------------------- 1 | var width = window.innerWidth, height = window.innerHeight; 2 | 3 | var renderer = new THREE.WebGLRenderer(); 4 | renderer.setSize(width, height); 5 | document.body.appendChild(renderer.domElement); 6 | 7 | var scene = new THREE.Scene(); 8 | 9 | var angle = 45, aspect = width/height, near = 0.1, far = 10000; 10 | var camera = new THREE.PerspectiveCamera(angle, aspect, near, far); 11 | camera.position.set(100,0,500); 12 | scene.add(camera); 13 | 14 | var light = new THREE.DirectionalLight(); 15 | light.position.set(-10,0,20); 16 | scene.add(light); 17 | 18 | var radius = 100, segments = 20, rings = 20; 19 | var sphereGeometry = new THREE.SphereGeometry(radius,segments,rings); 20 | var sphereMaterial = new THREE.MeshLambertMaterial(); 21 | sphereMaterial.map = THREE.ImageUtils.loadTexture('images/earth.jpg'); 22 | var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); 23 | scene.add(sphere); 24 | 25 | function animFrame(){ 26 | requestAnimationFrame(animFrame); 27 | onEachStep(); 28 | } 29 | function onEachStep() { 30 | sphere.rotation.y += 0.01; 31 | camera.position.z -= 0.1; 32 | renderer.render(scene, camera); 33 | } 34 | animFrame(); 35 | -------------------------------------------------------------------------------- /9781430263371/chapter15/images/earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/physics-for-javascript-games-animation-simulations/ad5e13fd2a175bb0ff4e5dae74d602edf1712af5/9781430263371/chapter15/images/earth.jpg -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style5.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(3px); 7 | -moz-filter: blur(3px); 8 | -ms-filter: blur(3px); 9 | -o-filter: blur(3px); 10 | filter: blur(3px); 11 | } 12 | -------------------------------------------------------------------------------- /9781430263371/chapter15/includes/style6.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(1px) brightness(2); 7 | } 8 | -------------------------------------------------------------------------------- /9781430263371/chapter15/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter15/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter15/objects/polygon.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Polygon(vertices,color,mass){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.vertices = vertices; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Polygon.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, set rotation (angle){ // value of rotation is not itself of interest; use it to rotate vertices for (var i=0; i 2 | 3 | 4 | 5 | Airplane 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /9781430263371/chapter16/images/earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/physics-for-javascript-games-animation-simulations/ad5e13fd2a175bb0ff4e5dae74d602edf1712af5/9781430263371/chapter16/images/earth.jpg -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style5.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(3px); 7 | -moz-filter: blur(3px); 8 | -ms-filter: blur(3px); 9 | -o-filter: blur(3px); 10 | filter: blur(3px); 11 | } 12 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style6.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | -webkit-filter: blur(1px) brightness(2); 7 | } 8 | -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style7.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | #canvas_bg { 17 | background-color: #fff; 18 | position:absolute; 19 | top:10px; 20 | left:10px; 21 | } -------------------------------------------------------------------------------- /9781430263371/chapter16/includes/style8.css: -------------------------------------------------------------------------------- 1 | #canvas { 2 | background-color: #fff; 3 | position:absolute; 4 | top:10px; 5 | left:10px; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter16/objects/astro.js: -------------------------------------------------------------------------------- 1 | function Astro() { }; Astro.SUN_MASS = 1.9891E30; Astro.SUN_RADIUS = 696.0E6; Astro.EARTH_MASS = 5.9736E24; // in kg Astro.EARTH_RADIUS = 6.3710E6; // volumetric mean in m Astro.EARTH_ORBITAL_RADIUS = 149.6E9; // semimajor axis in m Astro.EARTH_ORBITAL_VELOCITY = 29.78E3; // mean orbital velocity in km/s Astro.EARTH_DENSITY = 5515; // in kg/m^3 Astro.EARTH_SURFACE_GRAVITY = 9.798; // in m/s^2 Astro.EARTH_DAY = 86400.0; // in seconds; 24.0000 hours Astro.EARTH_YEAR = 3.15581E7; // sidereal orbital period in seconds Astro.MERCURY_MASS = 0.3302E24; Astro.MERCURY_RADIUS = 2.4397E6; // volumetric mean Astro.MERCURY_ORBITAL_RADIUS = 57.91E9; // semimajor axis Astro.MERCURY_ORBITAL_VELOCITY = 47.87E3; // mean orbital velocity Astro.VENUS_MASS = 4.8685E24; Astro.VENUS_RADIUS = 6.0518E6; // volumetric mean Astro.VENUS_ORBITAL_RADIUS = 108.21E9; // semimajor axis Astro.VENUS_ORBITAL_VELOCITY = 35.02E3; // mean orbital velocity Astro.MARS_MASS = 0.64185E24; Astro.MARS_RADIUS = 3.3895E6; // volumetric mean Astro.MARS_ORBITAL_RADIUS = 227.92E9; // semimajor axis Astro.MARS_ORBITAL_VELOCITY = 24.13E3; // mean orbital velocity -------------------------------------------------------------------------------- /9781430263371/chapter16/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter16/objects/matrix3D.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector3D function Matrix3D(v1,v2,v3) { // v1, v2, v3 are of Vector3D type this.v1 = v1; this.v2 = v2; this.v3 = v3; } // PUBLIC METHODS Matrix3D.prototype = { multiply: function(vec) { // multiply by a Vector3D object return new Vector3D(vec.dotProduct(this.v1),vec.dotProduct(this.v2),vec.dotProduct(this.v3)); }, scaleBy: function(k) { // scale by a number this.v1.scaleBy(k); this.v2.scaleBy(k); this.v3.scaleBy(k); } }; -------------------------------------------------------------------------------- /9781430263371/chapter16/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter16/objects/phys.js: -------------------------------------------------------------------------------- 1 | function Phys() { }; Phys.GRAVITATIONAL_CONSTANT = 6.67384E-11; Phys.STANDARD_GRAVITY = 9.80665; Phys.SPEED_OF_LIGHT = 299792458; // in vacuum -------------------------------------------------------------------------------- /9781430263371/chapter16/objects/polygon.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Polygon(vertices,color,mass){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.vertices = vertices; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Polygon.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, set rotation (angle){ // value of rotation is not itself of interest; use it to rotate vertices for (var i=0; i 2 | 3 | 4 | 5 | RK4 Test 3D 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter16/rk4test3d.js: -------------------------------------------------------------------------------- 1 | var dt = 0.05; var numSteps = 20; var t = 0; var g = 10; var v = new Vector3D(0,0,0); var s = new Vector3D(0,0,0); window.onload = init; function init(){ simulate(); } function simulate(){ console.log(t,s.y); for (var i=0; i 2 | 3 | 4 | 5 | Single Planet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter16/solar-system-animated.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Solar system animated 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/solar-system-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Solar system basic 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/solar-system-nasa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Solar system NASA 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/solar-system.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Solar system 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter16/submarine.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Submarine 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter2/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/physics-for-javascript-games-animation-simulations/ad5e13fd2a175bb0ff4e5dae74d602edf1712af5/9781430263371/chapter2/Thumbs.db -------------------------------------------------------------------------------- /9781430263371/chapter2/ball-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ball object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/ball-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var ball = new Ball(50,'#0000ff'); 5 | ball.x = 100; 6 | ball.y = 100; 7 | ball.draw(context); 8 | -------------------------------------------------------------------------------- /9781430263371/chapter2/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | this.radius = radius; 3 | this.color = color; 4 | this.x = 0; 5 | this.y = 0; 6 | this.vx = 0; 7 | this.vy = 0; 8 | } 9 | 10 | Ball.prototype.draw = function (context) { 11 | context.fillStyle = this.color; 12 | context.beginPath(); 13 | context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); 14 | context.closePath(); 15 | context.fill(); 16 | }; 17 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-ball-drag-drop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball drag and drop example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-ball-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-ball-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var g = 0.1; 5 | var radius = 20; 6 | var color = "#0000ff"; 7 | var ball; 8 | 9 | window.onload = init; 10 | 11 | function init() { 12 | ball = new Ball(radius,color); 13 | ball.x = 50; 14 | ball.y = 50; 15 | ball.vx = 2; 16 | ball.vy = 0; 17 | ball.draw(context); 18 | setInterval(onEachStep, 1000/60); // 60 fps 19 | }; 20 | 21 | function onEachStep() { 22 | ball.vy += g; 23 | ball.x += ball.vx; 24 | ball.y += ball.vy; 25 | 26 | if (ball.y > canvas.height - radius){ 27 | ball.y = canvas.height - radius; 28 | ball.vy *= -0.8; 29 | } 30 | if (ball.x > canvas.width + radius){ 31 | ball.x = -radius; 32 | } 33 | context.clearRect(0, 0, canvas.width, canvas.height); 34 | ball.draw(context); 35 | }; 36 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-ball-pause.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball pause 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-ball-random.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball random 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-ball-recycled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing ball recycled 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-balls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bouncing balls 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/bouncing-balls.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var g = 0.1; 5 | var radius = 20; 6 | var color = "#0000ff"; 7 | var balls; 8 | var numBalls = 5; 9 | 10 | window.onload = init; 11 | 12 | function init() { 13 | balls = new Array(); 14 | for (var i=0; i canvas.height - radius){ 36 | ball.y = canvas.height - radius; 37 | ball.vy *= -0.8; 38 | } 39 | if (ball.x > canvas.width + radius){ 40 | ball.x = -radius; 41 | } 42 | ball.draw(context); 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /9781430263371/chapter2/canvas-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas example 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /9781430263371/chapter2/canvas-overlap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas overlap example 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-fills.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas drawing API - fills 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-fills.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | context.strokeStyle = '#0000ff'; 5 | context.lineWidth = 2; 6 | context.beginPath() ; 7 | context.moveTo(50, 50); 8 | context.lineTo(150, 50); 9 | context.lineTo(150, 200); 10 | context.lineTo(50, 200); 11 | context.lineTo(50, 50); 12 | context.stroke(); 13 | context.fillStyle = '#00ff00'; 14 | context.fill(); 15 | 16 | context.fillRect(250,50,150,100); -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-gradients.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas drawing API - gradients 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-gradients.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | gradient = context.createLinearGradient(0,0,0,500); 5 | gradient.addColorStop(0,'ffffff'); 6 | gradient.addColorStop(1,'0000ff'); 7 | context.fillStyle = gradient; 8 | context.fillRect(0,0,700,500); 9 | 10 | gradient1 = context.createRadialGradient(350,250,5,350,250,50); 11 | gradient1.addColorStop(0,'ffffff'); 12 | gradient1.addColorStop(1,'ff0000'); 13 | context.fillStyle = gradient1; 14 | context.arc(350,250,50,0,2*Math.PI,true); 15 | context.fill(); 16 | 17 | //context.clearRect(100,100,50,100); 18 | //context.clearRect(0,0,canvas.width,canvas.height); -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas drawing API - grid 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-grid.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var xMin=50; 5 | var xMax=400; 6 | var yMin=50; 7 | var yMax=300; 8 | var xStep=10; 9 | var yStep=10; 10 | 11 | context.beginPath() ; 12 | 13 | var imax = Math.floor((xMax-xMin)/xStep); 14 | for (var i=0; i<=imax; i++){ 15 | context.moveTo(xMin+xStep*i,yMin); 16 | context.lineTo(xMin+xStep*i,yMax); 17 | } 18 | var jmax = Math.floor((yMax-yMin)/yStep); 19 | for (var j=0; j<=jmax; j++){ 20 | context.moveTo(xMin,yMin+yStep*j); 21 | context.lineTo(xMax,yMin+yStep*j); 22 | } 23 | 24 | context.stroke(); 25 | 26 | 27 | -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-straight-line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas drawing API - straight line 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /9781430263371/chapter2/drawing-api-straight-line.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | context.strokeStyle = '#0000ff'; 5 | context.lineWidth = 2; 6 | context.beginPath() ; 7 | context.moveTo(50, 100); 8 | context.lineTo(250, 400); 9 | context.stroke(); 10 | -------------------------------------------------------------------------------- /9781430263371/chapter2/frame-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frame example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/frame-example.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | var ball; 4 | 5 | window.onload = init; 6 | 7 | function init() { 8 | ball = new Ball(20,"#0000ff"); 9 | ball.x = 50; ball.y = 250; 10 | ball.vx = 2; 11 | ball.draw(context); 12 | animFrame(); 13 | }; 14 | 15 | function animFrame(){ 16 | requestAnimationFrame(animFrame,canvas); 17 | onEachStep(); 18 | } 19 | 20 | function onEachStep() { 21 | ball.x += ball.vx; 22 | context.clearRect(0, 0, canvas.width, canvas.height); 23 | ball.draw(context); 24 | }; 25 | -------------------------------------------------------------------------------- /9781430263371/chapter2/frame-timer-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frame timer example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/frame-timer-example.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | var ball; 4 | 5 | window.onload = init; 6 | 7 | function init() { 8 | ball = new Ball(20,"#0000ff"); 9 | ball.x = 50; ball.y = 250; 10 | ball.vx = 2; 11 | ball.draw(context); 12 | animFrame(); 13 | }; 14 | 15 | function animFrame(){ 16 | setTimeout(function() { 17 | requestAnimationFrame(animFrame,canvas); 18 | onEachStep(); 19 | }, 1000/60); 20 | } 21 | 22 | function onEachStep() { 23 | ball.x += ball.vx; 24 | context.clearRect(0, 0, canvas.width, canvas.height); 25 | ball.draw(context); 26 | }; 27 | -------------------------------------------------------------------------------- /9781430263371/chapter2/getTime-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | getTime example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/getTime-example.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | var ball; 4 | var t0; // time at last call 5 | var dt; // elapsed time between calls 6 | 7 | window.onload = init; 8 | 9 | function init() { 10 | ball = new Ball(20,"#0000ff"); 11 | ball.x = 50; ball.y = 250; 12 | ball.vx = 200; 13 | ball.draw(context); 14 | t0 = new Date().getTime(); // initialize value of t0 15 | animFrame(); 16 | }; 17 | 18 | function animFrame(){ 19 | requestAnimationFrame(animFrame,canvas); 20 | onEachStep(); 21 | } 22 | 23 | function onEachStep() { 24 | var t1 = new Date().getTime(); // current time in milliseconds since midnight on 1 Jan 1970 25 | dt = 0.001*(t1-t0); // time elapsed in seconds since last call 26 | t0 = t1; // reset t0 27 | ball.x += ball.vx * dt; 28 | context.clearRect(0, 0, canvas.width, canvas.height); 29 | ball.draw(context); 30 | }; 31 | -------------------------------------------------------------------------------- /9781430263371/chapter2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter2/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas1 { 5 | background-color: #0f0; 6 | position:fixed; 7 | top:50px; 8 | left:50px; 9 | } 10 | #canvas2 { 11 | background-color: #f00; 12 | position:fixed; 13 | top:250px; 14 | left:250px; 15 | } -------------------------------------------------------------------------------- /9781430263371/chapter2/timer-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Timer example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter2/timer-example.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | var ball; 4 | 5 | window.onload = init; 6 | 7 | function init() { 8 | ball = new Ball(20,"#0000ff"); 9 | ball.x = 50; ball.y = 250; 10 | ball.vx = 2; 11 | ball.draw(context); 12 | setInterval(onEachStep, 1000/60); // 60 fps 13 | }; 14 | 15 | function onEachStep() { 16 | ball.x += ball.vx; 17 | context.clearRect(0, 0, canvas.width, canvas.height); 18 | ball.draw(context); 19 | }; 20 | -------------------------------------------------------------------------------- /9781430263371/chapter3/ball.js: -------------------------------------------------------------------------------- 1 | function Ball (radius, color) { 2 | this.radius = radius; 3 | this.color = color; 4 | this.x = 0; 5 | this.y = 0; 6 | this.vx = 0; 7 | this.vy = 0; 8 | } 9 | 10 | Ball.prototype.draw = function (context) { 11 | context.fillStyle = this.color; 12 | context.beginPath(); 13 | context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); 14 | context.closePath(); 15 | context.fill(); 16 | }; 17 | -------------------------------------------------------------------------------- /9781430263371/chapter3/gradient-function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Gradient function 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/gradient-function.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var numPoints=1001; var numGrad=50; var xRange=6; var xStep; var graph = new Graph(context,-4,4,-10,10,275,210,450,350); graph.drawgrid(1,0.2,2,0.5); graph.drawaxes('x','y'); var xA = new Array(); var yA = new Array(); // calculate function xStep = xRange/(numPoints-1); for (var i=0; i 2 | 3 | 4 | 5 | Graph example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/graph-example.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var graph = new Graph(context,-4,4,0,20,275,380,450,350); graph.drawgrid(1,0.2,5,1); graph.drawaxes('x','y'); //graph.drawaxes(); // use default axis labels var xvals = new Array(-4,-3,-2,-1,0,1,2,3,4); var yvals = new Array(16,9,4,1,0,1,4,9,16); graph.plot(xvals, yvals); var xA = new Array(); var yA = new Array(); for (var i=0; i<=100; i++){ xA[i] = (i-50)*0.08; yA[i] = xA[i]*xA[i]; } graph.plot(xA, yA, "#ff0000", false, true); -------------------------------------------------------------------------------- /9781430263371/chapter3/graph-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Graph functions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/graph-functions.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //var graph = new Graph(context,-4,4,-10,10,275,210,450,350); //var graph = new Graph(context,-2.5,2.5,-10,10,275,210,450,350); //var graph = new Graph(context,-3,3,0,20,275,380,480,350); var graph = new Graph(context,-3,3,0,1,275,380,480,350); graph.drawgrid(1,0.2,0.2,0.05); //graph.drawgrid(1,0.2,5,1); //graph.drawgrid(0.5,0.1,2,0.5); graph.drawaxes('x','y'); var xA = new Array(); var yA = new Array(); var y1A = new Array(); for (var i=0; i<=100; i++){ //xA[i] = (i-50)*0.08; xA[i] = (i-50)*0.06; //xA[i] = (i-50)*0.05; yA[i] = f(xA[i]); //y1A[i] = f(-xA[i]); } graph.plot(xA,yA,'#ff0000',false,true); //graph.plot(xA,y1A,'#0000ff',false,true); graph.plot(xA,y1A,'#0000ff',true,false); function f(x){ var y; y = Math.exp(-x*x); //y = Math.exp(x); //y = -0.5*Math.pow(x,5) + 3*Math.pow(x,3) + x*x - 2*x - 3; //y = x*x*x + x*x - 2*x - 3; //y = x*x - 2*x - 3; //y = 2*x + 1; return y; } -------------------------------------------------------------------------------- /9781430263371/chapter3/integration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Integration 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/integration.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); numPoints=1001; var numGrad=1; var xRange=6; var xStep; var graph = new Graph(context,-4,4,-10,10,275,210,450,350); graph.drawgrid(1,0.2,2,0.5); graph.drawaxes('x','y'); var xA = new Array(); var yA = new Array(); // calculate function xStep = xRange/(numPoints-1); for (var i=0; i 2 | 3 | 4 | 5 | Move circle parametric 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter3/move-circle-parametric.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var canvas_bg = document.getElementById('canvas_bg'); var context_bg = canvas_bg.getContext('2d'); var ball; var xA=new Array(); var yA=new Array(); var n=0; var xmin=-2; var xmax=2; var ymin=-2; var ymax=2; var xorig=275; var yorig=210; var xwidth=350; var ywidth=350; var xscal; var yscal; var idInterval; window.onload = init; function init(){ plotGraph(); placeBall(); setupTimer(); } function plotGraph(){ var graph = new Graph(context_bg,xmin,xmax,ymin,ymax,xorig,yorig,xwidth,ywidth); graph.drawgrid(1,0.2,1,0.2); graph.drawaxes('x','y'); xscal=(xmax-xmin)/xwidth; yscal=(ymax-ymin)/ywidth; for (var i=0; i<=1000; i++){ var t=0.01*i; xA[i] = Math.sin(t); yA[i] = Math.cos(t); } graph.plot(xA,yA,'#ff0000',false,true); } function placeBall(){ ball = new Ball(6,"#0000ff"); ball.x = xA[0]/xscal+ xorig; ball.y = -yA[0]/yscal + yorig; ball.draw(context); } function setupTimer(){ idInterval = setInterval(moveBall, 1000/60); } function moveBall(){ ball.x = xA[n]/xscal + xorig; ball.y = -yA[n]/yscal + yorig; context.clearRect(0, 0, canvas.width, canvas.height); ball.draw(context); n++; if (n==xA.length){ clearInterval(idInterval); } } -------------------------------------------------------------------------------- /9781430263371/chapter3/move-circle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Move circle 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter3/move-curve.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Move curve 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter3/periodic-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Periodic functions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/periodic-functions.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var graph1 = new Graph(context,0,10,0,2,50,180,450,100); graph1.drawgrid(1,0.2,1,0.2); graph1.drawaxes('x','y'); var graph2 = new Graph(context,0,10,0,2,50,380,450,100); graph2.drawgrid(1,0.2,1,0.2); graph2.drawaxes('x','y'); var xA = new Array(); var y1A = new Array(); var y2A = new Array(); for (var i=0; i<=1000; i++){ xA[i] = i*0.01; y1A[i] = f1(xA[i]); y2A[i] = f2(xA[i]); } graph1.plot(xA,y1A,0x0000ff,false,true); graph2.plot(xA,y2A,0x0000ff,false,true); function f1(x){ var y; y = x%2; return y; } function f2(x){ var y; if (x%1<0.5){ y = 0; }else{ y = 1; } return y; } -------------------------------------------------------------------------------- /9781430263371/chapter3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter3/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:50px; 8 | left:50px; 9 | background-color: transparent; 10 | } 11 | #canvas_bg { 12 | background-color: #fff; 13 | position:absolute; 14 | top:50px; 15 | left:50px; 16 | } -------------------------------------------------------------------------------- /9781430263371/chapter3/trig-animations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Trig animations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter3/trig-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Trigonometric functions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/trig-functions.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var graph = new Graph(context,-720,720,-1,1,275,200,480,320); //var graph = new Graph(context,-720,720,-10,10,275,200,480,320); // for tan graph.drawgrid(180,45,0.5,0.1); //graph.drawgrid(180,45,5,1); // for tan graph.drawaxes('x','y'); var xA = new Array(); var yA = new Array(); var y1A = new Array(); for (var i=0; i<=200; i++){ xA[i] = (i-100)*7.2; yA[i] = f(xA[i]); } graph.plot(xA,yA,'#ff0000',false,true); //console.log(Math.atan(1)*180/Math.PI); //console.log(Math.atan2(-2,-2)*180/Math.PI); function f(x){ var y; y = Math.sin(x*Math.PI/180); // y = Math.cos(x*Math.PI/180); // y = Math.cos((x-90)*Math.PI/180); // y = Math.tan(x*Math.PI/180); return y; } -------------------------------------------------------------------------------- /9781430263371/chapter3/vector-examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vector examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter3/vector-examples.js: -------------------------------------------------------------------------------- 1 | var vec1 = new Vector2D(1,1); var vec2 = new Vector2D(1,0); console.log(vec1.length()); // magnitude of vec1 console.log(vec1.lengthSquared()); // magnitude squared of vec1 console.log(Vector2D.angleBetween(vec1,vec2)*180/Math.PI); // static method that returns the angle between two vectors console.log(vec1.dotProduct(vec2)); // returns dot product of vec1 with vec2 -------------------------------------------------------------------------------- /9781430263371/chapter3/vector2D.js: -------------------------------------------------------------------------------- 1 | function Vector2D(x,y) { this.x = x; this.y = y; } // PUBLIC METHODS Vector2D.prototype = { lengthSquared: function(){ return this.x*this.x + this.y*this.y; }, length: function(){ return Math.sqrt(this.lengthSquared()); }, clone: function() { return new Vector2D(this.x,this.y); }, negate: function() { this.x = - this.x; this.y = - this.y; }, normalize: function() { var length = this.length(); if (length > 0) { this.x /= length; this.y /= length; } return this.length(); }, add: function(vec) { return new Vector2D(this.x + vec.x,this.y + vec.y); }, incrementBy: function(vec) { this.x += vec.x; this.y += vec.y; }, subtract: function(vec) { return new Vector2D(this.x - vec.x,this.y - vec.y); }, decrementBy: function(vec) { this.x -= vec.x; this.y -= vec.y; }, scaleBy: function(k) { this.x *= k; this.y *= k; }, dotProduct: function(vec) { return this.x*vec.x + this.y*vec.y; } }; // STATIC METHODS Vector2D.distance = function(vec1,vec2){ return (vec1.subtract(vec2)).length(); } Vector2D.angleBetween = function(vec1,vec2){ return Math.acos(vec1.dotProduct(vec2)/(vec1.length()*vec2.length())); } -------------------------------------------------------------------------------- /9781430263371/chapter4/ball-move.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ball move 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter4/ball-move.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var ball; var t; var t0; var dt; var animId; var animTime = 5; // duration of animation window.onload = init; function init() { ball = new Ball(20,'#ff0000',1,0,true); ball.pos2D = new Vector2D(150,50); ball.velo2D=new Vector2D(30,20); ball.draw(context); t0 = new Date().getTime(); t = 0; animFrame(); }; function animFrame(){ animId = requestAnimationFrame(animFrame,canvas); onTimer(); } function onTimer(){ var t1 = new Date().getTime(); dt = 0.001*(t1-t0); t0 = t1; t += dt; //console.log(dt,t,t0,animTime); if (t < animTime){ move(); }else{ stop(); } } function move(){ ball.pos2D = ball.pos2D.addScaled(ball.velo2D,dt); context.clearRect(0, 0, canvas.width, canvas.height); ball.draw(context); } function stop(){ cancelAnimationFrame(animId); } -------------------------------------------------------------------------------- /9781430263371/chapter4/ball-particle-inheritance-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ball Particle inheritance test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter4/ball-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ball test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter4/ball-test.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var ball = new Ball(20,'#ff0000',1,0,true); ball.pos2D = new Vector2D(150,50); ball.draw(context); var balls = new Array(); var numBalls = 10; for (var i=1; i<=numBalls; i++){ var ball; var radius = (Math.random()+0.5)*20; var color = '#0000ff'; ball = new Ball(radius,color,1,0,true); ball.pos2D = new Vector2D(Math.random()*canvas.width,Math.random()*canvas.height); ball.draw(context); balls.push(ball); } -------------------------------------------------------------------------------- /9781430263371/chapter4/ball.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Ball(radius,color,mass,charge,gradient){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; if(typeof(gradient)==='undefined') gradient = false; this.radius = radius; this.color = color; this.mass = mass; this.charge = charge; this.gradient = gradient; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Ball.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { if (this.gradient){ grad = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); grad.addColorStop(0,'#ffffff'); grad.addColorStop(1,this.color); context.fillStyle = grad; }else{ context.fillStyle = this.color; } context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter4/ball2.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D // this version extends Particle function Ball(radius,color,mass,charge,gradient){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; if(typeof(gradient)==='undefined') gradient = false; this.radius = radius; this.color = color; this.mass = mass; this.charge = charge; this.gradient = gradient; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Ball.prototype = Object.create(Particle.prototype); Ball.prototype.constructor = Ball; Ball.prototype.draw = function (context){ if (this.gradient){ grad = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); grad.addColorStop(0,'#ffffff'); grad.addColorStop(1,this.color); context.fillStyle = grad; }else{ context.fillStyle = this.color; } context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); }; -------------------------------------------------------------------------------- /9781430263371/chapter4/balls-move.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Balls move 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter4/balls-move.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var balls; var t; var t0; var dt; var animId; var animTime = 10; // duration of animation var numBalls = 10; window.onload = init; function init() { balls = new Array(); for (var i=0; i 2 | 3 | 4 | 5 | Energy example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter4/forces-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Forces example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter4/particle-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Particle example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter4/particle-example.js: -------------------------------------------------------------------------------- 1 | var particle = new Particle(); particle.x = 2; particle.y = 3; // tests console.log(particle.mass, particle.charge); particle.mass = 2; particle.charge = -1; console.log(particle.mass, particle.charge); //console.log(particle.getPos2D().x, particle.getPos2D().y); console.log(particle.pos2D.x, particle.pos2D.y); console.log(particle.velo2D.x, particle.velo2D.y); particle.velo2D = new Vector2D(2.5,4.7); console.log(particle.velo2D.x, particle.velo2D.y); var dt = 0.1; particle.pos2D = particle.pos2D.addScaled(particle.velo2D,dt); console.log(particle.pos2D.x, particle.pos2D.y); -------------------------------------------------------------------------------- /9781430263371/chapter4/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter4/projectile-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Projectile test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter4/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter4/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } -------------------------------------------------------------------------------- /9781430263371/chapter4/vector2D.js: -------------------------------------------------------------------------------- 1 | function Vector2D(x,y) { this.x = x; this.y = y; } // PUBLIC METHODS Vector2D.prototype = { lengthSquared: function(){ return this.x*this.x + this.y*this.y; }, length: function(){ return Math.sqrt(this.lengthSquared()); }, clone: function() { return new Vector2D(this.x,this.y); }, negate: function() { this.x = - this.x; this.y = - this.y; }, normalize: function() { var length = this.length(); if (length > 0) { this.x /= length; this.y /= length; } return this.length(); }, add: function(vec) { return new Vector2D(this.x + vec.x,this.y + vec.y); }, incrementBy: function(vec) { this.x += vec.x; this.y += vec.y; }, subtract: function(vec) { return new Vector2D(this.x - vec.x,this.y - vec.y); }, decrementBy: function(vec) { this.x -= vec.x; this.y -= vec.y; }, multiply: function(k) { return new Vector2D(k*this.x,k*this.y); }, addScaled: function(vec,k) { return new Vector2D(this.x + k*vec.x, this.y + k*vec.y); }, scaleBy: function(k) { this.x *= k; this.y *= k; }, dotProduct: function(vec) { return this.x*vec.x + this.y*vec.y; } }; // STATIC METHODS Vector2D.distance = function(vec1,vec2){ return (vec1.subtract(vec2)).length(); } Vector2D.angleBetween = function(vec1,vec2){ return Math.acos(vec1.dotProduct(vec2)/(vec1.length()*vec2.length())); } -------------------------------------------------------------------------------- /9781430263371/chapter5/ball.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Ball(radius,color,mass,charge,gradient){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; if(typeof(gradient)==='undefined') gradient = false; this.radius = radius; this.color = color; this.mass = mass; this.charge = charge; this.gradient = gradient; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Ball.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { if (this.gradient){ grad = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); grad.addColorStop(0,'#ffffff'); grad.addColorStop(1,this.color); context.fillStyle = grad; }else{ context.fillStyle = this.color; } context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter5/collisions-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Collisions test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter5/floating-ball.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Floating ball 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter5/forces-example2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Forces example 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter5/forces-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Forces test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter5/forces.js: -------------------------------------------------------------------------------- 1 | function Forces(){ } // STATIC METHODS Forces.zeroForce = function() { return (new Vector2D(0,0)); } Forces.constantGravity = function(m,g){ return new Vector2D(0,m*g); } Forces.linearDrag = function(k,vel){ var force; var velMag = vel.length(); if (velMag > 0) { force = vel.multiply(-k); }else { force = new Vector2D(0,0); } return force; } Forces.add = function(arr){ var forceSum = new Vector2D(0,0); for (var i=0; i 2 | 3 | 4 | 5 | Projectile energy 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter5/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter5/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter5/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter6/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter6/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter6/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter6/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter6/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter6/objects/ball.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Ball(radius,color,mass,charge,gradient){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; if(typeof(gradient)==='undefined') gradient = false; this.radius = radius; this.color = color; this.mass = mass; this.charge = charge; this.gradient = gradient; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Ball.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { if (this.gradient){ grad = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); grad.addColorStop(0,'#ffffff'); grad.addColorStop(1,this.color); context.fillStyle = grad; }else{ context.fillStyle = this.color; } context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter6/objects/forces.js: -------------------------------------------------------------------------------- 1 | function Forces(){ } // STATIC METHODS Forces.zeroForce = function() { return (new Vector2D(0,0)); } Forces.constantGravity = function(m,g){ return new Vector2D(0,m*g); } Forces.gravity = function(G,m1,m2,r){ return r.multiply(-G*m1*m2/(r.lengthSquared()*r.length())); } Forces.linearDrag = function(k,vel){ var force; var velMag = vel.length(); if (velMag > 0) { force = vel.multiply(-k); }else { force = new Vector2D(0,0); } return force; } Forces.add = function(arr){ var forceSum = new Vector2D(0,0); for (var i=0; i 2 | 3 | 4 | 5 | Orbits 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter6/plot-g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Plot g 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter6/plot-g.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var graph = new Graph(context,0,10,0,10,50,350,450,300); graph.drawgrid(1,0.2,2,0.4); graph.drawaxes('r / R','g'); var rA = new Array(); var gA = new Array(); for (var i=0; i<=100; i++){ var r; rA[i] = i*0.1; r = rA[i]; if (r<=1){ gA[i] = 9.81*r; }else{ gA[i] = 9.81/(r*r); } } graph.plot(rA, gA, '#ff0000', false, true); -------------------------------------------------------------------------------- /9781430263371/chapter6/readme.txt: -------------------------------------------------------------------------------- 1 | Note that, beginning with this chapter, we've placed the css files in the folder includes and the reusable objects in the folder objects. 2 | -------------------------------------------------------------------------------- /9781430263371/chapter6/rocket-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rocket object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter6/rocket-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | //Rocket(width,height,color,mass) 5 | var rocket = new Rocket(50,100,'#666666',1); 6 | rocket.x = 100; 7 | rocket.y = 200; 8 | rocket.draw(context,true); 9 | //rocket.draw(context,false); 10 | -------------------------------------------------------------------------------- /9781430263371/chapter6/rocket-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rocket Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /9781430263371/chapter6/rocket.js: -------------------------------------------------------------------------------- 1 | function Rocket(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 40; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Rocket.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context,firing) { // firing is a Boolean if (firing){ var exhaust = new Triangle(this.x,this.y+0.5*this.height,this.width,this.height,'#ffff00',0.8); exhaust.draw(context); } var capsule = new Triangle(this.x,this.y,this.width,this.height,this.color); capsule.draw(context); } }; -------------------------------------------------------------------------------- /9781430263371/chapter6/triangle-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Triangle object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /9781430263371/chapter6/triangle-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | //Triangle(x,y,width,height,color,alpha,empty) 5 | var triangle1 = new Triangle(100,200,100,150,'#00ff00',0.5,false); 6 | triangle1.draw(context); 7 | 8 | var triangle2 = new Triangle(300,200,50,40,'#000000',1.0,false); 9 | triangle2.draw(context); -------------------------------------------------------------------------------- /9781430263371/chapter6/two-masses.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Two masses 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter7/airplane.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Airplane 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter7/balloon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Balloon 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter7/bubbles-turbulence.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bubbles turbulence 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter7/bubbles-wind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bubbles wind 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter7/floating-ball.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Floating ball 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter7/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter7/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter7/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter7/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter7/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter7/objects/ball.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Ball(radius,color,mass,charge,gradient){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; if(typeof(gradient)==='undefined') gradient = false; this.radius = radius; this.color = color; this.mass = mass; this.charge = charge; this.gradient = gradient; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Ball.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { if (this.gradient){ grad = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); grad.addColorStop(0,'#ffffff'); grad.addColorStop(1,this.color); context.fillStyle = grad; }else{ context.fillStyle = this.color; } context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter7/objects/forces.js: -------------------------------------------------------------------------------- 1 | function Forces(){ } // STATIC METHODS Forces.zeroForce = function() { return (new Vector2D(0,0)); } Forces.constantGravity = function(m,g){ return new Vector2D(0,m*g); } Forces.gravity = function(G,m1,m2,r){ return r.multiply(-G*m1*m2/(r.lengthSquared()*r.length())); } Forces.linearDrag = function(k,vel){ var force; var velMag = vel.length(); if (velMag > 0) { force = vel.multiply(-k); }else { force = new Vector2D(0,0); } return force; } Forces.drag = function(k,vel) { var force; var velMag = vel.length(); if (velMag > 0) { force = vel.multiply(-k*velMag); } else { force = new Vector2D(0,0); } return force; } Forces.lift = function(k,vel) { var force; var velMag = vel.length(); if (velMag > 0) { force = vel.perp(k*velMag); } else { force = new Vector2D(0,0); } return force; } Forces.upthrust = function(rho,V,g) { return new Vector2D(0,-rho*V*g); } Forces.vortex = function(k,r0,r){ var force; var rMag = r.length(); if (rMag > 0){ if (rMag > r0) { force = r.multiply(-k*Math.pow(r0/rMag,4)); }else{ force = r.multiply(k); } }else{ force = new Vector2D(0,0); } return force; } Forces.add = function(arr){ var forceSum = new Vector2D(0,0); for (var i=0; i 2 | 3 | 4 | 5 | Parachute 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter7/plane-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Plane object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter7/plane-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | //Plane(width,height,color,mass) 5 | var plane = new Plane(100,20,'#333399',1); 6 | plane.x = 40; 7 | plane.y = 160; 8 | plane.draw(context,true); 9 | //plane.draw(context,false); 10 | -------------------------------------------------------------------------------- /9781430263371/chapter7/sliding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sliding 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/basic-oscillations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic oscillations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/bungee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bungee 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/coupled-oscillations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Coupled oscillations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter8/damped-oscillations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Damped oscillations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter8/damped-oscillations2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Damped oscillations 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter8/dragging-oscillations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dragging oscillations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/forced-oscillations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Forced oscillations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter8/free-oscillations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Free oscillations 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter8/free-oscillations2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Free oscillations 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /9781430263371/chapter8/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter8/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter8/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter8/objects/ball.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Ball(radius,color,mass,charge,gradient){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; if(typeof(gradient)==='undefined') gradient = false; this.radius = radius; this.color = color; this.mass = mass; this.charge = charge; this.gradient = gradient; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Ball.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { if (this.gradient){ grad = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); grad.addColorStop(0,'#ffffff'); grad.addColorStop(1,this.color); context.fillStyle = grad; }else{ context.fillStyle = this.color; } context.beginPath(); context.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); context.closePath(); context.fill(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter8/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter8/objects/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle(x,y,width,height,color,alpha,empty){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(alpha)==='undefined') alpha = 1; if(typeof(empty)==='undefined') empty = false; this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.alpha = alpha; this.empty = empty; } Triangle.prototype = { draw: function (context) { context.save(); if (this.empty){ context.strokeStyle = this.color; }else{ context.globalAlpha = this.alpha; context.fillStyle = this.color; } context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x+this.width,this.y); context.lineTo(this.x+this.width/2,this.y-this.height); context.lineTo(this.x,this.y); context.closePath(); if (this.empty) { context.stroke(); }else{ context.fill(); } context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter8/stickman.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function StickMan(radius,color,mass){ if(typeof(radius)==='undefined') radius = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.radius = radius; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } StickMan.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { var r = this.radius; // radius of body var rh = 0.5*r; // radius of head context.save(); context.fillStyle = this.color; context.beginPath(); context.arc(this.x, this.y, r, 0, 2*Math.PI, true); // body context.arc(this.x, this.y-r-rh, rh, 0, 2*Math.PI, true); // head context.closePath(); context.fill(); context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter9/car-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Car demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/circular-orbits.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Circular Orbits 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/includes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter9/includes/style1.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #fff; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/includes/style2.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #fff; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_fg { 11 | background-color: transparent; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/includes/style3.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: transparent; 6 | position:absolute; 7 | top:10px; 8 | left:10px; 9 | } 10 | #canvas_bg { 11 | background-color: #000; 12 | position:absolute; 13 | top:10px; 14 | left:10px; 15 | } 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/includes/style4.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #666; 3 | } 4 | #canvas { 5 | background-color: #000; 6 | } 7 | -------------------------------------------------------------------------------- /9781430263371/chapter9/objects/box.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Box(width,height,color,mass){ if(typeof(width)==='undefined') width = 20; if(typeof(height)==='undefined') height = 20; if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(mass)==='undefined') mass = 1; this.width = width; this.height = height; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Box.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { context.fillStyle = this.color; context.fillRect(this.x,this.y,this.width,this.height); } }; -------------------------------------------------------------------------------- /9781430263371/chapter9/objects/particle.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Particle(mass,charge){ if(typeof(mass)==='undefined') mass = 1; if(typeof(charge)==='undefined') charge = 0; this.mass = mass; this.charge = charge; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Particle.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; } }; -------------------------------------------------------------------------------- /9781430263371/chapter9/objects/triangle.js: -------------------------------------------------------------------------------- 1 | function Triangle(x,y,width,height,color,alpha,empty){ if(typeof(color)==='undefined') color = '#0000ff'; if(typeof(alpha)==='undefined') alpha = 1; if(typeof(empty)==='undefined') empty = false; this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.alpha = alpha; this.empty = empty; } Triangle.prototype = { draw: function (context) { context.save(); if (this.empty){ context.strokeStyle = this.color; }else{ context.globalAlpha = this.alpha; context.fillStyle = this.color; } context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x+this.width,this.y); context.lineTo(this.x+this.width/2,this.y-this.height); context.lineTo(this.x,this.y); context.closePath(); if (this.empty) { context.stroke(); }else{ context.fill(); } context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter9/pendulum.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pendulum 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter9/pendulum2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pendulum 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /9781430263371/chapter9/satellite-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Satellite demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/satellite-demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Satellite demo 2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /9781430263371/chapter9/satellite-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Satellite object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter9/satellite-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | //Satellite(radius,color,mass) 5 | var satellite = new Satellite(10,'#0000ff',1); 6 | satellite.x = 200; 7 | satellite.y = 200; 8 | satellite.draw(context); 9 | -------------------------------------------------------------------------------- /9781430263371/chapter9/satellite.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Satellite(radius,color,mass){ this.radius = radius; this.color = color; this.mass = mass; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.angVelo = 0; } Satellite.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { var r = this.radius; var m = this.mass; var color = this.color; context.save(); context.strokeStyle = color; context.lineWidth = 2; context.beginPath(); context.moveTo(this.x,this.y); context.lineTo(this.x-2*r,this.y-r); context.moveTo(this.x,this.y); context.lineTo(this.x-2*r,this.y+r); context.moveTo(this.x,this.y); context.lineTo(this.x-1.5*r,this.y); context.closePath(); context.stroke(); context.fillStyle = color; context.beginPath(); context.arc(this.x, this.y, r, 0, 2*Math.PI, true); context.closePath(); context.fill(); context.restore(); } }; -------------------------------------------------------------------------------- /9781430263371/chapter9/wheel-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wheel demo example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter9/wheel-demo.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | var r = 50; // outer radius 5 | var w = 1; // angular velocity in radians per second 6 | var dt = 30/1000; // timestep = 1/FPS 7 | var fac = 1; // slipping/sliding factor 8 | 9 | var wheel = new Wheel(r-10,r,12); 10 | wheel.x = 100; 11 | wheel.y = 200; 12 | wheel.draw(context); 13 | 14 | var v = fac*r*w; // v = r w 15 | var angle = 0; 16 | setInterval(onTimer, 1/dt); 17 | 18 | function onTimer(evt){ 19 | wheel.x += v*dt; 20 | angle += w*dt; 21 | context.clearRect(0, 0, canvas.width, canvas.height); 22 | context.save(); 23 | context.translate(wheel.x,wheel.y); 24 | context.rotate(angle); 25 | context.translate(-wheel.x,-wheel.y); 26 | wheel.draw(context); 27 | context.restore(); 28 | } -------------------------------------------------------------------------------- /9781430263371/chapter9/wheel-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wheel object example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /9781430263371/chapter9/wheel-object.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | var context = canvas.getContext('2d'); 3 | 4 | //Wheel(innerRadius,outerRadius,numSpokes) 5 | var wheel = new Wheel(40,50,10); 6 | wheel.x = 200; 7 | wheel.y = 200; 8 | wheel.draw(context); 9 | -------------------------------------------------------------------------------- /9781430263371/chapter9/wheel.js: -------------------------------------------------------------------------------- 1 | // dependencies: Vector2D function Wheel(innerRadius,outerRadius,numSpokes){ this.ir = innerRadius; this.or = outerRadius; this.nums = numSpokes; this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; } Wheel.prototype = { get pos2D (){ return new Vector2D(this.x,this.y); }, set pos2D (pos){ this.x = pos.x; this.y = pos.y; }, get velo2D (){ return new Vector2D(this.vx,this.vy); }, set velo2D (velo){ this.vx = velo.x; this.vy = velo.y; }, draw: function (context) { var ir = this.ir; var or = this.or; var nums = this.nums; context.save(); context.fillStyle = '#000000'; context.beginPath(); context.arc(this.x, this.y, or, 0, 2*Math.PI, true); context.closePath(); context.fill(); context.fillStyle = '#ffffaa'; context.beginPath(); context.arc(this.x, this.y, ir, 0, 2*Math.PI, true); context.closePath(); context.fill(); context.strokeStyle = '#000000'; context.lineWidth = 4; context.beginPath(); for (var n=0; n