moods

by Joe LeMonnier

JavaScript

var paper = Raphael(10,10,700,700);
		
		var rect = paper.rect(0, 0, 50, 50)
		rect.attr({fill: 'pink'});
    var circ = paper.circle(250, 250, 20).attr({fill: '#000'});
    var mood_text = paper.text(250, 250, 'My\nMood').attr({fill: '#fff'});

moods = ['Rubbish', 'Not Good', 'OK', 'Smily', 'Positively Manic'];
var colors = ['blue', 'red', 'pink', 'yellow', 'green'];
 
//pick a mood between 1 and 5, 1 being rubbish and 5 being positively manic
my_mood = 5;
for (var t=1;t<5;t++) {  
 (function(t){
  paper.circle(240+(30*t),40,10).attr("fill",colors[t]);
 })(t);
}

function show_mood() {
 
    for(var i = 0; i < my_mood; i+=1) {
		
       (function(i) {
            
paper.circle(200,70,(i* 12)+12);
                paper.circle(250, 250, 20).attr({
                    stroke: 'none',
                    fill: colors[my_mood - 1]
                }).animate({translation: '0 ' + (-42 * (i+1))}, 200);
            
        })(i=i);
    }
		
    paper.text(250, 300, moods[my_mood - 1]).attr({fill: colors[my_mood - 1]});
 

}

circ.node.onclick = show_mood;
mood_text.node.onclick = show_mood;