{"id":5685,"date":"2023-12-26T14:04:13","date_gmt":"2023-12-26T14:04:13","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=5685"},"modified":"2024-04-22T23:06:51","modified_gmt":"2024-04-22T23:06:51","slug":"reanimate","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/","title":{"rendered":"(re)Animate"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/artmachine\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/artmachine\/\">artMachine<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"370\" height=\"370\" data-attachment-id=\"3877\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/artmachine\/duchamp_anemic\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/duchamp_anemic.gif\" data-orig-size=\"370,370\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"duchamp_anemic\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/duchamp_anemic.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/11\/duchamp_anemic.gif\" alt=\"\" class=\"wp-image-3877\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>(re)Animate<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f10b68a2263\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f10b68a2263\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#reAnimate_creating_a_virtual_Art_Machine\" >(re)Animate: creating a virtual Art Machine<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Beginnings\" >Beginnings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Contemporary_works\" >Contemporary works<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Interactivity\" >Interactivity<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#The_Infinitely_Indestructible_Object_a_case_study\" >The Infinitely Indestructible Object: a case study<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Analyzing_the_Object\" >Analyzing the Object<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Questions\" >Questions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Setting_Registration_vs_Transformation\" >Setting Registration vs Transformation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Analyzing_the_code\" >Analyzing the code<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#JS_manray_HTML5_Canvasfla_Scene_1_Frame_1_actions_layer\" >JS: manray_HTML5 Canvas.fla Scene 1, Frame 1, actions layer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#The_fix_for_Custom_Mouse_Cursor\" >The fix for Custom Mouse Cursor<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Your_turn\" >Your turn<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#A_recommended_workflow\" >A recommended workflow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Publish\" >Publish<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Comic_relief\" >Comic relief<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#Hall_of_Fame\" >Hall of Fame<\/a><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/04\/manray.zip\">Download the .zip file &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"reAnimate_creating_a_virtual_Art_Machine\"><\/span>(re)Animate: creating a virtual Art Machine<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Beginnings\"><\/span>Beginnings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>The machine&nbsp;is a way of establishing your distance from the object.<\/em><\/p>\n<cite>\u2014 Marcel Duchamp, quoted in <strong>CAD Text &#8211;  Computer Aided Duchamp<\/strong><\/cite><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"position: relative; aspect-ratio: 4 \/ 3; overflow: hidden;\">\n<iframe style=\"border: 0; position: absolute; top: 0; left: -2px; width: 100%; height: 100%;\" src=\"https:\/\/archive.org\/embed\/anemicCinema1926\" \nframeborder=\"0\" allowfullscreen=\"true\"><\/iframe>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Marcel Duchamp, An\u00e9mic Cin\u00e9ma, 1926<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Largely a phenomenon starting in the 20th Century, works of art that use either a machine aesthetic or machine strategy have by now become a mainstay of art practice. Alexander Calder&#8217;s <strong>Cirque Calder <\/strong>bridges the gap between so-called &#8220;fine art&#8221; sculpture and &#8220;low-brow&#8221; puppet entertainment. More episodic than narrative, <strong>Cirque<\/strong> elements became the physics laboratory for a practice that went on to develop what Marcel Duchamp named <strong>mobiles<\/strong>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div style=\"position: relative; aspect-ratio: 4 \/ 3; overflow: hidden;\">\n<iframe style=\"border: 0; position: absolute; top: 0; left: -2px; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/t6jwnu8Izy0?rel=0&#038;version=3&#038;autohide=1&#038;showinfo=0&#038;controls=0&#038;modestbranding=1\" \nframeborder=\"0\" allowfullscreen=\"true\"><\/iframe>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Calder developed the <strong>Cirque<\/strong> in Paris. At that time, the city was filled with avant-garde artists who had toyed with machines, figuratively and literally. Duchamp was making the transition from mechanical-erotic metaphor embodied by such objects as the <strong><a href=\"https:\/\/web.archive.org\/web\/19970726133247\/http:\/\/www.p22.com:80\/projects\/grinder.html\" target=\"_blank\" rel=\"noreferrer noopener\">Chocolate Grinder<\/a><\/strong> (seen below in an expression which later showed up in <strong>The Large Glass<\/strong>), to the pure mechanical action of the <strong>Rotoreliefs<\/strong>. Man Ray was pushing beyond photography toward the <strong>Object to Be Destroyed (a.k.a. Indestructible Object)<\/strong> that we&#8217;ll explore in depth in our case study. Russian Constructivist Naum Gabo was transforming line into volume with such works as his <strong>Standing Wave<\/strong>. These mechanical works laid the foundation for the later self-destructing art machines, such as <strong>Homage to New York<\/strong> by Jean Tinguely and the installation documented in <strong><a href=\"http:\/\/homevideo.icarusfilms.com\/cat97\/t-z\/the_way_.html\" target=\"_blank\" rel=\"noreferrer noopener\">The Way Things Go<\/a><\/strong> by Fischli and Weiss.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"816\" height=\"1026\" data-attachment-id=\"7912\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/chapter-17-metaphors-to-performance\/duchamp_chocolate_grinder_5399237398_o\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o.jpg\" data-orig-size=\"816,1026\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"duchamp_chocolate_grinder_5399237398_o\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o-814x1024.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o.jpg\" alt=\"\" class=\"wp-image-7912\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o.jpg 816w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o-239x300.jpg 239w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o-814x1024.jpg 814w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o-768x966.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/duchamp_chocolate_grinder_5399237398_o-300x377.jpg 300w\" sizes=\"auto, (max-width: 816px) 100vw, 816px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Marcel Duchamp, <strong>Broyeuse de Chocolat<\/strong>, 1914. A study for an entity that later plays a role in <strong>The Large Glass<\/strong>. The French phrase &#8220;grinding one&#8217;s own chocolate&#8221; is a euphemism for self-gratification&#8230; a tragicomic condition that is ever-present in Duchamp&#8217;s realm of the Bachelors.<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"position: relative; aspect-ratio: 4 \/ 3; overflow: hidden;\">\n<iframe style=\"border: 0; position: absolute; top: 0; left: -4px; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/GXrRC3pfLnE?rel=0&#038;version=3&#038;autohide=1&#038;showinfo=0&#038;controls=0&#038;modestbranding=1\" \nframeborder=\"0\" allowfullscreen=\"true\"><\/iframe>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Peter Fischli and David Weiss, <strong>The Way Things Go<\/strong>, 1987. Excerpt showing about 10 percent of the action. Inspired as much by Rube Goldberg as it is by fellow Swiss machinist Tinguely, possibly the largest art machine ever constructed (or destructed).<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Contemporary_works\"><\/span>Contemporary works<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Such is the family tree for contemporary art machines like those of Joe Holliday and Martin Creed, both seen below. For an eye-opening collection of more art machines visit the <strong><a href=\"http:\/\/artmachines.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Art Machines<\/a><\/strong> blog.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"681\" height=\"1024\" data-attachment-id=\"7919\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/chapter-17-metaphors-to-performance\/joe_holliday_basil_bisulfate_5390847919_o\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/joe_holliday_basil_bisulfate_5390847919_o.jpg\" data-orig-size=\"681,1024\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"joe_holliday_basil_bisulfate_5390847919_o\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/joe_holliday_basil_bisulfate_5390847919_o.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/joe_holliday_basil_bisulfate_5390847919_o.jpg\" alt=\"\" class=\"wp-image-7919\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/joe_holliday_basil_bisulfate_5390847919_o.jpg 681w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/joe_holliday_basil_bisulfate_5390847919_o-200x300.jpg 200w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/joe_holliday_basil_bisulfate_5390847919_o-300x451.jpg 300w\" sizes=\"auto, (max-width: 681px) 100vw, 681px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Joe Holliday, <strong>Basil Bisulfate<\/strong>, 2010. Calder meets Tim Burton in this &#8220;transdimensional golem.&#8221;<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1195\" height=\"800\" data-attachment-id=\"7920\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/chapter-17-metaphors-to-performance\/creed_work_no_189_5399237240_o\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o.jpg\" data-orig-size=\"1195,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"creed_work_no_189_5399237240_o\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o-1024x686.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o.jpg\" alt=\"\" class=\"wp-image-7920\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o.jpg 1195w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o-300x201.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o-1024x686.jpg 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2024\/03\/creed_work_no_189_5399237240_o-768x514.jpg 768w\" sizes=\"auto, (max-width: 1195px) 100vw, 1195px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Martin Creed, Work No. 189, 1998. Order and chaos clash in this homage to Man Ray.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Interactivity\"><\/span>Interactivity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>The creative act is not performed by the artist alone; the spectator brings the work in contact with the external world by deciphering and interpreting its inner qualifications and thus adds his contribution to the creative act.<\/em><\/p>\n<cite>\u2014&nbsp;Marcel Duchamp, from <strong>The Creative Act<\/strong> lecture, April 1957.<\/cite><\/blockquote>\n\n\n\n<p>No artist was more profoundly in tune with the machine than <a href=\"http:\/\/en.wikipedia.org\/wiki\/Jean_Tinguely\" target=\"_blank\" rel=\"noreferrer noopener\">Jean Tinguely<\/a>. His kinetic, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Rube_Goldberg\" target=\"_blank\" rel=\"noreferrer noopener\">Rube Goldberg<\/a>-like sculptures, dubbed <a href=\"http:\/\/en.wikipedia.org\/wiki\/Metamechanics\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>metamatics<\/strong><\/a>, both celebrated the nature of mechanical process and satirized the mind-numbing qualities of materialistic culture. Many of his Dada creations, such as <strong>Homage to New York<\/strong>, were bent on self-destruction, but earlier on he created drawing machines that take Duchamp&#8217;s idea of the artist-spectator relationship to an extreme. When activated by a spectator, the sculpture  pumps out a drawing. This breaks one of the most sanctified assumptions of Western art: questioning the authority of the artist as generator.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"403\" data-attachment-id=\"5692\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/tinguely1-1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1-1.jpg\" data-orig-size=\"500,403\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Tinguely1-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1-1.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1-1.jpg\" alt=\"\" class=\"wp-image-5692\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1-1.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1-1-300x242.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Jean Tinguely, <strong>M\u00e9ta-Matic No. 6<\/strong>, 1959<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"500\" data-attachment-id=\"5693\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/tinguely2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely2.jpg\" data-orig-size=\"326,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Tinguely2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely2.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely2.jpg\" alt=\"\" class=\"wp-image-5693\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely2.jpg 326w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely2-196x300.jpg 196w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely2-300x460.jpg 300w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Jean Tinguely, <strong>Homage to New York<\/strong>, 1960<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>This questioning continues on the Internet, itself a ginormous, self-inflating art machine. Take a look at <strong>JacksonPollock.org<\/strong> by Miltos Manetas, a work recently rebooted in HTML5\/JS.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><a href=\"http:\/\/www.jacksonpollock.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Visit JacksonPollock.org &gt;<\/em><\/a><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><a href=\"https:\/\/mpetroff.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">Matthew Petroff<\/a> developed&nbsp;another Pollock generator, with the open source alternative:&nbsp;<a href=\"https:\/\/processing.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Processing<\/a>. Which do you prefer?<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><a href=\"https:\/\/mpetroff.net\/files\/processing\/backgroundgenerator\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Visit A Jackson Pollock-esque <\/em><\/strong><br><strong><em>Art Generator &gt;<\/em><\/strong><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Meanwhile, Cornelia Solfrank created a Tinguely-esque experience with her&nbsp;<strong>Net Art Generator<\/strong>, which creates compilations generated by visitor&#8217;s search criteria.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><a href=\"http:\/\/net.art-generator.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Visit Net Art Generator &gt;<\/em><\/a><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We don&#8217;t think of this as the Machine Age any more, but the Digital Age is really just a specific extension of machine capabilities. Our machines have grown more plentiful, and more invisible: nanotechnologies have made them smaller, digital technologies have made them &#8220;smarter.&#8221; <a href=\"http:\/\/en.wikipedia.org\/wiki\/Wafaa_Bilal\" target=\"_blank\" rel=\"noreferrer noopener\">Wafaa Bilal<\/a>, famous for his webcam performance works, merged the technological and the biological when he had a webcam surgically implanted into the back of his head. <strong>The 3rd I<\/strong> was a year-long performance started on 15 December 2010. The images from the camera were fed hourly to the <strong>Mathaf: Arab Museum of Modern Art<\/strong> in Qatar, and to <strong>http:\/\/www.3rdi.me<\/strong> as an archive.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><a href=\"http:\/\/www.3rdi.me\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Visit 3rdi.me &gt;<\/em><\/a><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Infinitely_Indestructible_Object_a_case_study\"><\/span>The Infinitely Indestructible Object: a case study<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Your project will contain a narrative that is completely unique to you. However, it&#8217;s behavior will emulate the action seen in the <strong>Infinitely Indestructible Object<\/strong> project by williamCromar, described in depth below.&nbsp;This interactive stops when we hit the eye with the hammer. It starts when we touch the metronome key. Built in Flash\/ActionScript3 in 2010, the SWF original was exported as an HTML5 iteration using Google Swiffy in 2013. With the obsolescence of Flash and the demise of Swiffy, a new third iteration, <strong>Infinitely Indestructible Object 2018<\/strong>, was built from the ground up for HTML\/CSS\/JS in Animate CC. It still functions as of this writing (in 2023).<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>These three iterations mirror the fate of the work that inspired it: a work by Man Ray which itself was a series of iterations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Object to Be Destroyed<\/strong>, 1923 original<\/li>\n\n\n\n<li><strong>Object of Destruction<\/strong>, 1932 copy<\/li>\n\n\n\n<li><strong>Indestructible Object<\/strong>, 1958 edition<\/li>\n<\/ul>\n\n\n\n<p>Although Man Ray&#8217;s concept remains indestructible, we come to understand that both physical and digital expressions are indeed rather ephemeral!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"369\" data-attachment-id=\"5705\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/objectdestroyed\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Objectdestroyed.jpg\" data-orig-size=\"270,369\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Objectdestroyed\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Objectdestroyed.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Objectdestroyed.jpg\" alt=\"\" class=\"wp-image-5705\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Objectdestroyed.jpg 270w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Objectdestroyed-220x300.jpg 220w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Man Ray, <strong>Object to Be Destroyed<\/strong>, 1964 replica of 1923 original. From Wikimedia Commons.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Analyzing_the_Object\"><\/span>Analyzing the Object<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>At the top of this wiki title, you can find and download the working files to analyze.<\/p>\n\n\n\n<p>The&nbsp;<strong>Infinitely Indestructible Object&nbsp;<\/strong>Animate CC project, based on a work by Man Ray as described above, allows you to see <strong><a href=\"http:\/\/en.wikipedia.org\/wiki\/Object_to_Be_Destroyed\" target=\"_blank\" rel=\"noreferrer noopener\">Object<\/a><\/strong> as the&nbsp;<strong>interactive<\/strong>,&nbsp;<strong>animated&nbsp;<\/strong>object he originally intended. Accompanying the original&nbsp;<strong>Object<\/strong>&nbsp;were Man Ray&#8217;s instructions to the audience:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Cut out the eye from a photograph of one who has been loved but is seen no more. Attach the eye to the pendulum of a metronome and regulate the weight to suit the tempo desired. Keep going to the limit of endurance. With a hammer well-aimed, try to destroy the whole at a single blow.<\/em><\/p>\n<cite>\u2014 Man Ray, from the work as exhibited at MoMA<\/cite><\/blockquote>\n\n\n\n<p>Physically touching work in the museum is certainly frowned upon, much less hitting it with hammers, and in places where you can see copies of&nbsp;<strong>Object<\/strong><em>,<\/em>&nbsp;it&#8217;s under glass and never in motion. The anti-art Dadaist Man Ray would certainly find it ironic that his work is treated like &#8220;art,&#8221; in the &#8220;do-not-touch&#8221; context of the word.<\/p>\n\n\n\n<p>This simple project takes the on-off logic of the <a href=\"https:\/\/williamcromar.com\/newmediawiki\/interactivity\/\">Interactivity<\/a> exercise and applies it to a narrative, with a couple of twists:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One, we use JS to replace the cursor with a hammer, in honor of Man Ray&#8217;s instructions.<\/li>\n\n\n\n<li>Two, we decouple the on-off function from buttons in the interface and integrate it right into the object itself: hit the eye with the hammer, and the swinging stops. Hit the wind-up key, and it starts up again.<\/li>\n<\/ul>\n\n\n\n<div style=\"width: 200%; display: inline-block; position: relative; overflow: hidden; margin-left: auto; margin-right: auto;\">\n<div style=\"position: absolute; top: 0; left: 0; \n right: 0;\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/manray\/manray.html\" width=\"400\" height=\"400\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" scrolling=\"no\" \n mozallowfullscreen=\"true\" frameborder=\"0\" style=\"width:100%; height:800px;\n-moz-transform: scale(0.5, 0.5); \n-webkit-transform: scale(0.5, 0.5); \n-o-transform: scale(0.5, 0.5);\n-ms-transform: scale(0.5, 0.5);\ntransform: scale(0.5, 0.5); \n-moz-transform-origin: top left;\n-webkit-transform-origin: top left;\n-o-transform-origin: top left;\n-ms-transform-origin: top left;\ntransform-origin: top left;\noverflow: hidden;\">\n<p>Your browser does not support iframes.<\/p>\n<\/iframe>\n  <\/div>\n  <div style=\"padding-top: 400px;\">     <\/div>\n<\/div>\n\n\n\n<p class=\"has-text-align-center\"><em>Hit the eye with the hammer to stop.  Hit the key to start.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Questions\"><\/span>Questions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Analyze the project by opening the FLA file in Animate and asking some questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Where did we write the JavaScript?<\/li>\n\n\n\n<li>What three things does the JS allow?<\/li>\n\n\n\n<li>No frame number occupies the ( ) in the start and stop functions. Why? What does this allow?<\/li>\n\n\n\n<li>Why is the key a movie clip and not a button?<\/li>\n\n\n\n<li>Note the animation is not on the Scene 1 timeline&#8230; where is it, and why?<\/li>\n\n\n\n<li>Why is the animation 48 frames long, and what do the keyframes do?<\/li>\n\n\n\n<li>Why is&nbsp;<em>animation_mc<\/em>&nbsp;an instance of&nbsp;<em>animationMc<\/em>, which is in turn an instance of e<em>yeMc<\/em>?<\/li>\n\n\n\n<li>How did we achieve rotation for the eye element (hint: look at registration origin)?<\/li>\n\n\n\n<li>How did we arrange the layers and why?<\/li>\n\n\n\n<li>How did we place the elements on the layers and why?<\/li>\n<\/ul>\n\n\n\n<p>A huge trick here is the placement of the origin on the hammer and the base of the eye&#8217;s pendulum stick. We place this origin so that it&#8217;s intuitive to &#8220;hit&#8221; with the hammer&#8217;s head, since the hammer is so much larger than a normal cursor. And we place the origin of the pendulum stick at the base, so that it rotates correctly. We do this by understanding the difference between the <strong>Registration<\/strong> <strong>point<\/strong> \u2014 the little <strong>+<\/strong> sign \u2014 and the <strong>Transformation<\/strong> <strong>point<\/strong> \u2014 a little <strong>o<\/strong> sign.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_Registration_vs_Transformation\"><\/span>Setting Registration vs Transformation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The <strong>Transformation<\/strong> point belongs to the Symbol. To set the location of the Transformation point, open the Symbol and, with the object selected, go to the menu and activate <strong>Modify &gt; Transform  &gt; Free Transform<\/strong>. When active, you&#8217;ll see a check mark next to it. Select the <strong>o<\/strong> and move it until satisfied with its position.<\/p>\n\n\n\n<p>The <strong>Registration<\/strong> point belongs to the coordinate system of the Stage. To set the Registration point, you move the object relative to it. <\/p>\n\n\n\n<p>In the case of the eye pendulum, the relationship of these two points can be somewhat arbitrary. Here, the Registration and Transformation points are non-congruent. To make the animation happen in <strong>animationMc<\/strong>, the Transformation point alone controls the <strong>Transform &gt; Scale and Rotate<\/strong> that is applied at each keyframe.<\/p>\n\n\n\n<p>On the other hand, in the case of the hammer, it&#8217;s important for the Registration and Transformation points to be congruent. This is because the hammer replaces the cursor, and the Registration point becomes the cursor&#8217;s &#8220;origin point.&#8221;<\/p>\n\n\n\n<p>As your work becomes more complex and you create <strong>rigs<\/strong>: Symbols made up of multiple objects in a hierarchy. It&#8217;s important to create a proper set of Transformation points for a rig to be successful \u2014 but that&#8217;s another topic for a future project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Analyzing_the_code\"><\/span>Analyzing the code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JS_manray_HTML5_Canvasfla_Scene_1_Frame_1_actions_layer\"><\/span>JS: manray_HTML5 Canvas.fla Scene 1, Frame 1, actions layer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/Hammer Mouse Cursor - must change standard Custom Mouse Cursor code snippet to include &quot;\/ stage.scaleX&quot; and &quot;\/ stage.scaleY&quot; to keep image aligned to cursor. Explainer at https:\/\/stackoverflow.com\/questions\/42258690\/adobe-animate-cc-javascript-mouse-follower-is-not-aligned-when-responsive-is-ac\/42260023#42260023\n\nstage.canvas.style.cursor = &quot;none&quot;;\nthis.hammer_mc.mouseEnabled = false;\nthis.addEventListener(&quot;tick&quot;, fl_CustomMouseCursor.bind(this));\n\nfunction fl_CustomMouseCursor() \n{\n     this.hammer_mc.x = stage.mouseX \/ stage.scaleX;\n     this.hammer_mc.y = stage.mouseY \/ stage.scaleY;\n}\n\n\/\/Hit Eye with Hammer to stop\n\nthis.animation_mc.addEventListener(&quot;click&quot;, fl_ClickToGoToAndStopAtFrame.bind(this));\n\nfunction fl_ClickToGoToAndStopAtFrame()\n {\n     this.animation_mc.stop();\n}\n\n\/\/Tap Key with Hammer to start\n\nthis.key_mc.addEventListener(&quot;click&quot;, fl_ClickToGoToAndPlayFromFrame.bind(this));\n\nfunction fl_ClickToGoToAndPlayFromFrame()\n{\n     this.animation_mc.play();\n}\n<\/pre><\/div>\n\n\n<p>This code is a pretty simple affair of assigning code snippets to stage objects \u2014 except for one bug that emerged in late 2018. I&#8217;m not sure what changed here, but I suspect it was a fairly global revision that changed the way browsers interpret the standard Custom Mouse Cursor code. At that point in history, browsers may have been programmed to assume your interactive will always be encountered in responsive contexts (which, by now, is virtually every web page).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_fix_for_Custom_Mouse_Cursor\"><\/span>The fix for Custom Mouse Cursor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The fix is simple but not intuitive: you must divide the standard Custom Mouse Cursor code snippet by the scale of the stage. So we include &#8220;\/ stage.scaleX&#8221; and &#8220;\/ stage.scaleY&#8221; to keep the head of the hammer image aligned to cursor. This is commented at the start of the code, and the explainer can be found at <a href=\"https:\/\/stackoverflow.com\/questions\/42258690\/adobe-animate-cc-javascript-mouse-follower-is-not-aligned-when-responsive-is-ac\/42260023#42260023\" target=\"_blank\" rel=\"noreferrer noopener\">this StackOverflow discussion<\/a>.<\/p>\n\n\n\n<p>This, by the way, is a great illustration of debugging: it&#8217;s never-ending! The standard Custom Mouse Cursor code worked in early 2018, but broke later in the year. This goes to show, <em>even after you have created and deployed a bullet-proof code solution<\/em>, web standards and browser updates that you cannot control will break it. I had to go searching for a non-intuitive fix, which I did by typing keywords &#8220;cursor code snippet mouse not aligned javascript stage.mousex&#8221; into a search engine (including a small snatch of the actual code is helpful). I found the solution linked above at&nbsp;<a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stack Overflow<\/a>, one of the many chatrooms inhabited by web developers.<\/p>\n\n\n\n<p>It&#8217;s also an example of why you can&#8217;t simply rely on Code Snippets alone to carry your weight. I needed to know enough about script-writing that I could modify the Custom Mouse Cursor snippet to meet the new browser standard. <em>Update in 2023: it should be noted that the Custom Mouse Cursor STILL has NOT incorporated this fix, five years later!<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Your_turn\"><\/span>Your turn<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This project will involve the development of an interactive art machine. The machine can be one from history (like the <strong>Chocolate Grinder<\/strong> at right, with proper citation, naturally), or it can be one of your own invention. Important to keep the machine simple enough that it&#8217;s not frustrating but complex enough that you demonstrate facility with the tools you&#8217;ve learned. Nevertheless, keeping it simple does not mean boring! You can see there are a lot of effects you can create&#8230; let your narrative determine the RIGHT effects to use.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"240\" data-attachment-id=\"5719\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/chocgrinder2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/chocgrinder2.jpg\" data-orig-size=\"320,240\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chocgrinder2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/chocgrinder2.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/chocgrinder2.jpg\" alt=\"\" class=\"wp-image-5719\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/chocgrinder2.jpg 320w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/chocgrinder2-300x225.jpg 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Mark Jones et. al., still from an animation for <strong>Variations on The Large Glass&#8217;s Chocolate Grinder<\/strong>, 1999.&nbsp;<strong><a href=\"http:\/\/toutfait.com\/variations-on-the-large-glasss-chocolate-grinder\/\" target=\"_blank\" rel=\"noreferrer noopener\">See video here &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_recommended_workflow\"><\/span>A recommended workflow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In your sketchbook, consider possible narratives that explore mechanics and interaction, and how these might best be developed.<\/li>\n\n\n\n<li>If necessary, create bitmap assets in Photoshop to import to Animate. Think about what moves, what&#8217;s static, and the development of layers.<\/li>\n\n\n\n<li>Proceed with the creation of the Animate file, which upon completion you export into a .js\/.html file pair.<\/li>\n\n\n\n<li>Along with referencing back to our tutorials, use these resources to help you work from the ground up:\n<ul class=\"wp-block-list\">\n<li>The Code Snippet library in Animate provides many basic JavaScript functions, commented to help you.<\/li>\n\n\n\n<li><a href=\"http:\/\/www.createjs.com\/easeljs\">http:\/\/www.createjs.com\/easeljs<\/a> EaselJS, part of the CreateJS family of libaries, is written with Animate developers in mind.\n<ul class=\"wp-block-list\">\n<li>There is an <a href=\"http:\/\/www.createjs.com\/docs\/easeljs\/modules\/EaselJS.html\" target=\"_blank\" rel=\"noreferrer noopener\">API library here \u00bb<\/a><\/li>\n\n\n\n<li>There are <a href=\"http:\/\/www.createjs.com\/demos\/easeljs\/spritesheet\" target=\"_blank\" rel=\"noreferrer noopener\">live edit examples here \u00bb<\/a><\/li>\n\n\n\n<li>Downloads are found at <a href=\"http:\/\/www.createjs.com\/downloads\">http:\/\/www.createjs.com\/downloads<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Animators will also be very interested in the Tween JS materials at <a href=\"http:\/\/www.createjs.com\/tweenjs\">http:\/\/www.createjs.com\/tweenjs<\/a><\/li>\n\n\n\n<li>CreateJS at GitHub  <a href=\"https:\/\/github.com\/CreateJS\">https:\/\/github.com\/CreateJS<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>If any of these don&#8217;t yield the goods, Google-search for code you might be able to adapt to your work. Example: type &#8220;animate cc buttons&#8221; into a Google search and you&#8217;ll see dozens of sites with tutorials, downloadable files, code you can adapt and modify. My go-to sites for inspiration include  <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CodePen<\/a>, <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>, <a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">StackOverflow<\/a>,  <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">JSFiddle<\/a> and many other social spaces for front-end developers. There is a culture of sharing among developers on the web. Take advantage of it \u2014 and as you get good at this, contribute to it later on!<\/li>\n<\/ul>\n\n\n\n<p><em>Jargon Alert:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>API Application Programming Interface (an adopted set of standards and protocols for building apps)<\/em><\/li>\n\n\n\n<li><em>DOM Document Object Model (looks like a node tree in Maya material editing! Shows hierarchic relationships.)<\/em><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Publish\"><\/span>Publish<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p> After you create your file, upload to your server and create an embed or iframe link through your website and blog. Remember to use good folder hierarchy and other good digital discipline such as you have learned in the previous projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comic_relief\"><\/span>Comic relief<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>There are times when you&#8217;ll feel like it&#8217;s&nbsp;<strong>animator vs. animation<\/strong>. When you need a break, enjoy this classic work by Alan Becker. The original, by the way, was a Flash movie hosted at Deviant Art. The one you see here is a YouTube preservation effort by the author.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div style=\"position: relative; aspect-ratio: 4 \/ 3; overflow: hidden;\">\n<iframe style=\"border: 0; position: absolute; top: 0; left: -2px; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/Qb1VvUf21L4?si=LbWNjRPDPUOQdKR9\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hall_of_Fame\"><\/span>Hall of Fame<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<iframe style=\"aspect-ratio: 3 \/ 2; height: auto; width: 100%;\" src=\"https:\/\/williamcromar.com\/student_samples\/animate_alpha\/pro3.html\" style=\"border:0px #ffffff none;\" name=\"animate\" scrolling=\"no\" frameborder=\"0\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/williamcromar.com\/student_samples\/animate_alpha\/pro3.html\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Sisyphus<\/strong>: open in a new window &gt;<\/em><\/a><\/p>\n\n\n\n<iframe style=\"aspect-ratio: 1 \/ 1; height: auto; width: 100%;\" src=\"https:\/\/williamcromar.com\/student_samples\/animate_dan\/manray.html\" style=\"border:1px #cccccc solid;\" name=\"animate2\" scrolling=\"no\" frameborder=\"0\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/williamcromar.com\/student_samples\/animate_dan\/manray.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Ouch<\/strong>: open in a new window &gt;<\/a><\/em><\/p>\n\n\n\n<div style=\"height: 400px; width: 550px; display: block; margin: auto;\">\n<iframe loading=\"lazy\" width=\"550\" height=\"400\" \n src=\"https:\/\/williamcromar.com\/student_samples\/interactive_samples\/whackamole\/animate.html\" style=\"border:0px #ffffff none;\" name=\"animate3\" scrolling=\"no\" frameborder=\"0\" allowfullscreen><\/iframe><\/div>\n\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/williamcromar.com\/student_samples\/interactive_samples\/whackamole\/animate.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Whackamole<\/strong>: open in a new window &gt;<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media artMachine (re)Animate Download the .zip file &gt; (re)Animate: creating a virtual Art Machine Beginnings The machine&nbsp;is a way of establishing your distance from the object. Marcel Duchamp, An\u00e9mic Cin\u00e9ma, 1926 Largely a phenomenon starting in the 20th Century, works of art that use either a machine aesthetic or machine strategy have by now&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,12],"tags":[],"class_list":["post-5685","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-artwork"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>(re)Animate - newMediaWiki<\/title>\n<meta name=\"description\" content=\"(re)Animate: expanding on our exercise stop-start logic, develop a narrative with user interactivity - the beginnings of simple game design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"(re)Animate - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"(re)Animate: expanding on our exercise stop-start logic, develop a narrative with user interactivity - the beginnings of simple game design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-26T14:04:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-22T23:06:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"(re)Animate\",\"datePublished\":\"2023-12-26T14:04:13+00:00\",\"dateModified\":\"2024-04-22T23:06:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/\"},\"wordCount\":2523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Artwork\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/\",\"name\":\"(re)Animate - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-26T14:04:13+00:00\",\"dateModified\":\"2024-04-22T23:06:51+00:00\",\"description\":\"(re)Animate: expanding on our exercise stop-start logic, develop a narrative with user interactivity - the beginnings of simple game design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/reanimate\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"(re)Animate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"(re)Animate - newMediaWiki","description":"(re)Animate: expanding on our exercise stop-start logic, develop a narrative with user interactivity - the beginnings of simple game design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/","og_locale":"en_US","og_type":"article","og_title":"(re)Animate - newMediaWiki","og_description":"(re)Animate: expanding on our exercise stop-start logic, develop a narrative with user interactivity - the beginnings of simple game design.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-26T14:04:13+00:00","article_modified_time":"2024-04-22T23:06:51+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"(re)Animate","datePublished":"2023-12-26T14:04:13+00:00","dateModified":"2024-04-22T23:06:51+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/"},"wordCount":2523,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Artwork"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/","url":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/","name":"(re)Animate - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-26T14:04:13+00:00","dateModified":"2024-04-22T23:06:51+00:00","description":"(re)Animate: expanding on our exercise stop-start logic, develop a narrative with user interactivity - the beginnings of simple game design.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/reanimate\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/reanimate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"(re)Animate"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=5685"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5685\/revisions"}],"predecessor-version":[{"id":9205,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5685\/revisions\/9205"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=5685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=5685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=5685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}