CreateJS moving dots on a line

by Brian Cribb

HTML

<canvas id="myCanvas" width="500" height="500"><p>Your primitive, sucky browser does not support canvas.</p></canvas>

CSS

canvas {
	display: block;
	margin:20px auto 0;
	max-width: 100%;
	background:#000000;
}

JavaScript

(function(){

    var myCanvas = document.getElementById("myCanvas"),
        stage = new createjs.Stage("myCanvas"),
        startPoint = {x:myCanvas.width/2, y:myCanvas.height/2},
				endPoint = {x:myCanvas.width/2 + 250, y:myCanvas.height/2},
				spaceBetween = 20,
				radius = 4,
				increment = 5,
        line = new createjs.Shape();
    
    stage.addChild(line);

    function drawCanvas(stage) {
        line.graphics.clear();
        line.x = startPoint.x;
        line.y = startPoint.y;
        
        /* Different approach for rotation in CreateJS. Shape objects have a rotation property, 
         * which is measured in degrees. We don't translate positions or save/restore the context 
         * stack. We just let CreateJS do it for us. We'll make a horizontal line with all of the 
         * dots on it, and then we'll rotate that line.
         */
        var dy = endPoint.y - startPoint.y,
		    dx = endPoint.x - startPoint.x,
            lineAngle = Math.atan2(dy, dx) * (180/Math.PI), // Converting from radians.
            distance = getDistance(startPoint.x, startPoint.y, endPoint.x, endPoint.y);
            numDots = Math.floor(distance/spaceBetween),
            partialDistance = distance / numDots;
        line.x2 = startPoint.x + distance;
        

        line.graphics
            .setStrokeStyle(1,"round")
            .beginStroke("rgba(255,255,255,1)")
            .moveTo(0,0)
            .lineTo(distance,0)
            .endStroke();


        var midPoint = {}; // Cleared on each loop
        for (var i = 0; i < numDots; i++) {
            midPoint.x = increment + partialDistance*i;
            midPoint.y = 0;
            
            line.graphics
                .setStrokeStyle(70,"round")
                .beginFill("rgba(255,255,255,1)")
                .moveTo(midPoint.x, midPoint.y)
                .arc(midPoint.x, midPoint.y, radius, 0, Math.PI * 2, true)
                .endFill();
            
            increment = ( increment <...