At My Fingertips

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?

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

Loading...

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.

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

Loading...

Now let's write a function that can create multiple rings.
It should call our `gradient_ring`

function to produce each ring.

Loading...

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`

.

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.

Loading...

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

Loading...

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.

Loading...

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.

This activity has been created by LuCE Research Lab and is licensed under CC BY-SA 4.0.

Power Circles

PyTamaro is a project created by the Lugano Computing Education Research Lab at the Software Institute of USI

Privacy Policy • Platform Version b744b47 (Tue, 08 Oct 2024 16:30:14 GMT)