Garciat/spyro.html

## spyro.html
<body></body>
<script>
    var SCREENW = 600;
    var SCREENH = 600;

    var canvas = document.createElement('canvas');
    canvas.width  = SCREENW;
    canvas.height = SCREENH;

    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    ctx.translate(SCREENW / 2, SCREENH / 2);

    function clear() {
        ctx.clearRect(-SCREENW / 2, -SCREENH / 2, SCREENW, SCREENH);
    }

    var bigR = SCREENW / 2;
    var smlR = 97;
    var drwR = smlR * (1 - 0.7);

    var bigA = 0;
    var smlA = 0;

    var bigDA = 0.1;
    var smlDA = -bigDA * bigR / smlR;

    var points = [];

    function animate() {
        ctx.beginPath();
        ctx.arc(0, 0, bigR, 0, 2 * Math.PI);
        ctx.strokeStyle = 'black';
        ctx.stroke();

        var bigX = Math.sin(bigA) * (bigR - smlR);
        var bigY = Math.cos(bigA) * (bigR - smlR);

        ctx.beginPath();
        ctx.arc(bigX, bigY, smlR, 0, 2 * Math.PI);
        ctx.strokeStyle = 'purple';
        ctx.stroke();

        var smlX = Math.sin(smlA) * (smlR - drwR);
        var smlY = Math.cos(smlA) * (smlR - drwR);

        var drwX = bigX + smlX;
        var drwY = bigY + smlY;

        ctx.beginPath();
        ctx.moveTo(bigX, bigY);
        ctx.lineTo(drwX, drwY);
        ctx.strokeStyle = 'green';
        ctx.stroke();

        points.push([drwX, drwY]);

        for (var i = 1; i < points.length; ++i) {
            var pa = points[i - 1];
            var pb = points[i - 0];

            ctx.beginPath();

            ctx.moveTo(pa[0], pa[1]);
            ctx.lineTo(pb[0], pb[1]);

            ctx.save();
            ctx.strokeStyle = 'hsl(' + (0.2 * i) + ', 50%, 50%)';
            ctx.lineWidth = 3;
            ctx.stroke();
            ctx.restore();
        }

        bigA += bigDA;
        smlA += smlDA;
    }

    function loop() {
        clear();
        animate();
        requestAnimationFrame(loop);
    }

    loop();
</script>
	<body></body>
	<script>
	var SCREENW = 600;
	var SCREENH = 600;

	var canvas = document.createElement('canvas');
	canvas.width = SCREENW;
	canvas.height = SCREENH;

	document.body.appendChild(canvas);

	var ctx = canvas.getContext('2d');

	ctx.translate(SCREENW / 2, SCREENH / 2);

	function clear() {
	ctx.clearRect(-SCREENW / 2, -SCREENH / 2, SCREENW, SCREENH);
	}

	var bigR = SCREENW / 2;
	var smlR = 97;
	var drwR = smlR * (1 - 0.7);

	var bigA = 0;
	var smlA = 0;

	var bigDA = 0.1;
	var smlDA = -bigDA * bigR / smlR;

	var points = [];

	function animate() {
	ctx.beginPath();
	ctx.arc(0, 0, bigR, 0, 2 * Math.PI);
	ctx.strokeStyle = 'black';
	ctx.stroke();

	var bigX = Math.sin(bigA) * (bigR - smlR);
	var bigY = Math.cos(bigA) * (bigR - smlR);

	ctx.beginPath();
	ctx.arc(bigX, bigY, smlR, 0, 2 * Math.PI);
	ctx.strokeStyle = 'purple';
	ctx.stroke();

	var smlX = Math.sin(smlA) * (smlR - drwR);
	var smlY = Math.cos(smlA) * (smlR - drwR);

	var drwX = bigX + smlX;
	var drwY = bigY + smlY;

	ctx.beginPath();
	ctx.moveTo(bigX, bigY);
	ctx.lineTo(drwX, drwY);
	ctx.strokeStyle = 'green';
	ctx.stroke();

	points.push([drwX, drwY]);

	for (var i = 1; i < points.length; ++i) {
	var pa = points[i - 1];
	var pb = points[i - 0];

	ctx.beginPath();

	ctx.moveTo(pa[0], pa[1]);
	ctx.lineTo(pb[0], pb[1]);

	ctx.save();
	ctx.strokeStyle = 'hsl(' + (0.2 * i) + ', 50%, 50%)';
	ctx.lineWidth = 3;
	ctx.stroke();
	ctx.restore();
	}

	bigA += bigDA;
	smlA += smlDA;
	}

	function loop() {
	clear();
	animate();
	requestAnimationFrame(loop);
	}

	loop();
	</script>