Interactive Projects

Using MakeCode and Circuit Playground Express you can make interactive projects using lights and sound. In this project we'll build a custom PCB for the CPX and use capacitive touch to make a playable mini synth instrument. 

DIY Mini Synth with Capacitive Touch

Build your own capacitive touch pads using copper tape, bare conductive paint or other electrically conductive material! The code used in this project works the same with any conductive material.

3D Printing and CNC Milling

This project uses both processes to create a custom synthesizer that is simple to use. This guide will cover basics of using the Bantam Tools Desktop CNC and Eagle CAD to create PCB shields for the Circuit Playground Express.

A Black woman's manicured hand holds a round microcontroller with lit up LEDs.
Circuit Playground Express is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and...
$24.95
In Stock

Tools, hardware and supplies

Here's a list of some handy things I use when cutting some PCBs. 

1 x Bantam Tools Desktop CNC
PCB milling machine
1 x Single Sided PCB blanks
FR-1 4" x 5" copper clad boards
1 x Spatula Palette Knife
thin prying tool for removing parts
1 x Double-sided Tape
19mm (3/4in) wide tape for securing
1 x Squeeze Bottle
Wash Bottle for Alcohol
1 x X-Acto Knife
Precision Knife
14 x M3 x .5 x 6mm screws
Button Head screws
14 x M3 x .5 Hex Nuts
Metric Hex Jam Nuts 1.5mm
1 x Gray Blue Silicone Mat
Large Silicone Heat Insulation Pad
1 x Googly Eyes
12mm size in diameter

MakeCode for Circuit Playground Express

MakeCode is this programming editor that runs in the Google Chrome web browser. It’s has an intuitive interface that’s both block based and text editor.

It works with Adafruit Circuit Playground Express so you can make interactive projects with the on-board sensors and components. You can drag & drop blocks to make interactive programs using lights and sounds without having to solder or learning a new syntax.

You can alternatively upload code directly to the Circuit Playground Express with WebUSB, follow this guide if you'd like to try that option.

Setup Circuit Playground Express for MakeCode

To get started, we'll need to head over to the Adafruit MakeCode website and follow the steps below.

  1. Plug in your Circuit Playground Express with a USB Cable
  2. Press the RESET button. Green light means you're ready to MakeCode
  3. Download the UF2 file and drop it onto CPLAYBOOT.

Upload and Test Code

Once you have your CPX setup with the makecode UF2, try testing it out by uploading the code to the board. Click the link below to open up the program in makecode. Click on the pnik edit icon near the top of the title to open the code. This will create a project in MakeCode and allow you to edit, modify and upload the code to the board. 

Capacitive Touch Synth

 

This program uses capacitive touch to trigger musical tones. The Circuit Playground Express has seven pins that are capable of capacitive touch. Each time a pad is touched, a music note (or combination of notes) will be played. Each pad can be assigned a different music note. While the note is playing, we can see NeoPixel LEDs light up and assign different colors. When a finger is released from the pad, it will turn the NeoPixel LEDs off and stop all sounds. We can easily change blocks to make new notes or even trigger them using different inputs!

Code Block Breakdown

Let's break down the project and walk through setting it up one block at a time. We'll start with using the interface. On the far left side is an image of the CPX board. This is the CPX simulator. You can use it to test your code. It's interactive, try clicking on the buttons and pads. Right next to it is a menu with colored blocks. Each is section that contains several functions that are associated with the sections title. For example, the "LIGHT" blue color menu has all things pertaining to the RBG NeoPixel LEDs. 

Using Inputs

 

In the inputs menu we have a wide selection of blocks to pick from. For simple inputs, we can use the "on - button A" block to trigger our music notes and LEDs. Click and drag it onto the canvas. Click on the "Button A" to open a dropdown with more options. Here you can set which pad you'd like to trigger. Click on the "click" option and change it to "down". This assigns the input to only trigger when it detects a "down state", meaning when we touch down on the pad. 

LEDs and Tones

 

In the light menu grab the set all pixels block and drop it side the on block. Choose a color by clicking on the red bubble. Try pressing the "A Button" in the CPX simulator – It will light up the LEDs. Next, click on the music menu and grab the ring tone block (the one without the beat option). Drop it below the set all pixels block, it should snap to it. Click on the middle C title to choose a new music note. A piano keyboard layout will pop up allowing you to choose from a number of different notes.

Up & Down States

 

If we were to press the "A button" now, the music note would continuously keep playing. That's could be a bit annoying, so let's make it turn off when we release the button. Right-click on the On Button A block and choose duplicate.  This will create a copy of our block set. Change the down option to up. Change the set all pixels block to black. Remove the ring tone block from the up block set. Grab the rest beat block from the music menu and place it below the set all pixels block.

