8 ms·

Let's Play Ancient Greek Geometry

125 points by ivank 13y ago

Sniffnoy 13y ago
Hey, this is neat! One note: Hitting "reset" doesn't immediately reset the move counter; I have to hit "undo" afterward to get it to actually go back to 0.
- pleion 13y ago
  Good spot! I think I've fixed it now.
mdturnerphys 13y ago
So much for getting anything done this morning . . .
danielsiders 13y ago
Great app and a super achievement for someone who's only been working in JS for 8 months.
nwhitehead 13y ago
This is awesome! Thoughts: after clicking, sometimes I decide I want to cancel drawing from that point. I can click on the original point to cancel, it would be nice to be able to press ESC or SPACE to cancel drawing (just noticed that Z for undo cancels). For the "game" side, it is very important to have simple tasks that almost all players can complete to get started. I would add an even simpler first challenge, such as make two overlapping circles. I would love to be able to share constructions. I'm thinking a button I press that pops up a URL that I can share. When visited it shows an animation drawing the construction, then when done lets you do more drawing. That would be cool.
- omra 13y ago
  The URL in the location bar seems to update with the steps you've done (here's one showing the first construction: http://www.sciencevsmagic.net/geo/#0A1.1L0.1A0.3L0.3L1 http://www.sciencevsmagic.net/geo/#0A1.1L0.1A0.3L0.3L1). Undo/Redo can then give an animation like appearance.
  - pleion 13y ago
    You can actually press reset and then redo, redo, redo to replay construction without having to undo first.
