Post navigation

Lets Play: Ancient Greek Geometry

Today I’m releasing Let’s Play: Ancient Greek Geometry. It’s a Compass and Straightedge tool/puzzle game written in JavaScript. I’ve always thought Geometric Construction felt like a puzzle, so to me this pairing was quite natural. Compass and Straight edge is a technique for constructing shapes out of circles, straight lines, and their intersection points. You can read the wikipedia here – but watch out, some of the gifs are spoilers for the game.

I know that there are a few Compass and Straightedge tools out there already, but none have the simplicity, accessibility or fun of a modern web application, so hopefully mine stands out.

As I said, it’s little bit Geometry tool, and a little bit puzzle game. Throughout development I was conflicted about which was more important. I wanted it to be simple and stripped back enough that you could use this as a go to Compass and Straight edge app, but to make the natural playfulness of geometry to be as visible and as tempting as possible.

In the end I tried to keep the two quite separate. The drawing area is completely free from outside influence, but there is also a “Challenges” box with achievement style goals. Hopefully this shows off the possibilities of construction and encourages people without getting in the way. If you are the type of person who prefers to make their own goals, you are free to ignore it all together.

Considering this is only my third programming project, and 8 months ago I barely knew what JavaScript was, I’m quite happy with how this project came out. In the next week or two I’m planning to post a few things about how it all works and the technical challenges I faced making it.

Yeah, the lack of control I had over the difficulty curve gave some stress during development. Giving people more things to do when they get stuck on a shape was one of the motivations to add the “in origin circle” and “in X moves” puzzles. And you can always skip ahead and come back later.

To flatten the difficulty curve, I suggest that you try adding some intermediate constructions as goals. For example, the basic insight you need for the circles-packed-in-the-unit-circle questions is something like this:

Can you confirm that all the challenges are possible in the lower number of moves? The square seems particularly doubtful in 8 moves. Also “circle pack 7” is possible in 13, if the lower numbers are meant to be minimal.

If you need a hint I will tell you that the 8 move square is also an “in origin circle” solution. And don’t forget that extending existing lines is “free”.

As for the circle pack 7, the minimal scores were just the best I found during development. I was hoping that someone would be able to surprise me with a better one and I haven’t been disappointed. Maybe I should go back and change it now there is a new record, but I think it’s kind of fun for people for people to know when they have bested me.

Nico, this work is amazing! It is elegant and simple to use. I have always meant to try my hand at this sort of geometry and this was a challenging and fun way to do it. I did have to get some hints for the pentagons, but I discovered the pack 3 circles through just messing about. Brilliant!

It would be nice to have the numbers counted separately for the construction vs in-original-circle. Otherwise you can construct something in the minimum steps and then take hundreds of steps to do the in-original-circle ones and your scoreboard looks the same at first glance.

You could also add exscribed figure challenges as these are simple to understand but present a different (harder?) challenge.

Thanks again for this wonderful tool/toy. May everything you make be this good.

Wow, this is absolutely fantastic. I have nothing really to say, just needed to express my appreciation. The smoothness of this tool is amazing, and it’s a delight to use. Only 17 done so far, but I’m still plowing through!

This is an awesome app. Shelley introduced me to it, and I’ve been trying to optimize existing shapes as well as make good approximations to unconstructable ones. Just now I actually got it to recognize a regular 7-gon!

You’ve exposed the tolerance in my code. I need some because javascript’s rounds off all my numbers – nothing ends up being perfect. But here it’s causing problems. Perhaps I should make it a bit stricter.

Hey, fantastic work. I’m trying to get Challenge Pack 4 in 12 moves, and I thought I had it, but it seems I’m having some difficulty – a point should be clickable and it’s not, and I think it might be a bug?

Sure: the important insight was that, if you imagine extending the pentagon’s sides into a star, then constructing a point of the star allows you to draw two sides of the pentagon without finding all of its vertices beforehand.

Meanwhile, I just found
Dodecagon: 17 moves
Dodecagon in origin circle: 18 moves

