{"id":21001,"date":"2025-07-27T12:26:25","date_gmt":"2025-07-27T11:26:25","guid":{"rendered":"https:\/\/johnjohnston.info\/blog\/?p=21001"},"modified":"2025-07-27T12:29:35","modified_gmt":"2025-07-27T11:29:35","slug":"guess-the-cubomania","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/guess-the-cubomania\/","title":{"rendered":"Guess the cubomania"},"content":{"rendered":"\n

A couple of days ago I saw a “guess the cubomania” challenge from Theo. I’ve had an interest in Cubomania<\/a> in the past and played around<\/a> with the idea a bit<\/a>. After a chat with D. who gave me a few engravers I googled a bit and guessed, wrongly, Goya.<\/p>\n\n\n\n

Next I thought to ask ChatGPT. It suggested it could match by image matching techniques, gave me a fairly obviously wrong first row and ran out of credit.<\/p>\n\n\n\n

I then thought to ask Claude to make me an interactive page where I could drag things around. It made a couple of not very good attempts.<\/p>\n\n\n\n

I was thinking about a better prompt, when I remembered and asked:<\/p>\n\n\n\n

\n

Could we use the whole image for each piece but \u2018crop\u2019 it with css?<\/p>\n<\/blockquote>\n\n\n\n

Claude replied:<\/p>\n\n\n\n

\n

Brilliant idea! Yes, we can absolutely use CSS to create a \u201cwindow\u201d effect where each piece shows only its portion of the full image. This is much more elegant than trying to extract individual pieces.\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b<\/p>\n<\/blockquote>\n\n\n\n

I was flattered1<\/a><\/sup> and when Claude came up with another fail I decided to abandon AI and DIY. This turned out a lot better. I started by remembering background-position<\/a> and finding interact.js <\/a>. The last time I did any drag and drop I dimly recall some sort of jQuery and a shim for mobile\/tablets. interact.js did a grand job for my simple needs. It was probably overkill as it seems to do a lot more.<\/p>\n\n\n\n

Cubomania Solver<\/a><\/p>\n\n\n

\n
\"Partially
Screenshot<\/figcaption><\/figure>\n<\/div>\n\n\n

It is pretty simple stuff, but potentially a lot of fun, different images, making cubomania puzzles who knows. I did extend it a bit, learning about localStorage (to save any progress) and the dialogue tag. All without AI but few visits to HTML reference – HTML | MDN<\/a> and the odd search.<\/p>\n\n\n\n

I had a lot of fun with this, more than if I had just managed to get either of the AIs it to do the whole thing. What it did make me think of is that AI chat was useful for working out what I wanted to do and how to do it. I could probably have done that bit too all by myself. Usually I just start messing about and see what happens. This points to a bit of planning, or maybe typing some notes\/pseudocode\/outline might work for me when I am playing.<\/p>\n\n\n

  1. See: The machine began to waffle \u2013 and then the conductor went\u2026<\/a> In the paper the title was Artificial Intelligence: The Technology that lies to say yes.<\/strong> \u21a9\ufe0e<\/a><\/li><\/ol>\n\n\n

    The Featured Image of this post was generated by ChatGPT in response to ” I want an image of a chatbot character chatting with a person, friendly, helpful & futuristic.” It has been run through Cubomania Gif!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    A couple of days ago I saw a “guess the cubomania” challenge from Theo. I’ve had an interest in Cubomania in the past and played around with the idea a bit. After a chat with D. who gave me a few engravers I googled a bit and guessed, wrongly, Goya. Next I thought to ask […]<\/p>\n","protected":false},"author":1,"featured_media":21005,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":["https:\/\/social.ds106.us\/@johnjohnston\/114924954921594695"],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"[{\"content\":\"See: The machine began to waffle \u2013 and then the conductor went\u2026<\/a> In the paper the title was Artificial Intelligence: The Technology that lies to say yes.<\/strong>\",\"id\":\"56dba22e-d735-4eec-9d5a-4361ca636a3b\"}]"},"categories":[953,6],"tags":[957,831,80,1983],"post_format":[],"class_list":{"0":"post-21001","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-posse","8":"category-wwwd","9":"tag-ai","10":"tag-cubomania","11":"tag-fun","12":"tag-theo-kuechel","13":"kind-article","15":"h-entry","16":"hentry"},"better_featured_image":{"id":21005,"alt_text":"Ai generated picture of a AI bot talking to a human. Turned into a cubomania gif","caption":"","description":"","media_type":"image","media_details":{"width":400,"height":266,"file":"2025\/07\/ai-cubomania.gif","filesize":303910,"sizes":{"thumbnail":{"file":"ai-cubomania-150x150.gif","width":150,"height":150,"mime-type":"image\/gif","filesize":10986,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/07\/ai-cubomania-150x150.gif"},"jetpack-portfolio-admin-thumb":{"file":"ai-cubomania-50x50.gif","width":50,"height":50,"mime-type":"image\/gif","filesize":2552,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/07\/ai-cubomania-50x50.gif"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":21001,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/07\/ai-cubomania.gif"},"jetpack_featured_media_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2025\/07\/ai-cubomania.gif","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-5sJ","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=21001"}],"version-history":[{"count":2,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21001\/revisions"}],"predecessor-version":[{"id":21006,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21001\/revisions\/21006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media\/21005"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=21001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=21001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=21001"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=21001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}