- schiffern 13y ago
  Another vote for ESC cancelling the current construction. It's just a new condition in onkeydown: else if (e.keyCode === 27) { deselect(); } While we're at it, make Shift+z redo. else if (e.keyCode === 90) { //"z" if (e.shiftKey) { changes.redo(); } else { changes.undo(); changes.record(1); } } And let's not clutter up the user's history. Swapping window.location.hash=currenthash; ... window.location.hash=hash; with window.location.replace(currenthash); ... window.location.replace(hash); fixes that one. It's the little things in life, man…
  - pleion 13y ago
    I've added the esc and space to deselect, and shift+redo. Thanks, once you get used to your own hotkeys it gets hard to imagine what other people might want. As for the hash, the original reason why I went with hash= was to preserve back and forward, but I guess that might not be so necessary considering I have undo and redo. I know that my clutter can be a bit obnoxious, but just changing it to window.replace(hash) breaks a few other things, so it's left the way it is for now. There is probably some HTML5 history API way to do it that lets me have back and forward without saving every history entry, I'll look into it.
    - jmilkbal 13y ago
      Perhaps map key codes to object properties with, you know, real names so comparisons to e.keyCode mean something in the future. var appKeys = { "Esc": 27 }; else if (e.keyCode === appKeys.Esc) { Some JS libs do this for you and there are some nice libs that make key handling convenient and powerful as well.
      - pleion 13y ago
        Great tip. But I generally only use each reference once, so I'm not sure it would have been worth it in my case. There are lots of libraries that could have made things more convenient. But a big part of this project was to learn as much as I could about coding, and the browser as an environment, so early on I committed to writing everything myself. I'd be interested in hearing whether or not other people think this is a good strategy for self teaching.
lesslaw 13y ago
Very good work, well done. Not as good as Guass though :) Gauss' breakthrough occurred in 1796 when he was 19. He showed that any regular polygon with a number of sides which is a Fermat prime [p = 2^(2^n) + 1] (and, consequently, those polygons with any number of sides which is the product of distinct Fermat primes and a power of 2) can be constructed by compass and straightedge.
idle_processor 13y ago
This is damned cool. Having something like this makes it easy and convenient to explore geometry without the inconveniences imposed by physical media. Having specific goals to work towards and target move counts is icing on the cake. Thank you for making this. Find a way to get this out there to geometry teachers. They (and their students) will love it. -- Suggested improvements: + Option to switch between a couple colors or line types, to make it easier to track what one's doing. (E.g., laying down foundational lines in black, then experimental lines in blue or dashed lines. + One minor thing I'd like to see fixed: the proximity of the numerical goals to the shapes they're associated with doesn't make it clear whether (e.g.) the 8 move goal is an easy version of the "build a triangle in X moves," or whether 8 moves is the least amount of moves for building a triangle inside an origin circle. Suggested fix: make that more apparent by tweaking the order of the symbols (e.g. Triangle, 5, 8, OriginTriangle) and/or adding a divider of some manner to make them stand apart more.
xenophanes 13y ago
I got a triangle made inside a circle. Can someone tell me why the triangle in origin circle thing doesn't complete? http://www.sciencevsmagic.net/geo/#0A1.1A0.0L2.0L1.1L2.1L6.2A0.6L8.0L5.5L9.2L3.1L8.26A0 http://www.sciencevsmagic.net/geo/#0A1.1A0.0L2.0L1.1L2.1L6.2...
- jimtla 13y ago
  It has to be in a circle of "origin" size, that is the radius of the circle must be the distance between the two starting dots.
  - dsjoerg 13y ago
    Thanks, the phrase "origin circle" did not suggest that meaning to me at all. I thought maybe it meant that it had to be at the origin, but i couldn't figure out where that was.
    - nmeofthestate 13y ago
      I'm still stumped. Isn't this an 'origin circle' then? Radius == the pt-pt distance. http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L2.2L7.4L1.1L7.7L4 http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L2.2L7.4L1.1... Scratch that - the same thing works if rotated: http://www.sciencevsmagic.net/geo/#1A0.0A1.2A0.1L5.2L0.0L9.9L1.5L9 http://www.sciencevsmagic.net/geo/#1A0.0A1.2A0.1L5.2L0.0L9.9...
      - pleion 13y ago
        It actually has to be one of the first circles you can draw (a point on the edge and a point on the radius). Not just the same radius.
_ZeD_ 13y ago
Reminds me of kig [ http://edu.kde.org/kig/ http://edu.kde.org/kig/ ].
GhotiFish 13y ago
Me: A Hexagon in 10 moves or less? How does that even... oh... OH... neat. Fun game.
- deleted 13y ago
  [deleted]
- GhotiFish 13y ago
  http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L1.2L1.2L0.1L4.N.0A12.2A12.1A20.0L27.37A35 http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L1.2L1.2L0.1... Arg I think it might be too big for the in original circle challenge. Darn it, how do you do this one?!
  - ssfermoy 13y ago
    http://sciencevsmagic.net/geo/#0A1.1A0.2A0.N.2A0.4A0.5A1.3A0.0L5.1L4.16A15 http://sciencevsmagic.net/geo/#0A1.1A0.2A0.N.2A0.4A0.5A1.3A0... Here's how I did it.
prezjordan 13y ago
This is amazingly fun. I'm a little stuck on the pentagon, but I'll keep thinking. Side note: You should add "Square the Circle" as a super bonus ;)
- Someone 13y ago
  That's cruel. Use something that can be constructed such as the regular 65537-gon.
RobotCaleb 13y ago
I second the vote for select-able colors. Even though I'm color blind, I think having multiple colors would help keep myself organized while creating.
blahedo 13y ago
Love it! But I am having a hard time figuring out when exactly I can/can't "pick up" a point from somewhere else: sometimes tick marks appear at the distance I'm looking for, sometimes not. Also, it seems odd that I can't just draw a line (as opposed to line segment), since iirc the straightedge is theoretically infinite. (There are definitely a few times I've wanted to lay down the full line traversing two points, for later use in the construction....) EDIT: it looks like the tick marks are the straight line extensions; if so, it's exceedingly strange that I can use them "for free" (without drawing the line) as, say, guides for the radius of a circle (I can't put the centre there, but I can "end" the circle there), but I can't just have the line itself.
- GhotiFish 13y ago
  that one threw me too. Keep an eye on the move counter, extending a line doesn't count as a move.
  - blahedo 13y ago
    Oh! That makes so much more sense now. Thanks!
