Random Colors with preference

Question

The idea: I am trying to simulate a shop system. By clicking on items the users shows that he is interested in stuff like that and gets more like it the next time he visits the website. I want to achieve something similar only without things to buy, but with colors. You get random colors. If you 'like' red colors you get random ones but more red than usual.

So far in theory. Practically I made cookies for r,g and b with the starting values 1.0. Each time one of the colors is clicked the value rises +0.1 and the others go down -0.1. But how can take the numbers into account?

This is my Javascript so far:

var r = getCookie("r");
var g = getCookie("g");
var b = getCookie("b");

if (r = ""){
    setCookie("r",1.0,365);
    setCookie("g",1.0,365);
    setCookie("b",1.0,365);
}
init();
function init(){


  var colorboxes =  document.getElementsByClassName("mycolorbox");

    [].forEach.call(colorboxes,function(entry){


        var sr = Math.round((Math.random() * (255 - 1) + 1));
        var sg = Math.round((Math.random() * (255 - 1) + 1));
        var sb = Math.round((Math.random() * (255 - 1) + 1));

       entry.style.backgroundColor = "rgba("+sr+","+sg+","+sb+",0.8)";
    });

}



$(document).click(function(event) {
    var clickedObj = $(event.target);

    if (clickedObj[0].className.indexOf("likebox") > -1) {

        clickedObj[0].style.Color = "red";
        var rgb = clickedObj[0].parentNode.style.backgroundColor.match(/\d+/g);
        console.log(rgb);
        console.log(clickedObj[0].className);
        console.log("rot: "+rgb[0]+" gruen: "+rgb[1]+" blau: "+rgb[2]);

        if (rgb[0] >= rgb[1] && rgb[0] >= rgb[2]) {
            alert("red");
            setCookie("r",r-0.1,365)
        } else if (rgb[1] >= rgb[0] && rgb[1] >= rgb[2]) {
            alert("green");
            setCookie("g",g-0.1,365)
        } else if (rgb[2] >= rgb[1] && rgb[2] >= rgb[0]) {
            alert("blue");
            setCookie("b",b-0.1,365)
        }

    }
});

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split('; ');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Answer 1

I'm not totally sure if I got your problem right, but one approach might be to multiply the random values with the respective cookie values.

// you already have this code for random numbers
var sr = Math.round((Math.random() * (255 - 1) + 1));
var sg = Math.round((Math.random() * (255 - 1) + 1));
var sb = Math.round((Math.random() * (255 - 1) + 1));

// now let's multiply these values with the user's preferences
sr *= r;
sg *= g;
sb *= b;

To prevent overflows (and underflows), we have to make sure the values stay between 0 and 255:

sr = Math.max(0, Math.min(255, sr));
sg = Math.max(0, Math.min(255, sg));
sb = Math.max(0, Math.min(255, sb));

This is, of course, a very basic solution and does not deliver optimal results. I have not actually tried it out, but I guess it will get "better" after a few runs, just as intended.