(re)Animate

4D media

artMachine

(re)Animate

(re)Animate: creating a virtual Art Machine

Beginnings

Calder developed the Cirque 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 Chocolate Grinder (seen below in an expression which later showed up in The Large Glass), to the pure mechanical action of the Rotoreliefs. Man Ray was pushing beyond photography toward the Object to Be Destroyed (a.k.a. Indestructible Object) that we’ll explore in depth in our case study. Russian Constructivist Naum Gabo was transforming line into volume with such works as his Standing Wave. These mechanical works laid the foundation for the later self-destructing art machines, such as Homage to New York by Jean Tinguely and the installation documented in The Way Things Go by Fischli and Weiss.

Marcel Duchamp, Broyeuse de Chocolat, 1914. A study for an entity that later plays a role in The Large Glass. The French phrase “grinding one’s own chocolate” is a euphemism for self-gratification… a tragicomic condition that is ever-present in Duchamp’s realm of the Bachelors.

Peter Fischli and David Weiss, The Way Things Go, 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).

Contemporary works

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 Art Machines blog.

Joe Holliday, Basil Bisulfate, 2010. Calder meets Tim Burton in this “transdimensional golem.”

Martin Creed, Work No. 189, 1998. Order and chaos clash in this homage to Man Ray.

Interactivity

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.

— Marcel Duchamp, from The Creative Act lecture, April 1957.

No artist was more profoundly in tune with the machine than Jean Tinguely. His kinetic, Rube Goldberg-like sculptures, dubbed metamatics, both celebrated the nature of mechanical process and satirized the mind-numbing qualities of materialistic culture. Many of his Dada creations, such as Homage to New York, were bent on self-destruction, but earlier on he created drawing machines that take Duchamp’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.

Jean Tinguely, Méta-Matic No. 6, 1959

Jean Tinguely, Homage to New York, 1960

The Infinitely Indestructible Object: a case study

Your project will contain a narrative that is completely unique to you. However, it’s behavior will emulate the action seen in the Infinitely Indestructible Object project by williamCromar, described in depth below. 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, Infinitely Indestructible Object 2018, was built from the ground up for HTML/CSS/JS in Animate CC. It still functions as of this writing (in 2023).

These three iterations mirror the fate of the work that inspired it: a work by Man Ray which itself was a series of iterations:

• Object to Be Destroyed, 1923 original
• Object of Destruction, 1932 copy
• Indestructible Object, 1958 edition

Although Man Ray’s concept remains indestructible, we come to understand that both physical and digital expressions are indeed rather ephemeral!

Man Ray, Object to Be Destroyed, 1964 replica of 1923 original. From Wikimedia Commons.

Analyzing the Object

At the top of this wiki title, you can find and download the working files to analyze.

The Infinitely Indestructible Object Animate CC project, based on a work by Man Ray as described above, allows you to see Object as the interactive, animated object he originally intended. Accompanying the original Object were Man Ray’s instructions to the audience:

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.

— Man Ray, from the work as exhibited at MoMA

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 Object, it’s under glass and never in motion. The anti-art Dadaist Man Ray would certainly find it ironic that his work is treated like “art,” in the “do-not-touch” context of the word.

This simple project takes the on-off logic of the Interactivity exercise and applies it to a narrative, with a couple of twists:

• One, we use JS to replace the cursor with a hammer, in honor of Man Ray’s instructions.
• 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.

Hit the eye with the hammer to stop. Hit the key to start.

Questions

Analyze the project by opening the FLA file in Animate and asking some questions:

• Where did we write the JavaScript?
• What three things does the JS allow?
• No frame number occupies the ( ) in the start and stop functions. Why? What does this allow?
• Why is the key a movie clip and not a button?
• Note the animation is not on the Scene 1 timeline… where is it, and why?
• Why is the animation 48 frames long, and what do the keyframes do?
• Why is animation_mc an instance of animationMc, which is in turn an instance of eyeMc?
• How did we achieve rotation for the eye element (hint: look at registration origin)?
• How did we arrange the layers and why?
• How did we place the elements on the layers and why?

A huge trick here is the placement of the origin on the hammer and the base of the eye’s pendulum stick. We place this origin so that it’s intuitive to “hit” with the hammer’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 Registration point — the little + sign — and the Transformation point — a little o sign.

Setting Registration vs Transformation