Play Testing

 

Use the simulator to test out the new code blocks. Press the "A Button". The NeoPixel LEDs should turn on and quickly turn off. A musical note should play as well and stop playing. Our up and down states are now configured. Upload the code to the board to test it out IRL. Use the tip of your finger to press and hold down the "A Button".  The music note will continuously play until you release the button.

Momentary Inputs

We've created basic momentary inputs that trigger both sounds and lights. This behavior should feel familiar. Think about how an electric piano works, as you hold down a key, the note keeps playing and stops as soon as the key is released. There's similar functionality in buttons from gamepads and keyboards. Now you can change the on block from "Button A" to any of the pads (A1 – A7). These pads are capacitive touch enabled, so you can touch them to trigger sounds and lights. Attach alligator clips to them and plug them into any electrically conductive material such as fruit, play doh, copper tape or aluminum foil. 

Building Arpeggio's

 

In this block set, we grouped several notes together to form an arpeggio. Three notes will play sequentially, four times over. The notes are wrapped in a repeat block and will play four times. The repeat block is used to create loops. The repeat block is wrapped in a parallel block to allow the show animation block to play along side the musical notes. The show animation block features pre-made LED animations. This example demonstrates how you can use loops and animations together in parallel. Try it out for yourself and change the inputs to your liking. Make it yours and have fun!

Designing Custom PCB shapes in Fusion 360

The outline of this PCB was created in Fusion 360 using the spline tool. You can create unique shapes with curves and arches using the sketch tools. Use the sketch dimension tool to define exact measures. Then, use the DXF export feature to save out the sketch. Eagle CAD supports importing DXF sketches. Using similar canvas coordinates across both programs, you can get exact placement when importing the DXF.

Designing in Eagle CAD

I started with downloading the Circuit Playground Express board file from github. Using Autodesk Eagle software, you can open the design and inspect components, traces and the pin layout. From there I referenced the size and positions of the pads. I then created a simple layout with the exact same pin layout. 

If you're new to eagle, I suggest watching a few tutorials on youtube to get familiar with the user interface and features. 

CPX EAGLE Library

Once I laid out the traces on the board, I wanted to create a reusable object of the CPX pin layout so that I could easily create new shields and adapters. As a single object, it's much easier to place it into a new design instead of recreating it each time. The library can be download and added to EAGLE by opening it and adding it to a board design. It features the "device, package and symbol" configuration so it'll properly connect to nets in the schematic layout. 

Feel free to download the library and use it in your projects! 

Prep Material

Use double-sided scotch tape to secure the FR-1 board to the spoilboard. I use the wide version, which covers more surface area. I use three long strips, evenly placed across the length of the board on the far top, bottom and middle section of the board. Do not overlap the strips or use too much as it will become difficult to remove. You'll want to wipe down the FR-1 board and the spoilboard with isopropyl alcohol with a paper towel. This will get rid of any debris, grease or finger prints from the surface.

Secure PCB to Spoil Board

When you're ready to install the material onto the spoilboard, carefully position the FR-1 board over the lower left corner of the spoil board. Square off the edges of the corner so they're both as flush as humanly possible. Then, press down on the material. I like to use a piece of paper towel over the material (prevents finger prints) and apply an even amount of pressure so all of the tape adheres to the spoil board.

Configure Material Profile

Bantam Tools software features a material profile preset for singled sided FR-1 boards. Select the Single-Sided FR-1 option from the material drop down. The size is already configured for the PCB blanks purchased from Bantam Tools. Under the placement dropdown, you'll need to input a value for the Z axis. This should be the thickness of the tape. We're using double-sided permanent scotch tape, which is 0.08mm. Type or paste that value into the input field.

PCB Placement in Bantam Tools

We can positioning our designs in Bantam Tools software by clicking on the placement button in the right hand sidebar. The dropdown menu has X, Y and Z input fields. I suggest adjusting the X and Y axis to 2mm to accommodate for a slightly offset PCB. This ensures we'll get nice edges. You also have the option to rotate the PCB. In my plan, I added a second PCB, positioned them close to each other and rotated by 180 degress. This allows 2x PCBs to fit on one FR-1 blank. 

Configure Milling Tools

We can assign milling tools to each PCB. I designed the PCB to work with a single 1/32in Flat End Mill. By using a single tool, we reduce the machining time since we only need one tool to do all of our operations. If planned accordingly, our traces and spaces have enough clearances for a 1/32in flat end mill. We also have the option to enable/disable milling the traces, holes and the outline. For this project, we can have them all enabled. Keep the "parts to mill" set to the "top".

Start Cutting

With everything setup and ready to mill, click the Mill All Visible button. The toolhead will start up and cut around the traces, drill holes and finally cut the board outline. Be sure to watch as the operation takes place. You'll want to be aware and cautious in case something comes loose.

