Articles, Blog

DIY Holographic Audio Visualizer with Gesture Control

September 12, 2019


[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.

54 Comments

  • Reply Sayyed Ashfak October 27, 2017 at 2:47 pm

    I am first

  • Reply Gerald Diviyanathen October 27, 2017 at 2:54 pm

    im the 16th

  • Reply Matt Ward October 27, 2017 at 3:00 pm

    This was really cool but my god dude use millimetres…

  • Reply herantd October 27, 2017 at 3:39 pm

    Cool project, but why do you always use headed rpi instead of ssh?

  • Reply RH Productions October 27, 2017 at 4:12 pm

    This is dope. Can you make a video of connecting this to google home or Alexa?

  • Reply Matt Bennett October 27, 2017 at 4:44 pm

    Wow. I think that's all I need to say

  • Reply Michael Zajac October 27, 2017 at 4:46 pm

    Please, you need fix "Closed Captioned" on your films. I'm deaf. 🙁

  • Reply Hans Lee October 27, 2017 at 5:00 pm

    Why have 3 panels when you really only needed one?

  • Reply Undi vided October 27, 2017 at 5:54 pm

    Don't you love that feeling when you create something and it all comes together nciely… I live for those moments

  • Reply Undi vided October 27, 2017 at 6:04 pm

    You guys should try to venture into some VR/AR. Would be fun to see what you come up with.

  • Reply 2D October 27, 2017 at 8:48 pm

    reddit the hackers

  • Reply Krazyflipz October 27, 2017 at 9:00 pm

    How much did the entire build cost?

  • Reply zodiacxXtheory October 28, 2017 at 12:52 am

    Could I mood this to work on a record player from the 80's

  • Reply Frank Mazzarella October 28, 2017 at 1:16 am

    I was not expecting to see JavaScript. Kudos

  • Reply Adam Christopher Boyd October 28, 2017 at 2:53 am

    Just a note: if you are doing something with parallax then you should get some footage to show off the effect. Tripod shots, while stable, do not "sell the effect" as you said. A simple shot walking left and then back right will achieve this. Look forward to your next project and would love to see this adapted to play the old hologram games we used to have in the arcades. Sega made one I think….Time something…

  • Reply Thor214 October 28, 2017 at 4:01 am

    Unless you are doing a video for CNC machining of parts, use fractional measurements when giving US Customary Unit measurements. If you insist on base 10 sub-units, just use metric.

    You will never see a proper cut list for a DIY project with decimal measurements that don't match up to 32nds of an inch at the smallest. This is something to consider in the design documentation process. If the measurements were arbitrary to fit the project parts, then advise others to cut to fit.

    I know this whole thing seems petty and pedantic, but tape measures do not have measurements in base-10. The job of rendering down the fat of the design process is work done by one person instead of forcing you audience to break out their conversion chart from the bottom of the bench or to break out a calculator to do math that should have already been done.

  • Reply Hayden October 28, 2017 at 8:10 am

    Why has the separate computer? Can't you just use the pi for everything?

  • Reply Jeeva Jp October 28, 2017 at 8:52 am

    Supercool

  • Reply Hacker Shack October 28, 2017 at 3:37 pm

    For everyone asking why I didn't run the visualizer on the Raspberry Pi — I tried, but it was too laggy (5fps on a Pi 3), which is why I ended up using a more powerful computer to run the visualizer. I used a 3D PDF of our design for the hologram structure to find the measurements. The tool gives measurements at the hundredth rather than the nearest 1/32nd. Also, I didn't want to mix units with metric measurements because all of our supplies were in standard. If you download the PDF on hackster.io (links in description) and use the 3D measurement tool in Adobe Reader, you should be able to get metric conversions.

    Aaron

  • Reply mokopa October 28, 2017 at 7:58 pm

    For those who don't know, the inch is a unit of length in the United States formally equal to  1⁄36 yard but usually understood as  1⁄12 of a foot. The foot is defined as 12 inches. Don't ask about the yard…that's a deep, dark and depressing rabbit hole.

  • Reply XY Z October 31, 2017 at 2:14 am

    This was sick! What do you suggest for someone trying to get a better feel with the coding and software for projects like this? Thanks

  • Reply SAN SNOVA October 31, 2017 at 11:00 am

    Nice video, I will try this!

  • Reply cyber spartan November 3, 2017 at 4:55 pm

    please make a video for python voice recognotion using raspberry pi

  • Reply FunKey Project November 3, 2017 at 7:22 pm

    Appart from not using the metric system, this is totally mindblowing. Congrats !!!

  • Reply #Programming Club November 6, 2017 at 1:08 am

    Can you please make a video on How to make smart glasses

  • Reply Marco H. November 7, 2017 at 11:25 pm

    Will you ever complete the bartender project? It looked so promising. Please

  • Reply JT Callison November 13, 2017 at 12:18 pm

    0:36 Which Ones Dat I Need It For My Music Video With Just A Photo As A Background

  • Reply Fairuz Islam Nitul November 29, 2017 at 12:16 am

    Is it possible to do this by just using Python, no javascript? And how exactly were the animations made?

  • Reply 黒鸽 Black_Pigeon9910 December 9, 2017 at 9:56 am

    I want just a streaming video then just running without wood…?

  • Reply Loith Raj January 8, 2018 at 12:05 pm

    Bro can u explain how did u calculate the Triangle to cut the Acrylic

  • Reply S3ODG February 17, 2018 at 12:42 am

    the command "sudo npm install " is not working HELP PLEASE

  • Reply What Conspiracy? February 20, 2018 at 11:54 pm

    node doesn't show an audio visualizer, starts with a small image and continues with a black screen.help?

  • Reply ms.design March 27, 2018 at 9:48 am

    This is great! Is there any way in which I can get this to work with a microphone input?

  • Reply virat parmar April 22, 2018 at 2:35 am

    I am seeing some really good videos….. like to see more…. great stuff……

  • Reply Gabriela Yumi April 24, 2018 at 6:33 am

    Hi! i need a tip to build one from my computer casemod, can i use it direct from one of my 2.0 usbs? Thanks!

  • Reply Houssem Bzi April 24, 2018 at 10:56 pm

    Is it possible to make it run on any other computer ? Thanks

  • Reply ChandlerGuy April 29, 2018 at 6:26 pm

    I get an error every time I do sudo npm install any help on this?

  • Reply MasonJ May 5, 2018 at 1:01 am

    mini?

  • Reply worloon lv May 23, 2018 at 7:10 am

    垃圾,

  • Reply Cindy Kutikova May 29, 2018 at 4:34 pm

    Hey, I would like to ask how should I calculate size of the frustum and size of the display? and why on some tutorial is frustum made from 4 sides and on the other tutorial from 3 sides? Thnx

  • Reply Ukesh Mahat June 21, 2018 at 4:00 am

    4:14 Which application did you use?

  • Reply Cole Miller June 22, 2018 at 8:51 am

    Could you use Skype as an input for the hologram program?

  • Reply reely vali July 5, 2018 at 5:00 pm

    Is it complicated to build sorry for bad english im german

  • Reply Андрей Косяков August 2, 2018 at 12:17 pm

    Hello! What kind of glass do you use? What do you think? Can I use a reverse projection film to improve the image? Or will it worsen him?
    And in your example, you use only one side. Can I make 3 videos from different sides so that I can see the image from all three sides? Thank you

  • Reply Ukesh Mahat August 7, 2018 at 4:19 pm

    Raspberry pi says “Error connecting to the HOST” even when i import requests and Flicklib . Please help me with it

  • Reply Phil S October 1, 2018 at 1:57 am

    Ok,seams like a good build.I like the display but want it to be connected with ( to an ) a AI, with an NN and project an avitar. Very well done!!!

  • Reply Paulo cesar November 15, 2018 at 9:39 pm

    Parabéns!!! Estou tentando fazer um usandouma TV led 32 pol, poderia me dizer qual a medida do trapézio?

  • Reply jonnala karthik reddy December 18, 2018 at 5:50 am

    instead of raspberry pick can we use arduino……

  • Reply Tomas Ha February 28, 2019 at 4:48 pm

    really cool stuff, but this tech could be utilized in much better usages instead of just plain audio visualizer.. i mean, who actually uses that on a daily basis?.. for example if you could use that for viewing architecture or engineering models employing hand motions, that would be sick.. pretty sure that would revolutionized the whole industry too. But nice job, love it.

  • Reply Mecha Team March 12, 2019 at 4:35 am

    How can u do that with 1 object in monitor, bcs in other video their use 4 side for the object and use 4 pcs acrillic??

    Pls reply my comment thank u

  • Reply Aldi Satria March 12, 2019 at 4:37 am

    Hey bro, iwanna make this projects. May i know your Email or something

  • Reply Katherine Adoblo March 23, 2019 at 9:26 pm

    How does the monitor work?

  • Reply winnie carter July 15, 2019 at 1:23 pm

    Could you give the code?

  • Reply Roy xwolf August 23, 2019 at 5:49 pm

    What will it look like from side

  • Leave a Reply