Once you have drawn an edge of the polygon, you can extend it for free. The point where it intersects another circle can be used to construct another edge of the polygon, even if you only have one of its two vertices.

It’s based on the same trick with stars—that’s enough to get you 18 without much trouble. But there are multiple ways to extend the sides of a dodecagon to a star, and one of them has a beautiful coincidence with the circles you’ve already drawn.

I was just re-running my brute force pentagon in origin circle (22ish), after getting a plain pentagon down to 15, when I noticed a coincidence; when I’d worked out why that happened, and noticed a second coincidence (one of my early construction lines just happened to pass through two points I was doing a lot of work to construct), I found I could get rid of lots. Even so, I was pleasantly surprised to get down to 12. So … 11 eh ?

A really wonderful webpage. Two suggestions: I’d like to be able to create a random point, rather than construct it, and I’d like to be able to copy a length from one place to the other, although I’m not sure how that would be implemented nicely.

Hi Emily,
You got pretty close, but you didn’t quite draw the final circle big enough. If you zoom in on the point(s) where the big circle touches a little circle, you’ll see why/how you missed it. Undo and draw just the last circle again, watching the dots at the intersections very carefully.

In 9 days, you’ve gotten quite a following already. I don’t remember who mentioned this first, but when it got mentioned again, and I got some help with the interface, I began to love it. I blogged about it here.

Because it isn’t a regular octogon? The diagonals do not bisect the right angles.

You drew the last two circles (the two centered on the vertical axis) incorrectly. They should use the diagonal of the center circle as a radius. They way they are drawn, they are using the endpoints of the vertical line segment as centers and are tangent to each other at the center of the octagon.

After you hit “reset” there are two points, and there are three things you can do: make a line between the two points, or create one of two circles, each centered on one of the points and passing through the other.

Either of those two possible original circles works as an “origin” circle. I suspect, without testing, that any circle who’s radius is the same as the distance between the first two points would also count.

