how to move a object in html5 (createjs) in wave movement

Question

i'm learning html5 and canvas interaction from here

http://www.adobe.com/devnet/createjs/articles/getting-started.html

here is some part of code

    function handleComplete() {
    exportRoot = new lib.PlatypusGame();
    exportRoot.removeChild(exportRoot.platypus);

    stage = new Stage(canvas);
    stage.addChild(exportRoot);

    Touch.enable(stage);

    Ticker.setFPS(20);
    // add the listener to window, so we can do some work before updating the stage:
    Ticker.addListener(window);
}

function tick() {
    if (platypii.length < 1 || Math.random() < 0.01 && platypii.length < 5) {
        var platypus = new lib.Platypus();
        platypus.scaleX = platypus.scaleY = Math.random()*0.3+0.3;
        platypus.x = 800;
        // nominalBounds holds the dimensions of the first frame of the symbol at export time.
        platypus.y = Math.random()*(400-platypus.scaleY*platypus.nominalBounds.height);
        platypus.velX = (1+platypus.scaleX)*-6;
        platypus.velY = 0;
        // we only want to know about clicks on the balloon, not the whole platypus:
        platypus.platypusIdle.balloon.onClick = handleBalloonClick;
        platypus.onPopped = handleBalloonPopped;

        platypii.push(platypus);
        exportRoot.addChild(platypus);
    }

    // go in reverse to make it easier to splice items from the array
    for (var i=platypii.length-1; i>=0; i--) {
        platypus = platypii[i];

        // add gravity to the Y velocity if it's falling:
        if (platypus.falling) { platypus.velY += 3; }
        platypus.x += platypus.velX;
        platypus.y += platypus.velY;

        if (platypus.x < -platypus.nominalBounds.width*platypus.scaleX || platypus.y > 400) {
            platypii.splice(i,1);
            exportRoot.removeChild(platypus);
            // add +100 points if it fell or -500 if it escaped
            updateScore(platypus.y > 400 ? 100 : -500);
        }
    }

    stage.update();
}

i'm trying to alter it the Platypus to move in wave by changing platypus.velY = 0; to platypus.velY = Math.sin(platypus.x) * 5; , but not successful, any ideas?

Answer 1

You need to add a tick-counter, the wavemovement should be something periodical.

At the beginning of each tick() you increase the counter by 1 tickCounter++; and your velocity would be:

platypus.velY = Math.sin(tickCounter * frequency) * amplitude

However due to irregularities in JS computing-time this might actually move the platypus, so if you want your object to remain on the same spot and just wave up and down it is safer to do the following:

// at init
platypus.baseY = platypus.y = Math.random()*(400-platypus.scaleY*platypus.nominalBounds.height);

// in the tick()
platypus.y = platypus.baseY + Math.sin(tickCounter * frequency) * amplitude;

---

Addition

If you want your platypii not to all wave in the same rythm you can then add a ticker-offset for each platypus: platypus.tickOffset = Math.random()*2*Math.PI at init and user this in the tick:

platypus.y = platypus.baseY + Math.sin((tickCounter+platypus.tickOffset) * frequency) * amplitude;