Zbeyer/Ticking-Box.markdown

## index.html
<html ng-app="rotationDirective">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

  </head>
  <body>
      <div class="container" ng-controller="helloController">

        <section>
          <input type="checkbox" ng-model="smoothClock" id="isClockSmooth" name="your-group" value="unit-in-group" />
          <label id="isClockSmoothLabel" for="isClockSmooth">Smooth Clock</lable>
        <hr>

        </section>

        <section>
          <div class="base">
            <div class = "hour" my-rotate="{{toe}}"></div>
            <div class = "minute" my-rotate="{{tak}}"></div>
            <div class = "second" my-rotate="{{tic}}"></div>
          </div>
        </section>

        <section>
          <hr>
          <p>{{currDate | date:"h:mma"}}</p>
          <p>{{currDate | date:"HH:mm:ss"}}</p>
          <hr>
        </section>
      </div>

  </body>

</html>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>

  <script src="js/index.js"></script>

</body>


## script.js
angular.module('rotationDirective', [])

.controller('helloController', ['$scope', '$interval', function($scope, $interval) {

  $scope.currDate = new Date();
  $scope.hWorld = '';
  $scope.tic = 45;
  $scope.tak = 45;
  $scope.toe = 45;
  $scope.second = 0;
  $scope.minute = 0;
  //$scope.selectedAudioFile = "";

  function insureSecondTic() {
    if(!!!$scope.audio1) {
      $scope.audio1 = new Audio('http://www.soundjig.com/pages/soundfx/beeps.php?mp3=beep5.mp3');
      $scope.audio1.load();
    }
  }

  function insureMinuteTic() {
    if(!!!$scope.audio2) {
      $scope.audio2 = new Audio('http://www.soundjig.com/pages/soundfx/beeps.php?mp3=beep4.mp3');
      $scope.audio2.load();
    }
  }

  $scope.playNg3 = function () {
    insureSecondTic();
    playAudio($scope.audio2);
};

  $scope.playNg2 = function () {
    insureSecondTic();
    playAudio($scope.audio1);
};

  function playAudio(audio) {
    if (audio.currentTime > 0)
    {
      audio.pause();
      audio.currentTime = 0;
    }

    audio.volume = 0.02;
    audio.play();
  }

  var sync;
  var ticker;

  $scope.updateSecond = function() {
    insureSecondTic();
    insureMinuteTic();

    $scope.currDate = new Date();
    var isTimeToPlaySound = ($scope.second !== getCurrentSecond());

    $scope.second = getCurrentSecond();

    var playMin = false;

    if($scope.minute !== getCurrentMinute()) {
      $scope.minute = getCurrentMinute();
      playMin = true;
    }

    if(isTimeToPlaySound) {
        if(playMin) {
          $scope.playNg3();
        }
        else {
          $scope.playNg2();
        }
    }

    $scope.tic = ($scope.second/60)*360;
    $scope.tak = ($scope.minute/60)*360;
    $scope.toe = (getCurrentHour()/12)*360;

    if (isClockSmooth()) {
        var secOffset = (getCurrentMillisec()/1000/60);
        var minOffset = ($scope.second/60/60) + secOffset/60;
        var hourOffset = ($scope.minute/60/12) + minOffset/12;

        $scope.tic += secOffset*360;
        $scope.tak += minOffset*360;
        $scope.toe += hourOffset*360;
    }

  };

  function isClockSmooth() {
    return $scope.smoothClock;
  }

  $scope.updateSecond();
  function getCurrentSecond() {
    var d = $scope.currDate;
    return d. getSeconds();
  }

  function getCurrentMinute() {
    var d = $scope.currDate;
    return d. getMinutes();
  }

  function getClockHour() {
    var hours = getCurrentHour();
    if (hours > 12) {
    hours -= 12;
    } else if (hours === 0) {
     hours = 12;
    }
  }

  function getCurrentMillisec() {
    var d = $scope.currDate;
    return d.getMilliseconds();
  }

  function getCurrentHour() {
    var d = $scope.currDate;
    return d. getHours();
  }

  sync = $interval(function() {
        $scope.currDate = new Date();
        $scope.updateSecond();
  }, 1);


}])


