{"id":5093,"date":"2023-12-12T22:09:09","date_gmt":"2023-12-12T22:09:09","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=5093"},"modified":"2024-01-11T11:59:17","modified_gmt":"2024-01-11T11:59:17","slug":"marinettijs","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/","title":{"rendered":"marinettiJS"},"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\/concretepoetry\/\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"640\" data-attachment-id=\"146\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/concretepoetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" data-orig-size=\"617,640\" 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=\"concretePoetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" alt=\"\" class=\"wp-image-146\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg 617w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-289x300.jpg 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-300x311.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\">3 | concrete poetry<\/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-default\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" data-attachment-id=\"5107\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetti_ani_icon\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_ani_icon.gif\" data-orig-size=\"600,600\" 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=\"marinetti_ani_icon\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_ani_icon.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_ani_icon.gif\" alt=\"\" class=\"wp-image-5107\" 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>marinettiJS<\/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-69f4fc163f538\" 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-69f4fc163f538\"  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\/marinettijs\/#Motion_phenomenal_and_literal\" >Motion: phenomenal and literal<\/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\/marinettijs\/#Animation_and_interactivity\" >Animation and interactivity<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#CSS_animation_resources\" >CSS animation resources<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#JS_interactivity_resources\" >JS interactivity resources<\/a><\/li><\/ul><\/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\/marinettijs\/#Animating_Marinetti_in_CSS_and_JS\" >Animating Marinetti in CSS and JS<\/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\/marinettijs\/#Step_1_Transforms_for_body_text\" >Step 1: Transforms for body text<\/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\/marinettijs\/#Step_2_Transforms_for_headline_text\" >Step 2: Transforms for headline text<\/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\/marinettijs\/#Debugging_happens\" >Debugging happens<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#A_debugging_workflow\" >A debugging workflow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#A_debugging_mindset\" >A debugging mindset<\/a><\/li><\/ul><\/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\/marinettijs\/#Step_3_Creating_a_shaking_script_using_animation_and_AI\" >Step 3: Creating a shaking script using animation and AI<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#First-time_with_JS\" >First-time with JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#Shake_it_up\" >Shake it up<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#HTML\" >HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#CSS\" >CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#JS\" >JS<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#Step_4_Creating_a_spin_script_using_transition_and_a_helper_site\" >Step 4: Creating a spin script using transition and a helper site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#SFTP_this\" >SFTP this!<\/a><\/li><\/ul><\/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\/code_samples\/marinetti-animate23\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Marinetti Animated &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=\"Motion_phenomenal_and_literal\"><\/span>Motion: phenomenal and literal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Italian Futurists revered the dynamic sensation of speed and motion. But their work did not employ actual motion in the manner of a Jean Tinguely drawing machine sculpture or a Jenny Holzer installation \u2014 although to be fair, those artists owe a formal debt to the Futurist obsession with phenomena. <\/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=\"5114\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/tinguely1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1.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\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1.jpg\" alt=\"\" class=\"wp-image-5114\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Tinguely1-300x242.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/www.wikiart.org\/en\/jean-tinguely\/m-ta-matic-no-6-1959\" target=\"_blank\" rel=\"noreferrer noopener\">M\u00e9ta-Matic No. 6, Jean Tinguely,&nbsp;1959<\/a><\/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=\"480\" height=\"270\" data-attachment-id=\"5115\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/holzer-guggenheim\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/holzer-guggenheim.gif\" data-orig-size=\"480,270\" 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=\"holzer-guggenheim\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/holzer-guggenheim.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/holzer-guggenheim.gif\" alt=\"\" class=\"wp-image-5115\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/www.guggenheim.org\/exhibition\/jenny-holzers-for-the-guggenheim\" target=\"_blank\" rel=\"noreferrer noopener\">Jenny Holzer: For the Guggenheim,  2008<\/a><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Nevertheless, how strange indeed it was that Marinetti would devote himself to such a static medium as print:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>The program of reform Marinetti called for was in some ways more radical than the work he achieved<\/em> &#8230; <em>. Marinetti&#8217;s well-documented infatuation with the concept of a modernity defined as speed, simultaneity, and sensation &#8230; leads to a paradox of major proportions when the temporally stable, static, and resolutely referential forms of printing on the page are used to invoke the immediacy and temporally ephemeral staging of phenomenal experience.<\/em><\/p>\n<cite>Johanna Drucker, <a href=\"https:\/\/press.uchicago.edu\/ucp\/books\/book\/chicago\/V\/bo3631964.html\" target=\"_blank\" rel=\"noreferrer noopener\">The Visible Word: Experimental Typography and Modern Art, 1909-1923<\/a><\/cite><\/blockquote>\n\n\n\n<p>Or was it so strange after all? Remember Marinetti was practicing in the early 20th Century, decades before Tinguely and a century before Holzer. If he had had access to the high-lumen long-throw projector used for Holzer&#8217;s Guggenheim installation, would he have used it? This exercise assumes: Absolutely!<\/p>\n\n\n\n<p>The poem we forged in CSS from the previous exercise is filled with an implied, phenomenal motion. Marinetti compels us to imagine the VENT and SANG forms pumping like the pistons referenced in the first &#8220;line&#8221; of the text. If Marinetti had access to HTML and CSS, he would certainly have become a web designer.<\/p>\n\n\n\n<p>But web design is a stool with 3 legs, not 2. He would not have ignored the Javascript programming language that provides the web with time, motion, and interactivity. <\/p>\n\n\n\n<p>So: let&#8217;s take our forgery and make literal motion out of the implied dynamic forces present in the text!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Animation_and_interactivity\"><\/span>Animation and interactivity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In this exercise, we introduce JavaScript, or JS for short. JS is the programming language for the web. Although it has a fairly forgiving syntax (which some hardcore programmers despise!), it is fundamentally less like HTML and CSS \u2014 which are markup languages \u2014 and more like Python without the stricter syntax. It&#8217;s essentially an <a href=\"https:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming\" target=\"_blank\" rel=\"noreferrer noopener\">object-oriented programming language<\/a>, meaning it is used to manipulate modular &#8220;objects&#8221; like variables, data structures, functions, and methods. Already you might feel lost, right? Welcome to the club.<\/p>\n\n\n\n<p>For artists, it&#8217;s less critical that we know how to build a JS script from scratch such as we must with markup languages. Instead, we just need to know enough about the language to work with a script library or a code snippet. In this exercise, we&#8217;ll do just that: <a href=\"https:\/\/sourceforge.net\/software\/ai-code-generators\/integrates-with-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">we&#8217;ll even use AI to help us generate a useful script<\/a>!<\/p>\n\n\n\n<p>Animation is coded in two ways. The first kind of animation code uses HTML and CSS alone. The second kind adds JS, introducing interaction activated by the client, through input like tapping on a screen or clicking with a mouse.<\/p>\n\n\n\n<p>Animations also come in two CSS flavors: <strong>@keyframes<\/strong> and <strong>transitions<\/strong>. If you come to CSS from a traditional video or animation time-and-motion praxis, <strong>@keyframes<\/strong> can be less intuitively understood than <strong>transitions<\/strong>. Strictly speaking, CSS keyframing is just a loose analogy to actual keyframing. It&#8217;s confusing, but worth noting, that @keyframes does NOT determine the duration, but merely how a duration called as a property in a CSS stack is divided up, usually (but not always) by percentages.<\/p>\n\n\n\n<p>You can do keyframing or transitioning using HTML\/CSS alone or in combination with JS. In this exercise, we&#8217;ll do one animation example keyframing with HTML\/CSS alone, and we&#8217;ll explore a sample of transition-based animation with JS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_animation_resources\"><\/span>CSS animation resources<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Although many CSS properties (opacity, color, or blend-modes, for example) can be animated,  we see that transform properties are the backbone of our Marinetti web animation. For a sense of what&#8217;s possible with transforms and animation, visit&nbsp;<strong><a href=\"http:\/\/rosa-menkman.blogspot.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sunshine in My Throat<\/a><\/strong>, the blog of media artist Rosa Menkman.<\/p>\n\n\n\n<p>A raft of helper sites to explore:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/webcode.tools\/css-generator\/keyframe-animation\" target=\"_blank\" rel=\"noreferrer noopener\">web code tools<\/a><\/strong> | A sandbox for generating code, which you can copy\/paste right into your files.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/westciv.com\/tools\/transforms\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">westciv Transforms<\/a><\/strong> | Another sandbox, this one with sliders, emphasizing transforms. An oldie but goodie.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/web.dev\/learn\/css\/animations\" target=\"_blank\" rel=\"noreferrer noopener\">web.dev Animations<\/a><\/strong> | Explainers and sandboxes written by members of the Chrome team.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/web.dev\/learn\/css\/transitions\" target=\"_blank\" rel=\"noreferrer noopener\">web.dev Transitions<\/a><\/strong> | Same site, but emphasizing non-keyframed animation.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.joshwcomeau.com\/animation\/css-transitions\/\" target=\"_blank\" rel=\"noreferrer noopener\">An Interactive Guide to CSS Transitions<\/a><\/strong> | By Josh Comeau, this has some great explainers on the sometimes tough-to-grasp concept of easing.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">CodePen<\/a><\/strong> | The mother of all sandboxes and demos, this social development environment supports a generous culture of sharing.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/animate.style\/\" target=\"_blank\" rel=\"noreferrer noopener\">Animate.css<\/a><\/strong> | A <a href=\"https:\/\/en.wikipedia.org\/wiki\/Content_delivery_network\" target=\"_blank\" rel=\"noreferrer noopener\">CDN<\/a> library of ready-to-use, cross-browser animations for use in your web projects. You can install it right into your webpage in a &lt;link&gt;. Saves development time, server space, and speed of page load.<\/li>\n<\/ul>\n\n\n\n<p>Dozens more can be found using a keyword search in a search engine!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JS_interactivity_resources\"><\/span>JS interactivity resources<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>All kinds of client input, from hovering to click-and-drag action to randomizing links, can be programmed to generate interactivity. We&#8217;ll see <strong>clicking or tapping<\/strong> will activate the animation of two elements in our Marinetti file. One reason we avoid <strong>hover<\/strong> effects (sometimes known as <strong>mouse-overs<\/strong>) here is their incompatibility with mobile browser input behaviors.<\/p>\n\n\n\n<p>Many sources of scripts exist in the vast web developer community. For examples of JS capabilities visit the demo sites at <a href=\"https:\/\/createjs.com\/demos\/easeljs\/spritesheet\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>EaselJS<\/strong><\/a>, <strong><a href=\"https:\/\/createjs.com\/demos\/tweenjs\/tween_circles\" target=\"_blank\" rel=\"noreferrer noopener\">TweenJS<\/a><\/strong>, <strong><a href=\"https:\/\/createjs.com\/demos\/soundjs\/webaudionodeinsertion\" target=\"_blank\" rel=\"noreferrer noopener\">SoundJS<\/a>,<\/strong> and <strong><a href=\"https:\/\/createjs.com\/demos\/preloadjs\/mediagrid\" target=\"_blank\" rel=\"noreferrer noopener\">PreloadJS<\/a><\/strong>.<\/p>\n\n\n\n<p>A gaggle of helper sites to visit:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/learnjavascript.online\/\">Learn Javascript<\/a><\/strong> | A series of tutorials in a terrific UX. <\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.html-code-generator.com\/javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">Javascript Code Generator<\/a><\/strong> | An oldie but goodie for some standard JS functions like generating a random string or page redirect. Good for learning.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codepen<\/a><\/strong>&nbsp;| As good for JS as it is for CSS.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a><\/strong>&nbsp;| Another sandbox, linked heavily with the Github and StackOverflow communities.&nbsp;<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Github<\/a><\/strong>&nbsp;| &#8220;Git&#8221; stuff like the incredible <strong>threejs<\/strong> materials for displaying 3D content and other cutting-edge projects.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">StackOverflow<\/a><\/strong>&nbsp;| A troubleshooting community where every question about coding has some kind of discussion raging.&nbsp;<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">threejs<\/a><\/strong>&nbsp;| A JS library mashing up my two geeky pleasures: 3D modeling and web design!<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/createjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">CreateJS<\/a><\/strong> | Modular JS libraries enabling rich interactive content. Can download and host on your browser, or install via CDN &lt;link&gt;.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/sourceforge.net\/software\/ai-code-generators\/integrates-with-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">AI Code Generators for Javascript<\/a><\/strong> | Sourceforge&#8217;s list of the hottest trend in JS development: the use of AI! Some free browser-based options listed include <strong><a href=\"https:\/\/sourcegraph.com\/cody\" target=\"_blank\" rel=\"noreferrer noopener\">SourceGraph Cody<\/a><\/strong>, <a href=\"https:\/\/codeium.com\/playground\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Codeium<\/strong><\/a>, and <strong><a href=\"https:\/\/chat.openai.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">ChatGPT<\/a><\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>&#8230; and a ton of others too numerous to mention, available via a search engine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Animating_Marinetti_in_CSS_and_JS\"><\/span>Animating Marinetti in CSS and JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Take a look at the finished product first, embedded below. You&#8217;ll see <strong>VENT<\/strong> and <strong>SANG<\/strong> pumping along like pistons in an engine, in a perpetual loop. Now, tap or click on the <strong>MOUVEMENT<\/strong> and <strong>Karazouc-zouc-zouc<\/strong> texts and you&#8217;ll see them shake and rotate in an exaggerated manner. Movement was the Italian Futurist&#8217;s first love, so these animations strongly support the content. They aren&#8217;t just bells and whistles to attract attention \u2014 a critique often justifiably directed at web animation.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/marinetti_animate.html\" style=\"border:0px #ffffff none;\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><em>F. T. Marinetti, excerpt from Dunes, 1914, animated by williamCromar, 2023<\/em><\/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\" style=\"flex-basis:50%\">\n<p>Take your static Marinetti exercise, and duplicate the HTML and CSS files to create an animated version using the steps below. It&#8217;s a good idea as you work to look at the source code for the sample project:<\/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><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the finished file <\/a><\/em><\/strong><br><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">to see the code &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Transforms_for_body_text\"><\/span>Step 1: Transforms for body text<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<p>Start by animating the <strong>negateur<\/strong> and<strong>  affirmateur<\/strong> text blocks with their curly braces, as seen here:<\/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\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step8_animate1\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 1 &gt;<\/a><\/em><\/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>The code for the animation properties applied to each declaration is quite similar &#8230;<\/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<pre class=\"wp-block-code\"><code>animation-name: compress1;\nanimation-duration: 1s;\nanimation-iteration-count: infinite;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>&#8230; but the <code>animation-name<\/code> property will be<strong> <\/strong><code>compress1<\/code> under <code>#nega<\/code> and<strong> <\/strong><code>compress2<\/code> for<strong> <\/strong><code>#affi<\/code>, because we will see that these have to be unique: they need to do opposite things simultaneously. The&nbsp;<code>1s<\/code>&nbsp;duration was chosen because it&#8217;s reasonably quick but not so fast as to be illegible. The iteration count set for&nbsp;<code>infinite<\/code>&nbsp;creates a loop.<\/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\" style=\"flex-basis:50%\">\n<p>Meanwhile, in the CSS file, we&#8217;ve created a space for the<strong>&nbsp;<\/strong><code>@keyframes<\/code>. These look like this for&nbsp;<code><code>compress1<\/code><\/code>&nbsp;and&nbsp;<code>compress2<\/code>&nbsp;respectively: <\/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<pre class=\"wp-block-code\"><code>@keyframes compress1 {\n  0%   {transform: scale(1,1);}\n  50%  {transform: scale(0.5,1); left:95px;}\n  100% {transform: scale(1,1);}\n}\n\n@keyframes compress2 {\n  0%   {transform: scale(0.5,1);left:95px;}\n  50%  {transform: scale(1,1);left:60px;}\n  100% {transform: scale(0.5,1);left:95px;}\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Look carefully at the scale functions and you&#8217;ll see they are opposites. This is what allows one to be fully compressed while the other is not. Perhaps the trickiest part was figuring out the left positioning to provide an illusion of a static right-hand side. No real secret here, just a lot of trial and error with the values until it looked correct!<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Apply the first animation to your code. You may copy-paste our code, but play around with some of the values so you can see why they work.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Transforms_for_headline_text\"><\/span>Step 2: Transforms for headline text<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<p>To make the first step look convincing, we need an alternate animation for the <strong>vent<\/strong> and  <strong>sang<\/strong> divs, as seen here:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step9_animate2\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 2 &gt;<\/a><\/em><\/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>Whereas the first set of divs are compressing, these are expanding. As with the first step, these look pretty similar &#8230;<\/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<pre class=\"wp-block-code\"><code>\t\t\t\tanimation-name: expand1;\nanimation-duration: 1s;\nanimation-iteration-count: infinite;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>&#8230; with&nbsp;<code>expand1<\/code>&nbsp;assigned to&nbsp;<code>#vent<\/code>&nbsp;and&nbsp;<code>expand2<\/code>&nbsp;assigned to&nbsp;<code>#sang<\/code>.<\/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>Compare the&nbsp;<code>@keyframes<\/code>&nbsp;in the CSS with those of the first step:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>@keyframes expand1 {\n  0%   {transform: scale(1,1);}\n  50%  {transform: scale(2,1);left:40px;}\n  100% {transform: scale(1,1);}\n}\n\n@keyframes expand2 {\n  0%   {transform: scale(2,1);left:40px;}\n  50%  {transform: scale(1,1);left: 2px;}\n  100% {transform: scale(2,1);left:40px;}\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>And again, there&#8217;s no magic bullet here, just a lot of grunt work getting the numbers right. However, it is insightful to note that we encountered a bug when we assigned <code>expand1<\/code> to <code>#vent<\/code>. When we applied it, there was a hiccup in the animation, unlike the smooth code for <code>expand2<\/code> at <code>#sang<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Apply the second animation to your code. You may copy-paste our code, but play around with values. Note also the bug that emerges in <strong>VENT<\/strong>!<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Debugging_happens\"><\/span>Debugging happens<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ffeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>We interrupt this exercise for a PSA!<\/p>\n\n\n\n<p>Let us here reinforce a basic premise of coding:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong><em>DEBUGGING IS PART OF THE PROCESS<\/em><\/strong><\/mark><\/p>\n\n\n\n<p>There is not a coder on earth who has not encountered an unexpected result in their code. So embrace the reality that debugging happens. Plan for it. Manage time to include it.<\/p>\n\n\n\n<p>And computers are pretty stupid. Unlike humans, they can&#8217;t infer what the code author means when they make a small error. A computer just sits there like a brick, offering no help whatsoever. OK, back to the exercise&#8230;<\/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=\"500\" height=\"617\" data-attachment-id=\"5132\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/ueehl\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ueehl.jpg\" data-orig-size=\"500,617\" 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=\"ueehl\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ueehl.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ueehl.jpg\" alt=\"\" class=\"wp-image-5132\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ueehl.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ueehl-243x300.jpg 243w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/ueehl-300x370.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_debugging_workflow\"><\/span>A debugging workflow<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Frustratingly, one of the animations is smooth, the other is not. So, how did we fix the bug in our animation? <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First, look for <strong>typos<\/strong>, the most common source of an infestation. Especially common is the mistyping of a <code>O<\/code> for a <code>0<\/code> or vice-versa \u2014&nbsp;monotype text will signal the zero with a line. A lower-case <code>l<\/code> can look like a <code>1<\/code> or an upper-case <code>I<\/code>: monotype differentiates them, too, but they&#8217;re hard to catch. <em>In our search, we found no typos.<\/em><\/li>\n\n\n\n<li>Next, explore <strong>syntax errors<\/strong>. Often it can be a missing <code>'<\/code>, a mistyped <code>\"<\/code>, or a <code>:<\/code> instead of a <code>;<\/code>. Dreamweaver will often alert you for errors, but the warnings can be jargon-laden. <em>We found no missing brackets or misplaced declarations or values in our search.<\/em><\/li>\n\n\n\n<li>Next, we look for <strong>differences<\/strong>. How are these circumstances different?\n<ul class=\"wp-block-list\">\n<li><code>#vent<\/code> contains a nested div, but <code>#sang<\/code> does not.<\/li>\n\n\n\n<li><code>#vent<\/code> starts by expanding, but <code>#sang<\/code> does not.<\/li>\n\n\n\n<li>Isolate differences by using comments to disable code, a process known as <strong><a href=\"https:\/\/en.wiktionary.org\/wiki\/comment_out\" target=\"_blank\" rel=\"noreferrer noopener\">commenting out<\/a><\/strong>. Comments are a debugger&#8217;s best friend because you can &#8220;delete&#8221; without losing something, possibly isolating the source of the bug.\n<ul class=\"wp-block-list\">\n<li>Commenting on the nested div does not eliminate the bug.<\/li>\n\n\n\n<li>So: we conclude that starting by expanding doesn&#8217;t work!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>How to solve <em>that?<\/em> We see that VENT is &#8220;ungluing&#8221; itself from the left side when the animation starts.<\/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>Perhaps we should try forcing it to stick to the left margin? We appended the following to the existing ID style:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>#vent {\n......\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">left: 0px;\n<\/mark>......\n}\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><strong><em>Voil\u00e0!<\/em><\/strong> Adding the <code>left<\/code> property with a value <code>0px<\/code> tells the browser &#8220;I want this thing to stick to the left side.&#8221; Notice we create a comment explaining our fix, both for others who inspect the code and for ourselves as a sanity tactic. The comment acts like a kind of sticky-note reminder.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_debugging_mindset\"><\/span>A debugging mindset<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>I hasten to point out that it was not an immediately gratifying process as outlined. There are several strategies one should consider when frustration sets in:<\/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\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li><strong>Step away.<\/strong> Sometimes leaving the problem alone for a spell allows your brain to connect dots it can&#8217;t while you&#8217;re in the midst of self-targeted <a href=\"https:\/\/dev.to\/codemouse92\/code-rage-22hk\" target=\"_blank\" rel=\"noreferrer noopener\">code-rage<\/a>.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Rubber_duck_debugging\" target=\"_blank\" rel=\"noreferrer noopener\">Talk to the duck<\/a>.<\/strong> Many coders have had the experience of explaining a problem to someone else and then discovering the solution in the process of explaining the problem. The &#8220;duck&#8221; is an inanimate object you force yourself to talk out loud to without bothering someone else (who might be busy with a bug of their own!).<\/li>\n\n\n\n<li><strong>Ask the hive mind<\/strong>. Visit <a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">StackOverflow<\/a> or other chats with a keyword search for your problem. <\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"417\" data-attachment-id=\"5143\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/24079-debugging-duck-feature_cropped\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/24079-Debugging-Duck-Feature_cropped.jpg\" data-orig-size=\"440,417\" 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=\"24079-Debugging-Duck-Feature_cropped\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/24079-Debugging-Duck-Feature_cropped.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/24079-Debugging-Duck-Feature_cropped.jpg\" alt=\"\" class=\"wp-image-5143\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/24079-Debugging-Duck-Feature_cropped.jpg 440w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/24079-Debugging-Duck-Feature_cropped-300x284.jpg 300w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Debug your VENT animation, using our values if you wish.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>And with the conclusion of our debugging episode, the constant piston action is done! Now for the interactive part.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Creating_a_shaking_script_using_animation_and_AI\"><\/span>Step 3: Creating a shaking script using <code>animation<\/code> and AI<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"First-time_with_JS\"><\/span>First-time with JS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Now is when the insecurities begin for most artists! Scripts are often shockingly left-brained and seemingly human-illegible. But we have several things going for us:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We&#8217;re already fairly familiar with animation CSS from our experience in this and other exercises, and our script will activate such an animation, so most of the heavy lifting is done in a familiar markup language.<\/li>\n\n\n\n<li>The color-coding one finds in Dreamweaver and at helper sites like <a href=\"https:\/\/jsfiddle.net\/\"><strong>JSFiddle<\/strong><\/a> will help us understand what we should and should not do with a script.<\/li>\n\n\n\n<li>We don&#8217;t need to write the JS from scratch. Most web developers work with <a href=\"https:\/\/en.wikipedia.org\/wiki\/Snippet_(programming)\"><strong>code snippets<\/strong><\/a>. Such reusable blocks of code are shared on the web, can be seen by inspecting a site&#8217;s source code, or exist as part of a <a href=\"https:\/\/www.freecodecamp.org\/news\/import-javascript-and-css-from-a-public-cdn\/\" target=\"_blank\" rel=\"noreferrer noopener\">CDN library<\/a>.<\/li>\n\n\n\n<li>We can use AI to help us with the basic structure of a script!<\/li>\n<\/ul>\n\n\n\n<p>Now, it certainly helps to know something about programming. If you don&#8217;t know the difference between a string and an integer, it can become overwhelming immediately. And if you don&#8217;t know basic JS syntax, you won&#8217;t know how to modify any script you might adapt to your needs. <strong>In this exercise, we recommend <a href=\"https:\/\/learnjavascript.online\/\">Learn Javascript<\/a> as the place to become familiar with the language<\/strong>. Even if you use AI to generate a script, which we will do in this step, you need to know what you can and cannot tweak to make it work for your specific circumstance. That being said, we&#8217;ve chosen to develop some fairly simple scripts to de-escalate the learning curve here.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Shake_it_up\"><\/span>Shake it up<span class=\"ez-toc-section-end\"><\/span><\/h4>\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>Open the source code at this link to view our work here:<\/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\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step10_animate3\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 3 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>The code we are adding goes in the following places:<\/p>\n\n\n\t<h2 class=\"sp-tab__section_title_5154\"> <\/h2>\n\t\t\t<div id=\"sp-wp-tabs-wrapper_5154\" class=\"sp-tab__lay-default\" data-preloader=\"1\" data-activemode=\"tabs-activator-event-click\" data-anchor_linking=\"1\">\n\t\t\t<div class=\"sp-tab__preloader\">\n\t\t<div class=\"sp-tab__spinner\">\n\t\t\t<div class=\"rect1\"><\/div>\n\t\t\t<div class=\"rect2\"><\/div>\n\t\t\t<div class=\"rect3\"><\/div>\n\t\t\t<div class=\"rect4\"><\/div>\n\t\t\t<div class=\"rect5\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\t<ul class=\"sp-tab__nav sp-tab__nav-tabs\" id=\"sp-tab__ul\" role=\"tablist\">\n\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link sp-tab__active\" data-sptoggle=\"tab\" for=\"#tab-51541\" role=\"tab\" aria-controls=tab-51541 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H6 class=\"sp-tab__tab_title\"><span class=\"ez-toc-section\" id=\"HTML\"><\/span><div style=\"background-color: #EEEEEE;padding: 10px;font-size: small\">HTML<\/div><\/H6><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-51542\" role=\"tab\" aria-controls=tab-51542 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H6 class=\"sp-tab__tab_title\"><span class=\"ez-toc-section\" id=\"CSS\"><\/span><div style=\"background-color: #EEEEEE;padding: 10px;font-size: small\">CSS<\/div><\/H6><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-51543\" role=\"tab\" aria-controls=tab-51543 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H6 class=\"sp-tab__tab_title\"><span class=\"ez-toc-section\" id=\"JS\"><\/span><div style=\"background-color: #EEEEEE;padding: 10px;font-size: small\">JS<\/div><\/H6><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t<\/ul>\n<div class=\"sp-tab__tab-content\">\n\t\t\t\t<div id=\"tab-51541\" class=\"sp-tab__tab-pane sp-tab__show sp-tab__active\" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><pre>&lt;div id=\"mouv\" class=\"borderRight \"&gt;\r\n   &lt;div id=\"mouvText\" class=\"mouvStyle centerText\"&gt;\r\n<span style=\"color: #bf3d37;\">      &lt;!-- ADD NESTED DIV TO APPLY SHAKE --&gt;<\/span>\r\n<span style=\"color: #bf3d37;\">      &lt;div class=\"mouvShake\"&gt;<\/span>\r\n         mouvement&lt;br \/&gt;\r\n         de&lt;br \/&gt;\r\n         2&amp;nbsp;&amp;nbsp;pistons\r\n      <span style=\"color: #bf3d37;\">&lt;\/div&gt;<\/span>\r\n   &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n......<\/pre>\n<p>And after the container but before the body close (note the spelling of script with a j, for site security purposes:<\/p>\n<pre>&lt;\/container&gt;\r\n\r\n   &lt;!-- ADD SHAKE SCRIPT HERE --&gt;\r\n   &lt;scrjpt type=\"text\/javascript\" src=\"js\/shake.js\"&gt;&lt;\/scrjpt&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-51542\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><pre><span style=\"color: #b1473d\">.mouvShake<\/span> {\r\n   cursor: pointer;\r\n   user-select: none;\r\n}\r\n\r\n<span style=\"color: #b1473d\">.ease-shake<\/span> {\r\n   animation: easeShake 0.2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes <span style=\"color: #b1473d\">easeShake<\/span> {\r\n   0%, 100% {\r\n      transform: translateX(0) rotate(0deg);\r\n   }\r\n   15% {\r\n      transform: translateX(-30px) rotate(-10deg);\r\n   }\r\n   30% {\r\n      transform: translateX(15px) rotate(10deg);\r\n   }\r\n   45% {\r\n      transform: translateX(-10px) rotate(-5deg);\r\n   }\r\n   60% {\r\n      transform: translateX(-20px) rotate(-15deg);\r\n   }\r\n   75% {\r\n      transform: translateX(20px) rotate(20deg);\r\n   }\r\n   90% {\r\n      transform: translateX(-10px) rotate(-15deg);\r\n   }\r\n}<\/pre>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-51543\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><pre>document.addEventListener('DOMContentLoaded', function () {\r\n   const <span style=\"color: #b1473d\">mouvShake<\/span> = document.querySelector('<span style=\"color: #b1473d\">.mouvShake<\/span>');\r\n   let isShaking = false;\r\n\r\n   <span style=\"color: #b1473d\">mouvShake<\/span>.addEventListener('click', function () {\r\n      if (!isShaking) {\r\n         isShaking = true;\r\n         mouvShake.classList.add('<span style=\"color: #b1473d\">ease-shake<\/span>');\r\n\r\n         \/\/ Reset and allow replay after 30 seconds\r\n         setTimeout(function () {\r\n            <span style=\"color: #b1473d\">mouvShake<\/span>.classList.remove('<span style=\"color: #b1473d\">ease-shake<\/span>');\r\n            isShaking = false;\r\n         }, 30000);\r\n      }\r\n   });\r\n});<\/pre>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/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 used ChatGPT to generate the basic scheme of this code. To view the conversation, visit this link:<\/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\"><a href=\"https:\/\/chat.openai.com\/share\/5829417b-bb4c-4124-b746-7fc90fdb5979\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Writing a script with AI &gt;<\/em><\/strong><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>When it first launched a little more than a year before this writing, ChatGPT sounded too good to be true. While most of our academic colleagues looked on with a sense of apocalyptic horror, I was thinking, &#8220;Wait a minute&#8230; can this thing generate code for free? Did I just get 20 years of my life back?&#8221;<\/p>\n\n\n\n<p>So when it came time to update this exercise, I wanted to see if it could tackle the task of generating our first script: to shake the <strong>mouvement<\/strong> text when clicked or tapped. <\/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\" style=\"flex-basis:50%\">\n<p>At first, I was going to feed it a little code as a prompt, but I decided to be more narrative \u2014 even a little vague \u2014 to see how it would respond. I also knew it tended to respond better if you framed a persona for it. So I asked it:<\/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<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>You are writing a program in Javascript for a div with the class mouvShake. When the text content of the div is clicked or tapped, it will shake vigorously, and taper down to a stop after 30 seconds using ease-out.<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<p>You can see in the conversation linked above that it proactively fed me some HTML with actual content I did not ask for, and some CSS keyframes, because it clearly understands <strong><em>these things work together<\/em><\/strong>. Then it explains how it works to me \u2014&nbsp;again, something super helpful I did not ask it for!<\/p>\n\n\n\n<p>But, it didn&#8217;t fully understand what I wanted. When I implemented the code, the <strong>mouvement<\/strong> text lumbered slowly back and forth like a depressed tennis ball. When it reset the animation to remove the shake, that was a permanent state: we couldn&#8217;t repeat the motion with another click. So, I went back to the conversation a few times, refining my request. While ChatGPT never quite got me to the random, vigorous shake I wanted, it gave me enough of a structure that I could fine-tune the keyframes and get exactly what I had in mind. Compare what it wrote for me with how I tweaked it, mostly by changing the keyframe frequency and values.<\/p>\n\n\n\n<p><strong><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">The moral? Using AI is a MASSIVE timesaver, but it is NOT a substitute for understanding code!<\/mark><\/em><\/strong> I still needed to intervene to get exactly what I wanted. And I also had to correct it on one huge point: best practice is now to place the script <em>after<\/em> the content, not in the head! That said, it built a pretty flawless script here.<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Create a script and apply it to <strong>mouvement<\/strong>. You may copy-paste our solution, or you can try your hand at working with AI to generate code you can copy-paste and tweak in your code.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Creating_a_spin_script_using_transition_and_a_helper_site\"><\/span>Step 4: Creating a spin script using <code>transition<\/code> and a helper site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A more traditional workflow (for me at least) has been to dig deep into the hive mind and come up with usable solutions. This is actually what AI does, only it can do it orders of magnitude faster than I can.<\/p>\n\n\n\n<p>Having said that, I think there&#8217;s still a place for exploration and discovery when you&#8217;re visiting a helper site. I can&#8217;t tell you how many amazing things serendipity has sent my way doing this. As I&#8217;m looking for a solution to Thorny Problem A, I run across Cool Opportunity B, C, D, and E, storing those away for future use. As much as I was impressed by the quickness of the AI-generated build, I absolutely won&#8217;t abandon my forays into StackOverflow and CodePen.<\/p>\n\n\n\n<p>So in this instance, we&#8217;re going to visit CodePen to see if there&#8217;s a solution to creating a spin without using <code>animation<\/code> keyframes, instead looking for a light-weight <code>transition<\/code> effect to do it.<\/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>Crack open the source code in our final step to see our work:<\/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\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step11_animate4\/marinetti_animate.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 4 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>I logged into CodePen and did a keyword search for &#8220;rotate animate&#8221; and found the following Pen:<\/p>\n\n\n\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"Chevron - Rotate &amp; Animate\" src=\"https:\/\/codepen.io\/Mattc3303\/embed\/JvROPo?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Mattc3303\/pen\/JvROPo\">\n  Chevron &#8211; Rotate &amp; Animate<\/a> by Matthew Chan (<a href=\"https:\/\/codepen.io\/Mattc3303\">@Mattc3303<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p>It was a little underwhelming but I knew I could expand this into what I needed. I just needed to test changing some values to confirm it. It&#8217;s lovely to play with the CodePen sandbox! In the CSS, I found the <code>transition<\/code> property and changed that to a massive <code>30s<\/code>, then changed the rotation to a crazy 360000deg (basically spinning 1000 times in 30 seconds!). It acted like an airplane propeller starting up \u2014 exactly what I wanted!<\/p>\n\n\n\n<p>So now we adapt all the function and class names to our code. Here&#8217;s how it translated: <\/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\" style=\"flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong>CODEPEN JS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">chevronToggle<\/mark>() {\n   const <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">icon<\/mark> = document.querySelector('<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.fa-chevron-down<\/mark>');\n   <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">icon<\/mark>.classList.toggle('<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">reverse<\/mark>');\n}<\/code><\/pre>\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<p class=\"has-text-align-center\"><strong>MARINETTI JS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">karaToggle<\/mark>() {\n   const <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">spin<\/mark> = document.querySelector('<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.karaSpin<\/mark>');\n   <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">spin<\/mark>.classList.toggle('<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">reverse<\/mark>');\n} \n\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">karaToggle();<\/mark><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The name of the function <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">chevronToggle<\/mark> in CodePen made no sense for our context, so we changed it to <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">karaToggle<\/mark>. (Since we placed this in its own JS file, we also added an empty function call at the end to keep Dreamweaver&#8217;s <em>function-defined-but-never-used<\/em> error at bay \u2014 of course, it will be used, but in the HTML).<\/li>\n\n\n\n<li>We changed the object <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">icon<\/mark> to a more logical <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">spin<\/mark>.<\/li>\n\n\n\n<li>The class <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.fa-chevron-down<\/mark> makes no sense for our file, so it became <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.karaSpin<\/mark>.<\/li>\n\n\n\n<li>The class we kept \u2014 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">reverse<\/mark> \u2014 still made sense in our scheme so it remained the same.<\/li>\n<\/ul>\n\n\n\n<p>In the CSS, we didn&#8217;t need a <code>body<\/code> style, nor did we require a <code>container<\/code>,  so we didn&#8217;t use any of that. For what remained, here&#8217;s what changed:<\/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 class=\"has-text-align-center\"><strong>CODEPEN CSS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.fa-chevron-down<\/mark> {\n   <s>font-size: 4em;<\/s>\n   <s>color: #00C957;<\/s>\n   transition: ease-in-out <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.3s<\/mark>;\n   <s>&amp;:hover {<\/s>\n      <s>cursor: pointer;<\/s>\n   <s>}<\/s>\n}\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.reverse<\/mark> {\n   transform: rotate(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">180deg<\/mark>);\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>MARINETTI CSS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.karaSpin<\/mark> {\n   transition: ease-in-out <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">30s<\/mark>;\n}\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">.reverse<\/mark> {\n   transform: rotate(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">360000deg<\/mark>);\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We didn&#8217;t need <code>font-size<\/code> or <code>color<\/code>, nor did we need the <code>&amp;:hover<\/code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes\" target=\"_blank\" rel=\"noreferrer noopener\">pseudo-class<\/a> to change the style of the cursor. We only needed to change the class from <code>.fa-chevron-down<\/code> to <code>.karaSpin<\/code> and increase the duration from <code>.3s<\/code> to <code>30s<\/code>.<\/li>\n\n\n\n<li>In the <code>reverse<\/code> class, we changed the rotation value from <code>180deg<\/code> to <code>360000deg<\/code> to radically increase the number of spins.<\/li>\n<\/ul>\n\n\n\n<p>In HTML, we ignored the container and just needed to apply the class and the click action:<\/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 class=\"has-text-align-center\"><strong>CODEPEN HTML<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">fa fa-chevron-down<\/mark>\" onclick=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">chevronToggle()<\/mark>\"&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>MARINETTI HTML<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">karaSpin<\/mark>\" onclick=\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">karaToggle()<\/mark>\"&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>The class assigned in Codepen (containing a harmless typo, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">fa<\/mark>, which we ignored) was changed from  <code>fa-chevron-down<\/code> to <code>karaSpin<\/code>, and the <code>onclick<\/code> value revised from <code>chevronToggle()<\/code> to <code>karaToggle ()<\/code>.<\/p>\n\n\n\n<p>So when we&#8217;re adapting a code solution from a helper site, we see that we need two things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enough skill with JS that we know the syntactic location of functions and classes that we need to change to fit our code.<\/li>\n\n\n\n<li>Enough skill with CSS and HTML that we can figure out what to keep, what to toss, and what to change.<\/li>\n\n\n\n<li>The ability to abstract: that is, to mentally map the code from the helper site onto our site.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Create a script and apply it to <strong>Karazouc<\/strong>. You may copy-paste our solution, or you can try your hand at working with a helper site to generate code you can copy-paste and map onto your code.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"SFTP_this\"><\/span>SFTP this!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\"><strong>SFTP upload<\/strong><\/a> your animated poem with interaction! Congratulations: you&#8217;ve successfully mastered the HTML-CSS-JS boot camp!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 3 | concrete poetry marinettiJS Visit Marinetti Animated &gt; Motion: phenomenal and literal The Italian Futurists revered the dynamic sensation of speed and motion. But their work did not employ actual motion in the manner of a Jean Tinguely drawing machine sculpture or a Jenny Holzer installation \u2014 although to be fair, those&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/\">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,11],"tags":[],"class_list":["post-5093","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-exercises"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>marinettiJS - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Marinetti JS: If F. T. Marinetti were alive today, he&#039;d Javascript his poetry! Using AI and a helper site, we&#039;ll animate it on his behalf.\" \/>\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\/marinettijs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"marinettiJS - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Marinetti JS: If F. T. Marinetti were alive today, he&#039;d Javascript his poetry! Using AI and a helper site, we&#039;ll animate it on his behalf.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-12T22:09:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T11:59:17+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=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"marinettiJS\",\"datePublished\":\"2023-12-12T22:09:09+00:00\",\"dateModified\":\"2024-01-11T11:59:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/\"},\"wordCount\":3606,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Exercises\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/\",\"name\":\"marinettiJS - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-12T22:09:09+00:00\",\"dateModified\":\"2024-01-11T11:59:17+00:00\",\"description\":\"Marinetti JS: If F. T. Marinetti were alive today, he'd Javascript his poetry! Using AI and a helper site, we'll animate it on his behalf.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinettijs\\\/#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\\\/marinettijs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"marinettiJS\"}]},{\"@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":"marinettiJS - newMediaWiki","description":"Marinetti JS: If F. T. Marinetti were alive today, he'd Javascript his poetry! Using AI and a helper site, we'll animate it on his behalf.","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\/marinettijs\/","og_locale":"en_US","og_type":"article","og_title":"marinettiJS - newMediaWiki","og_description":"Marinetti JS: If F. T. Marinetti were alive today, he'd Javascript his poetry! Using AI and a helper site, we'll animate it on his behalf.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-12T22:09:09+00:00","article_modified_time":"2024-01-11T11:59:17+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":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"marinettiJS","datePublished":"2023-12-12T22:09:09+00:00","dateModified":"2024-01-11T11:59:17+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/"},"wordCount":3606,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Exercises"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/","url":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/","name":"marinettiJS - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-12T22:09:09+00:00","dateModified":"2024-01-11T11:59:17+00:00","description":"Marinetti JS: If F. T. Marinetti were alive today, he'd Javascript his poetry! Using AI and a helper site, we'll animate it on his behalf.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinettijs\/#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\/marinettijs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"marinettiJS"}]},{"@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\/5093","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=5093"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5093\/revisions"}],"predecessor-version":[{"id":6017,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5093\/revisions\/6017"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=5093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=5093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=5093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}