This weekend I had a speech and debate tournament, which meant that while the debate squad was off arguing for fun (Ha! Nerds!) on Friday, I had a lot of free time at the hotel we were staying at. I resisted the urge to binge watch the new season of House of Cards and instead spent most of the day coding. Following last week’s adventure in making a triangle, I was now tasked with making diamonds, squiggles, and ovals in various color and striping levels, putting these symbols on cards, and distributing the cards on screen. Here is the result of about 6 hours of work:

I know what you’re thinking. “Six hours? That looks so easy…and you could’ve indulged in the finery of Kevin Spacey’s acting ability for six hours instead. ” Or, if you’re any better at iOS coding than I am, “Six hours? That’s so easy.” Well, it was sort of easy. once I figured out what I was doing.

See, the assignment mandates that the app has to look pretty. That means alignment. And that, among other things, means making sure that as the cards are dealt and chosen, they stay in proper rows and columns with each other. Now, I haven’t even coded the animations in the app yet (re-deals, collecting up all the cards at once, etc.), but I know that if these animations are to look visually pleasing in any way, then the cards on screen must maintain some form of structure. In other words, the layout needs to look less like my dorm room (although to be fair, I did vacuum today; I’d like to thank my mom for believing in me for all these years) and more, well, grid-like. If only there were some way to put these cards into a grid…. You probably couldn’t guess it from the title of this post, but there is a way to put these cards into a grid. It’s a class called “Grid” that was actually included in the assignment, though its use was not required. The Grid class is actually pretty simple: it has three properties that must be set on initialization, and the rest are optional. These properties are cellAspectRatio, minimumNumberOfCells, and size. With these set, the Grid class essentially just lays an invisible grid onscreen which you can then use to snap objects inside of.

The problem I was having when trying to work with the Grid class was that I couldn’t find a cell aspect ratio that also worked with the minimum number of cells I wanted (15). The cell aspect ratio is just a ratio that relates the width of the cell to the height (a ratio of 1.0 would be a square). Originally, I tried using 1.7 as the ratio, but that always seemed to produce columns that would eventually go offscreen instead of ending cleanly at the edge. After fiddling with some numbers for a while, I realized that 2.0 would be an ideal ratio that still more-than-vaguely resembled a card. I also had to set the size of the grid using a some code I wrote that scales the grid size based on the device that runs the app. I don’t think a lot of people realize that an app running on an iPhone 4s and an app running on an iPhone 5 or iPad Retina actually have to be coded a little differently to compensate for the screen size difference. With these modifications and a little bit of luck, I finally got the cards laid out on screen where I wanted them, and all that was left to do was connect the “view” (what is shown onscreen) to the “model” (the numbers and logic behind the actual workings of the app). This was a bit easier, as I am more familiar with code that isn’t strictly geometric.

If you’re curious about how I went from drawing a black and white triangle to drawing colorful and striped squiggles and ovals galore, then we should be friends, among other things. The ovals and diamonds were pretty straight forward, as lines and quadratic curves aren’t too difficult to code. However, the squiggles proved to be quite tricky, since they utilize cubic curves. I had to use what is called a “bezier path” to draw lines properly and figure out what “control points” would merit the best looking curves for the symbols onscreen. Wikipedia soothed any worries I had by illustrating simply how the control points affect each line:

It then promptly un-soothed them with this illustration:

Luckily, I only needed to replicate the former, and after some experimentation I managed to draw some nice squiggles onscreen:

After that, assigning the colors and stripes was pretty simple. I won’t delve into details, but all I had to do was either assign colors via hard code or use an image of a bunch of stripes as the “fill” for each shape.

I’ll end on a tangent (I tried to think of a good geometry joke but I couldn’t). There is something about the feeling I get after writing working code that is not quite describable. Anybody who has written any sort of program can relate, I’m sure. I realized quite early on in this exploration of programming that almost every time I write new code, it will fail. It will fail more than once, more than 15 times, more than Disney’s “Planes” or its upcoming sequel. But that’s okay. Because when it works, when I push the “build” button and finally get the answer I want or the image I was hoping, for it’s all worth it. I think what draws me to computer science is the prospect of repeating this process over and over into the future, continually failing until I don’t, and then failing again. It’s how I’m hoping to live my life, in a sense.

Except somewhere in between the failure I want an Audi.