Draw Arc Segements

Sets up a canvas, stage, and tick

by Cople

HTML

<canvas id="canvas" width="400" height="300"></canvas>

JavaScript

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

var shape = new createjs.Shape().set({
    x: 100,
    y: 100
});

stage.addChild(shape);

var height = 0;
var dir = 1;
var startTime = Date.now();

var min = 0;
var max = 20;

function tick(event) {

    if ((dir == -1 && height <= min) || (dir == 1 && height >= max)) {
        dir *= -1;
        startTime = Date.now();
        console.log("ddd");
    };

    var dur = Date.now() - startTime;
    height = dir == 1 ? easing(dur, min, max, 1e3) : easing(dur, max, min, 1e3);
    console.log(height, dir, dur);
    shape.graphics.clear().beginFill("blue").moveTo(-100, 0).quadraticCurveTo(0, height, 100, 0).closePath();
    stage.update();
}

function easing(t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}