DIY Holographic Audio Visualizer with Gesture Control


[Ambient music] In this video we’re going to show you how to make a 3d holographic visualizer Our visualizer can play any SoundCloud playlist and animate graphics in real time with the music Music and graphics can be controlled with simple hand gestures using a motion control board. For example, swipe up or down to toggle different visualizer animation settings or make a clockwise circular motion to control the volume [Music volume increases] The holographic display is generated by reflecting an image at a 45-degree angle from a monitor located at the top of the device. The reflected image has a parallax effect, which makes it seem 3d. [Music changes] Everything in this project was built using a couple 3d printed parts and off-the-shelf hardware. Let’s get started. We’re using a Raspberry Pi, and this Flick board by ModMyPi and Pi Supply to do the motion control. We started out by cutting a few lengths of wood to mount the monitor on top of the hologram device. There were two 23.08 and two 14.58 inch 1.5 by 5 inch planks. We also cut two 21.8 inch and two 13.3 inch 0.75 by 0.75 planks. After cutting all of the planks of wood, we screwed the smaller square planks onto the sides of the rectangular planks in order to make a small lip for the monitor to sit on. After drilling a few pilot holes and screwing the pieces together with some small number six screws, we arranged all four pieces in a rectangle so that we could clamp and screw them together. Again we use some small pilot holes and number six screws to screw these together. There’s only a small area that you can drill into in order to screw these pieces together, so make sure you take your time and measure properly before drilling. For the platform base we cut six pieces of one by two. There were two 22.83 inch pieces two 14.33 inch pieces and two 12.99 inch pieces. Using the same technique, we drilled and screwed the 22 and 14 inch pieces together in a small rectangular platform. Once those pieces were screwed together we use the12.99 inch pieces as supports for the top portion of the frame. We aligned these at the end of the bottom portion and screwed them in with some number six screws. After the bottom and top portions were done, we sprayed them with some semi-gloss paint. If you’re doing this indoors make sure you have proper ventilation so that you don’t get sick from the fumes 🙁 While that was drying, I started writing some code for the visualizer the code for this project will be running in two parts the first part will be running on a computer and This can be any computer… but I’m using my Mac for this. You can also use a Windows computer as long as it’s able to run node.js. The computer will be running the code for the visualizer and the song play mechanism. This system is isolated from the machine. That’s running commands from the Flick board. That will be run by a Raspberry Pi. The Raspberry Pi can communicate with the computer running the visualizer if it’s on the same network… and we send an HTTP request to the server which is being run by node.js on the computer. This is a web request interface, so you can send a request — say for instance — “/next” to the computer and switch a song on the visualizer. This interface is consistent, so you could also connect it to say a custom phone app if you want… or just make the request through the browser. This program runs off of three.js which is a web interface for OpenGL. There are three visualizers in the code as well as a render.js file. In the renderer.js file, we initialize those visualizers and add them to the document. If you want to make your own visualizer, all you have to do is add another file and implement three different methods “initialize()”, “render()” and “animate()”. To change the SoundCloud playlist just go to the renderer.js file and modify the playlist constant. Just take the ending portion of the URL for the playlist and wrap it in quotes. There would be more information about how to do this on the Hackster.io page. A large sheet of clear acrylic was used to reflect the image for the hologram We use a scoring device to score and snap off three pieces of acrylic. The front piece was 12.76 inches tall 20.04 inches wide at the base and 2 inches wide at the top. The sides were 12.95 inches tall, 2.12 inches wide at the top, and 11.28 inches wide at the base. These will vary with your hologram depending on the size of the monitor, so make sure to follow the formula that we provide on the Hackster.io page to calculate the right size for your particular application. We originally started out by trying to cut this really thick piece of acrylic, but it ended up being too thick because we weren’t able to easily score and snap off the sides of this piece.
We decided to use some of this thinner stuff and when we got it, it wasn’t very rigid but now that we cut it we think it’s rigid enough to hold up its weight on the hologram. I removed all the plastic wrap from the acrylic sheet (which is always super satisfying) and then I started assembling the structure. We 3d printed a couple angle brackets just to help with the rigidity of the platform. Some small number six screws were used to hold all the brackets in place. Next, I test fit the monitor on top of the structure and made sure there was enough room on the edges for some small 3d printed spacers to hold the monitor in place. I quickly found the dimensions of the base and then use those dimensions to cut a piece of black PVC for the acrylic frustum to sit on top of. Using our old smart mirror frame as a straight edge I used a simple box cutter to score and snap off a piece of the PVC. [Upbeat music] I also cut some small notches at the back of the PVC board so that it would fit snugly between the two three printed brackets. One more 3d printed piece was used to hold the acrylic sheets in place. It made it easy to mount them at a 45-degree angle. I just had to make sure that I centered the piece and then screwed it in with a couple number six screws. I also, cut one more piece of PVC and screwed it into the back of the structure to make the enclosure darker and help sell the effect. Finally, I mounted the TV and screwed in those 3d printed spacers that I test-fit earlier. The acrylic sheets were then slotted into the 3d printed holder. I started with the sides, slotting them in from the front, and then I moved to the front piece and slotted that in from the side [Music volume increases] To run the code, you’ll first need to install some dependencies for the Flick board. Flick has a repository where you can run this one line command and it will set up everything you need for the Flick board to work. Once it’s done you can run this flick demo program and you can play around with the board and make sure that it works. Next, you’ll need to download our repository which I will link in the description. In the repository, there’ll be a controls folder Make sure you open this on the Raspberry Pi. You also need to have Python 2.7 installed instead of Python 3. After you’ve verified that, install the dependencies with “sudo pip install -r requirements.txt” You’ll need to modify the main program in order to make it work with your computer visualizer. If you open up the program, there’s a host variable at the top. You’ll need to change the IP of this to the IP of your computer running the visualizer. You’ll need to make sure that this is a local IP and your Raspberry Pi is on the same network. I found my IP using “ifconfig” on the computer that I’m running my visualizer on. There will be more details about this in the repository. Finally, I can type “python swipe-controller.py” to start the program on the computer that you’re going to use for your visualizer. You need to make sure that you have node.js installed this will install on pretty much any computer whether it be Mac, Windows, or Linux. But you want to make sure you have at least node version 6 installed on your computer. To install the dependencies for this program. I type “sudo npm install” and then I can run the program with “npm start” Here I’m controlling the visualizer with a few different web requests. The housing for our Flick board was created with a few different 3d printed parts. Our 3d printer wasn’t big enough to print the entire enclosure, so we separated it into four parts and screwed them on independently. We wired up the Flick board using the schematics provided online by the Flick team and then used some 2.5 millimeter screws to screw the pieces on the corners of the flick board. We made sure they were really tight so that they didn’t move around. The board housing was screwed on to the edge of the visualizer using some small screws. We hid the Raspberry Pi underneath and plugged it into an independent power source. The last thing we did was wire up our monitor directly to the computer running the visualizer. Your computer will supply the audio for the visualizer so you’ll likely want to hook this up to a set of external speakers. We use a sound bar because it’s something we had lying around. I needed to flip the orientation of the monitor by 180 degrees so that it would display the image correctly on the clear frustum. If the visualizer doesn’t respond to the motion controls provided to the flick board, there’s probably an issue with the communication between the two programs. Make sure to look at the output of the Raspberry Pi program to make sure that it’s connected properly. Alright, that’s it for this video. I hope you guys enjoyed it. If you liked the Flick board that we use for the motion control for the audio visualizer, you’re in luck. We’re teaming up with ModMyPI and PI Supply and they’re giving away a few boards on their website so if you click the link in the description you can go over to their website and Learn how to win one of your own. As always, we’ll post a link to the hackster.io page in the description which will contain all the materials, 3d printed parts, and a full write-up for the project in case you missed a step in the video Make sure to subscribe so that you can stay up to date with all of our videos, but until then see you next time.

53 Comments

Add a Comment

Your email address will not be published. Required fields are marked *