paper.install(window); paper.setup('degif'); function SpinningDots() { this.radius = 3; this.distance = 16; this.rounds = 9; this.circles = []; } SpinningDots.prototype = { constructor: SpinningDots, drawCircles: function() { for (var r = 1; r <= this.rounds; r++) { var count = 4 * r; var circles = []; for (i = 0; i < count; i++) { var angle = 360 / count * i; var distance = this.distance * (r - 1) + this.distance / 1.5; circle = new Path.Circle(new Point(view.center.x + Math.sin(angle * Math.PI / 180) * distance, view.center.y + Math.cos(angle * Math.PI / 180) * distance), this.radius + .15 * r); circle.fillColor = new Color(255, 255, 255); circle.shadowColor = new Color(0, 0, 0, 0.3); circle.shadowBlur = 2; circle.shadowOffset = new Point(2, 2); circles.push(circle); } var group = new Group(circles); group.frames = count / 70 * i / (count - r) * 700; group.angle = 0; group.frame = 0; this.circles.push(group); } }, draw: function() { this.drawCircles(); }, update() { for (var i = 0; i < this.circles.length; i++) { var circle = this.circles[i]; circle.frame += 0.8; var r = 360 * (circle.frame / circle.frames); circle.rotate(r - circle.angle); circle.angle = r; } } } var degif; degif = new SpinningDots(); degif.draw(); view.onFrame = function(e) { degif.update(); };