Perfect Circle

by gohwell • 4 years ago

219 131 4 years ago

All these little apps are really impressive from a web development point of view. Shows a real mastery of css, canvas, browser apis, JS, etc. Kudos.

michael9k• 4 years ago

Cool. Actually harder than I thought

sam33r• 4 years ago

This was fun! It seems like the faster I go, the better the median score gets. My finger on a phone beat my vertical mouse (as I expected), but not by much: 95.8% vs 93.5%.

alexmolas• 4 years ago

Supercool!! it would be nice to see how do you rank with respect to other users, and see your percentile.

martyvis• 4 years ago

Fun, but needs more rewards than just a high score. Maybe something like a consecutive streak above 90%? Or a challenge where you need to target a given radius. Anyway, nice job.

(I recall how my senior hugh school maths teacher was wizz at drawing circles, lines and other geometry on the chalkboard)

limaoscarjuliet• 4 years ago

Surprisingly entertaining!

bjt2n3904• 4 years ago

Really fun distraction. Seems like I'm training an AI how to differentiate between bots and humans though...

dajonker• 4 years ago

This is fun and had a high potential for giving me some repetitive strain injury. My highest score of 97.1 doesn't visually feel like the best circle I've drawn though.

mgdlbp2• 4 years ago

Its ideal circle is centred on the dot

Tevias• 4 years ago

Also interesting to try to get low percentages. Worst I could get was 53.1% by drawing a rectangle over my whole screen.

FranchuFranchu• 4 years ago

I got 20% by drawing an ellipse

bmacho• 4 years ago

I got 2.6 for starting close, then circling a big circle, like this https://pasteboard.co/vYFY7MSrgcoD.png

mgdlbp2• 4 years ago

2.7% by starting the rectangle close to the dot (it measures deviation from the initial radius)

scandox• 4 years ago

Thumbs superior for some reason

yabones• 4 years ago

This is basically impossible with a trackball mouse :)

allannienhuis• 4 years ago

I got 95.3% with my trackball :)

fishtoaster• 4 years ago

I've managed to get 97%, but only by busting out my ipad and using the stylus. A fun little game!

hnkimo• 4 years ago

Try to keep the radius as small as it lets you. Move very slowly, you'll likely be too slowly the first few tries but find the slowest speed possible. I got 97.3% with a mouse doing this.

tomovo• 4 years ago

A nice square gets me 77%. Good enough for me.

saprolino• 4 years ago

Now somebody should make a Perfect Square game so you can draw a nice circle with the same result!

zamadatix• 4 years ago

As a tip: what it's really checking is for a circle centered on the dot in the middle with the radius equal to your initial click's distance from the center. You could make a mid sized perfect circle which is slightly off the center of the dot and lose to a square that fills the play area.

pstorm• 4 years ago

I was wondering why some circles seemed great but got low scores. To test your tip, I just made a square and got 92%

dxbydt2• 4 years ago

My anticlockwise circles score more than my clockwise ones. Is there some theory behind that ?

sixstringtheory2• 4 years ago

This is what I aimed for since that is how a circle is defined in a cartesian equation: (x − a)^2 + (y − b)^2 = r^2 where a and b are the circle’s center point xy coordinates and r is radius.

kbutler• 4 years ago

But is a square more of a perfect circle than an off-center perfect circle?

Seems like this should derive the best center point of your circle, rather than mandating the dot.

But yes, we are overthinking it...

kibibyte• 4 years ago

This explains why I'm able to achieve my lowest ever score (0.7%) by starting a sort of spiral shape near the dot, whereas drawing that spiral in reverse would be much closer to perfect (>85%).

dxbydt2• 4 years ago

Hey this is so well done! You know, you could put the sun on one of the the two focii and ask the user to draw the elliptical orbit of the earth - perfect real-life usecase.

chairmanwow1• 4 years ago

Drawing a triangle resulted in a score of 77.9?

silisili• 4 years ago

This made me curious how low I could get it. 27% was the lowest final score I could get. Everything else I attempted buzzered me.

ynfnehf2• 4 years ago

By cheating with a Python script to move the mouse, I managed to get 99.9%. Seems difficult to get higher than that, perhaps due to the mouse position having integer coordinates.

majkinetor2• 4 years ago

I literray came here to see who is going to proclaim automation first (and in what way) :) Unsurprinsingly, it was the first comment.

100% perfect circle is a pure math thing and can't be achieved with drawing in any way.

yarg4• 4 years ago

In a similar vein, people claim it's impossible to draw a heptagon with a straight edge and ruler.

Sure, but good luck pulling of a perfect octagon either, given the limitations of pen and paper.

And there's a perfectly good approximation that'll very quickly produce a theoretical heptagon with error margins less than the thickness of a pencil.

1/7 ~= 1/8 + 1/64 + 1/512 + 1/4096

