Maker.io main logo

How to Make Animated Graphics for Hologram Displays

2020-01-07 | By Adafruit Industries

License: See Original Project 3D Printing

Courtesy of Adafruit

Guide by Isaac Wellish

Overview

Turn your favorite character into a hologram! Strap a PyPortal to a continuous rotation servo and watch in awe. With a few edits and some formatting, you'll have floating animations in no time.

 

In this guide we'll go through an example of our own animation starring Blinka, the CircuitPython mascot.

mascot_A

mascot_1

We have a custom 3D printed enclosure you can use as a "vertical holder" which attaches to the servo.

adafruit_industries_2

To display the graphics and project onto the hologram module, you can also use a smart phone, or tablet, however you won't be able to attach to the servo to rotate freely.

pyrimid_suction_3

pyrimid_suction_4

Parts

Circuit Diagram

The diagram below provides a visual reference for wiring the components. This isn't true to scale, it is just meant to be used as a reference. This diagram was created using Fritzing software.

Adafruit Library for Fritzing

Use our Fritzing parts library to create circuit diagrams for your projects. Download the library or just grab the individual parts. Get library and parts from GitHub Adafruit Fritzing Parts.

fritzing_5

Wired Connections

Slide switch to PowerBoost

  • Switch to enable and ground

Servo to PyPortal

  • Ground to ground (D3)
  • Signal (D3)
  • Voltage to voltage (D3)

Battery to PowerBoost

  • JST to JST port

PyPortal to PowerBoost

  • Ground to ground (D4)
  • Voltage to voltage (D4)

Preparing the Graphic

First up, find an animation you'd like to turn into a hologram.

You can use videos or GIFs.

In order for the hologram to work properly, try and find something that is a standalone object or character rather than a landscape etc. If you can get the subject to be against a black background, that helps too.

Giphy has some great options to choose from.

If you can find multiple angles of the animation that is a huge plus, but if not, the same graphic can just be rotated for each angle.

Please make sure the animation is in GIF format.

If the animation is a video file, you can convert it to GIF format with ezgif.com. Head here to convert video to a GIF. Simply upload the video file, make any changes you might want and output as a gif. You can right click and save the file somewhere handy.

video_6

Upload video

We will be using the below GIFs to make the hologram animation featured in the guide.

Blinky_7

GIF 82491GIF 2 82492

GIF placement

We're going to use Google Slides to place the GIFs in the right orientation for the hologram.

If you have a Google account head to the Slides site.

If you don't have a Google account, you will need to make one to use Slides.

Under "Start a new presentation", click "Blank."

Blank_8

Delete the default text elements and change the background of the slide to black.

default_9

background_10

background_11

Orient the GIFs

Drag the GIFs onto the slide.

gif1_12

gif2_13

gif3_14

Orient them accordingly. They must be opposite and equidistant from each other as best as possible.

Screen recording

Take a screen recording of the GIFs playing for 2 seconds or so.

If you have a Mac you can use QuickTime to screen record. For PC you can use Apowersoft's screen recorder or another free screen recorder of your choice.

Create the GIF

gif_maker1_15

Head to ezgif.com and select "Video to GIF."

gif_maker2_16

Upload the video, and click "Convert to GIF."

gif_maker3_17

Next click the "resize" tool.

gif_maker4_18

Change the size of the GIF to 320 (height) x 240 (width) and click "Resize image."

Image gif_maker5_19

Lastly save the GIF somewhere on your computer.

Below is the GIF we made for the guide if you'd like to use for an example hologram. Right click the GIF and save it somewhere handy on your computer.

example_20

GIF 82651

Next, we'll prepare the PyPortal to upload the GIF.

Software

Firmware_21

Upgrade Firmware

Let's get the PyPortal setup with latest firmware. The simplest way is to download the UF2 file from circuitpython.org and drop it on to the PORTALBOOT drive.

  • Plug in your PyPortal via a known good data+power USB cable.
  • Double press the reset button and wait for the NeoPixel to turn green.
  • The PORTALBOOT drive should show up on your computer.
  • Download the UF2 file below and drop it onto the root of the PORTALBOOT drive.

Download PyPortal Firmware

Loading GIFs

The drive will automatically reboot and load as a USB drive titled CIRCUITPY. Open the drive and create a new folder named gifs. Download our demo images and drop them into the gifs folder.

Loading_22

Playing_23

Playing GIFs

Make sure you have added all of your desired gifs to the folders. After that, you will need to download the GIF_SERVO.UF2 file below.

  • Double press the reset button and wait for the NeoPixel to turn green.
  • The PORTALBOOT drive will show up on your computer.
  • Upload the GIF_SERVO.UF2 file to the PORTALBOOT drive, making sure you rename the file to code.py.

