Facebook Live Mood Ring

Facebook Live Mood Ring was an interactive live Facebook stream which ran from¬†5pm – 9pm CST on 4.4.2017. The color of the ring was based on reactions — each reaction was assigned a unique color — and the RGB color values were averaged to create the overall color. Below are several screenshots from the event, the full four-hour video, and a sample of the code used to create¬† the color of the ring.






Final reaction count / color.

Below is a sample of the Javascript used to control the color of the ring. The first group of seven lines control the RGB color value for each reaction, and the following lines average those values. You might notice there is a bias toward Blue / Red / Purple, which I was okay with because those are some of my favorite colors.

if ((defaultCount + totalReacts) >= 0){
var angry = ((res[postID].reactions_angry.summary.total_count) * 255);
var sad_red = ((res[postID].reactions_sad.summary.total_count) * 127);
var sad_blue = ((res[postID].reactions_sad.summary.total_count) * 255);
var wow = ((res[postID].reactions_wow.summary.total_count) * 255);
var haha = ((res[postID].reactions_haha.summary.total_count) * 255);
var love = ((res[postID].reactions_love.summary.total_count) * 255);
var like = ((res[postID].reactions_like.summary.total_count) * 255);

var red = angry + sad_red + haha + love;
var green = wow + haha;
var blue = like + love + sad_blue;

var red1 = Math.floor(red / totalReacts);
var green1 = Math.floor(green / totalReacts);
var blue1 = Math.floor(blue / totalReacts);

var r = red1.toString();
var g = green1.toString();
var b = blue1.toString();

document.getElementById("ring").style.backgroundColor = "rgb("+r+","+g+","+b+")";

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s