Poi playground

by devgru

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div id="app" ng-app="">
    <div ng-controller="Ctrl">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <g transform="translate(70, 200)">
            </g>
            <g transform=" translate(80,70) rotate({{deg}})">
                <circle cx=30 cy=0 r="5" fill='blue'></circle>
            </g>
            <g transform=" translate(60,70) rotate({{deg}})">
                <circle cx=30 cy=0 r="5" fill="red"></circle>
            </g>
            <g transform=" translate(70,200) rotate({{deg}})">
                <circle cx=30 cy=0 r="5" fill='blue'></circle>
            </g>
            <g transform=" translate(70,200) rotate(-{{deg}})">
                <circle cx=30 cy=0 r="5" fill="red"></circle>
            </g>
            <g transform=" translate(200,70) rotate({{180+deg}})">
                <circle cx=30 cy=0 r="5" fill='blue'></circle>
            </g>
            <g transform=" translate(200,70) rotate({{deg}})">
                <circle cx=30 cy=0 r="5" fill="red"></circle>
            </g>
            <g transform=" translate(200,200) rotate({{deg}})">
                <circle cx=30 cy=0 r="5" fill='blue'></circle>
            </g>
            <g transform=" translate(200,200) rotate({{180-deg}})">
                <circle cx=30 cy=0 r="5" fill="red"></circle>
            </g>
        </svg>
    </div>
</div>

JavaScript

var fps = Math.floor(1000 / 60);

function Ctrl($scope) {
    $scope.deg = 0;
        
    $scope.loop = function () {
        $scope.deg+=7;
        $scope.$apply('deg')
        setTimeout($scope.loop, fps);
    };
    
    $scope.loop();
}