Holographic Audio Visualizer

with Motion Control

A 3D holographic audio visualizer with gesture control and real time animations
of SoundCloud playlists.
AdvancedFull instructions provided10 hours14,895

Things used in this project

Hardware components

Pi Supply Flick Large × 1

Raspberry Pi 3 Model B × 1

Computer Monitor × 1

0.093" Acrylic Sheet × 1

0.118" Black Foam PVC Sheet × 1

1.5" x 0.75" Wood, 8.5 Feet × 1

1.5" x 0.5" Wood, 6.5 Feet × 1

0.75" x 0.75" Wood, 6 Feet × 1

 #6 x 1-1/4" Countersunk Wood Screws × 25

#6 x 3/4" Countersunk Wood Screws × 15

M2.5 Socket Cap Screws × 4

M2.5 Nuts × 4

Spray Paint × 1

Software apps and online services

Node.js

Hand tools and fabrication machines

Hand Drill

Acrylic Sheet Scoring Tool

Story
A 3D holographic audio visualizer with gesture control can definitely
spice up your party and impress your friends. This display projects an
image from a monitor down onto an acrylic pyramid, or "frustum", which
then creates a 3D effect. The display has audio visualizers which
responds in real time to music being played from a SoundCloud playlist.
The display has a gesture control interface board which can detect
various hand motions without being touched. That means that swiping or
turning your hand in the air will allow you to play the next song, pause,
adjust the volume, switch the visualizer, and other cool functions.

The great thing is that the electronics hardware required is pretty

minimum and we already wrote the code for you. You just need to set up
the software and build a frame to put it all together. Check out this video
to see what it can do and how we built it:
Building the Top Frame
First we built the top of the frame which holds the monitor that projects
the image. We used a computer monitor with a 24" screen that was
about 13.38" x 21.88" overall. You will probably need to adjust the size
of your frame according to the size of your monitor.

The top frame is simply a rectangle with a lip on the inside of the frame
for the edges of the monitor to sit on. We made the frame using 1.5" x
0.5" wood, and used 0.75" x 0.75" wood for the inner lip.

Cut the pieces of wood for the frame that holds the monitor

Using a hand drill, we attached the inner lip to the frame one piece at a
time using two #6 wood screws each, then arranged each of these
combined pieces into a rectangle and assembled them together by
screwing the ends together.

1 / 3 • Screw the smaller wood pieces onto the larger ones. The smaller pieces are a lip for the
monitor to rest on

Building the Bottom Frame

The bottom frame is similar to the top frame, except without the inner lip.
We made the bottom frame using 1"x2"s, (really 1.5" x 0.75") wood
planks to the same outer dimensions as the top frame. Although the
outer dimensions were the same, the lengths of the pieces were slightly
different due to the difference in thickness of the wood planks. We
arranged the pieces into a rectangle and screwed them together as
shown in the picture below.

1 / 2 • Cut the wood pieces for the base and vertical supports

We then screwed two additional vertical pieces to the back side of the
bottom frame. These pieces are the columns that hold up the top frame.
The height of this piece will also depend on your monitor size since the
acrylic frustum we are going to make runs from the top frame to the
bottom frame at a 45 degree angle, and your monitor will no longer
project onto parts of the frustum if it is too tall and wide.

Attach the two support pieces

Of course, the assembly wouldn't look good if it was just unfinished

wood. Before attaching the top and bottom frames together, we sprayed
it with some black semi-gloss spray paint.

Spray paint the two frames with your choice of spray paint. We chose semi-gloss black

Cutting the Acrylic Frustum

Making the frustum is one of the more challenging parts of the build. The
frustum is three pieces of acrylic sheet brought together to form a three-
sided pyramid with a 45 degree slope. This is called the frustum.

We had to score and break off pieces of acrylic sheets to exact

dimensions. If not done properly, the acrylic sheet can break in
unintended ways, the edges may not be straight, and the frustum may
not go together well. The dimensions are also highly dependent on you
monitor size.
The dimensions are also tricky to get right if you are not building a 3D
model to get the exact dimensions you need. We recommend either
modeling it on your computer, or building a cardboard mockup to make
sure it will come together correctly. We posted a schematic of our
frustum dimensions for you to use as a guideline, but you can also use
the following formulas to determine your dimensions:

[Equations coming soon]

Trace out the shape on the acrylic sheet with a pen or marker, trying to
be as precise as possible. Then, use a scoring tool to to score the acrylic
anywhere between 20 - 50 times. Use a straight edge, like a long piece
of wood to guide your scoring tool straight. It is better to place the
guiding straight edge on the side of the part you are cutting out to
prevent the scoring tool from inadvertently going off the intended path
and over the surface of your piece.

Draw the shape to cut out on the acrylic sheet

It is important to start with multiple light, very straight strokes at first until
a definite score line has been established. After a definite grove has
been formed and you are confident that the tool will not jump out of the
grove as you are scoring with more pressure, then you can apply more
force. If you accidentally make a different score line, then it is very
difficult to get the sheet to break off straight. So be very careful and
patient.

Score the acrylic sheet with a scoring tool