.directive('myRotate', function() {
  return {
        restrict: 'A',
        link: function (scope, element, attrs) {

          var rot = function (rotateDegrees) {
                var r = 'rotate(' + rotateDegrees + 'deg)';
                element.css({


                    '-moz-transform': r,
                    '-webkit-transform': r,
                    '-o-transform': r,
                    '-ms-transform': r
            });
          };

          scope.$watch(function(){return attrs.myRotate;}, function(newValue){
            rot(newValue);
          });

          rot(attrs.myRotate);
        }
    }
});

## style.less
@elemSize: 70vw;

@background:#333;
@baseColor:#777;

body {
    width: 80%;
    margin: 0 auto;

  p, a, label {
    padding:4px;
  color: #CCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;

  }
  background: @background;
  padding:16px;

}

.base {
    width: 100%;
    margin: 0 auto;
    height:@elemSize;
    width:@elemSize;

    background-image: url("http://zbeyer.com/stuff/cFace.svg");
    background-size: @elemSize @elemSize;
    background-repeat: no-repeat;

}
.minute, .hour, .second {
    font-size:8px;
    height:@elemSize;
    width:@elemSize;
    margin-left: 0;
    margin-right:0;
    position: absolute;

    background-repeat: no-repeat;

}

.second {
    background-image: url("http://zbeyer.com/stuff/cSec.svg");
    background-size: @elemSize @elemSize;
}


.minute {
    background-image: url("http://zbeyer.com/stuff/cMin.svg");
    background-size: @elemSize @elemSize;
}

.hour {
    background-image: url("http://zbeyer.com/stuff/cHour.svg");
    background-size: @elemSize @elemSize;
}

//http://www.curtis.lassam.net/projects/scratch/clock/minute_hand.png

## Ticking-Box.markdown

      
    Raw
  

              Ticking-Box.markdown
            
          
    Ticking Box

