π day: rainbow hex grid

Today is π day so I decided to share a bit of my love for math. We are going to briefly revisit the sine and cosine function do some magic and then make an awesome rainbow hex grid.

Sine and Cosine are so round

Everybody knows about π because of circles.

The circumference of a circle of radius R is 2 * π * R. You also have 2 * π radians in a circle. Rotating π radians around the center point gets you on the opposite side.

You might have also heard of π when learning about the sine and cosine functions.

You might remember that sine looks like this:

And cosine look like that:

What your math teacher forgot to tell you is that if you plot them together you get a circle:

If you draw a dot on all points with x = cos(angle) and y = sin(angle) you will draw a circle.

If angle is 0 the dot will be on the right side touching the X axis.

After that you will go anti-clockwise until you reach the initial position:

Note: On computers the screen usually has the origin in the top left corner not the bottom left like the one you use in math. Because of this you will notice that the code from the playground iterates clockwise around the center.

So if we take every point from 0 to 2 * π with x = cos(angle) and y = sin(angle) we can draw a circle. But we can’t draw every point because computers can’t run infinite programs.. yet! So the first thing we do is decide on a step and then go around the circle every step radians.

// we take a step equal to 1/60 the number of radians in a circle
// in that way we will place 60 dots around the center
let step = (π * 2) / 60 

while angle < π * 2 {
    let sine = sin(angle)
    let cosine = cos(angle)

    // draw a dot on (x: cosine, y: sine)

    angle += step
}

Sine and Cosine Playground

Magic

Now you are armed with the power is π, sin and cos. Let do some magic:

See how the circle on the right looks bigger than the one on the left? Look at the code – they both have the same radius. This effect is called Ebbinghaus illusion of relative size perception.

To draw these shapes we use almost the same code as before – we needed to set the step to π/3 in order to draw 6 blue circles around the red ones.

Illusion Playground

Rainbow Hex Grid

After playing with the values from the first playground I realised I wasn’t to far from making a hex grid.

When you map a square grid you look at the column and row of a cell. That gives you up/down and left/right. In a hex grid you can have 3 directions: left/right, up+left/down+right, up+right/down+left.

So in a way a hex grid a a way to map 3d space on 2d surfaces. The prettiest space I could think of is all the colors. One dimension is for hue – the actual color, the next one for saturation – the amount of grey and the last of is brightness – or how much white.

To draw the actual grid we started from the center then we try to expand and draw a circle in every of the 6 neighbor cells. If no circle was drawn before we draw one and then try to expand to its neighbors. This is done usually with a queue.

Because the algorithm takes some time to run the playground looked really boring. Instead of pop-ing elements from the queue until it was empty I made a special queue that pops 1 element every frame if there is one and then calls a closure with it as a parameter.

The result looks likes this:

Rainbow Hex Grid Playground

Have fun playing with the constants!

If you want to find out how to compute the value π of with random numbers read this article.

If you like this article please take a moment and share it with your friends