After you are confident the score/grove is deep enough, place the score
over the edge of a table and use quick, gentle pulses to push down on
the sheet and break off the acrylic along your score line. This step can
be difficult to get right as the acrylic sometimes does not break along
your score line. It helps to use long pieces of wood to evenly distribute
your force.

Hang the edge over a table and gently break off the acrylic piece

Assembly
Now that most of the parts are made, we can start assembling the
device together. Because there will be a heavy monitor sitting on the top
of the frame, we 3D printed some support brackets to put in the corners.
We attached the 3D files for you to print, but you can also get brackets
from a hardware store as well.

Screw in some 3D printed support brackets for more rigidity

We need to cover up the base and back side of the assembly using
some black PVC sheet or other similar material. They also serve to add
to the 3D holographic affect by blocking light and creating a dark
background for the hologram. We used a box cutter to cut out some
0.118" PVC sheet.

1 / 4 • Cut some black PVC sheet to cover the base and back of the assembly

We're going to need a few more 3D printed parts to finish the rest of the build.
The 3D .stl files are attached. If you don't have your own 3D printer, try your
university or local library. There are also online services that accept .stl files
and can print and mail the part to you.

3D printing more parts

In the center of the top frame, we attached a 3D-printed frustum joint to hold
the three pieces of acrylic together at the proper angles. We also used some
3D printed brackets to hold the monitor into the top frame and center it.
 1 / 2 • Attach a 3D printed frustum joint to the center of the top frame

Finally, we are now ready to assemble the frustum. Slide the three pieces of
acrylic into the slots of the frustum joint.

1 / 2 • Slide the acrylic pieces into the slots of the frustum joint

Next, we have to build the gesture control interface for the holographic
display. Our 3D printer wasn't big enough to print the control interface housing
in one piece, so we had to split it up into four pieces. Simply screw the Flick
gesture control board into the housing, connect it to the Raspberry Pi, and
tuck the Pi inside the housing. Then screw this into the front of the bottom
holographic display frame. Run an HDMI cable from the Pi to the monitor, and
plug power into both the Pi and the monitor.

1 / 3 • The gesture control interface box prior to assembly

That's it!

You have made your own holographic display. See the code section below on
details of how to load up and run your holographic audio visualizer.

The image projects downward from the monitor and reflects off of the frustum

A 3D projection of an audio visualizer responding real-time to a song playing from SoundCloud

Running the Code

This project runs on two different devices. A Raspberry Pi controls the Flick
gesture recognition board which sends commands to the visualizer running on
a more powerful Mac/Windows/Linux computer with support for webGL to run
the graphics.

To start, make sure that you download this repository on the computer that
you want to run the visualizer on and the Raspberry Pi.

Visualizer

The visualizer must run on a normal computer since the 3d visualizer

animations lag on the Raspberry Pi. The visualizer animations are run in
an Electron environment and use Three.js (a WebGL library) for 3d graphics. A
server running with Node.js allows communication with the hand gesture
board.

Start by installing the latest stable version of Node.js on your computer. I used
version 6.x. Next, navigate to the repository directory and run sudo npm
install to install the dependencies for the project.

Start the visualizer with:

npm start

The Soundcloud playlist can be changed by modifying the const playlist =

'path/to/playlist'; const in the renderer.js file. The path can be found by
extracting the end of the url for a Soundcloud playlist. For example, if the url
for a playlist is:
https://soundcloud.com/someartist/sets/aplaylist

The const would be:

const playlist = 'someartist/sets/aplaylist';

Controls

First, make sure that you have the necessary dependencies installed on your
Raspberry Pi for the Flick gesture board. Start by running the following
command in your terminal:
curl -sSL https://pisupp.ly/flickcode | sudo bash

Make sure to restart your Pi, then run the following command in the terminal
to test your Flick board. You'll need to make sure it's wired properly before
testing.
 flick-demo

The controls portion of this project runs on a Raspberry Pi with a python

program. You'll need to make sure that your Raspberry Pi uses python 2.7 so
that the program runs properly. You can check the version of python running
on your system by running:
python --version

Navigate to the controls folder in the repository directory and execute the
following command to install all of the dependencies:
sudo pip install -r requirements.txt

Before running the controls program, modify the swipe-controller.py file by

replacing the <HOST_IP> portion of the host = 'http://<HOST_IP>:3000'variable with
the local IP of the computer running the visualizer.

Note: both computers must be on the same network. You can find the IP
address of your computer by typing ifconfig (ipconfig /all on windows) in the
terminal and looking for the inet address.

Run the program with:

python swipe-controller.py

Once both programs are running, you can test it out!

Visualizer Interface

The visualizer is controlled with web requests. The following urls can be typed
in the browser to control the visualizer.

 http://localhost:3000/next - advance to the next song

 http://localhost:3000/prev - play the last song

 http://localhost:3000/changeVis - change to the next visualizer

 http://localhost:3000/toggleVis - toggle the visualizer colors

 http://localhost:3000/toggle - start/stop the current song

 http://localhost:3000/volume?level=50 - change the volume to 50 (can be 1 -

100)

localhost:3000 can be replaced with the local IP of your computer to control it

from another device on the same network.

Cheers,

Aaron @ Hacker Shack

https://www.hackster.io/hackershack/holographic-audio-visualizer-with-motion-control-e72fee