{"id":324,"date":"2026-10-25T14:00:02","date_gmt":"2026-10-25T14:00:02","guid":{"rendered":"https:\/\/webdesign.stustustudio.com\/?page_id=324"},"modified":"2026-10-25T14:00:02","modified_gmt":"2026-10-25T14:00:02","slug":"experiments","status":"publish","type":"page","link":"https:\/\/webdesign.stustustudio.com\/?page_id=324","title":{"rendered":"Selected Experiments"},"content":{"rendered":"\n<section class=\"wrap page-hero\"><p class=\"eyebrow\">SELECTED EXPERIMENTS \/ CREATIVE CODE IN THE BROWSER<\/p><h1>Ideas you can<br><em>actually play with.<\/em><\/h1><p class=\"lede\">A selection of studio art projects exploring interaction, generative systems, and moving images. These are working experiments\u2014not mockups. Open one and see what the browser can do.<\/p><div class=\"project-index\"><a href=\"#intention\">01 \/ Intention \u2193<\/a><a href=\"#memescapes\">02 \/ Memescapes \u2193<\/a><a href=\"#patterns\">03 \/ Pattern studies \u2193<\/a><\/div><\/section>\n<section class=\"wrap work-studies\"><article class=\"work-study\" id=\"intention\"><div class=\"study-top\"><div><p class=\"eyebrow\">01 \/ INTERACTION &#038; DISCOVERY<\/p><h2>Intention<\/h2><\/div><div class=\"skill-tags\"><span>Interactive typography<\/span><span>Animation<\/span><span>Visual storytelling<\/span><\/div><\/div><div class=\"live-preview\" data-experiment=\"intention\"><img decoding=\"async\" src=\"{{assets}}projects\/intention.webp\" width=\"1280\" height=\"720\" alt=\"Intention: a dense field of pixel-like glyphs with a message revealed in the center.\" loading=\"lazy\"><div class=\"live-slot\"><\/div><div class=\"preview-bar\"><span class=\"preview-status\" role=\"status\">Still from the live experiment<\/span><button class=\"button\" type=\"button\" data-load-experiment=\"intention\">Load live experiment \u2197<\/button><button class=\"button\" type=\"button\" data-stop-experiment=\"intention\" hidden>Stop experiment \u00d7<\/button><\/div><\/div><div class=\"study-notes\"><div><h3>The experiment<\/h3><p>A field of symbols turns into a message about attention and intention. The shifting surface invites you to look closer and discover what\u2019s hiding in the noise.<\/p><\/div><div><h3>What it demonstrates<\/h3><p>Interaction as storytelling: using change, timing, and a visual reveal to make an idea memorable. That thinking can inform an expressive landing page or an interactive explanation.<\/p><\/div><div><h3>Try it<\/h3><p>Load the piece, then move your pointer or tap within the artwork. Open the full experience for more room to explore.<\/p><a class=\"text-link\" href=\"https:\/\/art.stustustudio.com\/intention\/\" target=\"_blank\" rel=\"noopener noreferrer\">Open full experience \u2197<\/a><\/div><\/div><\/article>\n<article class=\"work-study\" id=\"memescapes\"><div class=\"study-top\"><div><p class=\"eyebrow\">02 \/ SPATIAL &#038; GENERATIVE EXPERIENCES<\/p><h2>Memescapes:<br>Ode to 6529<\/h2><\/div><div class=\"skill-tags\"><span>Generative composition<\/span><span>Spatial interaction<\/span><span>Theme controls<\/span><\/div><\/div><div class=\"live-preview\" data-experiment=\"memescapes\"><img decoding=\"async\" src=\"{{assets}}projects\/memescapes.webp\" width=\"1280\" height=\"720\" alt=\"Memescapes: floating artwork, typography, and layered geometry in a generative three-dimensional scene.\" loading=\"lazy\"><div class=\"live-slot\"><\/div><div class=\"preview-bar\"><span class=\"preview-status\" role=\"status\">One captured variation; live output varies<\/span><button class=\"button\" type=\"button\" data-load-experiment=\"memescapes\">Load live experiment \u2197<\/button><button class=\"button\" type=\"button\" data-stop-experiment=\"memescapes\" hidden>Stop experiment \u00d7<\/button><\/div><\/div><div class=\"study-notes\"><div><h3>The experiment<\/h3><p>An animated, CRT-inspired metaverse cityscape built around CC0 assets from the 6529 ecosystem. A generative composition brings artwork, geometry, and atmosphere into one explorable space.<\/p><\/div><div><h3>What it demonstrates<\/h3><p>A browser experience with depth, variation, and controls. The relevant skills are organizing a complex visual scene and letting visitors change how they experience it.<\/p><\/div><div><h3>Try it<\/h3><p>Click the artwork to focus it. Space resets rotation; P cycles themes; R regenerates; I toggles information. On touch screens, try a two-finger tap for themes or a double tap for information.<\/p><a class=\"text-link\" href=\"https:\/\/art.stustustudio.com\/6529\/\" target=\"_blank\" rel=\"noopener noreferrer\">Open full experience \u2197<\/a><a class=\"text-link project-source\" href=\"https:\/\/art.stustustudio.com\/memescapes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Read the project story \u2197<\/a><\/div><\/div><\/article>\n<article class=\"work-study\" id=\"patterns\"><div class=\"study-top\"><div><p class=\"eyebrow\">03 \/ RULES, RANDOMNESS &#038; VISUAL IDENTITY<\/p><h2>Trapper Keepers<br>&#038; Bowling Alley Carpets<\/h2><\/div><div class=\"skill-tags\"><span>p5.js<\/span><span>Generative patterns<\/span><span>Color systems<\/span><\/div><\/div><div class=\"pattern-study\"><a href=\"https:\/\/art.stustustudio.com\/trapper-keepers-and-bowling-alley-carpets\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"{{assets}}projects\/pattern.webp\" width=\"1000\" height=\"1000\" alt=\"A blue generative pattern with layered angular lines, small triangles, and a dense central structure.\" loading=\"lazy\"><\/a><div><h3>A system, not a single image.<\/h3><p>A generative art collection created with p5.js, beginning as a study in complex patterned shirts and growing into a series of expressive compositions.<\/p><p>The web skill on show is procedural design: defining a set of rules that creates variation while retaining a recognizable visual language. It\u2019s an approach that can support distinctive backgrounds, brand systems, and exploratory interfaces.<\/p><a class=\"button\" href=\"https:\/\/art.stustustudio.com\/trapper-keepers-and-bowling-alley-carpets\/\" target=\"_blank\" rel=\"noopener noreferrer\">Explore the collection <span>\u2197<\/span><\/a><\/div><\/div><\/article><\/section>\n<section class=\"wrap callout small\"><p class=\"eyebrow\">FROM EXPERIMENT TO PURPOSE<\/p><h2>The technique is only<br>the starting point.<\/h2><p>Your site may need an immersive story\u2014or simply a clear, beautifully organized page. The useful part is knowing when an interaction helps, and when to let the content speak.<\/p><div class=\"actions\"><a class=\"button\" href=\"{{start}}\">Explore an idea for your site <span>\u2197<\/span><\/a><a class=\"text-link\" href=\"https:\/\/art.stustustudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visit the full art archive \u2197<\/a><\/div><\/section>\n\n","protected":false},"excerpt":{"rendered":"<p>SELECTED EXPERIMENTS \/ CREATIVE CODE IN THE BROWSER Ideas you canactually play with. A selection of studio art projects exploring interaction, generative systems, and moving images. These are working experiments\u2014not mockups. Open one and see what the browser can do. 01 \/ Intention \u219302 \/ Memescapes \u219303 \/ Pattern studies \u2193 01 \/ INTERACTION &#038; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-324","page","type-page","status-publish","hentry"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/pages\/324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=324"}],"version-history":[{"count":0,"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=\/wp\/v2\/pages\/324\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdesign.stustustudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}