In this activity you will be guided through the construction of the surface development of an hsv cylinder like the following one.

The purpose is to generate a surface development to be printed and folded, and obtain an actual 3D hsv cylinder.

The HSV cylinder

An HSV cylinder is a three-dimensional color model that represents colors as points in a cylinder with three main dimensions: hue, saturation, and value (brightness). The hue is represented by the angle around the cylinder, saturation is the distance from the central axis, and value corresponds to the height along the cylinder. This model is a more intuitive way to manipulate and describe colors than the traditional RGB or CMYK color spaces.

SharkD, CC BY-SA 3.0, via Wikimedia Commons

The Flaps

Let's start by implementing the flap function that should return a grey trapezoid like the following one:

You can pick the color you prefer, as long as you can distinguish it from the cylinder and from a piece of paper (flaps are made to be cut out).

If you have done the RGB Cube activity, you can import the flap function from there.

The flaps implemented above can be placed beside a rectangular graphic, but what about a circular graphic, like the base of the cylinder?

The circular_flaps Function

Implement the circular_flaps function so that it returns the following graphic.

The diameter parameter represents the total width of the resulting graphic.

Create five rectangluar arms and combine them using pin and compose.

The add_circular_flaps Function

The add_circular_flaps function should take a graphic with a circular shape as parameter circle, and add some circular flaps to it, in the following way.

The flaps should stick out of the circle graphic, therefore their diameter should be larger than the graphic_width of circle.

Use compose to compose the graphics together (the circular flaps are already pinned in the correct point from the previous step).

The Top Face

The top face of the hsv cylinder is composed by a color wheel. Do the Color Wheel activity, import your color_wheel function and use it to implement the top_face function.

The top_face function should return a color wheel with the given radius and pixel_count. Remember that the parameter pixel_count is an integer larger than 1 (and smaller than radius) that indicates the number of pixels between each basic color wheel.

The Bottom Face

The bottom face of the hsv cylinder is all black, so the bottom_face function should just return a black circle with the given radius.

You can use the circle function that you might have in your toolbelt, if you want.

The Lateral Surface

The lateral surface of the hsv cylinder is composed by multiple hue bars, all with a different value (the v in hsv).

A hue bar is a sequence of 360 color tiles all with a different hue.

The color_tile Function

Let's start by implementing the color_tile function so that it returns a rectangle with the given width and height.

The color of the tile is composed with the given hue and value and a saturation of 1, using the hsv_color function.

The hue_bar Function

Implement the hue_bar function so that it returns 360 color tiles one beside the other, all with a different hue but the same value.

It may seem similar to the function implemented in the Hue Bar activity, but this one also takes a value! The final graphic should have a width of width.

The lateral_surface Function

The lateral surface is composed by a sequence of hue bars one above the other, all with a different value in color.

Ideally, the lateral_surface function generates as many hue bars that can fit in height, and places these very thin hue bars one above the other. For example if height is 100 it will place 100 1-pixel-heigh hue bars one above the other, all with a different value. The issue with this implementation is that it will take a lot of time to generate a lateral surface, since each hue bar is already composed by 360 color tiles (potentially longer than what our web platform allows you to run code!).

A possible solution is to give up some resolution and, for example generate height / 2 hue bars all with their own height of 2 pixels (therefore halving the time used to produce it), or height / 4 hue bars all with their own height of 4 pixels (reducing the time even more).

The resolution parameter is an integer larger or equal to 0 that indicates the height of each singluar hue bar, and therefore the number of hue bars in a lateral surface can be obtained in the following way

bar_height = 2 ** resolution
bar_count = height // bar_height

Therefore 0 is maximal resolution (heach hue bar is 1 pixel heigh). The worst possible resolution is given by

worst_resolution = log2(height)

Assert that the given resolution is smaller than the worst_resolution, or you will get an error for values that are too large!

In the image below you can see a lateral surface with a resolution of 2, one with resolution of 3 and one with resolution of 4.

Implement the lateral_surface function so that it returns a lateral surface of the wanted width, height and resolution.

Notice that this function can take a lot of time to generate, the smaller resolution gets!

The HSV Cylinder

The hsv cylinder is composed by a top face, a bottom face and a lateral surface.

Now you have all the pieces you need to compose it, but the question is, what should be the width of the lateral surface for it to match the circular top and bottom faces?

The width of the lateral surface should match the perimeter of the faces. The perimeter of a circle is computed with:

perimeter = 2 * radius * pi

you can use the value of pi provided by the math library!

The hsv_cylinder Function

The hsv_cylinder function should create a top face and a bottom face with the wanted radius using the top_face and the bottom_face functions, and add circular flaps to them with the add_flaps function.

It should then combine the faces (with flaps) with a properly wide lateral surface (compute the needed width using radius and pi) of the wanted height You should add a flap beside one of the sides (use the flap function).

Important: make sure that the part of the top face that is touching the lateral surface is matching the color!

What You Learned

You practiced problem decomposition and abstraction, implementing simple small functions that ultimately lead you to a significant result: a foldable hsv cylinder!

You also practiced the use of colors and loops!