The Transformation 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 Modify > Transform > Free Transform. When active, you’ll see a check mark next to it. Select the o and move it until satisfied with its position.

The Registration point belongs to the coordinate system of the Stage. To set the Registration point, you move the object relative to it.

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 animationMc, the Transformation point alone controls the Transform > Scale and Rotate that is applied at each keyframe.

On the other hand, in the case of the hammer, it’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’s “origin point.”

As your work becomes more complex and you create rigs: Symbols made up of multiple objects in a hierarchy. It’s important to create a proper set of Transformation points for a rig to be successful — but that’s another topic for a future project.

Analyzing the code

JS: manray_HTML5 Canvas.fla Scene 1, Frame 1, actions layer

//Hammer Mouse Cursor - must change standard Custom Mouse Cursor code snippet to include "/ stage.scaleX" and "/ stage.scaleY" 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

stage.canvas.style.cursor = "none";
this.hammer_mc.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() 
{
     this.hammer_mc.x = stage.mouseX / stage.scaleX;
     this.hammer_mc.y = stage.mouseY / stage.scaleY;
}

//Hit Eye with Hammer to stop

this.animation_mc.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
 {
     this.animation_mc.stop();
}

//Tap Key with Hammer to start

this.key_mc.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
     this.animation_mc.play();
}

This code is a pretty simple affair of assigning code snippets to stage objects — except for one bug that emerged in late 2018. I’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).

The fix for Custom Mouse Cursor

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 “/ stage.scaleX” and “/ stage.scaleY” 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 this StackOverflow discussion.

This, by the way, is a great illustration of debugging: it’s never-ending! The standard Custom Mouse Cursor code worked in early 2018, but broke later in the year. This goes to show, even after you have created and deployed a bullet-proof code solution, 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 “cursor code snippet mouse not aligned javascript stage.mousex” into a search engine (including a small snatch of the actual code is helpful). I found the solution linked above at Stack Overflow, one of the many chatrooms inhabited by web developers.

It’s also an example of why you can’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. Update in 2023: it should be noted that the Custom Mouse Cursor STILL has NOT incorporated this fix, five years later!

Your turn

This project will involve the development of an interactive art machine. The machine can be one from history (like the Chocolate Grinder at right, with proper citation, naturally), or it can be one of your own invention. Important to keep the machine simple enough that it’s not frustrating but complex enough that you demonstrate facility with the tools you’ve learned. Nevertheless, keeping it simple does not mean boring! You can see there are a lot of effects you can create… let your narrative determine the RIGHT effects to use.

Mark Jones et. al., still from an animation for Variations on The Large Glass’s Chocolate Grinder, 1999. See video here >

A recommended workflow

• In your sketchbook, consider possible narratives that explore mechanics and interaction, and how these might best be developed.
• If necessary, create bitmap assets in Photoshop to import to Animate. Think about what moves, what’s static, and the development of layers.
• Proceed with the creation of the Animate file, which upon completion you export into a .js/.html file pair.
• Along with referencing back to our tutorials, use these resources to help you work from the ground up:
  • The Code Snippet library in Animate provides many basic JavaScript functions, commented to help you.
  • http://www.createjs.com/easeljs EaselJS, part of the CreateJS family of libaries, is written with Animate developers in mind.
    • There is an API library here »
    • There are live edit examples here »
    • Downloads are found at http://www.createjs.com/downloads
  • Animators will also be very interested in the Tween JS materials at http://www.createjs.com/tweenjs
  • CreateJS at GitHub https://github.com/CreateJS
• If any of these don’t yield the goods, Google-search for code you might be able to adapt to your work. Example: type “animate cc buttons” into a Google search and you’ll see dozens of sites with tutorials, downloadable files, code you can adapt and modify. My go-to sites for inspiration include CodePen, GitHub, StackOverflow, JSFiddle and many other social spaces for front-end developers. There is a culture of sharing among developers on the web. Take advantage of it — and as you get good at this, contribute to it later on!

Jargon Alert:

• API Application Programming Interface (an adopted set of standards and protocols for building apps)
• DOM Document Object Model (looks like a node tree in Maya material editing! Shows hierarchic relationships.)

Publish

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.

Comic relief

Hall of Fame

Sisyphus: open in a new window >

Ouch: open in a new window >

Whackamole: open in a new window >