(1/n = sum(1...infinity) of 1/((n + 1) ^ i)

(A perfect heptagon requires infinitely many steps.)

dmix2• 4 years ago

A mac or windows app controlling the mouse I presume?

ynfnehf2• 4 years ago

I used the pyautogui library on Linux. Then just a simple loop with an incrementing angle, with some overshoot in the end in order for the webpage to recognize that the circle was complete. First time using the library, worked pretty well, except I had to figure out that I had to use pyautogui.PAUSE = 0 to make it not pause between mouse movements.

chrischen• 4 years ago

Arduino controlling a robotic arm holding a mouse, written in C.

jonas-w• 4 years ago

https://news.ycombinator.com/item?id=34284790

This bookmarklet also "only" gets 99.9%

ehsankia• 4 years ago

Another great neal.fun page. One feature I'd like to see is, make the user to N circles in a row and take the median score or something. Right now you can just spam hundreds and take your top score, but it doesn't really reward consistency.

majkinetor2• 4 years ago

Yeah, we all totally need consistency reward. The game will become borring without it :)

culi3• 4 years ago

A consistency reward is a cute idea. It's like "I can't draw your definition of a perfect circle, but I can draw my perfect circle"

gerdesj2• 4 years ago

One of my maths teachers was able to draw up to something like a three foot circle on the blackboard that looked very, very close to ideal every time. He would always use two arcs to do it and it was uncanny. He would whip out a metre/yard rule to do straight lines because they are much harder to do.

Your limbs etc are all a collection of ball and socket/downright weirdly jointed/hinges with benefits/more weirdness. You then want to use this monstrose agglomeration (did I mention how you move the bloody things?) to draw a circle? Obviously you would decide to run a finger over a simulator of a lump with a ball in it and some on/off switches.

People are weird. Nice website though.

MonkeyClub• 4 years ago

My middle school maths teacher (awesome guy, also had a mustache - mid 90s) taught us how to draw (large) circles on blackboards easily:

Start from the bottom and go counter-clockwise full circle having your arm fully extended. After the first couple of tries, when you build up confidence through the results, the circles get very good. The trick is not moving slowly, but doing it in one go.

The 3'/two ark circles he would do the same way, but using the elbow as the central/pivot point instead of the shoulder.

gerdesj2• 4 years ago

That's how my teacher did it too. Our arms can be loosely described as multiply pin jointed levers after all.

Then we use a "mouse"!

Nevermark5• 4 years ago

I wonder if standing sideways helps too

aendruk• 4 years ago

At my university the math department held an annual chalkboard circle drawing competition.

Nevermark5• 4 years ago

I am imagining I somehow have a hidden wire up my sleeve creating the radial tension for a perfect circle

Fishing line attached to a collar around my shoulder could could work

—

On a completely different note, in grade school I figured out you can tie fishing line to a pencil and wait for someone to try picking it up. Then give a little jerk so it moves 10 inches or so

People react wildly differently when they suddenly see behavior their mind cannot process! One math teacher walking around the back of class literally jumped up and a gave out a loud “Ieeeyaaa!” shout.

We can react to something much faster than we can think it through

revskill• 4 years ago

Please draw for me perfect circle first for me to follow ?

Waterluvian2• 4 years ago

There’s a mini game in Mario Odyssey about walking a perfect circle. This reminds me of that. It’s charming.

bbx• 4 years ago

That challenge was surprisingly hard. Even with the couple of landmarks (I think a few small bushes). It’s weird how high the difference was between what looked like a perfect circle and what was actually expected. It was almost like an optical illusion.

Waterluvian2• 4 years ago

I got 100% (the second moon) purely by the feel of the controller. I didn’t even look. I just started an arc and held fast. It’s amazingly difficult to walk a perfect circle.

stjo• 4 years ago

An even better challenge: try to draw the least circle-like thing. It is surprisingly hard!

sixstringtheory2• 4 years ago

Interestingly it will stop you if you start to go the “wrong” way. Without looking at the source code, I’m wondering if it is keeping a convex hull to determine this?

CamperBob2• 4 years ago

You can get an artifically high score by finishing the last 90 degrees or so with a straight line segment, FYI. I can usually break 90% with something that doesn't resemble a circle very much at all.

mnunez• 4 years ago

I just got 97.9: I wish it would allow saving a specific run to load with a link.

codeduck• 4 years ago

play on mobile and move the device instead of your finger. the mass damping increased accuracy for me

macintux• 4 years ago

My 1 pound 12.9” iPad Pro disagrees with this strategy.

system2• 4 years ago

I made a square and got 80% heh.

zoklet-enjoyer• 4 years ago

95.3 is my best

preillyme• 4 years ago

My circle is 97.6% perfect, can you beat that? https://neal.fun/perfect-circle/

(Now my hand hurts...)

moloch-hai• 4 years ago

That is where I got tired, too.

0daym• 4 years ago

Neal.fun with another banger of a game...thanks!

hutzlibu• 4 years ago

I thought this was about Giotto a famous Renaissance Painter, but it seems to be a training app, to become like him (one day):

"The Pope hoped to hire a fresco artist and sent to Giotto a messenger, who asked for a competitive sample drawing. With just paper and a pen, Giotto flicked his wrist and drew a perfect circle. Vasari writes: "The messenger, seeing that he could get nothing else, departed ill-pleased...However, sending the other drawings to the Pope with the names of those who had made them, he sent also Giotto's, relating how he had made the circle without moving his arm and without compasses; the Pope…saw that Giotto must surpass greatly all the other painters of his time."

