remram44 · December 19, 2015 17:38
diff --git a/disapproval.html b/disapproval.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Look of disapproval</title>
  </head>
  <body>
    <p style="position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -111px;"><canvas class="jsdisapproval" width="360" height="222"></canvas></p>

    <script type="text/javascript" src="disapproval.js"></script>
  </body>
 </html>
diff --git a/disapproval.js b/disapproval.js
 // shim layer with setTimeout fallback
 window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
 })();


 function Eyes(c)
 {
    this.c = c;
    this.ctx = c.getContext("2d");
    this.ctx.translate(0.5 * c.width, 0.5 * c.height);
    this.ctx.strokeStyle = "black";
    this.ctx.lineWidth = 0.03*c.width;

    this.target_x = null;
    this.target_y = null;

    var vis = this;
    window.document.addEventListener("mousemove", function(e){vis.mouseMove(e)}, false);
 }
 Eyes.prototype = {
    mouseMove: function(event) {
        var pos = this.c.getBoundingClientRect();
        this.target_x = event.pageX - pos.left - document.body.scrollLeft;
        this.target_y = event.pageY - pos.top  - document.body.scrollTop;
    },
    update: function() {
        var ctx = this.ctx;
        var w = this.c.width;
        var h = this.c.height;
        ctx.clearRect(-0.5*w, -0.5*h, w, h);

        this.draw_eye();
        ctx.save();
        ctx.scale(-1.0, 1.0);
        this.draw_eye();
        ctx.restore();

        ctx.beginPath();
        ctx.moveTo(-0.15*w, 0.2*h);
        ctx.lineTo( 0.15*w, 0.2*h);
        ctx.stroke();

        var tx, ty;
        if(this.target_x == null)
        {
            tx = -10000000.0;
            ty =   5000000.0;
        }
        else
        {
            tx = this.target_x;
            ty = this.target_y;
        }

        this.draw_dot(tx - 0.2*w, ty - 0.5*h, -0.3*w, 0.0);
        this.draw_dot(tx - 0.8*w, ty - 0.5*h,  0.3*w, 0.0);
    },
    draw_eye: function() {
        var ctx = this.ctx;
        var w = this.c.width;
        var h = this.c.height;

        ctx.beginPath();
        ctx.arc(-0.3*w, 0.0, 0.1*w, 0, 2*Math.PI, true);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(-0.4*w, -0.18*h);
        ctx.lineTo(-0.22*w, -0.18*h);
        ctx.arc(-0.22*w, -0.23*h, 0.05*h, 0.5*Math.PI, -0.5*Math.PI, true);
        ctx.stroke();
    },
    draw_dot: function(tx, ty, cx, cy) {
        var ctx = this.ctx;
        var w = this.c.width;
        var h = this.c.height;

        var sqdist = tx*tx + ty*ty;
        if(sqdist > 0.06*w * 0.06*w)
        {
            var dist = Math.sqrt(sqdist);
            tx = tx * 0.06*w / dist;
            ty = ty * 0.06*w / dist;
        }
        ctx.beginPath();
        ctx.arc(cx + tx, cy + ty, 0.02*w, 0.0, 2.0*Math.PI, true);
        ctx.fill();
    }
 };

 (function(){
    var eyes = [];

    var elems = document.getElementsByTagName("canvas");
    for(var i = 0; i < elems.length; i++)
    {
        var e = elems[i];
        if(e.className.indexOf("jsdisapproval") != -1)
        {
            if(e.getContext)
                eyes[eyes.length] = new Eyes(e);
        }
    }

    if(eyes.length > 0)
    {
        function render()
        {
            for(var i = 0; i < eyes.length; i++)
                eyes[i].update();
            requestAnimFrame(render);
        }
        requestAnimFrame(render);
    }
 })();
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Look of disapproval</title>
	</head>
	<body>
	<p style="position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -111px;"><canvas class="jsdisapproval" width="360" height="222"></canvas></p>

	<script type="text/javascript" src="disapproval.js"></script>
	</body>
	</html>
	// shim layer with setTimeout fallback
	window.requestAnimFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( callback ){
	window.setTimeout(callback, 1000 / 60);
	};
	})();


	function Eyes(c)
	{
	this.c = c;
	this.ctx = c.getContext("2d");
	this.ctx.translate(0.5 * c.width, 0.5 * c.height);
	this.ctx.strokeStyle = "black";
	this.ctx.lineWidth = 0.03*c.width;

	this.target_x = null;
	this.target_y = null;

	var vis = this;
	window.document.addEventListener("mousemove", function(e){vis.mouseMove(e)}, false);
	}
	Eyes.prototype = {
	mouseMove: function(event) {
	var pos = this.c.getBoundingClientRect();
	this.target_x = event.pageX - pos.left - document.body.scrollLeft;
	this.target_y = event.pageY - pos.top - document.body.scrollTop;
	},
	update: function() {
	var ctx = this.ctx;
	var w = this.c.width;
	var h = this.c.height;
	ctx.clearRect(-0.5w, -0.5h, w, h);

	this.draw_eye();
	ctx.save();
	ctx.scale(-1.0, 1.0);
	this.draw_eye();
	ctx.restore();

	ctx.beginPath();
	ctx.moveTo(-0.15w, 0.2h);
	ctx.lineTo( 0.15w, 0.2h);
	ctx.stroke();

	var tx, ty;
	if(this.target_x == null)
	{
	tx = -10000000.0;
	ty = 5000000.0;
	}
	else
	{
	tx = this.target_x;
	ty = this.target_y;
	}

	this.draw_dot(tx - 0.2w, ty - 0.5h, -0.3*w, 0.0);
	this.draw_dot(tx - 0.8w, ty - 0.5h, 0.3*w, 0.0);
	},
	draw_eye: function() {
	var ctx = this.ctx;
	var w = this.c.width;
	var h = this.c.height;

	ctx.beginPath();
	ctx.arc(-0.3w, 0.0, 0.1w, 0, 2*Math.PI, true);
	ctx.stroke();

	ctx.beginPath();
	ctx.moveTo(-0.4w, -0.18h);
	ctx.lineTo(-0.22w, -0.18h);
	ctx.arc(-0.22w, -0.23h, 0.05h, 0.5Math.PI, -0.5*Math.PI, true);
	ctx.stroke();
	},
	draw_dot: function(tx, ty, cx, cy) {
	var ctx = this.ctx;
	var w = this.c.width;
	var h = this.c.height;

	var sqdist = txtx + tyty;
	if(sqdist > 0.06w 0.06*w)
	{
	var dist = Math.sqrt(sqdist);
	tx = tx * 0.06*w / dist;
	ty = ty * 0.06*w / dist;
	}
	ctx.beginPath();
	ctx.arc(cx + tx, cy + ty, 0.02w, 0.0, 2.0Math.PI, true);
	ctx.fill();
	}
	};

	(function(){
	var eyes = [];

	var elems = document.getElementsByTagName("canvas");
	for(var i = 0; i < elems.length; i++)
	{
	var e = elems[i];
	if(e.className.indexOf("jsdisapproval") != -1)
	{
	if(e.getContext)
	eyes[eyes.length] = new Eyes(e);
	}
	}

	if(eyes.length > 0)
	{
	function render()
	{
	for(var i = 0; i < eyes.length; i++)
	eyes[i].update();
	requestAnimFrame(render);
	}
	requestAnimFrame(render);
	}
	})();