Introduction: Physical Interactions System - PlateaPlayer

By Personal website
About: Frontend web developer. Knowledge in all things HTML5, CSS3, Javascript, jQuery, Angular 4, React, Bootstrap, Sass. Some experience in PHP, MySQL, Node, MongoDB

This project describes the process followed for designing and developing the hardware implementation of the physical computing interactions of an interactive video player aimed at the video & digital television students of Universidad Autónoma de Occidente, involved around the topic of multisensory interactive videos, in the form of a product that can be easily manufactured and manipulated.

Currently, there are no free platforms for developing this kind of videos which also include sensory interactions. Therefore, its main purpose is to avoid students having to purchase costly software licenses, having to rely on and deliver halfway-made solutions to the class’ assignments, and having to spend much more time developing these platforms themselves.

The implementation proposed here is composed of five modules representing the main sensory interactions that can be synchronized. These are: water, smoke, temperature (hot/cold), wind, and light. These will be controlled by an Arduino using the Johnny Five JavaScript library.

Step 1: Materials and Tools - Container Box

Considering this project was meant for developing a prototype of the proposed system, simple materials were used:

  • Straw cardboard
  • Balsa wood rods (square and triangular shapes)
  • Scissors, insulating tape, wood glue, scalpel, hacksaw

Step 2: Materials - Wind Module

  • 5 CPU fans

Step 3: Materials - Temperature Module

  • 2 Peltier cells
  • 4 heatsinks
  • 2 fans (same as the wind module's)

Step 4: Materials - Light Module

  • ~50cm of RGB LED strip
  • 3 TIP31C transistors
  • External power source

Step 5: Materials - Smoke Module

  • 1 Ultrasonic humidifier
  • 1 1-channel relay
  • External power source
  • Water container

Step 6: Materials - Water Module

  • Submersible micro-pump
  • ~20cm plastic pipe
  • Water container (same as smoke module's)
  • Small straws (~5)

Step 7: Cutting Holes on the Front Side for Fans

Cut a piece of the cardboard (~50cm wide by ~40cm tall), then cut 5 holes for each fan using the scalpel. Finally, tape them to the cardboard.

Step 8: Making the Temperature (Peltier Cell) Modules

Tape the Peltier cells to the heatsinks.

Step 9: Integrate the Peltier Modules to the Fans

Tape the Peltier modules to a fan. Make sure you tape them facing the front side in opposite directions so that the hot and cold sides of each cell gets blown outside by the corresponding fan.

Step 10: Making the "column" for the Top Cover

Cut the balsa rods (~50cm wide) and glue them together as shown in the images. This will allow for the top cardboard cover to be glued to the front and sides.

Next, glue together a piece of cardboard on the diagonal side and make around 8 small holes (~5mm by ~5mm) for the straws of the water module to be inserted.

Step 11: Giving Structure to the Box

Cut 3 balsa rods as shown in the image and glue them to the front side cardboard piece.

Step 12: Cut the Sides of the Box

Cut 3 pieces of cardboard (~50cm wide by ~50cm tall by ~30cm deep). 2 for each side of the box plus 1 for the inside to separate the water container space from the electronic components.

Step 13: Adapting the Water Container Space

Make a base for the water container by cutting 3 pieces of square shaped balsa rods to ~20cm and tape them together to the frame of the main structure as shown in the image, so that the container can fit.

Next, use 1 of the previously cut pieces of cardboard for the sides, make a small hole so that some wires can pass through, and tape them together.

Optionally, you can tape a triangular shaped balsa rod to the back the base to avoid the container from falling and spilling the water.

Step 14: Making the Water Container

Cut a plastic bottle to the half and use its top part as a cover as shown in the images. Place the micro-pump and ultrasonic humidifier inside.

Fill it with water prior to usage.

Step 15: Closing the Main Structure

Glue the side, bottom and top cardboard covers to the rest of the structure.

Step 16: Adding the Lights Module

Tape the RGB LED strip around the top and sides of the box, so that the wires can go inside the hole on the left side.

Step 17: Making the Water Pipe

Cut around 8 small holes (~1mm by ~1mm) in the plastic pipe and insert the small straws. Tape them together as tightly as possible to avoid leaking water to the rest of the box.

Finally, connect the open end of the pipe to the micro-pump and insert the straws into the holes of the top diagonal piece of cardboard.

Step 18: Wiring

The selected pins can be changed per user desire so they are not specified here, although the code obviously does.


Wind/Temperature modules:

Use jumper wires to connect the 5Vs of each fan and Peltier cell to a digital pin in the Arduino board, and the GNDs to the common GND line in the protoboard.

Water module:

Use jumper wires to directly connect the 5V of the micro-pump to one of the 5V out pins of the Arduino, and use a TIP31C transistor as a switch for the GND wires. This transistor goes to a digital pin to the Arduino to control it.

Lights module:

Use jumper wires to connect each color channel to a TIP31C transistor connected to the GND line of the protoboard, and which goes to an analog pin in the Arduino to control the color displayed by specifying the R, G and B to the correct one. The power wire is connected to a protoboard line powered through an adapter connected to a regular power outlet.

Smoke module:

Use jumper wires to connect the power to a relay which connects it to the same power supply in the protoboard from the lights module. Then connect this relay to a digital pin in the Arduino to switch it on and off. Connect its GND to the GND line in the protoboard.

Step 19: Programming and Running

A simple Node server is required for Johnny Five to work. To communicate the front and backend in real time and to synchronize the interactive video with the sensory interactions, Socket.io is also implemented.

The code for this system, as well as the interactive video player previously developed as a JavaScript plugin, can be downloaded in this Github repo: https://github.com/ADavidLiu/PlateaPlayer

Serve the webpage with the player from the same server and run both.