GIF_SERVO.UF2

gifconfig_24

GIF Configuration

The screen should turn blue with a dialog box and text. By default, the GIF player uses a configuration file that lets you specify how to play back the GIF. The configuration file can be optional, but if you'd like to use one use the link below to get it. It's not necessary, so press the TAP icon to proceed and play back your GIFs.

GIF Playback Configuration

3D Printing

3D_25

3D Printed Parts

Parts are designed to be 3D printed with FDM based machines. STL files are oriented to print "as is". Parts are listed below with file name and description. Parts require tight tolerances that might need adjusting slice setting. Reference the suggested settings below.

Download STLs

Edit Design

Slice Settings

Use these settings as reference. Values listed were used in Ultimaker's CURA 3.X slicing software.

  • 0.2mm Layer Height / 0.4mm nozzle
  • 0.4mm Line Width (inner & outer widths)
  • 40mm/s printing speed
  • 20% infill
  • Supports: No
  • Brim Line Count: 5

slice_25a

Assembly

wires1_26

Prep Wires

I used two JST PH 3-Pin to Male Header Cables, one to solder to the PowerBoost and the other cables to connect the servo.

For the PowerBoost cable, we'll only need the red and black wire. I removed the third white wire. Trim and tin the ends of the red and black wires.

wires2_27

Solder PowerBoost

Solder the red wire to the + side and the black wire to the - side of the PowerBoost.

Prep Slide Switch

We can add a slight bend to the slide switch pins so it can sit on the back of the through holes on the PowerBoost. I then trimmed off the third pin to easily fit it on the board.

switch1_27

Solder Slide Switch

Tin the EN and GND on the PowerBoost and then solder the slide switch into place.

Solder Slide Switch

PyPortal Standoffs

We'll need to elevate the PyPortal so it can sit over the PowerBoost and Battery. I used 8mm long nylon standoffs with 5mm M2.5 screws to the mounting tabs on the PyPortal.

PyPortal Standoffs

Mount PowerBoost

Align the printed PyPortal mount to the reset button cutout. The PowerBoost mounts with the USB port pointing out so we can easily access it for charging the battery.

I used M2.5 5mm screws to mount the PowerBoost.

Mount PowerBoost

Mount Battery

Orient the battery so the wires can plug into the PowerBoost. Plug the battery into the Power Boost and the wire on the PowerBoost to the D4 port on the PyPortal.

Mount Battery

Mount PyPortal

Align the PyPortal with the printed mount and use four more M2.5 5mm screws to secure it to the mount.

Mount PyPortal

Servo cable

Pass the JST cable for the servo through the printed mount and connect it to the D3 port on the PyPortal.

Servo cable

Mount and connect servo

Align the servo with the wire cut out on the walls on the printed mount.

Plug the male ends into the female ends of the servo. The white wire connects to the orange wire on the servo. Black connects to brown and red connect to the red wire on the servo.

Mount and connect servo

Servo horn

The servo includes a circular horn that press fits into the servo. I wrapped the excess wires around the servo body.

Servo horn

Horn base

The circular servo horn is then press fitted into the larger printed circular base.

Horn base

Place Cover

To prevent light leaking on the sides of the PyPortal, we can place the front cover of the display.

Place Cover

Servo Speed

If your servo has a Potentiometer, we can adjust the speed and direction with a screw driver.

Servo Speed

Complete!

Fit the prism in the center of the hologram graphics so the four quadrants align and reflections can project on each side of the prism.

complete_39

Test Out the Hologram

To try out the hologram, place the projector prism on top of and in the center of the screen with the animation.

If the hologram is faint, try turning the brightness up on the screen or moving some place darker.

Smart Phone / Tablet Examples

Here are a couple of slick examples from the Spectre website to test out your prism with a phone or tablet.

Robot

 

Rocket

 

Bee

 

Fairy

 

Octopus

 

For more info, here's a video from Specre on how to use the prism:

 

制造商零件编号 4116
PYPORTAL - CIRCUITPYTHON POWERED
Adafruit Industries LLC
制造商零件编号 2465
EVAL BOARD FOR TPS61090
Adafruit Industries LLC
制造商零件编号 3893
JST PH 3PIN TO MALE HEADER CABLE
Adafruit Industries LLC
制造商零件编号 3299
BLACK NYLON SCREW AND STAND-OFF
Adafruit Industries LLC
制造商零件编号 154
SERVOMOTOR RC 5V CONT ROTATE
Adafruit Industries LLC
制造商零件编号 4111
CABLE A PLUG TO MCR B PLUG 3.28'
Adafruit Industries LLC
Add all DigiKey Parts to Cart
TechForum

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum