Bouncing balls around with svg and angular.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>bouncy ball</title>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

  </head>

  <script type="text/javascript">

  var bouncyApp = angular.module('bouncyApp', []);

  bouncyApp.controller('MainController', function($scope, $interval){
    //canvas properties
    $scope.canvas = {height: 500, width: 500};

    $scope.circleList = [];

    $scope.physics = function() {

      $scope.circleList.forEach(function(circle){
      circle.cy = circle.cy + (Math.sin(circle.angle));
      circle.cx = circle.cx + (Math.cos(circle.angle));

        if (Math.floor(circle.cy) <= 30.0) {
          circle.angle += 3.14159265;
          circle.direction = 1; 
          circle.yflag = false;
        };
        if (Math.floor(circle.cy ) >= 470.0) {
          circle.angle -= 3.14159265;
          circle.direction = -1; 
          circle.yflag = true;
        };
        if (Math.floor(circle.cx) <= 30.0) {
           circle.angle += 3.14159265;
          circle.direction = 1;
          circle.xflag = false;
        };
        if (Math.floor(circle.cx) >= 470.0) {
          circle.direction = -1;
          circle.angle += 3.14159265;
          circle.xflag = true;
        }
      });
    };

    var stop;

    $scope.init = function(){
        if (angular.isDefined(stop)) return;

        stop = $interval(function(){
          $scope.physics();
        }, 10);
    };

    $scope.pause = function(){
      if (angular.isDefined(stop)){
        $interval.cancel(stop);
        stop = undefined;
      }
    }

    $scope.addCircle = function(){
      var circle = {  cx: Math.floor(Math.random()*470)+1, 
                      cy: Math.floor(Math.random()*470)+1, 
                      r:30, direction: 1,
                      red: Math.floor(Math.random()*255)+1,
                      green: Math.floor(Math.random()*255)+1,
                      blue: Math.floor(Math.random()*255)+1,
                      angle: (Math.random()*6.28318531) };

      $scope.circleList.push(circle);
    };

    $scope.removeCircle = function(){
      $scope.circleList.pop();
    };

    $scope.viewCircle = function(circle){
      $scope.sel = $scope.circleList[$scope.circleList.indexOf(circle)];
      console.log($scope.sel);
    };

  });


  </script>

<style>
  	p {
  		font-family: 'Ubuntu';
  	}

  	li {
  		font-family: 'Ubuntu';
  	}
</style>
<body ng-app="bouncyApp">

	<div ng-controller="MainController" style="margin: 20px">

    <div class="row">
      <div class="col-md-12">
        <div class="btn-group">
          <button type="button" class="btn btn-success" ng-click="init()">Start</button>
          <button type="button" class="btn btn-primary" ng-click="pause()">stop</button>
          <button type="button" class="btn btn-warning" ng-click="addCircle()">Add a Circle</button>
          <button type="button" class="btn btn-alert" ng-click="removeCircle()">Delete a Circle</button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <svg ng-init="addCircle()" ng-attr-height="{{canvas.height}}" ng-attr-width="{{canvas.width}}" style="border-color: black; border-style: solid">
          <circle ng-repeat="circle in circleList" ng-attr-cx="{{circle.cx}}" ng-attr-cy="{{circle.cy}}" ng-attr-r="{{circle.r}}" ng-attr-style="fill: rgb({{circle.red}}, {{circle.green}}, {{circle.blue}})" ng-click="viewCircle(circle)"/>
        </svg>
      </div>

      <div class="col-md-6">
        <h4>Click on a circle to track it</h4>

        <table class="table table-bordered table-striped" ng-show="sel">
          <thead>
            <tr>
              <th>Color</th>
              <th>Direction</th>
              <th>Point</th>
              <th>Angle</th>
              <th>Radius</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{sel.red}}, {{sel.green}}, {{sel.blue}}</td>
              <td>{{sel.direction}}</td>
              <td>{{sel.cx | number}}, {{sel.cy | number}}</td>
              <td>{{sel.angle}}</td>
              <td>{{sel.r}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

	</div>

</body>

</html>

// Code goes here

/* Styles go here */