Using the puppet module in the Bluefruit Playground App, you can create the coolest virtual puppet show ever. Learn how to control the puppet, add a green screen, then record your performance.

The Circuit Playground Bluefruit (CBP) controls the orientation, mouth and other features of the puppet over Bluetooth.

Additionally, this guide walks through how to use the "green screen" mode along with video software to have more control over how you film your puppetry.

Here's a demo of what you can unleash with the hottest new digital puppet technology. 

This app currently works with iPhone only. Android is anticipated, but no release date is set at this time.

Parts

Circuit Playground Bluefruit is our third board in the Circuit Playground series, another step towards a perfect introduction to electronics and programming. We've...
$24.95
In Stock
Lithium ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery...
$6.95
In Stock
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or...
$2.95
In Stock

Materials

  • Some tape (double-sided is preferable) to secure the battery to the Circuit Playground Bluefruit.
  • A rubber band is recommended securing the CPB to your hand during use.

For computer connections (optional)

Software

A vide recording software such as OBS

Follow the below guide on setting up the CPB to work with the app.

Follow the directions in the guide and on the app. They will show you how to power the CPB with a battery, and then pair it with your compatible smartphone.

  • It helps to tape the battery to the back of the CPB.
  • This makes for more streamlined puppetry down the line!

Puppet Features

To control the virtual puppet, the Bluefruit Playground app looks at the data from the CPB's onboard accelerometer and buttons. Here is a description of those features and how to navigate them.

  • Tilt left/right to tilt head
  • Tilt up/down to open/close mouth 
  • Tap button A to trigger the "raised eyebrows" animation
  • Tap button B to trigger the "head shake" animation

Controlling the Puppet via the App

Additionally, you can control two other features of the puppet directly on the app itself.

  • Touch and drag the puppet to change the orientation/direction that it is facing
  • Pinch to enlarge or shrink puppet

How to hold the CPB for optimized puppetry

accel__gyro____magnetometers_cpb_hold.png
Drawing from the help page on the puppets module of the app
  • To keep the CPB snug on your hand while puppeteering, it's best to use a rubber band around your index through pinky fingers, slipping the CPB under the top of the rubber band.
  • If needed, make two loops with your rubber band to increase snug fit and prevent a flying CPB.

Other App Functions

There are buttons at the bottom for accessing more capabilities

Recording Videos

Click the recond button in the lower-left corner of the app to begin recording.

You may get asked if you'd like to enable the camera and microphone for recording, hit yes.

Once you are finished recording, click the record button again to stop the recording.

The app will then prompt you to either save or discard the video. Hit save to save the video to your device.

The video should now show up in your photos.

"Green Screen" Mode

Tap the icon with the two squares to enable green screen mode. More on how to use this in the "Connecting and Controlling" section of this guide.

Camera Flip

Tap the button with the camera icon to flip the camera back and forth.

Full Screen Toggle

Tap the icon with the arrows to enter and exit full-screen mode.

Help/how to

Tap the question mark icon on the top right of the screen for more info on how to best hold the CPB and more.

What if you would like to film puppets independently from your phone? Say you want a special background from another video source as the backdrop for your puppet. This page will show you how.

Connect the phone to the computer

Using a lightning cable, connect your phone to your computer.

Open Quicktime Player on your Computer

  • Select "File" then "New Movie Recording"
  • Then click the drop-down arrow next to the recording button and select your phone from the available sources.
  • Now your phone screen output is connected and accessible.
  • If you are getting a message on QuickTime player that it "does not have access to the camera or microphone", you must enable them.
  • Go to System Preferences > Security & Privacy > Privacy Pane. Check that both Camera and Microphone have access through QuickTime Player.

Download OBS

OBS or Open Broadcaster Software - this is an application that allows users to record and stream video for free. If you already have a similar software like Wirecast, you may use that as well.

Download the correct version of OBS for your operating system. Next, install and open the program.

Add a phone as a new source

First, we must create a video source for the puppet. Connect the phone that you used to set up the Bluefruit Playground app to your computer.

  • After OBS is open, on the bottom of the program, under "Sources", click the plus icon.
  • Select "Video Capture Device"
  • Name the source
  • Choose the source from the list shown (make sure the phone is properly connected)

 

  • Verify the correct video source (you should see the phone's screen output) and hit "ok"
  • Now you should see the phone screen output on the main program.
  • Click and drag the source so that it fills the full screen.
  • Enable the "green screen" mode within the Bluefruit app.

Add a second video source

This second video source will be any content you may want as a background or setting for the puppet.

  • Select and add the next video source.
  • Move the second video source to the "bottom" by right-clicking on the source, then selecting "Order" then "move to bottom"
  • You should now see the puppet video source only.

Enabling the "green screen"

At this point, the video source from the phone is blocking the background video source. To make use of the green screen function on the Bluefruit Playground app and be able to see both the puppet and your intended background, follow the steps below.

  • Right-click on the phone video source, and select "Filters".
  • Click the plus button in the filters window and select "Chroma Key"
  • Hit ok, then check out the default settings and hit close.
  • Now you should see the puppet overlaid on the background!

Cropping the puppet source

While the green screen is now enabled and the background should be visible behind the puppet, only a small percentage of the background is visible. Let's edit the cropping of the puppet source so we can get the whole background.

  • Go ahead and add another filter onto the puppet source. Select "Crop/Pad".
  • Edit the values of the crop area until the black border around the puppet is gone.
  • Hit close once things look good.

Drag and adjust the puppet until you are satisfied with the positioning.

 

And that's it! You are now ready to go live with your fancy new high tech puppet show.

Stay tuned for new characters on the app!

This guide was first published on Feb 19, 2020. It was last updated on Feb 19, 2020.