I’m having a hard time with something. After creating the 9-move 3-pack (http://sciencevsmagic.net/geo/#0A1.1A0.3A0.5A1.6A1.7A3.1L7.3L6.16A15), I want to create the triangle whose vertices are the points where the packed circles are tangent to the outer circle. Those points should already be created (right? basic construction: create the one or two points where two circles intersect), but I can’t seem to select them.

Now, obviously, I can pin down those points with lines (two of them with lines that already exist), but I don’t think I should have to. Am I just misunderstanding what’s possible?

A previous hint said it was (a) inside an origin circle, (b) was done with three circles and (c) five lines. I’ll go farther by saying that the three circles are all the same size, and can be made before any lines are made.

The first line I drew I needed to extend, but extending a line is a free act (the Euclidean postulates say that a line goes through two points, not that a line segment is terminated by two points).

That answers one question I had… does it count as being in the origin circle if it isn’t in a unit circle centered on one of the first two points? And the answer is no.

Believe it or not, this is not the square-in-8 I was thinking of. I was thinking of a different square-in-8 that also counts as in the origin circle. If you draw the first line 120 degrees rotated from where you did, the square will end up in the origin circle.

Hahaha, well done.
My app assumes that two line segments with sufficiently similar angles are supposed to be same and it’s 64-bit floating point numbers that are to blame for the discrepancy. (with maybe a little too much tolerance). So here your four line shape is treated as though it’s a two line one.

My app assumes that two line segments with sufficiently similar angles are supposed to be same and it’s 64-bit floating point numbers that are to blame for the discrepancy. (with maybe a little too much tolerance). So here a four line shape is treated as though it’s a two line one.

I was bored so I drew you guys a circle the size of the known universe (well, 60% larger because I’m generous)… assume that the smallest circle (between the 2 origin points) is the size of a gold atom’s nucleus (8.45 femtometres).

dear nicomallo you should make a app out off this for iPad and playstore i would love to play this in the train without bringing my dad’s laptop i think that you would really benefit of the touch screen you could zoom in and out by either using two fingers going up for zooming in and down for zooming out

The page has touch controls and works fine of the iPad I used for testing (although I’m not sure if it works on older ones). You should be able to save the page to your home screen if you want to use it like an app.

This is awesome! I’ve wasted more time here than I care to think about.

One note: It would be nice to have a “center” function. I managed to trip over my trackpad, and zoom my image down really small then sweep it off the visible screen, and after that could not get it to reappear in my view again. This was especially annoying as I was working on the pentagon!

But I’m impressed if this is only your third program. Kudos, I’ve been enjoying it quite a bit!

Perhaps you have already solved it in 5 moves. The shape will only go dark if you create an improved solution (fewer moves for either the default or in origin solution). This is to avoid having shapes go dark all over the place whenever you retrace your steps.

If you want to double check a solution that is no better then one you have, use a private browsing window so it is in a different browser session.

First of all, fantastic job! The app is really nice. I absolutely love the “challenge” aspect. A few ideas —
-Maybe keep a list on the site somewhere of solutions people have found, including the ones in the fewest number of moves?
-Maybe include some way for people to make (and maybe post) their own challenges?
-It would not be too difficult to write a program to search for minimal solutions to the problems; perhaps you could use this to generate “minimal move” targets/give people some way to know they’ve found a solution with as few moves as possible?
-Maybe also include some tool that can measure angles and lengths (assuming the distance between the first two points is 1) so people can check to make sure they’ve constructed what they think they have (of course this couldn’t be used to actually construct anything, it would just be a self-check tool).

I dunno if you plan to do any more with this but I think these changes would be really cool!

Is there a good definition of “in origin circle?” What defines the “origin circle?” I’ve managed to do some of the constructions centered about one of the two original points but that doesn’t seem to satisfy the “in origin circle.” Is the origin circle the circle defined with the center at one of the points and having the other point on its circumference?

This has got to be the best game I have ever played. I feel like it was designed just for me.
It took a few weeks, but I have completed all the challenges.
Please, please, won’t you add some more?
Thank you!

Just a question to understand the rules: In the following example, following the paradigm that lines should have infinite length (extend for free), shouldn’t I be able to create a circle with its center at the intersection of the line and the circle on the OUTSIDE areas (left or right)?

Hi, found your site due to a recommendation in a local (German) computer magazine (c’t).
Simply great!
(Even with – or maybe due to – the “rudimentary” surface, I personally prefer prompts instead of windows).
Suggestion of mine for a new “challenge”: a=1 or r=1 rsp. (“origin line” instead of “origin circle”).
Some of these are already solved thru the current things but some of them (e.g. octogon) require more steps than the “independent minimum”.
Once again: Congratulations!
H.-C.

This toy is so simple, so profound and so beautiful. Thank you! I have a copy of Euclid’s Geometry and would like to work through it using your program as an aid. Is there any chance you might add the option of disabling the challenges and the search algorithm that goes along with them? I guess what I’m asking for is… creative mode! Seriously, thank you so much for this truly wondrous little thing.

If the challenges box is bothering you, the best solution might be to hide the div using a browser extension. The search algorithm won’t do too much then apart from the occasional shading (which becomes less often as your solutions fill in).

The challenges never change what you have drawn, so I see the default as “creative mode”.

What the smallest number in challenges mean? Is it just for simple case or for the “origin circle” case too?
PS. Question is because the best I have for “circle pack 7 in origin circle” is 15, not 14. 🙂

* Draw an equilateral (triangle, square, pentagon, hexagon, etc.) that is exactly tangent to the origin circle (my current best: triangle, 9 moves; square, 12 moves; and hexagon, 15 moves)
* Construct a set of Pythagorean 3-4-5 squares (my current best is 27 moves, but it’s probably possible to do much better than that)
* Duplicate the effort of Dürer & Pacioli, et al., and use the compass & straightedge technique to construct “perfect”-weight Roman-style serif letters (e.g. http://www.identifont.com/show?DGK or http://luc.devroye.org/fonts-41587.html), though that might be too hard without a “marked ruler” or a “fixed compass”

Hi, it’s H.-C. again.
I had a break and today (boring Sunday) remebered this tiny little fun.
In case of “Version 2” (or whatever number) what about an option to fill regions with “black” (I think colors would not be convenient for this page). Something like “right click” etc.
So to have an opportunity to create “something”, then press E to have all lines in gray, fill all necessary areas and see what you tried to create …
My first idea was according to the Euro symbol – unfortunately this needs an nonagon which is impossible to be created. Nevertheless it would be a great fun to do something like this …

and i got to about here (which has the pentagon facing the opposite direction, at this point i’d need to make another 5 of the pentagonal guides in the other plane but the graph is just too complex at this point to pin properly)

can anyone tell me if that flash file i pointed to is actually geometrically true? I’ve done a lot of versions by hand and it seems really, really close, but without the whatnots to pin it too I can’t really tell if this is actually the construction to make the perfect square-inside-the-triangle or not. <3

This is brilliant. I am having a fun time with it, and it’s 90 degrees F outside in PR.
“What is Mathematics” by Courant and Robbins has a brief but concise description of constructions, up to finding a square root.

Thanks for the suggestion. It worked. This program strikes me as really hitting a sweet spot in the realm of puzzles. Do you mind if I hack away at your code? I would like to make a much simpler version. I’m hoping to interest my 8 year old daughter with it.

What a nice blog site it is ! It is a historical and informational site of geometry It discus with science vs magic I have visit this site and play this game and enjoy interesting.Recently I have seen a site like this It is ancient geometry for more information just click here,thanks.

I’ve made 16-gon, 32-gon and 64-gon. Quite boring but I’d like to have all existing challenges. Are there infinitely many challenges (for 2^k-gons)? If not – what is the limit for k? If so – why are you so cruel? 😛

If you consider it a bug and want to get rid of it here are n’s for which n-gon is inconstructible:https://oeis.org/A004169
…and I’ve written a program in JavaScript that given x prints all inconstructible polygons with less than x edges:http://ideone.com/EAGOTh
It’s based on the necessary and sufficient condition for polygon to be constructible:
“A regular n-gon can be constructed with compass and straightedge if n is the product of a power of 2 and any number of distinct Fermat primes.”
The program is simplified and works “only” for polygons with n <= 2^32. Quite practical though.

Just a HINT. If you want to look at somebody’s solution and not have it remembered as yours in your cookies, open the link in Incognito aka Private mode. In Chrome Ctrl+Shift+N and in Firefox Ctrl+Shift+P.

So I was puzzling over the dodecahedron (and other puzzlements), and was staring at your homepage, and realized I was staring at the solution (I think). Don’t know if you care, but perhaps you might want to switch the design that links to the game/application to something that isn’t a solution to one of the later puzzles?

I can’t help but wonder if the challenge to complete the in-origin-circle triangle in 5 moves is a mistake. The way I see it, you use 1 move to create the circle, then you will use 3 to create the triangle, so you have just 1 other move to set up the triangle. After creating the origin circle, there are only 2 other possible moves, neither of which set up the triangle. Am I missing something, or is the right column supposed to read 6 for the triangle?

Thanks for the reply. Certainly a triangle is easily constructed in 5 moves, but I’m talking about the triangle specifically inscribed in the origin circle. First move is drawing the origin circle. The only other possible moves after that are to draw a congruent circle centered on the other non-origin point, or draw a radius or diameter line on the origin circle. Neither of those second moves sets up the three vertices of a triangle inscribed in the origin circle.

The origin circle challenges are different from the minimal move count challenges. There’s one prize for getting it in 5 moves any old way, and another prize for getting unit circle in any old number of moves.

The ancient Greeks performed geometric constructions with only a simple compass and straightedge, and a Persian mathematician Abul Wefa proposed the “rusty compass” (fixed radius compass) principle. This set of drawings illustrates it: http://www.glennwestmore.com.au/geometric-constructions/