{"author_link":"\/users\/thomz12","author_name":"thomz12","author_uid":"thomz12","comments":[],"epoch":1729179720,"event":"LD56","format":"md","ldjam_node_id":406171,"likes":22,"metadata":{"p_key":"209246","p_author":"thomz12","p_authorkey":"1002165","p_urlkey":"447621","p_title":"Detecting the Perfect Circle \u2b55","p_cat":"LDJam ","p_event":"LD56","p_time":"1729179720","p_likes":"22","p_comments":"0","p_status":"WAYBACK","us_key":"1002165","us_name":"thomz12","us_username":"thomz12","event_start":"1728000000","event_key":"115","event_name":"Ludum Dare 56"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD56","removed_author":false},"_superparent":395186,"_trust":10,"author":2165,"body":"One of the interesting problems we faced when programming [Bunny Wrangler](https:\/\/ldjam.com\/events\/ludum-dare\/56\/bunny-wrangler) was adding the ability to determine what the player had outlined. We had decided to only recognize circles as it simplifies the problem a lot, and because we wanted to make it western themed, so it made a lot of sense for a lasso. \n\n![gameplay.gif](\/\/\/raw\/578\/z\/68eb2.gif)\n*Figure 1: Bunny Wrangler gameplay*\n\n\nI have already somewhat answered this as a comment on the game, but I figured I would post it here too with some more information as people seemed to like it!\n\n## Detecting a circle\n\nPerfect circles always have the distance from the center to the outside edge the same length. I figured I could use that fact as a simple test for our case. But what's the best way to figure out the center of our list of segments? The segments in our rope are just some points in space.\n\nI started of taking the average point of all given segments. This worked pretty well in most cases as seen in *Figure 2*.\n\n![average_point_good.png](\/\/\/raw\/578\/z\/68eb4.png)\n*Figure 2: Average point represented by the big red dot*\n\nOne big flaw I ran into, is that because of limited frame rate, the average point would shift dramatically based on the player mouse speed. Notice the segment sizes on the left vs right in *Figure 3*.\n\n![average_point_bad.png](\/\/\/raw\/578\/z\/68eb5.png)\n*Figure 3: Average point (red dot) shifted all the way left*\n\nSo instead I wanted to find a way to find the center that doesn't rely on the segment sizes. Eventually I ended up calculating the bounding box of all the segments. This gives a way better center point for our use case. It's the big green dot in *Figure 3*. \n\nNow we have a good center point, the next step is to figure out if the segments are roughly the same distance away from the center. I'm keeping track of the `minimum` and `maximum` distance. In the case of a perfect circle, these values should equal. `minimum \/ maximum = 1`\n\n![circle_calculation.png](\/\/\/raw\/578\/z\/68eb8.png)\n*Figure 4: Calculating the minimum and maximum distance from the center*\n\nIn practice, these `minimum` and `maximum` values never equal. But we can see how close we are by dividing these values. The result of this can be compared against some threshold that we experimented with. In case of *Figure 4*, it would be roughly:\n\n```\nminimum = 175\nmaximum = 210\ncircleness = 175 \/ 210 = 0.8333\n```\n\nA higher than `0.8` we consider a Perfect Circle in-game. So the shape in *Figure 4* we would consider as one. Because we have a value that approaches `1.0`, we can give more points depending on how well a circle was made. Values closer to `1.0` are generally better circles without much variation from the center. \n\n![circle_calculation_triangle.png](\/\/\/raw\/578\/z\/68ebb.png)\n*Figure 5: With a big difference between minimum and maximum, the shape is likely not a circle!*\n\n```\nminimum = 75\nmaximum = 258\ncircleness = 75 \/ 258 = 0.2907\n```\n\nAnything lower than `0.6` we don't consider circle enough. So it correctly doesn't approve the shape in *Figure 5*. We couldn't be too strict with the thresholds as it would be frustrating to play. This results sometimes in non-circular shapes being approved, but I think in most cases they take more effort compared to a normal circle. \n\n![circle_wrong.gif](\/\/\/raw\/578\/z\/68ebf.gif)\n*Figure 6: Wrong shapes being detected*\n\nThis isn't a perfect solution, but I think it works very well for our case I think. Especially with the huge time pressure, I'm happy I could come up with something that worked so well. How would you have solved this? Are there any other (better) ways I'm not aware of? I'd love to know! :cowboy: \n","comments":2,"comments-timestamp":"2024-10-18T14:03:34Z","created":"2024-10-17T13:48:12Z","files":[],"files-timestamp":0,"id":406171,"love":22,"love-timestamp":"2024-10-20T12:27:08Z","meta":[],"modified":"2024-10-20T12:27:08Z","name":"Detecting the Perfect Circle \u2b55","node-timestamp":"2024-10-17T15:42:00Z","parent":395306,"parents":[1,5,9,395186,395306],"path":"\/events\/ludum-dare\/56\/bunny-wrangler\/detecting-the-perfect-circle","published":"2024-10-17T15:42:00Z","scope":"public","slug":"detecting-the-perfect-circle","subsubtype":"","subtype":"","type":"post","version":1277298},"node_metadata":{"n_key":"406171","n_urlkey":"447621","n_parent":"395306","n_path":"\/events\/ludum-dare\/56\/bunny-wrangler\/detecting-the-perfect-circle","n_slug":"detecting-the-perfect-circle","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"2165","n_created":"1729172892","n_modified":"1729427228","n_version":"1277298","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/56\/bunny-wrangler\/detecting-the-perfect-circle","text":"One of the interesting problems we faced when programming [Bunny Wrangler](https:\/\/ldjam.com\/events\/ludum-dare\/56\/bunny-wrangler) was adding the ability to determine what the player had outlined. We had decided to only recognize circles as it simplifies the problem a lot, and because we wanted to make it western themed, so it made a lot of sense for a lasso. \n\n![gameplay.gif](\/\/\/raw\/578\/z\/68eb2.gif)\n*Figure 1: Bunny Wrangler gameplay*\n\n\nI have already somewhat answered this as a comment on the game, but I figured I would post it here too with some more information as people seemed to like it!\n\n## Detecting a circle\n\nPerfect circles always have the distance from the center to the outside edge the same length. I figured I could use that fact as a simple test for our case. But what's the best way to figure out the center of our list of segments? The segments in our rope are just some points in space.\n\nI started of taking the average point of all given segments. This worked pretty well in most cases as seen in *Figure 2*.\n\n![average_point_good.png](\/\/\/raw\/578\/z\/68eb4.png)\n*Figure 2: Average point represented by the big red dot*\n\nOne big flaw I ran into, is that because of limited frame rate, the average point would shift dramatically based on the player mouse speed. Notice the segment sizes on the left vs right in *Figure 3*.\n\n![average_point_bad.png](\/\/\/raw\/578\/z\/68eb5.png)\n*Figure 3: Average point (red dot) shifted all the way left*\n\nSo instead I wanted to find a way to find the center that doesn't rely on the segment sizes. Eventually I ended up calculating the bounding box of all the segments. This gives a way better center point for our use case. It's the big green dot in *Figure 3*. \n\nNow we have a good center point, the next step is to figure out if the segments are roughly the same distance away from the center. I'm keeping track of the `minimum` and `maximum` distance. In the case of a perfect circle, these values should equal. `minimum \/ maximum = 1`\n\n![circle_calculation.png](\/\/\/raw\/578\/z\/68eb8.png)\n*Figure 4: Calculating the minimum and maximum distance from the center*\n\nIn practice, these `minimum` and `maximum` values never equal. But we can see how close we are by dividing these values. The result of this can be compared against some threshold that we experimented with. In case of *Figure 4*, it would be roughly:\n\n```\nminimum = 175\nmaximum = 210\ncircleness = 175 \/ 210 = 0.8333\n```\n\nA higher than `0.8` we consider a Perfect Circle in-game. So the shape in *Figure 4* we would consider as one. Because we have a value that approaches `1.0`, we can give more points depending on how well a circle was made. Values closer to `1.0` are generally better circles without much variation from the center. \n\n![circle_calculation_triangle.png](\/\/\/raw\/578\/z\/68ebb.png)\n*Figure 5: With a big difference between minimum and maximum, the shape is likely not a circle!*\n\n```\nminimum = 75\nmaximum = 258\ncircleness = 75 \/ 258 = 0.2907\n```\n\nAnything lower than `0.6` we don't consider circle enough. So it correctly doesn't approve the shape in *Figure 5*. We couldn't be too strict with the thresholds as it would be frustrating to play. This results sometimes in non-circular shapes being approved, but I think in most cases they take more effort compared to a normal circle. \n\n![circle_wrong.gif](\/\/\/raw\/578\/z\/68ebf.gif)\n*Figure 6: Wrong shapes being detected*\n\nThis isn't a perfect solution, but I think it works very well for our case I think. Especially with the huge time pressure, I'm happy I could come up with something that worked so well. How would you have solved this? Are there any other (better) ways I'm not aware of? I'd love to know! :cowboy: \n","title":"Detecting the Perfect Circle \u2b55","wayback_source":[]}