Runs best in Chrome or Safari
No crazy math involed
window.onload = function () { var stage = new Kinetic.Stage({ container: "container", width: 600, height: 200 }); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); function randomNumber(min, max) { //good return Math.floor(Math.random() * (1 + max - min) + min); } for (i = 0; i < 25; i++) { var circle = new Kinetic.Circle({ x: 0, y: 0, radius: (Math.random() < .50) ? 5 : 15, fill: (Math.random() < .75) ? "#00D2FF" : "#ffffff", stroke: "black", strokeWidth: 5 }); TweenMax.to(circle, 1.2, { setX: randomNumber(-300, 300), setY: randomNumber(-200, 300), delay: i * .08, repeat: 500, yoyo: true }); group.add(circle); } stage.add(layer); layer.add(group); group.setOffset(-150, -50); group.setAlpha(.5); TweenLite.ticker.addEventListener("tick", go); function go() { var rot = group.getRotationDeg(); rot += 1.5; group.setRotationDeg(rot); group.draw(); } };
or learn more about GreenSock Animation Platform for JS or KineticJS