kabdib 13y ago
Takes me back to high school geometry class. For a while I was carrying a compass and a straight edge /everywhere/. First math class I really enjoyed.
PeterisP 13y ago
It's great. I wish I had something like this back in higschool when learning geometry; doing it on paper with the accumulating inaccuracies and no undo option made it all much less fun than this.
GhotiFish 13y ago
This guy's got lots of neat toys. http://www.sciencevsmagic.net/fractal/#0090,0180,2,2,1,0,5 http://www.sciencevsmagic.net/fractal/#0090,0180,2,2,1,0,5
anigbrowl 13y ago
If you want to go farther: a powerful, open, and fully-featured tool for doing this on the desktop (and soon tablet), along with a CAS and other facilities is GeoGebra: http://www.geogebra.org/cms/en/ http://www.geogebra.org/cms/en/ If you want to go deeper: http://www.woodenbooks.com/ http://www.woodenbooks.com/ which are, for want of a better term, 'rigorous mysticism.'
brianberns 13y ago
This is very neat. Because some of the more complicated constructions get very busy, it would be helpful to be able to erase unwanted arcs/lines.
- djeikyb 13y ago
  I used the new layer button to accomplish this. It greys out the complications, but the guides from what you've constructed still function.
joejohnson 13y ago
I love this! Only complaint is that after playing for a few minutes, my browser's back button is completely worthless. Web is such a hacky place to develop.
contingencies 13y ago
Inspiring! (1) Geometric stained glass windows. Anyone know how to cheaply source/cut coloured glass? Best mechanism for rounded portions of potential framing? I don't mind if it takes awhile to build, just that it sustains the weight and enough wind. Preferably thicker rather than thinner glass. (2) Might be useful for some 3D printing based crafting projects. An option to export SVG would be useful (and feasible, given the vector nature of construction).
MarcScott 13y ago
That's it, I'm abandoning my lesson plans for today and I'm going to let the kids have a go at these challanges instead. Well done.

125 points by ivank 13y ago

Hey, this is neat! One note: Hitting "reset" doesn't immediately reset the move counter; I have to hit "undo" afterward to get it to actually go back to 0.

pleion 13y ago
Good spot! I think I've fixed it now.

mdturnerphys 13y ago

So much for getting anything done this morning . . .

danielsiders 13y ago

Great app and a super achievement for someone who's only been working in JS for 8 months.

nwhitehead 13y ago

This is awesome! Thoughts: after clicking, sometimes I decide I want to cancel drawing from that point. I can click on the original point to cancel, it would be nice to be able to press ESC or SPACE to cancel drawing (just noticed that Z for undo cancels). For the "game" side, it is very important to have simple tasks that almost all players can complete to get started. I would add an even simpler first challenge, such as make two overlapping circles. I would love to be able to share constructions. I'm thinking a button I press that pops up a URL that I can share. When visited it shows an animation drawing the construction, then when done lets you do more drawing. That would be cool.

omra 13y ago
The URL in the location bar seems to update with the steps you've done (here's one showing the first construction: http://www.sciencevsmagic.net/geo/#0A1.1L0.1A0.3L0.3L1 http://www.sciencevsmagic.net/geo/#0A1.1L0.1A0.3L0.3L1). Undo/Redo can then give an animation like appearance.
- pleion 13y ago
  You can actually press reset and then redo, redo, redo to replay construction without having to undo first.
