circles-bouncing-off-lines.js

circles-bouncing-off-lines.js
¶
```
;(function(exports) {
```
¶

The top-level functions that run the simulation
¶
¶

start() creates the lines and circles and starts the simulation.
```
  function start() {
```
¶

In index.html, there is a canvas tag that the game will be drawn in. Grab that canvas out of the DOM. From it, get the drawing context, an object that contains functions that allow drawing to the canvas.
```
    var screen = document.getElementById('circles-bouncing-off-lines').getContext('2d');
```
¶

world holds the current state of the world.
```
    var world = {
      circles: [],
```

Set up the five lines.

      lines: [
        makeLine({ x: 100, y: 100 }),
        makeLine({ x: 200, y: 100 }),
        makeLine({ x: 150, y: 150 }),
        makeLine({ x: 100, y: 200 }),
        makeLine({ x: 220, y: 200 }),
      ],

      dimensions: { x: screen.canvas.width, y: screen.canvas.height },

¶

timeLastCircleMade is used in the periodic creation of new circles.
```
      timeLastCircleMade: 0
    };
```
¶

tick() is the main simulation tick function. It loops forever, running 60ish times a second.
```
    function tick() {
```
¶

Update state of circles and lines.
```
      update(world);
```
¶

Draw circles and lines.
```
      draw(world, screen);
```
¶

Queue up the next call to tick with the browser.
```
      requestAnimationFrame(tick);
    };
```
¶

Run the first game tick. All future calls will be scheduled by tick() itself.
```
    tick();
  };
```
¶

Export start() so it can be run by index.html
```
  exports.start = start;
```
¶

update() updates the state of the lines and circles.
```
  function update(world) {
```
¶

Move and bounce the circles.
```
    updateCircles(world)
```
¶

Create new circle if one hasn’t been created for a while.
```
    createNewCircleIfDue(world);
```
¶

Rotate the lines.
```
    updateLines(world);
  };
```

updateCircles() moves and bounces the circles.

  function updateCircles(world) {
    for (var i = world.circles.length - 1; i >= 0; i--) {
      var circle = world.circles[i];

Run through all lines.

      for (var j = 0; j < world.lines.length; j++) {
        var line = world.lines[j];

If line is intersecting circle, bounce circle off line.

        if (trig.isLineIntersectingCircle(circle, line)) {
          physics.bounceCircle(circle, line);
        }
      }

¶

Apply gravity to the velocity of circle.
```
      physics.applyGravity(circle);
```
¶

Move circle according to its velocity.
```
      physics.moveCircle(circle);
```

Remove circles that are off screen.

      if (!isCircleInWorld(circle, world.dimensions)) {
        world.circles.splice(i, 1);
      }
    }
  };

createNewCircleIfDue() creates a new circle every so often.

  function createNewCircleIfDue(world) {
    var now = new Date().getTime();
    if (now - world.timeLastCircleMade > 400) {
      world.circles.push(makeCircle({ x: world.dimensions.x / 2, y: -5 }));

Update last circle creation time.

      world.timeLastCircleMade = now;
    }
  };

updateLines() rotates the lines.

  function updateLines(world) {
    for (var i = 0; i < world.lines.length; i++) {
      world.lines[i].angle += world.lines[i].rotateSpeed;
    }
  };

¶

draw() draws the all the circles and lines in the simulation.
```
  function draw(world, screen) {
```

Clear away the drawing from the previous tick.

    screen.clearRect(0, 0, world.dimensions.x, world.dimensions.y);

    var bodies = world.circles.concat(world.lines);
    for (var i = 0; i < bodies.length; i++) {
      bodies[i].draw(screen);
    }
  };

makeCircle() creates a circle that has the passed center.

  function makeCircle(center) {
    return {
      center: center,
      velocity: { x: 0, y: 0 },
      radius: 5,

The circle has its own built-in draw() function. This allows the main draw() to just polymorphicly call draw() on circles and lines.

      draw: function(screen) {
        screen.beginPath();
        screen.arc(this.center.x, this.center.y, this.radius, 0, Math.PI * 2, true);
        screen.closePath();
        screen.fillStyle = "black";
        screen.fill();
      }
    };
  };

