AngularJS - ng-switch and primitive
HTML
<div ng-controller="Controller">
<div snow style="width:100%; height:100%; background-color:black;"/>
</div>
JavaScript
var app = angular.module('myApp', [])
.controller('Controller', ['$scope', function(scope) {
}])
.directive('snow', function($window) {
return {
restrict: 'AE',
link: function (scope, element) {
var WIDTH, HEIGHT, con, g;
var pxs = [];
var rint = 50;
var nb_elts = 100;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var canvas = document.createElement("canvas");
element.append(canvas);
var windowSize = function() {
WIDTH = element[0].offsetWidth;
HEIGHT = element[0].offsetHeight;
canvas.setAttribute('width', WIDTH);
canvas.setAttribute('height', HEIGHT);
};
windowSize();
$window.addEventListener("resize", function() {
windowSize();
});
con = canvas.getContext('2d');
for (var i = 0; i < nb_elts; i++) {
pxs[i] = new Circle();
pxs[i].reset();
}
requestAnimationFrame(draw);
function draw() {
con.clearRect(0, 0, WIDTH, HEIGHT);
con.globalCompositeOperation = "lighter";
for (var i = 0; i < pxs.length; i++) {
pxs[i].fade();
pxs[i].move();
pxs[i].draw();
}
requestAnimationFrame(draw);
}
function Circle() {
this.s = {ttl: 15000,xmax: 5,ymax: 2,rmax: 5,rt: 1,xdef: 960,ydef: 540,xdrift: 4,ydrift: 4,random: true,blink: true, yspeed: (Math.random() * 3) + 1};
...