Previously we have created a program that displays one dot in the center of the screen. Today we want to place five dots in a circle, like this:

We will start from where we left off yesterday. In the browser go to your saved Ellie bookmark. If you run it you should notice first obvious difference. Currently we only have one dot. It’s the one created using

function on lines 9 - 15, this code fragment:

If you look closely in your source code, the block above is surrounded by

and

characters. That’s a list. We will talk about lists during the next day. For now it’s enough to say that a list can contain zero, one or more items of the same type. In this case it contains one item of type

- our lonely, blue dot. Let’s add a second one like this:

Now the list spans from lines 9 to 23 and contains two items: skyblue and orange dots. The result should be:

Oh oh! The list contains two dots, but we can only see the orange one on the screen. Where is the blue one? It’s behind the orange. Recall how the cartesian coordinates work: if

and

of the center are the same, then the dots are in the same place. If we want to see both dots, let’s move one of them to a different place, like this:

Now you should see this:

We can add more dots, by simply multiplying the code blocks inside the list. Each block must be separated from others with a

(comma). Each time the

and

coordinates need to be different. We can also give dots different colors. Make five of them.

We all have some intuition about a circle. You can tell if you see one and if you have a steady hand, you can probably draw one with a pencil. It’s a shape that looks like this:

But what is it that makes a circle what it is? First of all we have to realize that every circle has a center. It’s a point that lays exactly in the middle:

We can say that dots lay on a circle, if the distance to the center is the same for each of them, like this:

We call this distance

. We already saw radius used as an attribute of a circle when we were making our first dot. Remember:

The

attribute stands for radius. Then it was basically dictating the size of the dot. The larger the radius the bigger the circle. A dot is just a filled circle!

This time the radius will affect the size of an imaginary circle on which the dots are laying.

Ok, so this describes what it means to lay on a circle. But what are some efficient methods of putting things there? How about the following.

You choose a center (anywhere, say

) and radius (any length you like, say

).

Take a ruler and place it’s one end (the one showing the value 0) at the center point. Then move the thing you want to place along the ruler the length you chose. Leave it there.

Next slightly rotate the ruler around the center (keep point

of the ruler at point

). Repeat the steps above with another thing. Move it along the slider the same length as previously (radius). Because this time the ruler points in different direction, the thing will end up in a different place.

In other words, you can put a thing in the center and then move it in any direction, let’s say 1 meter. If you do the same to several things in several directions (but same length), you will make them lay on a circle. The direction must be different each time. Otherwise the things would just stack one on top of another! We wouldn’t call it a circle, right?

Now, notice that the dots displayed by the program we are creating are not laying just anywhere on the circle. They are evenly distributed. It means that not only the distance between each dot and the center is the same. Also each dot lay the same distance away from it’s two nearest neighbors. Just compare the following two pictures:

On the right, you immediately see a pattern. They form a circle. But in fact both pictures are showing 5 dots laying on a circle. Look:

So the dots on the left lay on a circle, but there is a striking difference. They are all scattered! This means that there is something missing in our solution. We need to take care of one more aspect when we place our dots.

Since the center and radius is the same for each dot, the only thing we can play with is the angle that we rotate the ruler each time.

A common way of representing rotation is in degrees. It works like this: imagine a circle around you. You are in the center. Now imagine that the circle is divided in 360 equal segments. If you turn from one segment to the next one on the right (a very small turn) then you have turned one degree. If you turn around to face the opposite direction, that’s a turn of 180 degrees. Do it again and you are facing the same direction as before (a 360 degree turn). If you turn to the right (as on a corner of a street), then you have turned 90 degrees (half of 180, quarter of 360).

In physical world we often use a tool called protractor to measure angles. It typically has one degree segments already marked for you. It looks like this:

Now if we make the turns of the ruler equal between placing each dot, then the dots will be placed evenly. Equal turns mean that the number of degrees covered by each turn will be the same, including the turn you would need to make to go from the last dot back to the first. But how many degrees shall it be?

In mathematics there is a special operation to determine it. Perhaps you have heard about it: it’s called division and is written like that:

Maybe you can solve it in your head, but if not, why not use an online Elm REPL? Go to

.

And then type

and press

. You should see:

Turns out that the result is 72. That’s the number of degrees we have to turn our ruler around the center each time we place a new dot. If you have a protractor like the one pictured above, you can use it to measure the turn. Then measure the distance from the center along the ruler (a length called radius) and place the dot there.

Now that we understand what it means to be placed on a circle and evenly distributed, it’s time to create a program that displays dots like that. Once again, this is the intended result:

Let’s get back to our code in Ellie. It should look something like this:

It’s a good starting point. We already have five dots, one of them in the center (

and

set to

). Let’s say this will also be the center of our circle. Move all the other dots there. Now it’s time to introduce our protractor and ruler. These is a property of an SVG element called `transform`. You use it like that:

This will move the dot (“translate” is a fancy term for “move”) 80 units.

With this change, click

. You should see something like this:

Looks like two dots, but we are not going to fall for this again. We know that there are four of them stacked in the center (with the maroon one on top). What’s interesting is the blue one. It’s moved!

Now let’s move the second dot.

Of course it will end up on top of the blue one. That’s not what we want. We need to change the direction of the movement. Let’s rotate it 72 degree before we translate, like this:

This will rotate the element by 72 degrees. On its own it wouldn’t make any difference, because the dot is round - it doesn’t matter how you rotate it, it always looks the same. But It also rotates its internal coordinates system. So the translation will move it in a different direction then the first dot. It’s like rotating the ruler before moving the dot along it’s edge. Here is the expected result:

Now it’s time to move the fird and the rest of the dots. Red one gets rotated

degree, next one

and finally

. Why

? It’s because

! So to be

degree apart from a dot that’s at

degree, you need to be at

(or

, but the blue dot is already there). Note that

, so the distance between the first and last dot is correct. The beauty of math 🤓

The complete program should look like this:

In Ellie it should look exactly as we planned: