Tween.js - 100 Moving Dots
Fiddle exploring how to use tween.js to create 100 dots on screen and move them randomly about a canvas.
HTML
<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.0.min.js"></script>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<div class="page-header">
<h1 id="navbar">100 Dots</h1>
</div>
<div class="bs-component">
<canvas id="fiddleCanvas" width="400" height="400"></canvas>
</div>
JavaScript
(function (app, $, undefined) {
"use strict";
var canvas;
var stage;
function init() {
createjs.MotionGuidePlugin.install(createjs.Tween);
canvas = document.getElementById("fiddleCanvas");
stage = new createjs.Stage(canvas);
stage.autoClear = true;
var ball;
var count = 9;
while (count--) {
ball = new createjs.Shape();
ball.graphics.ss(1, 'round', 'round').s(('#000000')).f("#" + rc() + rc() + rc()).dc(0, 0, 5).ef().es();
var path = [rx(), ry(), rx(), ry(), rx(), ry()];
createjs.Tween.get(ball, {
loop: true
})
.to({
guide: {
path: path,
start: 0,
end: 1
}
}, 5000)
.wait(Math.random() * 4000)
.to({
guide: {
path: path,
start: 1,
end: 0
}
}, 5000);
stage.addChild(ball);
}
createjs.Ticker.addEventListener("tick", stage);
}
function rx() {
return Math.random() * 940 + 10;
}
function ry() {
return Math.random() * 380 + 10;
}
function rc() {
return Math.round(Math.random() * 0xED + 0x12).toString(16);
}
function handleComplete(tween) {
var ball = tween._target;
}
$(document).ready(function () {
init();
});
})(window.app = window.app || {}, jQuery)