Game Test How Perfect Circle Draw
'Can you draw the perfect circle?' This is the aim of vole.wtf's online game. Draw a circumvolve, and receive a rating — 100% equals perfect. Simply 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 it could play the game only like any user could. All I would need to practice is tell information technology where to draw, and it should win the game every time. Beneath I share my procedure behind creating a Cypress test script to win the game for me, and discovering some interesting facts about the game in the process.
Breaking the game down into actions
Firstly, I break the perfect circumvolve game down into three main deportment that I can then utilize for the Cypress test:
- Click the go button
- Printing the mouse downwards on the drawing area at whatever point on the circumvolve
- Move the mouse to the next point of the circle
- Echo until the get-go point is reached
- Win
Additional information for the automatic test
For the test to perform those actions even so, it needs to target these parts of the folio, so I have to determine how it volition target them:
- become button — Cypress tin can target elements based on what text shows to the user so I tell Cypress to find the kickoff thing on the folio with the give-and-take "Go" in information technology, and click that. No in-depth knowledge of html is needed here.
- drawing surface area — I click 'audit element' on the game and bank check the dom. From this I find out that the cartoon expanse of the game is just a div within a section. I observe in that location aren't any other department elements on the page, so I tell Cypress to get the offset section on the page, and then go the div inside information technology, and remember that as the drawspace. This lets me refer back to it later without having to find it again.
In addition to the folio elements that demand to be targeted, I also demand to understand the positions of the circumvolve in gild to describe it correctly:
- position of the heart — I need to know the eye of the page for the circle to be fatigued effectually, I work this out through trial and error — telling the test to click at a spot, then some other spot, until I notice the centre. This sounds inefficient merely it's quick and easy to edit the exam, re-run it, and see the results immediately.
- points of the circle — initially I endeavour iterating through the pixels directly between each corner, but this results in a diamond non 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. It conveniently works in a loop, taking the current iteration as input for which signal to generate, so it'due south easy to make a loop that will drag the mouse to each spot equally they're generated.
- Number of points I want to describe — This needn't be precise, but likewise many points and the exam runs out of time trying to draw, too few and it wouldn't be a circle, presumably. I discover that 65 is a good amount and then I go with that.
The test stages
With all of that worked out, I put it together in a test that will:
- fix the radius of the circumvolve (this can be anything that isn't too large or small-scale, 300 works)
- fix the heart of the circle
- fix the number of points that I want to draw the circumvolve with.
- load the folio
- find the word "Go"
- click information technology
- find the div within the section element
- remember it every bit the drawspace
- use the circle algorithm to generate the get-go betoken
- hold the mouse down at this point on the drawspace
- for each point in the circle
- generate the adjacent indicate on the circle
- move the mouse there on the drawspace
- trace the circumvolve a second fourth dimension only to make certain information technology completes, otherwise the game may not count the circle as finished.
Well-nigh success
The exam is complete. Each command is working correctly, the circumvolve is being drawn, and I have my victory, nigh:
Foreign, that circle certainly looks as round as can be, yet the game won't give information technology a 100% score? Is the game's adding off? Is something preventing the exam from winning when a human would have?
No it turns out my method for finding the heart of the folio was slightly flawed. I thought that the center of the folio was at 395, 395, only it was in fact 395.v, 395.5. The center of the folio is a indicate between pixels, and that 7/10ths of a pixel off is plenty to bring the score downward by 0.3%
Merely once I've figured that out, the test can finally attain its mission.
Even at 100%, the game is nonetheless not satisfied, telling me to try again for a improve score. This screen was never meant for mortal eyes.
Understanding the game through debugging
With the examination written, I at present experiment drawing different circles by altering the radius, centre, and number of points used, and this chop-chop gives us some strange results.
The circle higher up has 65 points, just what if I drew with but 10 points:
That doesn't look quite perfect, and why are my lines curved? There should be directly, direct lines between each point.
What if it has only 4 points?
That's actually not right.
Fifty-fifty a just a circle with 2 points, also known as a line, is considered perfect by this game:
Why does that laissez passer, just being off by less than a pixel neglect? Moreover, why does that pass, only a circumvolve with specifically 7 points fail?
I effort debugging this, forth with some other questions below.
Why are the lines between my points curved?
I expect the lines that connect my points together to exist straight, not curved. The curves are either being added past the perfect circle game or by Cypress. To exam this, I make Cypress draw the same thing on a different site. I re-create the exam, make some slight adjustments, and that gives united states of america this.
It doesn't look the same, and that'due south skillful because it means the curves are being added past the game, not by Cypress.
Why does the perfect circumvolve game allow the test draw across the center?
Usually the game stops this happening, and will say "also close to center", just a ii point circle draws straight through the center. This one'southward like shooting fish in a barrel to test by manually drawing a quick line.
Prisoner of war, it doesn't intendance. It complains that I didn't draw the full circle, merely not that I crossed the line. That tells me it'southward probable non paying attending to the lines, it'due south just measuring specific points. It could be that it's measuring where the mouse turns, or but picking upwardly where the mouse is every x milliseconds. If I make a test that's hardcoded to draw a line, only include a point near the middle, I see that information technology catches that.
It does. This should still be likewise fast for it to catch, so it's probably paying attention to the points where the mouse direction changes.
Central learnings:
The game doesn't intendance virtually the lines, they're imaginary. All it's watching are the points the mouse moves to. It checks 3 things:
- The points match perfectly in distance from the centre
- None of the points are too close to the centre
- The points happen in a singular management around the middle (it stops y'all if y'all go the wrong fashion after starting)
This is why the game accepts a square, because information technology's a perfectly centred square. In fact fifty-fifty if I cut most of the points of one side out, it will withal be a perfect shape because every indicate it does draw are the verbal same altitude from the heart:
Since I sympathise now that the game is only looking at the points and non the lines, I have a theory for my final question:
Why doesn't the game like a circle with vii points?
I suspect that 7 is the perfect number where some points are just barely not perfect enough, and there's not enough of them for information technology to boilerplate out to 100%. How to test that? I experiment by setting the radius to 301 instead of 300 and:
Perfect this time. The circle should exist fatigued exactly the aforementioned, but 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 only got 99.viii%) every bit no circle drawn with direct lines tin ever be truly perfect. There's always a chance for it to decide a signal is merely barely off.
Learning through testing
Curiosity was the principal driver backside this experiment, however I besides 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 equally well. For more learnings and curiosities, subscribe to the Springlabs newsletter below.
Source: https://labs.springload.co.nz/post/how-to-become-an-automatic-winner