Vacuum & Clean

Once the milling is complete, you'll need to use a vacuum to clean up all of the dust and excess material. It may be difficult to get behind the spoil board, so I tend to use the move commands, Re-Home, Origin, and Loading. Click these will move the spoil board.

Scotch Brite Pad

The edges of the traces might have burrs. I like to use a scotch brite pad and lightly sand the top surface of the PCB. A few passes for a minute will smooth out the edges and make the cooper look shine and clean. This will introduce new dust, so you may need to use the vacuum again.

Alcohol Trick

Next up we can work on removing the PCBs from the spoil board. The adhesive in the double-sided tape is fairly tough, so I do not recommend prying the PCB off. That could bend the PCB or damage the board. So I use a squeeze bottle with alcohol and pour it onto the edges of the PCB. This will soften the adhesive and make removal easier. 

PCB Removal

Let the alcohol soak underneath the PCB for a moment. Then, use a thin spatula or palette knife to get in between the PCB and spoil board. Be very careful not to scratch either surface. I try to get in between the strips of tape. Once under the PCB, slowly begin to lift to remove the PCB. Apply more alcohol is needed. 

PCB Depanelization 

With the PCB blank removed from the spoil board, we'll need to remove the PCBs from the FR-1 blank. I suggest doing this over a waste bit so it can catch dust and debris. If the board outline wasn't cut all the way through the material, you'll need to use a knife, blade or similar to cut it out of the blank. Dust tends to accumulate in the board outline. Use a scotch brite pad to smooth out the edges. Use a pair of tweezers or needle to poke out the holes. 

PCB Inspection

Thoroughly inspect the traces and holes. Make sure all of the burrs and dust has been removed from the traces and holes. Bare copper will eventually oxidize and begin to rust. You can protect the surface with UV curable solder mask or similar. We have a learn guide on that topic, as it is not covered in this project.

What If I Don't Have A 3D Printer?

Not to worry! You can use a 3D printing service such as 3DHubs or MakeXYZ to have a local 3D printer operator 3D print and ship you parts to you. This is a great way to get your parts 3D printed by local makers. You could also try checking out your local Library or search for a Maker Space.

3D Printed Mount

The mount is a single part that can be 3D printed in PLA filament with FDM type 3D printers. It's designed to secure the Circuit Playground Express using M3 hardware screws and nuts. Use the links below to download the STLs files. The part is oriented to print "as is" in your slicing software. Import the STL and use the "center to bed" feature, if your slice has this option. The bottom of the mount is completely flat. The mount features six standoffs that are sized to fit M3 sized machine screws.

Download STLs

You'll need an STL file to 3D print the mount for the circuit playground express. Click the button below to download the STL from your choice of repo site. 

Slice Settings

These settings are for a 0.4mm nozzle profile using CURA 3.X Optimized for the Ultimaker 3.

  • Layer Height 0.2mm
  • Line Width 0.38mm
  • Print Speed 60mm/s 
  • Retraction 6.5mm
  • Bed 60c
  • No supports needed

Fusion 360 files 

Below is a link to download the fusion 360 source file. This features the parametric timeline and sketches. You can modify the design or reuse the CPX component for future projects.

Design Source Files

The enclosure assembly was designed in Fusion 360. This can be downloaded in different formats like STEP, SAT and more. Electronic components like the board, displays, connectors and more can be downloaded from our Fusion 360 CAD parts github repo.

Hardware Screws & Nuts

Use will  M3 hardware screws and nuts to secure the Circuit Playground Express to the PCB. Be sure the screws are metal and electrically conductive. We will mechanically secured them together and create conductivity between the connections by fastening screws and nuts between them.

Install Screws

Place a screw through one of the pads, A1–A7, and hold them it place. Then, insert and fasten an M3 hex nut onto the screw. Twist the hex nut on but leave it loose. Repeat for pads A1 – A7, ensuring a loose fitting.

Fasten Screws

Place the Circuit Playground Express board over the PCB. Orient the boards together so the pins line up correctly. Each touch pad should trace back to pins A1-A7. Use a screw driver to fasten the screws through the PCB. Don't screw all the way through, yet. Repeat process for the rest of the pins.

Install 3D Printed Mount

Place the PCB assembly over the 3d printed mount. Orient the PCBs so the pads are properly in place. The USB port should be positioned on a recess cutout. The pads and screws should line up with the mounting holes on the standoffs. Hold the PCB in place and fasten the screws tight. They should be long enough to screw into the standoffs. Don't over tighten. Pop in some goggly eyes and start jamming!

This guide was first published on Jun 27, 2018. It was last updated on Mar 08, 2024.