The following graphic has a rather interesting structure.

You may have mentioned rings? Twelve of them? Blue? Or, better, cyan? Each ring gradually transitioning between back and cyan? Each ring having a different gradient? Each ring having the same width?

The Innermost Ring

Let's first focus on creating a single ring. Let's pick the innermost one.

We produce a circle for each shade of the gradient. We overlay the circles so the smaller ones are on top of the larger ones.

We create the color using hsv_color, which allows us to specify a hue (we pick 210 for cyan), a saturation (1.0 for fully saturated colors), and a value (which we vary from 0.0 to 1.0). A value of 0 leads to a black color, and a value of 1 leads to a cyan color.

An Arbitrary Ring

Let's change our function so that it can create an arbitrary ring, not just the innermost one.

Multiple Rings

Now let's write a function that can create multiple rings. It should call our gradient_ring function to produce each ring.

Changing Gradients

The graphics we just produced always use the same gradients, linearly going from 0 to 1 for each ring.

The innermost ring starts with black, stays mostly black, and only towards the end goes up to cyan quickly. The outermost ring starts with black, quickly goes up to almost cyan, and the gradually approaches complete cyan.

In our original calculation, we computed:

value = shade / (shades - 1)

This lead to value going from 0 to 1 as shade went from 0 to shades - 1.

The Power of Exponentiation

We want to keep the range of values (0 to 1), but we want to go non-linearly. Moreover, the shape of the growth curve should change depending on ring.

Let's try to do this by using exponentiation. We need the pow function, so we can compute x^y by calling pow(x, y). The base, x, should be a number that linearly grows from 0 to 1. Let's use shade / (shades - 1) as our base. The exponent, y, determines the shape of the gradient. An exponent of 1 gives us a linear gradient. An exponent below 1 (and greater than 0) gives us a gradient that quickly approaches cyan and then slows down. An exponent above 1 gives us a gradient that stays closer to black for longer, and then jumps to cyan quickly.

Let's look at the same information as colors instead of numbers.

Power Gradients

Let's create an improved function, power_gradient_rings, that can produce rings with non-linear gradients.

Note that we inline the ring function into the rings function here, so we have a single function that builds the entire composition.

What You Learned

In this activity you played with exponentiation, and you developed an intuition for the impact of exponents that are greater or less than 1.

You also used the hsv_color to turn values that represent the amount of light into colors, and you worked with code defining functions and nested loops.