JSFiddle - React, Tailwind, and code Playground

by David Poole

HTML

<!-- 
 * Got bored. Started writing a animat game for myself.
 *
 *   davep 14-Aug-2014
 *
-->

<div>
    <p><h1>wacka wacka wacka</h1></p>
    <p>wacka wacka wacka</p>
</div>
<div>
    <canvas id="my_canvas" width="640" height="480" 
            style="border:1px solid #000000; background-color:#777777;"
    >
    </canvas>
</div>

JavaScript

var opening = false;
var backwards = false;
var pi_4 = Math.PI/4.0;
var angle_offset = pi_4;
var pos_x = 100;
const move_size = Math.PI/64.0;


function draw() 
{
    var canvas = document.getElementById('my_canvas');
    var ctx = canvas.getContext('2d');

    /* erase entire canvas 
     * https://stackoverflow.com/questions/7365436/erasing-previously-drawn-lines-on-an-html5-canvas
     */
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    ctx.fillStyle="#ffff38";
    ctx.beginPath();
    ctx.moveTo(pos_x,100);

    var start_angle = angle_offset;
    var end_angle = -angle_offset;

//    console.log(opening,angle_offset,start_angle,end_angle);

    /* FIXME no circle drawn if start_angle==end_angle==0 (causes flickering) */
    if( end_angle==0 ) {
        end_angle = Math.PI*2;
    }

    ctx.arc(pos_x,100,50,start_angle,end_angle,false);
    ctx.fill();

    if( backwards ) {
        pos_x -= 1;
        if( pos_x <= 50 ) {
            backwards = false;
        }
    }
    else { 
        pos_x += 1;
        if( pos_x >= 590 ) {
            backwards = true;
        }
    }


    if( opening ) {
        /* mouth is opening */
        angle_offset += move_size;

        if( angle_offset >= pi_4 ) {
            opening = false;
            angle_offset = pi_4;
        }

    }
    else { 
        /* mouth is closing */
        angle_offset -= move_size;

        if( angle_offset <= 0 ) {
            opening = true;
            angle_offset = 0;
        }
    }
}

function run() 
{
    const FRAME_RATE=100;
    var intervalTime = 1000/FRAME_RATE;
    setInterval(draw,intervalTime);
}

window.onload=function() {
    run();
}
run();