https://www.smithsonianmag.com/arts-culture/perfect-circles-...

tombert• 4 years ago

I learned that the best way to do this is to first draw a head, and then erase all the bits that aren't a perfect circle. I didn't see that as an option.

EDIT:

For those who don't know the reference: https://youtu.be/wmqsk1vZSKw

mrvenkman6• 4 years ago

My circle is 89.4% perfect, can you beat that? https://neal.fun/perfect-circle/

cwkoss• 4 years ago

got 94%! macbook trackpad (and a couple dozen attempts)

mrvenkman6• 4 years ago

Challenge accepted. I am on a Lenovo IdeaPad - Fedora.

mrvenkman6• 4 years ago

Close: My circle is 90.0% perfect, can you beat that? https://neal.fun/perfect-circle/ lol

mrvenkman6• 4 years ago

My circle is 94.6% perfect, can you beat that? https://neal.fun/perfect-circle/

nateb2022• 4 years ago

92.6% perfect, with a mouse

mrvenkman6• 4 years ago

Thanks for this, Neal! I hope you're not feeding it into a SkyNet targeting system!

mrvenkman6• 4 years ago

I kind of have the shakes? https://imgur.com/a/M1KsWci

crazygringo• 4 years ago

"Too slow"

OK, this is clearly not meant for trackpads. I can see how I might do it reasonably in the given time with a mouse or on a tablet... but not on my laptop trackpad!! :S

marpstar• 4 years ago

Glad I'm not the only one. No fun with the timer.

djak250• 4 years ago

Do it with a track ball. That'd be hard mode

Nevermark5• 4 years ago

Extreme mode: the keyboard arrow keys

Definitely not going to work with the timer

kirkules• 4 years ago

I'm doing it on mobile and while I could go faster, I..... don't want to? So I also got the "too slow" and along with that, got bored

htk• 4 years ago

I don't know why I kind of obsess on little games like this and end up drawing 50 circles to get "better" at it.

sigvef• 4 years ago

Cool! Not to self-promote (no monetization or anything), but in case any one finds it helpful, I made something similar for myself to practice becoming more accurate with Wacom-style tablet pens: https://tabletpractice.arkt.is/

camtarn• 4 years ago

This is great too! Being able to draw nice straight lines with a tablet pen might debatably be even more useful than drawing a perfect circle.

jensenbox• 4 years ago

I predict that someone will craft a blob of JS to paste into the console that will make 100% every time.

NowhereMan• 4 years ago

I think I have become more interested in getting the lowest score possible. Triangles score pretty low. Squares score better than some of my circles.

turnsout• 4 years ago

I wonder if you could use this technique for drawing perfect circles to get a 100% score on an iPad: https://www.youtube.com/watch?v=l5WLMPCkpUA

prenaud• 4 years ago

I messed around with building something similar just before the holidays: https://steadyhand.app/

It was a blast to learn how to do things in canvas and as an exercise, a very fun little app to build. I'm not sure how the OP is measuring perfection of the circle, but in mine it was standard deviation of every drawn point around the centre of the page.

I encourage people to try to scaffold something like this together in canvas/JS sometime. Very fun project!

jm_l• 4 years ago

Reminds me of a side project of mine called “Imperfect Circle” which makes asymmetric swung beats

https://circle.jminjie.com/

Nevermark5• 4 years ago

Brilliant! Add a controller for adjusting directions from 4 to more or less and I can start my new band!

russellbeattie• 4 years ago

Here's the bookmarklet you've been waiting for...

  javascript:(function()%7Blet%20s%3Ddocument.querySelector(%22main%20svg%22).getBoundingClientRect()%2Ccx%3Ds.width%2F2%2Bs.x%2Ccy%3Ds.height%2F2%2Bs.y%2Cr%3Ds.width%2F3%2Cd%3Ddocument.querySelector(%22main%20div%22)%2Ca%3D0%3Bfor(let%20e%3D0%3Be%3C50%3Be%2B%2B)%7Ba%2B%3DMath.acos(1-Math.pow(60%2Fr%2C2)%2F2)%3Blet%20t%3DMath.round(cx%2Br*Math.cos(a))%2Cn%3DMath.round(cy%2Br*Math.sin(a))%3B0%3D%3De%26%26d.dispatchEvent(new%20MouseEvent(%22mousedown%22%2C%7BclientX%3At%2CclientY%3An%7D))%2Cd.dispatchEvent(new%20MouseEvent(%22mousemove%22%2C%7BclientX%3At%2CclientY%3An%7D))%7Dd.dispatchEvent(new%20MouseEvent(%22mouseup%22))%7D)()

wellpast• 4 years ago

My circle is 94.2% perfect, can you beat that? https://neal.fun/perfect-circle/

Nevermark5• 4 years ago

This guy has figured out how to crowd source bad circle drawing! Genius!!

nojs• 4 years ago

New challenge: try to get the lowest score without it saying “wrong way”.

thespacecow• 4 years ago

98.6% (~50 attempts, using my mouse)

Perfect Circle

Related Stories