Can You Draw a Perfect Circle Vole

'Can you draw the perfect circumvolve?' This is the aim of vole.wtf'south online game.  Depict a circumvolve, and receive a rating — 100% equals perfect. But why practice it myself when I tin make the reckoner do it for me? I had recently been learning a new tool for automated tests, and I had a feeling that information technology could play the game simply like any user could. All I would need to do is tell it where to describe, and it should win the game every time. Below I share my process behind creating a Cypress examination script to win the game for me, and discovering some interesting facts almost the game in the procedure.

My best manual attempt of drawing the perfect circumvolve with a mouse. My artistic prowess is unmatched.

Breaking the game down into actions

Firstly, I break the perfect circle game downwardly into three chief actions that I can so utilise for the Cypress exam:

1. Click the get push button
2. Printing the mouse down on the drawing area at whatsoever indicate on the circle
3. Motility the mouse to the next point of the circle
4. Repeat until the first point is reached
5. Win
   

Additional information for the automated test

For the test to perform those deportment however, it needs to target these parts of the page, so I take to determine how it volition target them:

1. go button — Cypress can target elements based on what text shows to the user and then I tell Cypress to find the first matter on the folio with the word "Go" in information technology, and click that. No in-depth knowledge of html is needed here.
2. cartoon area — I click 'inspect element' on the game and check the dom. From this I find out that the drawing area of the game is just a div within a section. I notice at that place aren't whatever other section elements on the page, so I tell Cypress to get the first section on the folio, and then get the div within information technology, and recollect that as the drawspace. This lets me refer back to it later without having to notice it again.

In addition to the page elements that demand to exist targeted, I likewise need to empathize the positions of the circle in lodge to draw it correctly:

1. position of the centre — I need to know the eye of the page for the circle to be fatigued around, I work this out through trial and error —  telling the test to click at a spot, then some other spot, until I find the middle. This sounds inefficient but information technology's quick and like shooting fish in a barrel to edit the test, re-run it, and see the results immediately.
2. points of the circle — initially I try iterating through the pixels straight between each corner, only this results in a diamond not a circle, I should have seen that coming really. Instead, I find code online that allows me to generate many points of a circle based on the centre, radius, and number of points that I specify. Information technology conveniently works in a loop, taking the current iteration as input for which betoken to generate, then it'south easy to make a loop that will drag the mouse to each spot every bit they're generated.
3. Number of points I want to depict — This needn't be precise, but too many points and the test runs out of time trying to depict, too few and information technology wouldn't be a circle, presumably. I detect that 65 is a good amount so I get with that.
   

The test stages

With all of that worked out, I put it together in a exam that volition:

• set the radius of the circle (this can be anything that isn't as well large or small, 300 works)
• gear up the centre of the circle
• set the number of points that I want to describe the circle with.
• load the page
• discover the word "Become"
• click information technology
• discover the div within the department element
• remember it every bit the drawspace
• use the circle algorithm to generate the first point
• hold the mouse down at this point on the drawspace
• for each betoken in the circle
• generate the side by side point on the circle
• move the mouse in that location on the drawspace
• trace the circle a 2d time simply to make sure it completes, otherwise the game may not count the circle as finished.

Almost success

The test is complete. Each command is working correctly, the circle is being fatigued, and I have my victory, almost:

Strange, that circle certainly looks every bit round every bit tin can be, however the game won't requite information technology a 100% score? Is the game's calculation off? Is something preventing the test from winning when a human would have?

No it turns out my method for finding the heart of the page was slightly flawed. I thought that the center of the folio was at 395, 395, merely it was in fact 395.five, 395.5. The eye of the folio is a point between pixels, and that 7/10ths of a pixel off is enough to bring the score down past 0.3%

Only once I've figured that out, the test can finally accomplish its mission.

Even at 100%, the game is still not satisfied, telling me to effort again for a better score. This screen was never meant for mortal eyes.

Agreement the game through debugging

With the test written, I now experiment cartoon unlike circles by altering the radius, eye, and number of points used, and this apace gives united states of america some foreign results.

The circle to a higher place has 65 points, but what if I drew with only x points:

That doesn't look quite perfect, and why are my lines curved? At that place should be directly, directly lines betwixt each indicate.

What if it has only iv points?

That'due south actually not right.

Even a merely a circle with ii points, also known as a line, is considered perfect by this game:

Why does that pass, but being off by less than a pixel fail? Moreover, why does that pass, simply a circumvolve with specifically seven points fail?

I endeavour debugging this, forth with another questions below.

Why are the lines between my points curved?

I expect the lines that connect my points together to be straight, non curved. The curves are either being added by the perfect circle game or past Cypress. To examination this, I brand Cypress draw the same thing on a different site. I copy the examination, make some slight adjustments, and that gives us this.

It doesn't look the same, and that's good because it means the curves are being added by the game, non by Cypress.

Why does the perfect circle game allow the exam depict across the centre?

Unremarkably the game stops this happening, and will say "too close to center", only a 2 point circle draws straight through the centre. This one's easy to examination by manually drawing a quick line.

Pow, information technology doesn't care. It complains that I didn't draw the full circle, just not that I crossed the line. That tells me it'southward likely non paying attending to the lines, it's only measuring specific points. Information technology could be that information technology'southward measuring where the mouse turns, or just picking up where the mouse is every x milliseconds. If I brand a examination that'south hardcoded to depict a line, but include a indicate nearly the center, I see that it catches that.

It does. This should nevertheless be also fast for it to take hold of, so it's probably paying attention to the points where the mouse management changes.

Fundamental learnings:

The game doesn't care about the lines, they're imaginary. All it's watching are the points the mouse moves to. It checks 3 things:

1. The points match perfectly in altitude from the center
2. None of the points are likewise close to the heart
3. The points happen in a singular management around the heart (it stops you if you lot go the wrong fashion later on starting)

This is why the game accepts a square, considering it's a perfectly centred square. In fact fifty-fifty if I cut most of the points of i side out, it will still be a perfect shape considering every betoken it does describe are the exact same altitude from the center:

Since I understand now that the game is only looking at the points and not the lines, I accept a theory for my concluding question:

Why doesn't the game like a circle with 7 points?

I suspect that 7 is the perfect number where some points are only barely non perfect enough, and there's not plenty of them for it to average out to 100%. How to examination that? I experiment by setting the radius to 301 instead of 300 and:

Perfect this fourth dimension. The circumvolve should be drawn exactly the same, merely the points will exist slightly different, and I suspect slightly more perfect in the eyes of the game. This also explains why it doesn't similar other specific numbers of points, (fifty for instance simply got 99.viii%) every bit no circle fatigued with direct lines can ever exist truly perfect. At that place's always a chance for information technology to decide a point is just barely off.

Learning through testing

Curiosity was the principal driver behind this experiment, however I also came abroad with a better understanding of how the perfect circle game functions, and an idea for how similar experimentation could reveal functions of other systems as well. For more learnings and curiosities, subscribe to the Springlabs newsletter below.

markleyalch1955.blogspot.com

Source: https://labs.springload.co.nz/post/how-to-become-an-automatic-winner

Share this post