Sinoid Animation Examples

Sinoid Animation Examples
Prev	Chapter 12. Animation on the HTML5 Canvas	Next

Example 12.11. Trigonometric Movement

Again, here we must notice the changed move method.

export class Umo {
    constructor(canvas, color, piwidth=100, xamp=100, yoffset=200) {
        this.canvas = canvas;
        this.x = 0;
        this.y = 0;
        this.r = 3;
        this.dx = 1;
        this.color = color;
        this.yoffset = yoffset;
        this.xamp = xamp;
        this.piwidth = piwidth;
    }

    draw() {
        this.canvas.getContext().beginPath();
        this.canvas.getContext().fillStyle = this.color;
        this.canvas.getContext().arc(this.x, this.y, this.r,
                                     0, Math.PI * 2,
                                     false);
        this.canvas.getContext().fill();
        this.canvas.getContext().closePath();
    }

    move() {
        if (this.x + this.dx > this.canvas.getWidth()
                || this.x + this.dx < 0)
              this.dx = -this.dx;

        this.x += this.dx;
        this.y = this.xamp * Math.sin(this.x / this.piwidth * Math.PI ) + this.yoffset;
    }

    toString() {
        s = '';
        s += this.x + ':' + this.y;
        return s;
    }
}

Example 12.12. Animating on a Sinus Curve

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Canvas Test Animation</title>
        <script type='module' src='animate002.js'></script>
    </head>
    <body>
        <section>
            <canvas id='canvas' width='500' height='500'>
                If you see this text, your browser is very old.
            </canvas>
        </section>
    </body>
</html>

See it live: Click here!

Prev	Up	Next
Non Linear Polynomic Animation Example	Home	Playing with Moving Shapes, Not Finished, PoC