Откуда приходит цунами?

by schrodingers

HTML

<script src="https://github.com/michaelvillar/dynamics.js/releases/download/0.0.7/dynamics.js"></script>
<canvas id="canvas"></canvas>

JavaScript

// RequestAnimFrame for old browsers
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

// BASIC canvas settings
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = 800;
var h = canvas.height = 600;

// Function for degrees to radians convertion
function rad(degrees) {
    return Math.PI / 180 * degrees;
}

// scene vars.
var rectangleX = 0;
var speed = 2;

// Animation base
requestAnimationFrame(animate);

function animate() {
// 1. Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2. Draw a figure
    ctx.fillStyle = 'dodgerblue';
    ctx.fillRect(rectangleX, 0, 100, 100);

// 3. Move figure
    rectangleX += speed;
    if((rectangleX+100 > canvas.width || rectangleX <= 0)) {
    speed = -speed;
    }
    requestAnimationFrame(animate);
}





// TRIANGLE
var el = ctx.fillRect(10, 20, 50, 50);

// From purple to green
    function animate1() {
        dynamics.animate(el, {
            rotateZ: -180,
            scale: .5,
            fill: '#43F086'
        }, {
            type: dynamics.spring,
            friction: 400,
            duration: 1300,
            complete: animate2
        });
    }

    // From green to purple
    function animate2() {
        dynamics.animate(el, {
            rotateZ: 360,
            scale: 1,
            fill: '#CA2F6F'
        }, {
            type: dynamics.spring,
            frequency: 600,
            friction: 400,
            duration: 1800,
            anticipationSize: 350,
            anticipationStrength: 400,
            complete: animate1
        });
    }

    // Start first animation
    animate1();