Perfect Circle

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.

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.

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: <a href="https:&#x2F;&#x2F;tabletpractice.arkt.is&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tabletpractice.arkt.is&#x2F;</a>

I messed around with building something similar just before the holidays: <a href="https:&#x2F;&#x2F;steadyhand.app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;steadyhand.app&#x2F;</a><p>It was a blast to learn how to do things in canvas and as an exercise, a very fun little app to build. I&#x27;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.<p>I encourage people to try to scaffold something like this together in canvas&#x2F;JS sometime. Very fun project!

Here&#x27;s the bookmarklet you&#x27;ve been waiting for...<p><pre><code> 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)()</code></pre>

Another great neal.fun page. One feature I&#x27;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&#x27;t really reward consistency.

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

I thought this was about Giotto a famous Renaissance Painter, but it seems to be a training app, to become like him (one day):<p>&quot;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: &quot;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&#x27;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.&quot;<p><a href="https:&#x2F;&#x2F;www.smithsonianmag.com&#x2F;arts-culture&#x2F;perfect-circles-180940946&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.smithsonianmag.com&#x2F;arts-culture&#x2F;perfect-circles-...</a>

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

Reminds me of a side project of mine called “Imperfect Circle” which makes asymmetric swung beats<p><a href="https:&#x2F;&#x2F;circle.jminjie.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;circle.jminjie.com&#x2F;</a>

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.

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

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

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&#x2F;yard rule to do straight lines because they are much harder to do.<p>Your limbs etc are all a collection of ball and socket&#x2F;downright weirdly jointed&#x2F;hinges with benefits&#x2F;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&#x2F;off switches.<p>People are weird. Nice website though.

&quot;Too slow&quot;<p>&quot;Too slow&quot;<p>&quot;Too slow&quot;<p>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

This is basically impossible with a trackball mouse :)

I learned that the best way to do this is to first draw a head, and then erase all the bits that aren&#x27;t a perfect circle. I didn&#x27;t see that as an option.<p>EDIT:<p>For those who don&#x27;t know the reference: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;wmqsk1vZSKw" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;wmqsk1vZSKw</a>

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.<p>(I recall how my senior hugh school maths teacher was wizz at drawing circles, lines and other geometry on the chalkboard)

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

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

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&#x27;t resemble a circle very much at all.

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

My circle is 94.2% perfect, can you beat that? <a href="https:&#x2F;&#x2F;neal.fun&#x2F;perfect-circle&#x2F;" rel="nofollow">https:&#x2F;&#x2F;neal.fun&#x2F;perfect-circle&#x2F;</a>

My circle is 97.6% perfect, can you beat that? <a href="https:&#x2F;&#x2F;neal.fun&#x2F;perfect-circle&#x2F;" rel="nofollow">https:&#x2F;&#x2F;neal.fun&#x2F;perfect-circle&#x2F;</a><p>(Now my hand hurts...)

My circle is 89.4% perfect, can you beat that? <a href="https:&#x2F;&#x2F;neal.fun&#x2F;perfect-circle&#x2F;" rel="nofollow">https:&#x2F;&#x2F;neal.fun&#x2F;perfect-circle&#x2F;</a>

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.

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

I kind of have the shakes? <a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;M1KsWci" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;M1KsWci</a>

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.

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

I don&#x27;t know why I kind of obsess on little games like this and end up drawing 50 circles to get &quot;better&quot; at it.

Drawing a triangle resulted in a score of 77.9?

Really fun distraction. Seems like I&#x27;m training an AI how to differentiate between bots and humans though...

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

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

Thanks for this, Neal! I hope you&#x27;re not feeding it into a SkyNet targeting system!

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

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

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

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

98.6% (~50 attempts, using my mouse)

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

Cool. Actually harder than I thought

I made a square and got 80% heh.

Thumbs superior for some reason

92.6% perfect, with a mouse

Surprisingly entertaining!

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

95.3 is my best