Programming 6 Javascript method: a few notes

[sharpskater69]

Since there are only 2 threads about the mission, I figured I would give my thoughts on this one and it could help some people. First off, I didn't pass it via the OCR method. There are helpful posts if you want to go that way though. It may seem farfetched that you can send back all 253 characters in order just by having an array of numbers, you can though.


You can see it's taking numbers from the 'drawData' array 4 or 5 at a time(depending on every 3rd number) Each of those ends up being a line or an arc. There are duplicates in the array. I don't know why, but there are. Since each will only get drawn once, you may as well get rid of the duplicates.


Now a tougher part, getting those lines and arcs into the correct groups. You know there should be 253 each time, or something has gone wrong. Something clicked for me in the later part of this mission, and had I realized it sooner I could have cut down this step a little bit. Look at the arcs that touch other arcs, how do they always connect? What about arcs to lines? Think about that 3rd number again. Look closely at how lines connect to other lines, basically 2 scenarios. I used a few simple formulas from geometry.


Determining each character wasn't too bad, though had trouble with a few. This part is important: look how the characters are drawn, it's not always as it seems. D is not just a line and arc, it's 3 lines and an arc. Sometimes a line is drawn in 3's. A good way to experiment is delete values from the array until only a certain character is drawn on the page. Dividing them into chars with arcs and with no arcs seemed like a good place to start. Had some confusion with 6 and 9 (obvious rotation issues) and then 1 4 7 F(all 3 lines no arcs). Without saying too much, it came down to lengths.


Did an array_count_values() to see how many of each was in the image, and it was correct. No idea on how to get them in order though. I was thinking just find a unique key for each character from x & y and sort them. Tried breaking the spiral into quadrants and measuring distance to get each slice, always a handful of errors. The ranges would overlap. I took the advice of a post and started drawing lines through a spiral. Still nothing unique about the values in each section, so I had to make something unique to tell which it was in. What could I do to make all of the pixels have something in common? Of course it had to adjust to the coordinates of the original image I drew on, or it wouldn't work. Use looping to print them in the right order and I would have it.


That was probably the toughest of all 12. Thanks for the programming missions!

[thissitehack]

Having also finished this programming mission, I think that one of the hardest parts about solving this mission entirely with javascript was finding the coordinates of the center of the spiral. One way to find the exact coordinates of the center is to take the most common x-value of the midpoints of all horizontal segments as the x-coordinate and the most common y-value of the midpoints of all vertical segments as the y-coordinate. Once the center was found, the spiral could easily be reconstructed and the letters segmented. From there, identification was fairly straightforward. Differentiating between 7 and F was particularly tricky though (hint: F has 90 degree angles; 7 does not).

This should help anyone having difficulty on this challenge.