A 3D holographic audio visualizer with gesture control and real time animations of SoundCloud playlists.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Finally, we are now ready to assemble the frustum. Slide the three pieces of acrylic 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.
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.
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.
