Delete Icon
This forum is now read-only. Please use our new forums at discuss.codecademy.com.
0 points
Submitted by Maciej Wiercioch
6 years ago

Any more tricks? Yes, color fading!

In How does alphabet.js work? I mentioned about one mysterious value of every point - the fourth value coresponding to hue of a color. But as I said there, this option was not used in our projects, but there is no reason we can’t turn it on if we want to!

Function makeColor is responsible for making color (who would have guessed?) so let’s look at it closer:

function makeColor(hslList, fade) {
    var hue = hslList[0] /*- 17.0 * fade / 1000.0*/;
    var sat = hslList[1] /*+ 81.0 * fade / 1000.0*/;
    var lgt = hslList[2] /*+ 58.0 * fade / 1000.0*/;
    return "hsl("+hue+","+sat+"%,"+lgt+"%)";
}

You probably noticed a few comments. We only have to uncomment the code and our animations will gain some depth!

function makeColor(hslList, fade) {
    var hue = hslList[0] - 17.0 * fade / 1000.0;
    var sat = hslList[1] + 81.0 * fade / 1000.0;
    var lgt = hslList[2] + 58.0 * fade / 1000.0;
    return "hsl("+hue+","+sat+"%,"+lgt+"%)";
}

An example of more colors, bigger dots, and fading!


Return to Frequently Asked Questions

Answer 55c67b299376760f960003e3

0 votes

Permalink

This is so cool! amazing! Thank you so much!!!!

388 points
Submitted by cp99455
5 years ago

1 comments

Maciej Wiercioch 5 years ago

I am really happy that you like it! :)