schiffern 13y ago
Another vote for ESC cancelling the current construction. It's just a new condition in onkeydown: else if (e.keyCode === 27) { deselect(); } While we're at it, make Shift+z redo. else if (e.keyCode === 90) { //"z" if (e.shiftKey) { changes.redo(); } else { changes.undo(); changes.record(1); } } And let's not clutter up the user's history. Swapping window.location.hash=currenthash; ... window.location.hash=hash; with window.location.replace(currenthash); ... window.location.replace(hash); fixes that one. It's the little things in life, man…
- pleion 13y ago
  I've added the esc and space to deselect, and shift+redo. Thanks, once you get used to your own hotkeys it gets hard to imagine what other people might want. As for the hash, the original reason why I went with hash= was to preserve back and forward, but I guess that might not be so necessary considering I have undo and redo. I know that my clutter can be a bit obnoxious, but just changing it to window.replace(hash) breaks a few other things, so it's left the way it is for now. There is probably some HTML5 history API way to do it that lets me have back and forward without saving every history entry, I'll look into it.
  - jmilkbal 13y ago
    Perhaps map key codes to object properties with, you know, real names so comparisons to e.keyCode mean something in the future. var appKeys = { "Esc": 27 }; else if (e.keyCode === appKeys.Esc) { Some JS libs do this for you and there are some nice libs that make key handling convenient and powerful as well.
    - pleion 13y ago
      Great tip. But I generally only use each reference once, so I'm not sure it would have been worth it in my case. There are lots of libraries that could have made things more convenient. But a big part of this project was to learn as much as I could about coding, and the browser as an environment, so early on I committed to writing everything myself. I'd be interested in hearing whether or not other people think this is a good strategy for self teaching.

lesslaw 13y ago

Very good work, well done. Not as good as Guass though :) Gauss' breakthrough occurred in 1796 when he was 19. He showed that any regular polygon with a number of sides which is a Fermat prime [p = 2^(2^n) + 1] (and, consequently, those polygons with any number of sides which is the product of distinct Fermat primes and a power of 2) can be constructed by compass and straightedge.

idle_processor 13y ago

This is damned cool. Having something like this makes it easy and convenient to explore geometry without the inconveniences imposed by physical media. Having specific goals to work towards and target move counts is icing on the cake. Thank you for making this. Find a way to get this out there to geometry teachers. They (and their students) will love it. -- Suggested improvements: + Option to switch between a couple colors or line types, to make it easier to track what one's doing. (E.g., laying down foundational lines in black, then experimental lines in blue or dashed lines. + One minor thing I'd like to see fixed: the proximity of the numerical goals to the shapes they're associated with doesn't make it clear whether (e.g.) the 8 move goal is an easy version of the "build a triangle in X moves," or whether 8 moves is the least amount of moves for building a triangle inside an origin circle. Suggested fix: make that more apparent by tweaking the order of the symbols (e.g. Triangle, 5, 8, OriginTriangle) and/or adding a divider of some manner to make them stand apart more.

xenophanes 13y ago

I got a triangle made inside a circle. Can someone tell me why the triangle in origin circle thing doesn't complete? http://www.sciencevsmagic.net/geo/#0A1.1A0.0L2.0L1.1L2.1L6.2A0.6L8.0L5.5L9.2L3.1L8.26A0 http://www.sciencevsmagic.net/geo/#0A1.1A0.0L2.0L1.1L2.1L6.2...

jimtla 13y ago
It has to be in a circle of "origin" size, that is the radius of the circle must be the distance between the two starting dots.
- dsjoerg 13y ago
  Thanks, the phrase "origin circle" did not suggest that meaning to me at all. I thought maybe it meant that it had to be at the origin, but i couldn't figure out where that was.
  - nmeofthestate 13y ago
    I'm still stumped. Isn't this an 'origin circle' then? Radius == the pt-pt distance. http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L2.2L7.4L1.1L7.7L4 http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L2.2L7.4L1.1... Scratch that - the same thing works if rotated: http://www.sciencevsmagic.net/geo/#1A0.0A1.2A0.1L5.2L0.0L9.9L1.5L9 http://www.sciencevsmagic.net/geo/#1A0.0A1.2A0.1L5.2L0.0L9.9...
    - pleion 13y ago
      It actually has to be one of the first circles you can draw (a point on the edge and a point on the radius). Not just the same radius.

_ZeD_ 13y ago

Reminds me of kig [ http://edu.kde.org/kig/ http://edu.kde.org/kig/ ].

GhotiFish 13y ago

Me: A Hexagon in 10 moves or less? How does that even... oh... OH... neat. Fun game.

deleted 13y ago
[deleted]
GhotiFish 13y ago
http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L1.2L1.2L0.1L4.N.0A12.2A12.1A20.0L27.37A35 http://www.sciencevsmagic.net/geo/#0A1.1A0.2A0.0L1.2L1.2L0.1... Arg I think it might be too big for the in original circle challenge. Darn it, how do you do this one?!
- ssfermoy 13y ago
  http://sciencevsmagic.net/geo/#0A1.1A0.2A0.N.2A0.4A0.5A1.3A0.0L5.1L4.16A15 http://sciencevsmagic.net/geo/#0A1.1A0.2A0.N.2A0.4A0.5A1.3A0... Here's how I did it.

prezjordan 13y ago

This is amazingly fun. I'm a little stuck on the pentagon, but I'll keep thinking. Side note: You should add "Square the Circle" as a super bonus ;)

Someone 13y ago
That's cruel. Use something that can be constructed such as the regular 65537-gon.

RobotCaleb 13y ago

I second the vote for select-able colors. Even though I'm color blind, I think having multiple colors would help keep myself organized while creating.

blahedo 13y ago

Love it! But I am having a hard time figuring out when exactly I can/can't "pick up" a point from somewhere else: sometimes tick marks appear at the distance I'm looking for, sometimes not. Also, it seems odd that I can't just draw a line (as opposed to line segment), since iirc the straightedge is theoretically infinite. (There are definitely a few times I've wanted to lay down the full line traversing two points, for later use in the construction....) EDIT: it looks like the tick marks are the straight line extensions; if so, it's exceedingly strange that I can use them "for free" (without drawing the line) as, say, guides for the radius of a circle (I can't put the centre there, but I can "end" the circle there), but I can't just have the line itself.