makeLine() creates a line that has the passed center.

  function makeLine(center) {
    return {
      center: center,
      len: 70,

Angle of the line in degrees.

      angle: 0,

      rotateSpeed: 0.5,

The line has its own built-in draw() function. This allows the main draw() to just polymorphicly call draw() on circles and lines.

      draw: function(screen) {
        var end1 = trig.lineEndPoints(this)[0];
        var end2 = trig.lineEndPoints(this)[1];

        screen.beginPath();
        screen.lineWidth = 1.5;
        screen.moveTo(end1.x, end1.y);
        screen.lineTo(end2.x, end2.y);
        screen.closePath();

        screen.strokeStyle = "black";
        screen.stroke();
      }
    };
  };

isCircleInWorld() returns true if circle is on screen.

  function isCircleInWorld(circle, worldDimensions) {
    return circle.center.x > -circle.radius &&
      circle.center.x < worldDimensions.x + circle.radius &&
      circle.center.y > -circle.radius &&
      circle.center.y < worldDimensions.y + circle.radius;
  };

¶

Trigonometry functions to help with calculating circle movement
¶
```
  var trig = {
```

distance() returns the distance between point1 and point2 as the crow flies. Uses Pythagoras’s theorem.

    distance: function(point1, point2) {
      var x = point1.x - point2.x;
      var y = point1.y - point2.y;
      return Math.sqrt(x * x + y * y);
    },

¶

magnitude() returns the magnitude of the passed vector. Sort of like the vector’s speed. A vector with a larger x or y will have a larger magnitude.
```
    magnitude: function(vector) {
      return Math.sqrt(vector.x * vector.x + vector.y * vector.y);
    },
```
¶

unitVector() returns the unit vector for vector. A unit vector points in the same direction as the original, but has a magnitude of 1. It’s like a direction with a speed that is the same as all other unit vectors.
```
    unitVector: function(vector) {
      return {
        x: vector.x / trig.magnitude(vector),
        y: vector.y / trig.magnitude(vector)
      };
    },
```
¶

dotProduct() returns the dot product of vector1 and vector2. A dot product represents the amount one vector goes in the direction of the other. Imagine vector2 runs along the ground and vector1 represents a ball fired from a cannon. If vector2 is multiplied by the dot product of the two vectors, it produces a vector that represents the amount of ground covered by the ball.
```
    dotProduct: function(vector1, vector2) {
      return vector1.x * vector2.x + vector1.y * vector2.y;
    },
```

vectorBetween() returns the vector that runs between startPoint and endPoint.

    vectorBetween: function(startPoint, endPoint) {
      return {
        x: endPoint.x - startPoint.x,
        y: endPoint.y - startPoint.y
      };
    },

lineEndPoints() returns an array containing the points at each end of line.

    lineEndPoints: function(line) {
      var angleRadians = line.angle * 0.01745;

Create a unit vector that represents the heading of line.

      var lineUnitVector = trig.unitVector({
        x: Math.cos(angleRadians),
        y: Math.sin(angleRadians)
      });

Multiply the unit vector by half the line length. This produces a vector that represents the offset of one of the ends of the line from the center.

      var endOffsetFromCenterVector = {
        x: lineUnitVector.x * line.len / 2,
        y: lineUnitVector.y * line.len / 2
      };

¶

Return an array that contains the points at the two line ends.
```
      return [
```

Add the end offset to the center to get one end of ‘line’.

        {
          x: line.center.x + endOffsetFromCenterVector.x,
          y: line.center.y + endOffsetFromCenterVector.y
        },

Subtract the end offset from the center to get the other end of line.

        {
          x: line.center.x - endOffsetFromCenterVector.x,
          y: line.center.y - endOffsetFromCenterVector.y
        }
      ];
    },

¶

pointOnLineClosestToCircle() returns the point on line closest to circle.
```
    pointOnLineClosestToCircle: function(circle, line) {
```

Get the points at each end of line.

      var lineEndPoint1 = trig.lineEndPoints(line)[0];
      var lineEndPoint2 = trig.lineEndPoints(line)[1];

Create a vector that represents the line

      var lineUnitVector = trig.unitVector(
        trig.vectorBetween(lineEndPoint1, lineEndPoint2));

¶

Pick a line end and create a vector that represents the imaginary line between the end and the circle.
```
      var lineEndToCircleVector = trig.vectorBetween(lineEndPoint1, circle.center);
```
¶

Get a dot product of the vector between the line end and circle, and the line vector. (See the dotProduct() function for a fuller explanation.) This projects the line end and circle vector along the line vector. Thus, it represents how far along the line to go from the end to get to the point on the line that is closest to the circle.
```
      var projection = trig.dotProduct(lineEndToCircleVector, lineUnitVector);
```
¶

If projection is less than or equal to 0, the closest point is at or past lineEndPoint1. So, return lineEndPoint1.
```
      if (projection <= 0) {
        return lineEndPoint1;
```
¶

If projection is greater than or equal to the length of the line, the closest point is at or past lineEndPoint2. So, return lineEndPoint2.
```
      } else if (projection >= line.len) {
        return lineEndPoint2;
```

The projection indicates a point part way along the line. Return that point.

      } else {
        return {
          x: lineEndPoint1.x + lineUnitVector.x * projection,
          y: lineEndPoint1.y + lineUnitVector.y * projection
        };
      }
    },

¶

isLineIntersectingCircle() returns true if line is intersecting circle.
```
    isLineIntersectingCircle: function(circle, line) {
```

Get point on line closest to circle.

      var closest = trig.pointOnLineClosestToCircle(circle, line);

Get the distance between the closest point and the center of the circle.

      var circleToLineDistance = trig.distance(circle.center, closest);

Return true if distance is less than the radius.

      return circleToLineDistance < circle.radius;
    }
  }

¶

Physics functions for calculating circle movement
¶
```
  var physics = {
```

applyGravity() adds gravity to the velocity of circle.

    applyGravity: function(circle) {
      circle.velocity.y += 0.06;
    },

moveCircle() adds the velocity of the circle to its center.

    moveCircle: function(circle) {
      circle.center.x += circle.velocity.x;
      circle.center.y += circle.velocity.y;
    },

¶

bounceCircle() assumes line is intersecting circle and bounces circle off line.
```
    bounceCircle: function(circle, line) {
```
¶

Get the vector that points out from the surface the circle is bouncing on.
```
      var bounceLineNormal = physics.bounceLineNormal(circle, line);
```

Set the new circle velocity by reflecting the old velocity in bounceLineNormal.

      var dot = trig.dotProduct(circle.velocity, bounceLineNormal);
      circle.velocity.x -= 2 * dot * bounceLineNormal.x;
      circle.velocity.y -= 2 * dot * bounceLineNormal.y;

Move the circle until it has cleared the line. This stops the circle getting stuck in the line.

      while (trig.isLineIntersectingCircle(circle, line)) {
        physics.moveCircle(circle);
      }
    },

¶

bounceLineNormal() assumes line intersects circle. It returns the normal to the side of the line that the circle is hitting.
```
    bounceLineNormal: function(circle, line) {
```
¶

Get vector that starts at the closest point on the line and ends at the circle. If the circle is hitting the flat of the line, this vector will point perpenticular to the line. If the circle is hitting the end of the line, the vector will point from the end to the center of the circle.
```
      var circleToClosestPointOnLineVector =
          trig.vectorBetween(
            trig.pointOnLineClosestToCircle(circle, line),
            circle.center);
```

Make the normal a unit vector and return it.

      return trig.unitVector(circleToClosestPointOnLineVector);
    }
  };

¶

Start
¶

When the DOM is ready, start the simulation.

  window.addEventListener('load', start);
})(this);

circles-bouncing-off-lines.js

The top-level functions that run the simulation

Trigonometry functions to help with calculating circle movement

Physics functions for calculating circle movement

Start