{"id":6195,"date":"2026-11-07T10:08:25","date_gmt":"2026-11-07T10:08:25","guid":{"rendered":"https:\/\/antonyhall.net\/blog\/?p=6195"},"modified":"2026-11-07T10:26:06","modified_gmt":"2026-11-07T10:26:06","slug":"spatial-image-cube","status":"publish","type":"post","link":"https:\/\/antonyhall.net\/blog\/spatial-image-cube\/","title":{"rendered":"Spatial image cube"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49-1024x611.png\" alt=\"\" class=\"wp-image-6196\" srcset=\"https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49-1024x611.png 1024w, https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49-300x179.png 300w, https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49-768x458.png 768w, https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49-1536x917.png 1536w, https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49-600x358.png 600w, https:\/\/antonyhall.net\/blog\/wp-content\/uploads\/2026\/11\/Screenshot-2026-11-07-at-07.04.49.png 1580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p>Playing arroud with breaking up images and text in a 3D space and placing these in a cube that could be rotated until it reveals the full image. \u00a0You an try it here: <a href=\"https:\/\/editor.p5js.org\/tonythevortex\/full\/Bt2M4GPne\">https:\/\/editor.p5js.org\/tonythevortex\/full\/Bt2M4GPne<\/a><br \/><br \/><iframe loading=\"lazy\" class=\"embed\" src=\"https:\/\/editor.p5js.org\/tonythevortex\/full\/OFT9EyNRY\" width=\"900\" height=\"600\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>\/&gt;And here is the original promt given before iteratively testing and tweaking the final code:\u00a0<br \/><br \/><\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">The letters should be distributed through a 3D space at different depths and positions. Each letter should always face the viewer, even as the text field moves.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The puzzle should begin in a scrambled state, where the phrase is unreadable. The user should be able to rotate or navigate the 3D text field using a small cube icon as the main control. Dragging the cube should move the letters around in 3D space.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From most viewpoints, the letters should appear scattered and disordered. From one specific viewing angle, all the letters should visually align and reveal the complete phrase:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>DECRYPT THE ARCHIVE<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep the visual style very simple:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>black text on a white background<\/li>\n\n\n\n<li>clean sans-serif typography<\/li>\n\n\n\n<li>no colour or decorative effects<\/li>\n\n\n\n<li>minimal interface suitable for embedding in Moodle<\/li>\n\n\n\n<li>smooth movement and a subtle snap into place when the correct viewing angle is reached<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;iframe src=\"https:\/\/editor.p5js.org\/tonythevortex\/full\/Bt2M4GPne\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\n<\/div><\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Playing arroud with breaking up images and text in a 3D space and placing these in a cube that could be rotated until it reveals the full image. \u00a0You an try it here: https:\/\/editor.p5js.org\/tonythevortex\/full\/Bt2M4GPne \/&gt;And here is the original promt given before iteratively testing and tweaking the final code:\u00a0 The letters should be distributed through&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6196,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240,32,328],"tags":[337],"class_list":["post-6195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-art","category-notes","category-research","tag-creative-coding"],"_links":{"self":[{"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/posts\/6195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/comments?post=6195"}],"version-history":[{"count":4,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/posts\/6195\/revisions"}],"predecessor-version":[{"id":6206,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/posts\/6195\/revisions\/6206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/media\/6196"}],"wp:attachment":[{"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/media?parent=6195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/categories?post=6195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/antonyhall.net\/blog\/wp-json\/wp\/v2\/tags?post=6195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}