draw a circle

draw a circle on the canvas. scores range from -N to 100, where N is some large number.

how does the scoring work?

your circles are stored as arrays of points, and one point is added each time a mousemove event is fired. when scoring, the first thing we must do is change the points array so that all the elements are relatively evenly spaced apart. we do this by keeping track of the last point that was added to the new list and only adding points if they are at least 5 units away from the previous point. to handle cases in which there need to be more points between these two (such as if the current point is 20 points away from the last), we simply lerp between these two.

now that we have a list that's easier to do math on, we take its center and the average distance from the center. we then find the standard deviation of distances to the center and divide it by the average distance because people are going to draw circles of different sizes and the smaller ones shouldn't have an advantage. the score is then remapped so that 0.15 SD corresponds to 0 points and 0.00 SD corresponds to 100. these numbers are easier for humans to interpret.

home