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?

jsfiddle would be nice... – Tschallacka Sep 12 '13 at 08:38 — Tschallacka, Sep 12 '13 at 08:38

score 0 · Accepted Answer · answered Sep 12 '13 at 09:02

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;

thanks your answer, but i think the platypus.velY only updated once when the platypus dispatch but not update onenterframe, so the platypus only go one direction even i apply your answer. — hkguile, Sep 12 '13 at 09:31
I don't know what you want to say by that, the time and point of updating the velY is up to you, that's not limited by anything? Or are you saying, that you don't want to update the velY each tick()? If so, then just use the method with `baseY` — olsn, Sep 12 '13 at 10:50
you freqcy of 1000 is way to high, try this: `platypus.velY = Math.sin(platypus.x / 50) * 5;` — olsn, Sep 13 '13 at 07:44

score 0 · Answer 2 · answered Jan 21 '14 at 18:09

Haha fun! How about this?

http://jsfiddle.net/sebastian_derossi/xAy7u/10/

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;
    platypus.angle = 0;
    platypus.inc = Math.random() - 0.2;
    // 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;

    //platypus.y = platypus.velY;
    //platypus.velY = Math.sin(tickCounter * platypus.velX) * 5;
    // 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);
}

...

for (var i = platypii.length - 1; i >= 0; i--) {
    platypus = platypii[i];
    platypus.velY = Math.sin(platypus.angle) * 10;
    platypus.angle += platypus.inc;
    if (platypus.falling == true) {
        platypus.velY = 0;
        platypus.velY += 30;
    }
}

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

2 Answers2

Linked