{"id":8040,"date":"2026-02-19T11:14:16","date_gmt":"2026-02-19T19:14:16","guid":{"rendered":"https:\/\/johnfreeborn.com\/words\/?p=8040"},"modified":"2026-02-19T11:14:17","modified_gmt":"2026-02-19T19:14:17","slug":"teaching-computers-to-draw","status":"publish","type":"post","link":"https:\/\/johnfreeborn.com\/words\/teaching-computers-to-draw\/","title":{"rendered":"Teaching Computers to Draw"},"content":{"rendered":"\n

I’m not an AI expert. I’m an enthusiast, and playing around with these things is how I learn. I’ve been working with Cursor<\/a> and Claude Code<\/a>, and my most successful experiment to date has been rebuilding the iOS game, Strategery<\/a>. This game recently stopped working on my phone. It doesn’t have fancy features. It doesn’t connect to the web and try to upsell you or gamify your experience. It’s just a nice, pared-down Risk clone. I was bummed when it stopped working. So my goal is to recreate it as best as I can.<\/p>\n\n\n\n

V1 worked<\/a>, but wasn’t pretty.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

On the next version, I started working towards an iOS experience, and that’s when I started to attempt to beautify things. This is where the machine struggled. I asked it to add a stroke, inside of the hex shapes. Things got strange-looking.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I don’t exactly know why it darkened half the map, but this wasn’t what I wanted.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

I went backwards and took away the heavy stroke. I was left with tiny gaps in the map. This isn’t right either. At this point, I went back to the tools that I know best: Illustrator and Figma. I had to get my own head around how this should work.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

This was what I wanted. Slightly rounded hex shapes, with a lighter inset stroke. The hard part is knowing when to connect the shapes, when not to, and how to layer them all together.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The machine’s next attempt wasn’t working. Back to the drawing board\u2013literally.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I created this diagram to help the machine understand the system. There’s a base tile. Under that tile, there are connectors to create the smooth, rounded shapes. Above, there are two layers: over connectors to hide the strokes and stroke connectors to make the proper connections with the strokes. In Illustrator, everything is a layer. I’ve been using this tool for so long, my brain just works that way now.<\/p>\n\n\n\n

When I shared this with Claude Code, it understood the structure straight away, which by itself is impressive. At that point, I created a series of SVGs that it could use to layer everything together.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that we have all the pieces, it should be easy. Right? Not exactly.<\/p>\n\n\n\n

\"\"<\/figure>
\"\"<\/figure>
\"\"<\/figure><\/div>
\"\"<\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n

The machine had a really hard time understanding how to connect the pieces. It was trying to create the stroke connections in pairs. This does not work. It was sort of getting the layering right, but clearly, there were still issues.<\/p>\n\n\n\n

Once I understood that it was working in pairs, it took several attempts to help it work around that issue, and after a few more iterations, boom\u2013it worked.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

There’s still a long way to go to get this ready for the app store. I’m enjoying the process and realizing more about how my own process works.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’m not an AI expert. I’m an enthusiast, and playing around with these things is how I learn. I’ve been working with Cursor and Claude Code, and my most successful experiment to date has been rebuilding the iOS game, Strategery. This game recently stopped working on my phone. It doesn’t have fancy features. It doesn’t […]<\/p>\n","protected":false},"author":1,"featured_media":8070,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[22],"tags":[132,29],"class_list":["post-8040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-personal","tag-ai","tag-video-games"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2026\/02\/CleanShot-2026-02-18-at-17.13.20%402x.png?fit=1830%2C1154&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/8040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/comments?post=8040"}],"version-history":[{"count":2,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/8040\/revisions"}],"predecessor-version":[{"id":8072,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/8040\/revisions\/8072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/media\/8070"}],"wp:attachment":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/media?parent=8040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/categories?post=8040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/tags?post=8040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}