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.

geoI 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.

190 thoughts on “Lets Play: Ancient Greek Geometry

  1. 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.

  2. Thanks, really enjoying this. The square-in-8 one is driving me nuts too, though I’m only at 30/40 so plenty left really.

    • Well at 40/40, but still haven’t hit the minimum moves on 5. Any way you can link to an “official” place to discuss these with spoilers? I don’t want to pollute this space with details.

        • Well, there is a bug somewhere.

          Spoiler Inside SelectShow
          • Sorry, I meant [spoil*er] without the s. I’ve edited out comments to fix them.

            Sorry about the bug. I can’t make any promises about the behavior of the Easter egg polygons.

        • Can’t nest deeper so responding here.

          Thanks! That looks like the same construction I used, so I probably just made a mistake. Other than them occasionally disappearing from the list, everything works great. Thanks for checking for me!

        • Finally got the minimum number of moves for the square, octagon, and circle pack 4! Thanks again for making this.

          Spoiler Inside SelectShow
  3. Loving this little piece of programming!
    Still 12 challenges to go but it has been pretty damn fun already. brings back some geometry q n a’s ;)

    keep up the nice work on this site!

  4. 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.

  5. 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!

  6. 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!

    Spoiler Inside SelectShow
    • Weird! and well done!

      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.

    • 9-gon works too:

      Spoiler Inside SelectShow
      • Hah, nice one. Not sure what you did there, but it’s cool. I also have a 9-gon:

        Spoiler Inside SelectShow

        And a fake 17-gon:

        Spoiler Inside SelectShow
  7. How the square in 8 or less moves is done? Are you sure this is possible, nico? I cannot even do less than 9 using the “in original circle” method.

  8. 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?

    Spoiler Inside SelectShow

    I’m assuming there’s some other way. One way or another, any help / hints appreciated.

  9. How many moves do you have for circle pack 3 in origin circle? I have it down to 15 but it looks so ugly that I’m holding out for a cleaner solution.

    My bests for in-origin circle problems are as follows:
    triangle: 6
    hexagon: 14
    circle pack 2: 9
    square: 8
    circle pack 3: 15
    circle pack 7: 15
    octagon: 15
    dodecagon: 22
    circle pack 4: 18
    pentagon: 16

  10. How to construct a octagon in 15 moves? My best attempt is 17 moves:

    Spoiler Inside SelectShow
  11. 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.

    • Being able to just copy a length would be outside of the bounds of traditional compass and straight edge, because it requires a “sticky” compass.

      • You can copy a length with a sequence of straight edge and compass moves, but it would change the nature of the game to make this a separate operation.

    • 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.

    • Your very last circle is slightly wrong; it’s very close to, but not quite, tangent to the other four. It will work if you undo once and redraw it carefully.

  12. 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.

    • Yes indeed.

      10-gon: 16 moves
      15-gon: 22 moves
      16-gon: 23 moves
      17-gon: 40 moves
      20-gon: 29 moves
      24-gon: 30 moves
      30-gon: 38 moves
      32-gon: 41 moves
      34-gon: 57 moves
      40-gon: 49 moves
      48-gon: 56 moves

      Hmm. Hey nicomallo, maybe it’s time for a high score board? :-)

      • (Those were all in origin circle, by the way.)

        30-gon in origin circle: 37 moves
        32-gon in origin circle: 40 moves

  13. http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.4A0.6A0.8A0.3A0.0L10.9L0.0L7.0L5.0L12.0L11.14A0.16A0.17A0.13A0.18A0.15A0.0L59.0L44.0L50.0L27.0L47.0L33.0L30.0L24.0L36.0L62.0L21.0L53.73A0.75A0.77A0.71A0.69A0.67A0.78A0.76A0.72A0.74A0.70A0.68A0.0L253.0L98.0L228.0L125.0L236.0L267.0L183.0L257.0L210.0L222.0L175.0L242.0L149.0L204.0L139.0L188.0L84.0L169.0L105.0L160.0L120.0L134.0L273.0L89.294A0.292A0.290A0.288A0.286A0.305A0.295A0.301A0.284A0.303A0.297A0.299A0.293A0.291A0.289A0.285A0.287A0.283A0.306A0.304A0.302A0.298A0.300A0.296A0.553L0.0L873.917L0.847L0.0L815.631L0.0L769.0L486.0L756.438L0.0L404.708L0.0L570.352L0.0L588.320L0.0L683.0L1101.0L518.0L1074.0L648.0L1121.0L471.0L1054.0L451.0L399.0L992.0L367.0L1011.0L937.0L312.0L890.0L1107.913L0.0L1068.857L0.0L1135.801L0.1035L0.786L0.0L1016.740L0.0L671.525L0.1191L73.73L1156.1156L295.295L1157.1157L6.6L1160.1160L301.301L1162.1162L75.75L1164.1164L303.303L1165.1165L15.15L1169.1169L305.305L1168.1168L77.77L1172.1172L284.284L1173.1173L4.4L1176.1176L286.286L1177.1177L68.68L1180.1180L288.288L1182.1182L18.18L1184.1184L290.290L1186.1186L70.70L1188.1188L292.292L1148.1148L2.2L1149.1149L294.294L1190.1190L72.1152L300.72L1152.300L1194.1194L13.13L1154.1154L298.298L1192.1192L74.74L1155.1155L296.296L5281.296L1158.1158L1.1L1159.1159L302.302L1161.1161L76.1163L76.1163L304.304L1166.1166L16.16L1170.1170L306.306L1167.1167L78.78L1171.1171L283.283L1174.1174L3.3L1175.0L948.0L604.976L0.716L0.1175L285.285L1178.1178L67.67L1179.1179L287.287L1181.1181L17.17L1183.1183L289.289L1185.1185L69.69L1187.1187L291.291L1147.1147L8.8L1150.1150L293.293L1189.1189L71.71L1151.1151L299.299L1193.1193L14.14L1153.1153L297.297L1191 i hope your pc can handle it 96-gon

    • 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.

  14. what exactly are the paramiters for “in origin circle” as this is the first time i have even touched geometry on this level i don’t understand therefore cannot complete the goals

    • 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.

        • You have a centered 3-packed circles, but the circles are packed within an “origin circle”.

          Imagine the circle you get in step 1 as “given”, and put the 3-packed circles within it. Then you’ll get it.

          Here’s a 3-packed circles in origin circle done in 17 moves. I don’t claim it’s optimal, but it shows what “in origin circle” means in this case.

          Spoiler Inside SelectShow
  15. 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).

      Is that enough to help?

  16. Ideas/pleas for version 2…

    Have a way to erase lines. Once I’ve bisected a line, I’d like to remove the circles I needed to get there.

    Add extra dots before starting. (For the puzzle – Starting from three dots, draw a circle that goes through all three dots.)

    • 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.

  17. 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).

    http://tinyurl.com/lxlgrut (link is obnoxiously large without tinyurl shortening)

  18. 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.

      Try it out and let me know what you think.

      • just played it on my iPad4 i think it’s awesome i didn’t really expect it to work but it does it can be a little laggy but everything ells works awesome

  19. 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!

    • It registers fine for me.

      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.

  20. 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!

    • Thanks Max,

      I would love it if people could create their own challenges. Maybe if I create a version 2 one day….

      A bot that looks for minimal solutions sounds great, my source is available in the page, so anyone could write one.

      As is my app isn’t clever enough to know the exact values of lines in relation to the starting line. It just uses floating point values, so I think a ruler would be a bit of a disappointment.

  21. 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?

    Definitely fun though!

  22. oops, let’s try that again.

    Spoiler Inside SelectShow
  23. Circle pack 7 in 13 moves:

    Spoiler Inside SelectShow
  24. What is the meaning of the two numbers on the right of each challenge? The right most one seems to be the minimum number of moves. What about the left one?

    • It’s just an easier goal for people who are just starting to optimize. I put in numbers that I thought would be relatively obtainable.

      The right most number was my lowest number of moves as of release, but lots of them have since been beaten, some by quite a bit.

      If I make a version 2 I’ll probably use the new best minimums.

    • I haven’t heard of that problem before. Perhaps double check that you have all four challenges solved on each shape.

  25. 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!

    Erik Mulet

  26. Pingback: pascal

  27. Hi all,

    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)?


    On paper that would work of course, but here I do not get an option to snap to that intersection.

    • You’ll have to first click on a point along the line you want to intersect and extend it out to the point you describe. The intersection at that point will otherwise remain hidden.

      But as you say, extension is free.Because the line already exists this won’t count as a move for the purposes of the challenges.

  28. Pingback: Ancient Greek Geometry | Superlevel

  29. Pingback: Google

  30. 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!

  31. 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.

    • Thanks Aaron.

      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”.

  32. 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. :)

  33. For some additional fun:

    * 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”

    • origin circle circumscribed triangle: 6 moves
      origin circle circumscribed square: 10 moves
      origin circle circumscribed hexagon: 11 moves

  34. It would be helpful if I could delete or hide lines and circles.

    It would be much easier if I could delete things that I know are only for previous constructions.

  35. 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 …

  36. hi all :) i was trying to see if this functioned in your thingy:


    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)

    which is sorta pretty in its own right :)


    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

  37. 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.

  38. Very nice application! The challenges are very fun and at some points.. frustrating. :) Overcoming the frustration and completing the puzzles has been gratifying.

    A suggestion: to rotate the view/change the viewing angle. New perspectives open new posibilities.

    • In case anyone cares, I found out that if x idthe smallest circles radius, then x(sqrt(2)+1) is the next circles radius and x(sqrt(2)+1) + x is the largest circles radius

  39. Finally! I got the circle pack 7 in origin circle. I fiddled with it a while and tried to shrink my pack 7 into the origin circle.

    Spoiler Inside SelectShow
  40. Mascheroni had a compass only five step construction that gives the golden section. An additional two steps lays out the five points of a pentagon which gives us a 12 step construction. See: http://www.cut-the-knot.org/pythagoras/MascheroniPentagon.shtml for more info. Here is the solution: http://www.sciencevsmagic.net/geo/#0A1.1A0.3A2.0A5.1A4.8A3.9A3.2L13.2L12.12L21.21L20.20L13
    That someone found a way to do it in eleven is amazing, might be worth publishing it.

    • I managed to get it down to eleven by extending the first two sides, and using the larger circle. A new record for me!

      I wonder if this is the same as Anders’ solution.

      • 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.

  41. A student of mine found a 9 steps construction for the 3 circle packed in the original circle. I googled a lot but i did not find anything about. Is this interesting?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Fill in the blank to prove you are human: