Can I insert a smiley animation dependent on value on an HTML page?

Question

Is there a way to insert a smiley animation on an HTML page, which's smile depends on a value? I have some values between -1 and 1 from a Naive Bayes classifier, which correspond to negative and positive sentiment respectively. Is it possible to visualise this sentiment on a smiley face, meaning if the value is close to -1 the face will be sad :( or if it's close to 1 the face will be happy :) ..?

Thank you.

Answer 1

Assuming that you don't want to do any server-side work, the only option I can think of to do this client-side is using the HTML5 canvas. If you don't know what that is, you first need to read a bit about it and how to draw things on it using JavaScript.

First step is to draw the static part of the emoticon (i.e., the borders of the face and the eyes, etc..). You probably place it as in image on the canvas. Example on how to do that:

var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'images/face.png';
img.onload = function() {
    ctx.drawImage(img, 0, 0); //draws img where its left-upper corner is at 0, 0
};

Then, to draw the smile-curve, you need to use Bezier Curves. You just move the control point depending on your value properly. Here's a tutorial on how to draw Bezier Curves on a canvas: Link

Hope that helped in any manner!