<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../resources/stage.css">
</head>
<body>
    <canvas id="stage"></canvas>
    <script id="vertex" type="x-shader/x-glsl">
attribute vec4 position;
attribute vec4 color;

uniform float scale;
uniform float time;
uniform float offsetX;
uniform float offsetY;
uniform float scalar;
uniform float scalarOffset;

varying vec4 v_color;

void main() {

    float fade = mod(scalarOffset + time * scalar / 10.0, 1.0);

    if (fade < 0.5) {
        fade = fade * 2.0;
    } else {
        fade = (1.0 - fade) * 2.0;
    }

    float xpos = position.x * scale;
    float ypos = position.y * scale;

    float angle = 3.14159 * 2.0 * fade;
    float xrot = xpos * cos(angle) - ypos * sin(angle);
    float yrot = xpos * sin(angle) + ypos * cos(angle);

    xpos = xrot + offsetX;
    ypos = yrot + offsetY;

    v_color = vec4(fade, 1.0 - fade, 0.0, 1.0) + color;
    gl_Position = vec4(xpos, ypos, 0.0, 1.0);
}
    </script>
    <script id="fragment" type="x-shader/x-glsl">
#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_color;

void main() {
    gl_FragColor = v_color;
}
    </script>
    <script src="../../resources/strings.js"></script>
    <script src="../../resources/extensions.js"></script>
    <script src="../../resources/statistics.js"></script>
    <script src="../resources/math.js"></script>
    <script src="../resources/main.js"></script>
    <script src="resources/webgl.js"></script>
</body>
</html>