Interactive Art Installation

by designmaketeach in Circuits > Art

4853 Views, 16 Favorites, 0 Comments

Interactive Art Installation

PeaceAtRest2.jpg
Peace at Rest Demo

In this project, we are mixing coding and physical computing to create an interactive art installation. The example shared in this Instructable is a student coding project that combines graphic and sound elements with a purpose built interface. The combination of Scratch programming and Makey Makey powered controller create an awesome interactive art and learning experience.

Materials and Tools

IMG_8595.jpg

-Laptop with Scratch

-Makey Makey

-5x Momentary SPST Switches (normally OFF)

-2/C Solid Copper Annunciator Wire

-Wooden Box

-Hot Glue Gun

-Drill

Code

Screen Shot 2018-03-05 at 12.00.57 AM.png
Screen Shot 2018-03-04 at 11.04.48 PM.png
Screen Shot 2018-03-04 at 11.09.03 PM.png

The code used in this example can be found at https://scratch.mit.edu/projects/52506506/. The work entitled Peace at Rest was coded by Connor Baker as a high school senior. The artist/coder wanted to create an ethereal and haunting piece that incorporated sound and images into the work.

Background and Intro

-A custom sound, background image and splash screen images were imported.

-The repeat function is used to gradually bring in the background audio of waves crashing.

-The repeat functions are also used to create an initial splash screen that gives the artist name and the name of the work.

Sprites and Sound

-The work shows two variations of the same scene. The original image is the background and images of the five window areas were cropped from the second variation and saved as separate image files. These five images were imported as sprites in the program.

-The five sprites are carefully positioned to overlay the background and seamlessly transition to the new image when a button is pressed.
-Forever and repeat functions are used to continuously monitor for key presses and layer in musical notes on the soundscapes that fade away when the button is released.

Testing and Debugging

-Repeated testing and debugging are necessary to create a seamless visual and auditory transition.

-Each keyboard button press should be tested singly and together with other keys to bring in each sprite and play the appropriate instrument notes.



Physical Computing Interface

IMG_8596.JPG
IMG_8597.JPG
IMG_8599.JPG
IMG_8600.JPG

For this project, we are using a Makey Makey board as the controller for the art installation.

-Determine which inputs on the Makey Makey will be used for the project. (In this example the W, A, S, D, F are being used.)

-Cut 10 pieces of annunciator wire approximately 8" in length.

-Strip 1 cm of insulation off the end of each wire.

-Plug one end of each of five wires in the W, A, S, D and F headers on the back of the Makey Makey.

-Plug one end of a 6th wire in one of the EARTH header openings in the back of the Makey Makey.

-Connect the Makey Makey to computer with USB cable.

-Run the Scratch program and then touch the free end of W, A, S, D and F to the free end of the EARTH wire one by one.

-Verify that each wire connection correctly triggers the appropriate image and sound in the program.

Interface Housing

IMG_8602.jpg
IMG_8603.jpg
IMG_8604.jpg
IMG_8605.jpg
IMG_8606.JPG
PeaceAtRest.jpg

In the Peace at Rest example the artist used a wooden box that he imagined being on a small table in the room depicted in the work.

-Mark desired location of buttons on the top of the piece. (Button layout corresponds to the location of the 5 windows in the scene.)

-Drill holes in each location matching the diameter of the shaft of the buttons being used. (In this case, the button shaft was approximately 16mm and several smaller holes had to be drilled and then a file used to create the correct diameter holes.

-Drill hole in back of box to fit smallest end of USB cable being used to connect the Makey Makey.

-Use the button hardware and/or hot glue to fix the buttons in place.

-Wire one arm of each button to the A,S, D, F and W key headers on the Makey Makey corresponding to the desired action in the Scratch program using the pre-cut annunciator wires.

-Wire the second arm of each button to the EARTH header on the Makey Makey.

-Place the Makey Makey in the box and connect the USB cable through the hole in the back of the box.

-Connect the Makey Makey to the laptop.

-Run the Scratch program and test each button press both individually and together.

-Display the work. (We connected the work to a large external display and speakers and had the interface out for maker faire participants to try.)