JavaScript Coding Tutorial — Part 10 — Creating Random Rainbows!

In Part 9 we started using radial gradient fills and used what we had learned thus far to create a floating dancing random square with a shadows. Let’s dig a bit deeper into linear and radial gradient fills to solidify some of what we went over before on those things.

First go ahead and comment out the drawRandomSquare() and
drawMouseCoordinates() function calls in the draw() function. Then add a new function call near the bottom of the draw() function called drawColorStops().

Then below the whole draw() function, let’s create the drawColorStops() function to create a rainbow linear gradient across our canvas, like so. Notice how the color stops divide the full width by 1, so 0.5 would be halfway across the width of our canvas, where green lies.

function drawColorStops() {
    // ROYGBIV = Red, orange, yellow, green, blue, indigo, violet
    let grd = ctx.createLinearGradient(0, 0, 600, 0);
    grd.addColorStop(0, "black");
    grd.addColorStop(0.125, "red");
    grd.addColorStop(0.25, "orange");
    grd.addColorStop(0.375, "yellow");
    grd.addColorStop(0.5, "green");
    grd.addColorStop(0.625, "blue");
    grd.addColorStop(0.75, "indigo");
    grd.addColorStop(0.875, "violet");
    grd.addColorStop(1, "black");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 600, 300);
}

Our ROYGBIV rainbow linear gradient fill across our canvas using color stops.

Now, if we want to randomize our rainbow, we actually need a new random number function, because if you remember our getRandomNum() function returns a whole number (or integer). So, we need a new function that does random decimals (or floats) to give us fractions of 1, since that’s what the color stops need.

function getRandomDecimal(min, max) {
    // Random decimal number between min and max.
    return ((Math.random() * (max - min)) + min).toFixed(3);
}

So, to do a bit of testing, we can use an alert to display a number from the getRandomNum() function between zero and one. Notice every time you refresh the page, the alert box always says zero.

alert( getRandomNum(0, 1) );

Refreshing the page using getRandomNum always show zero in the alert box.

Ok, so now let’s switch the alert box to use our new getRandomDecimal() function with the same minimum and maximum range.

alert( getRandomDecimal(0, 1) );

Using our getRandomDecimal function we get a random number to three decimals places.

Great, now we’re getting the type of number with three decimals places that the color stops need. So, before we put in all the random decimal numbers, let’s go ahead and comment out this line of code in our draw() function, so that we can see each new linear gradient at a time.

//window.requestAnimationFrame(draw);

Then let’s go ahead and continue to implement our new drawColorStops() function using our new random decimal number function, like so.

function drawColorStops() {
    // ROYGBIV = Red, orange, yellow, green, blue, indigo, violet
    let grd = ctx.createLinearGradient(0, 0, 600, 0);
    grd.addColorStop(0, "black");
    grd.addColorStop(getRandomDecimal(0, 0.125), "red");
    grd.addColorStop(getRandomDecimal(0.125, 0.25), "orange");
    grd.addColorStop(getRandomDecimal(0.25, 0.375), "yellow");
    grd.addColorStop(getRandomDecimal(0.375, 0.5), "green");
    grd.addColorStop(getRandomDecimal(0.375, 0.625), "blue");
    grd.addColorStop(getRandomDecimal(0.375, 0.75), "indigo");
    grd.addColorStop(getRandomDecimal(0.375, 1), "violet");
    grd.addColorStop(1, "black");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 600, 300);
}

Trying out our new getRandomDecimal function throughout our drawColorStops function.

Now, let’s make it even more random, by making each color stop get any random decimal number between zero and one.

function drawColorStops() {
    // ROYGBIV = Red, orange, yellow, green, blue, indigo, violet
    let grd = ctx.createLinearGradient(0, 0, 600, 0);
    grd.addColorStop(0, "black");
    grd.addColorStop(getRandomDecimal(0, 1), "red");
    grd.addColorStop(getRandomDecimal(0, 1), "orange");
    grd.addColorStop(getRandomDecimal(0, 1), "yellow");
    grd.addColorStop(getRandomDecimal(0, 1), "green");
    grd.addColorStop(getRandomDecimal(0, 1), "blue");
    grd.addColorStop(getRandomDecimal(0, 1), "indigo");
    grd.addColorStop(getRandomDecimal(0, 1), "violet");
    grd.addColorStop(1, "black");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 600, 300);
}

Making our linear gradient even more random, by changing min and max for each color stop.

Now to give it more shape, we can switch it to a radial gradient with changing just one line of JavaScript, like the following.

//let grd = ctx.createLinearGradient(0, 0, 600, 0);
let grd = ctx.createRadialGradient(300, 150, 0, 300, 600, 600);

Changing just one line of JavaScript switches our gradient to a radial shaped fill.

And… if you want to put back in the sectioned decimals values…

grd.addColorStop(getRandomDecimal(0, 0.125), "red");
grd.addColorStop(getRandomDecimal(0.125, 0.25), "orange");
grd.addColorStop(getRandomDecimal(0.25, 0.375), "yellow");
grd.addColorStop(getRandomDecimal(0.375, 0.5), "green");
grd.addColorStop(getRandomDecimal(0.375, 0.625), "blue");
grd.addColorStop(getRandomDecimal(0.375, 0.75), "indigo");
grd.addColorStop(getRandomDecimal(0.375, 1), "violet");

And… if you want, you could put back in the sectioned decimal values.

Or… move around the different radial gradient positions…

Try moving around the different radial gradient positions to see what you can create.

Or… reverse the color order to get closer to a true rainbow…

grd.addColorStop(getRandomDecimal(0, 0.125), "violet");
grd.addColorStop(getRandomDecimal(0.125, 0.25), "indigo");
grd.addColorStop(getRandomDecimal(0.25, 0.375), "blue");
grd.addColorStop(getRandomDecimal(0.375, 0.5), "green");
grd.addColorStop(getRandomDecimal(0.375, 0.625), "yellow");
grd.addColorStop(getRandomDecimal(0.375, 0.75), "orange");
grd.addColorStop(getRandomDecimal(0.375, 1), "red");

Try reversing the colors to create a more realistic rainbow and position as you want.

And… that’s the end of the JavaScript Coding Tutorial — Part 10.

Hopefully, this helped your understanding of JavaScript canvas gradient color stops and generating random decimal numbers. As always, be sure to take a few minutes and have a little fun changing the colors and numbers to see what you can create with basically just a text file and a web browser. A little experimentation can help with understanding!

If you enjoyed this article or if this article helped you at all, consider following, clapping, commenting or clicking here to buy me a coffee (any of these would be greatly appreciated and motivating!)