JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

<span></span>

JavaScript

/*
Take color 1 343434
If 100% Then change color 2 to color 1
if 90% add 10% * 9 to background (average it 9 times);





*/






function calc(bg,br,hits){
   
    //return average = ((br+bg)/2).toFixed(2);
    if(bg < br){
        return Math.floor(bg - br);
    }else {
        return Math.ceil(br + bg);
    };
    var miN = Math.min(br,bg);
    var maX = Math.max(br,bg);
    
    console.log(miN,'|min',maX,'|');
    
    if(bg !== 0 && bg > br ) {
        var valC = parseInt(maX) + parseInt(miN);    
    } else {
        var valC = parseInt(maX) + parseInt(miN);   
    };

    console.log(valC,'val',bg,br);
    return  valC;
    
   // return parseInt(((x+y)/2).toFixed(2));
    
};

        

var color2 = 'ffffff';// background color
var color1 = '111111';// brush color
var colorDepth = 1;



function mergeImage(color1,color2,colorDepth){ 
    
    var color1 = color1.split(""); 
    var color2 = color2.split(""); 
    darkenColor = new Array();
    
    for(var i=5; color1.length > 1;i--){
        ////num = (parseInt(color.shift(),16)*16)+(parseInt(color.shift(),16));
        var c1 = (parseInt(color1.shift(),16)*16)+(parseInt(color1.shift(),16));
        var c2 = (parseInt(color2.shift(),16)*16)+(parseInt(color2.shift(),16));
        
        var num = calc((parseInt(c2 * colorDepth * 10)/10),c1,10);
        console.log((parseInt(c2 * colorDepth * 10)/10),'|',c1,'|',c2,'|',num);
        
        //for(i = 0; i < 0; i ++){
        //For the depth of color, average the colors closer and closer.
        //num = calc(c2,num);
        //};
        
        var num = num.toString(16); 
        
               // $('span').text(num);
        
               if(num.indexOf('-') !== -1){
                    num = '00';
                }; 
        
        num = (num.length == 1)? 0 + num : num;
        darkenColor.push(num);
      
    };
     return darkenColor.join('');
};

$('span').text(mergeImage(color1,color2,colorDepth)+'|');