A Pen by Zachary Beyer on CodePen.
License.
	<html ng-app="rotationDirective">
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

	</head>
	<body>
	<div class="container" ng-controller="helloController">

	<section>
	<input type="checkbox" ng-model="smoothClock" id="isClockSmooth" name="your-group" value="unit-in-group" />
	<label id="isClockSmoothLabel" for="isClockSmooth">Smooth Clock</lable>
	<hr>

	</section>

	<section>
	<div class="base">
	<div class = "hour" my-rotate="{{toe}}"></div>
	<div class = "minute" my-rotate="{{tak}}"></div>
	<div class = "second" my-rotate="{{tic}}"></div>
	</div>
	</section>

	<section>
	<hr>
	<p>{{currDate \| date:"h:mma"}}</p>
	<p>{{currDate \| date:"HH:mm:ss"}}</p>
	<hr>
	</section>
	</div>

	</body>

	</html>

	<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>

	<script src="js/index.js"></script>

	</body>
	angular.module('rotationDirective', [])

	.controller('helloController', ['$scope', '$interval', function($scope, $interval) {

	$scope.currDate = new Date();
	$scope.hWorld = '';
	$scope.tic = 45;
	$scope.tak = 45;
	$scope.toe = 45;
	$scope.second = 0;
	$scope.minute = 0;
	//$scope.selectedAudioFile = "";

	function insureSecondTic() {
	if(!!!$scope.audio1) {
	$scope.audio1 = new Audio('http://www.soundjig.com/pages/soundfx/beeps.php?mp3=beep5.mp3');
	$scope.audio1.load();
	}
	}

	function insureMinuteTic() {
	if(!!!$scope.audio2) {
	$scope.audio2 = new Audio('http://www.soundjig.com/pages/soundfx/beeps.php?mp3=beep4.mp3');
	$scope.audio2.load();
	}
	}

	$scope.playNg3 = function () {
	insureSecondTic();
	playAudio($scope.audio2);
	};

	$scope.playNg2 = function () {
	insureSecondTic();
	playAudio($scope.audio1);
	};

	function playAudio(audio) {
	if (audio.currentTime > 0)
	{
	audio.pause();
	audio.currentTime = 0;
	}

	audio.volume = 0.02;
	audio.play();
	}

	var sync;
	var ticker;

	$scope.updateSecond = function() {
	insureSecondTic();
	insureMinuteTic();

	$scope.currDate = new Date();
	var isTimeToPlaySound = ($scope.second !== getCurrentSecond());

	$scope.second = getCurrentSecond();

	var playMin = false;

	if($scope.minute !== getCurrentMinute()) {
	$scope.minute = getCurrentMinute();
	playMin = true;
	}

	if(isTimeToPlaySound) {
	if(playMin) {
	$scope.playNg3();
	}
	else {
	$scope.playNg2();
	}
	}

	$scope.tic = ($scope.second/60)*360;
	$scope.tak = ($scope.minute/60)*360;
	$scope.toe = (getCurrentHour()/12)*360;

	if (isClockSmooth()) {
	var secOffset = (getCurrentMillisec()/1000/60);
	var minOffset = ($scope.second/60/60) + secOffset/60;
	var hourOffset = ($scope.minute/60/12) + minOffset/12;

	$scope.tic += secOffset*360;
	$scope.tak += minOffset*360;
	$scope.toe += hourOffset*360;
	}

	};

	function isClockSmooth() {
	return $scope.smoothClock;
	}

	$scope.updateSecond();
	function getCurrentSecond() {
	var d = $scope.currDate;
	return d. getSeconds();
	}

	function getCurrentMinute() {
	var d = $scope.currDate;
	return d. getMinutes();
	}

	function getClockHour() {
	var hours = getCurrentHour();
	if (hours > 12) {
	hours -= 12;
	} else if (hours === 0) {
	hours = 12;
	}
	}

	function getCurrentMillisec() {
	var d = $scope.currDate;
	return d.getMilliseconds();
	}

	function getCurrentHour() {
	var d = $scope.currDate;
	return d. getHours();
	}

	sync = $interval(function() {
	$scope.currDate = new Date();
	$scope.updateSecond();
	}, 1);


	}])


	.directive('myRotate', function() {
	return {
	restrict: 'A',
	link: function (scope, element, attrs) {

	var rot = function (rotateDegrees) {
	var r = 'rotate(' + rotateDegrees + 'deg)';
	element.css({


	'-moz-transform': r,
	'-webkit-transform': r,
	'-o-transform': r,
	'-ms-transform': r
	});
	};

	scope.$watch(function(){return attrs.myRotate;}, function(newValue){
	rot(newValue);
	});

	rot(attrs.myRotate);
	}
	}
	});
	@elemSize: 70vw;

	@background:#333;
	@baseColor:#777;

	body {
	width: 80%;
	margin: 0 auto;

	p, a, label {
	padding:4px;
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;

	}
	background: @background;
	padding:16px;

	}

	.base {
	width: 100%;
	margin: 0 auto;
	height:@elemSize;
	width:@elemSize;

	background-image: url("http://zbeyer.com/stuff/cFace.svg");
	background-size: @elemSize @elemSize;
	background-repeat: no-repeat;

	}
	.minute, .hour, .second {
	font-size:8px;
	height:@elemSize;
	width:@elemSize;
	margin-left: 0;
	margin-right:0;
	position: absolute;

	background-repeat: no-repeat;

	}

	.second {
	background-image: url("http://zbeyer.com/stuff/cSec.svg");
	background-size: @elemSize @elemSize;
	}


	.minute {
	background-image: url("http://zbeyer.com/stuff/cMin.svg");
	background-size: @elemSize @elemSize;
	}

	.hour {
	background-image: url("http://zbeyer.com/stuff/cHour.svg");
	background-size: @elemSize @elemSize;
	}

	//http://www.curtis.lassam.net/projects/scratch/clock/minute_hand.png