GhotiFish 13y ago
that one threw me too. Keep an eye on the move counter, extending a line doesn't count as a move.
- blahedo 13y ago
  Oh! That makes so much more sense now. Thanks!

kabdib 13y ago

Takes me back to high school geometry class. For a while I was carrying a compass and a straight edge /everywhere/. First math class I really enjoyed.

PeterisP 13y ago

It's great. I wish I had something like this back in higschool when learning geometry; doing it on paper with the accumulating inaccuracies and no undo option made it all much less fun than this.

GhotiFish 13y ago

This guy's got lots of neat toys. http://www.sciencevsmagic.net/fractal/#0090,0180,2,2,1,0,5 http://www.sciencevsmagic.net/fractal/#0090,0180,2,2,1,0,5

anigbrowl 13y ago

If you want to go farther: a powerful, open, and fully-featured tool for doing this on the desktop (and soon tablet), along with a CAS and other facilities is GeoGebra: http://www.geogebra.org/cms/en/ http://www.geogebra.org/cms/en/ If you want to go deeper: http://www.woodenbooks.com/ http://www.woodenbooks.com/ which are, for want of a better term, 'rigorous mysticism.'

brianberns 13y ago

This is very neat. Because some of the more complicated constructions get very busy, it would be helpful to be able to erase unwanted arcs/lines.

djeikyb 13y ago
I used the new layer button to accomplish this. It greys out the complications, but the guides from what you've constructed still function.

joejohnson 13y ago

I love this! Only complaint is that after playing for a few minutes, my browser's back button is completely worthless. Web is such a hacky place to develop.

contingencies 13y ago

Inspiring! (1) Geometric stained glass windows. Anyone know how to cheaply source/cut coloured glass? Best mechanism for rounded portions of potential framing? I don't mind if it takes awhile to build, just that it sustains the weight and enough wind. Preferably thicker rather than thinner glass. (2) Might be useful for some 3D printing based crafting projects. An option to export SVG would be useful (and feasible, given the vector nature of construction).

MarcScott 13y ago

That's it, I'm abandoning my lesson plans for today and I'm going to let the kids have a go at these challanges instead. Well done.