[SOLVED] How to create color shades between two colors like stack ball 3d?

Help & Support
1

Hello,

As you can see in video the 1st level color set from Yellow to Green.

How i can do this?

================

Check for solution:

2

Looks like a transition of hue. The easiest way to do this is to have a material per block, each with a slightly different hue on the diffuse colour.

Alternatively, you could use a shader that exposes a colour Param and change it on a per mesh instance basis.

1 Like
3 
material = ringPartEntity.model.model.meshInstances[0].material.clone();
ringPartEntity.model.model.meshInstances[0].material = material;
// console.log(material);

if (material)
{
    // material.diffuse.set(Math.random(), Math.random(), Math.random());
    material.diffuse.set(0.439, 1, 0.121);
    material.update();
}

Right now i am setting material color like this…

How i can do this here?
I mean how i can find color shade?

===============

I can do this hard way with maths… but looking for easy way

4

I normally use a HSV to RGB conversion code and just change the H to get that colour transition

image
image876×133 11.8 KB

So changing the H will give you the colour shift. Code to go from HSV to RGB can be found online.

5

The math way would probably be a lot more efficient in the long run but a lot harder to do

6

Created code to generate this type of effect! :grinning:

image
image323×571 45.6 KB

I am sharing code here…

GamePlayManagerScript.prototype.getColorShades = function(noOfShades, startingColor, endingColor) {
    
    var colorShadesArray = [];
    
    var sR = startingColor[0];
    var sG = startingColor[1];
    var sB = startingColor[2];
    
    var eR = endingColor[0];
    var eG = endingColor[1];
    var eB = endingColor[2];
    
    var diffR = 0;
    var diffG = 0;
    var diffB = 0;
    
    var lowerR = 0;
    var lowerG = 0;
    var lowerB = 0;
    
    if(sR > eR){diffR = sR-eR; lowerR = eR;}else{diffR = eR-sR;lowerR = sR;}
    if(sG > eG){diffG = sG-eG; lowerG = eG;}else{diffG = eG-sG;lowerG = sG;}
    if(sB > eB){diffB = sB-eB; lowerB = eB;}else{diffB = eB-sB;lowerB = sB;}
        
    var divR = diffR / (noOfShades -1);
    var divG = diffG / (noOfShades -1);
    var divB = diffB / (noOfShades -1);
    
    for(looper_i = 0, revCount = noOfShades -1; looper_i < noOfShades; ++looper_i, --revCount)
    {
        var valR = 0;
        var valG = 0;
        var valB = 0;
        
        if(sR > eR){valR = (divR * looper_i) + lowerR;}else{valR = (divR * revCount) + lowerR;}
        if(sG > eG){valG = (divG * looper_i) + lowerG;}else{valG = (divG * revCount) + lowerG;}
        if(sB > eB){valB = (divB * looper_i) + lowerB;}else{valB = (divB * revCount) + lowerB;}
        
        colorShadesArray.push([valR, valG, valB]);
    }
    
    if(startingColor[0] == colorShadesArray[0][0] && startingColor[1] == colorShadesArray[0][1] && startingColor[2] == colorShadesArray[0][2])
    {
        return colorShadesArray;
    }
    else
    {
        return colorShadesArray.reverse();
    }
    
};

Way to use… e.g.

var colorShadeArray = this.getColorShades(60, [0.992, 0.992, 0.345], [0.439, 1, 0.121]);

Hope it will help you! :slightly_smiling_face:

===============
Edit: Code Improved!

1 Like