ANIMATED

LED DISPLAY
Preparing the LED Matrix and code for a personalized screen
that changes expression on tilt and by voice.

by minbitt
2023
Updated 21/08/2024
Contents

Introduction.............................................................................................................................
................................ .............................3
Simplified Version ................................................................................................
................................ ............................................. 4
Main Version (That I use!)................................................................................................
.................................5
Making the Simplified Version
Versi ................................................................
........................................................... 6
Supplies ...............................................................................................................................
................................ ............................... 6
Prep the Hardware ................................................................................................
................................ ............................................ 8
Prep the Code ................................................................................................
................................ ................................................... 12
Making the Main Version ................................................................................................
................................ .................................... 17
Supplies ..............................................................................................................................
................................ .............................. 17
Prep the Hardware ................................................................................................
................................ .......................................... 20
Prep the Code ................................................................................................
................................ .................................................. 29
Customisation ................................................................................................
................................ ...................................................... 34
Custom Faces ................................................................................................
................................ ................................................... 34
Animation Frame Speed ................................................................................................
................................ 39
Transparency Colour ................................................................................................
................................ ....................................... 41
Safety ................................................................
................................................................................................
..................................... 44
LED Matrix Diffuser ................................................................................................
................................ ......................................... 44
Conformal Coating ................................................................................................
................................ .......................................... 47
Electronics Case ................................................................................................
................................ .............................................. 49
Microphone Cover ................................................................................................
................................ ........................................... 54
Periscope...........................................................................................................................
................................ ........................... 56
TV Head Case ................................................................................................
................................ ................................................... 57
Special Thanks ................................................................................................
................................ ..................................................... 65

Page | 2
Introduction
This tutorial will cover how to set up and make a working LED Display that
changes according to movement and sound.

With this package you will be provided the appropriate

appropriate files and instructions to
prep the LED Display and fully customise it to your liking.
liking

There are two versions. Pick the one that suits you and go from there!

Simplified Version

or

Main Version

Page | 3
Simplified Version
Recommended for those who want the easiest, most economic solution. No
soldering required. However, it has less features and the MatrixPortal board will
stick out from the side of the LED Display panel.

Features:

 Automatic blinking
 Expression changes on directional tilt of MatrixPortal board

FRONT BACK

BACK DETAIL

Page | 4
Main Version (That I use!)
Has more steps like soldering but for more features and the LED Display will
have flush edges with a detached MatrixPortal board.

Features:

 Automatic blinking
 Expression changes on directional tilt of MatrixPortal board
 Mouth moves to sound detected by Electret Mic
 MatrixPortal board is detached from LED Display (connected by wires and
ribbon cable)

FRONT BACK

BACK DETAIL

Page | 5
Making the Simplified Version
Supplies
 Adafruit 64x32 RGB LED Matrix (Any pitch size works. Use the one that
suits your project!)

 Adafruit MatrixPortal M4 – CircuitPython Powered Internet Display

OR
Adafruit MatrixPortal S3 – CircuitPython Powered Internet Display
 Both includes 2 screws and power cable

NOTE: M4 is the older version that was available when the tutorial was first
made. S3 is the new version that is cheaper and has bigger RAM. Although they
have slight differences, either works fine.

Page | 6
  USB-A to USB-CC Cable (Remember to use a USB cable that
hat is good for
data sync. Charge-only
only USB cables will not work)

 Screwdriver
 Powerbank or Computer

Page | 7
Prep the Hardware
Remove the protective tape from the two stand offs on the MatrixPortal. You can
use some tweezers or a fingernail.

Screw in the spade connectors to each corresponding standoff.

 Red wire to +5V

 Black wire to GND

Page | 8
Plug the four-conductor
conductor power plug into the power connector pins on the back
of the panel. Either one will do. The plug can only go in one way. That way is
marked on the board.

NOTE: Make sure this plug is all the way in. Otherwise, the graphics will appear
glitched due to connection issues.
issues

Page | 9
Plug the MatrixPortal into the LED Display’s left side shrouded 8x2 connector as
shown below. The orientation matters, so check that
that the indicator arrow on the
matrix panel is oriented pointing up and right.

The MatrixPortal will stick out over the edge of the panel when connected. This is
to use the MatrixPortal’ss edge buttons and to access the USB-C
USB C port.

Plug the MatrixPortal into

to your computer or powerbank using a USB Cable.

Page | 10
If everything is done correctly, the LED Display should show a pre-programmed
pre
demo:

• MatrixPortal S3 – Baasic display demo

• MatrixPortal M4 - Rainbow digital sand demo (It shifts and falls
fall depending
on where you tilt the MatrixPortal board!)

Congrats! You can play with this for a bit before moving on to the coding
process.

Page | 11
Prep the Code
If you’re using a MatrixPortal M4
M4, open the folder ‘For
For MatrixPortal M4’.
M4
If you’re using a MatrixPortal S4,
S4 open the folder ‘For
For MatrixPortal S4’.
S4

Plug the MatrixPortal into your computer using a USB cable.

Double-click
click the RESET button on your MatrixPortal board (located at the top
left corner).. The NeoPixel RGB LED will turn green. If it turns red, check the USB
cable or try another USB port.

Page | 12
NOTE: If double-clicking
clicking doesn't work the first time, try again. It can take a few
tries to get the rhythm right.

On your computer, a new disk drive will appear called MATRIXBOOT (on M4) or
MATRXS3BOOT (on S3).

NOTE: There is an issue with the MatrixPortal S3 product line where some of
them are not flashed properly. If the above still does not work on the
MatrixPortal S3,, please follow the instructions here to factory reset and re-flash
re
the board:

https://learn.adafruit.com/adafruit
https://learn.adafruit.com/adafruit-matrixportal-s3/factory
s3/factory-reset

Then try again.

Page | 13
From the boot folder, drag the adafruit-circuitpython-matrixportal_XX-en_GB-
8.2.7 UF2 file to the MATRIXBOOT/MATRXS3BOOT drive.

The LED will flash. Give it a minute or two and the

MATRIXBOOT/MATRXS3BOOT drive will be replaced with a new disk drive
called CIRCUITPY.

Delete the files in the CIRCUITPY drive, or move them to another drive for
backup.

Page | 14
Copy the 3 files from the SimplifiedVersion Assets folder and paste into the
CIRCUITPY drive.

If you are using a 2.5 mm pitch Adafruit 64x32 RGB LED Matrix, then go to the
2.5mm Pitch folder, and copy the 3 files from the 2.5mm SimplifiedVersion
Assets folder instead and paste into the CIRCUITPY drive.

Give it a minute and a preset face should appear on the LED Display.

Page | 15
Congrats! Now you have a working LED Display with changing faces.

Page | 16
Making the Main Version
Supplies
 Adafruit 64x32 RGB LED Matrix (Any pitch size works. Use the one that
suits your project!)

 Adafruit MatrixPortal M4 – CircuitPython Powered Internet Display

OR
Adafruit MatrixPortal S3 – CircuitPython Powered Internet Display
 Both includes 2 screws and power cable

NOTE: M4 is the older version that was available when the tutorial was first
made. S3 is the new version that is cheaper and has bigger RAM. Although they
have slight differences, either works fine.

Page | 17
  Adafruit Electret Microphone Amplifier – MAX4466 with Adjustable

 Extra-long break-away
away 0.1''
0.1 16-pin strip male header (Only get this if you
are using a MatrixPortal M4)
M4

 GPIO Ribbon Cable 2x8 IDC Cable – 16 pins (Any

Any cable length you want)
want

 USB-A to USB-CC Cable (Remember

Remember to use a USB cable that is good for
data sync. Charge-only
only USB cables will not work)

Page | 18
  Screwdriver
 Powerbank or Computer
 Electrical cable/wire
 Soldering iron and solder

Page | 19
Prep the Hardware
Solder 3 wires from the Electret Mic to the MatrixPortal as shown below.

 OUT to A1
 VCC to 3V
 GND to GND

NOTE: There arere microsoldering services available out there. You can get these
wires professionally soldered for you if you’re
you re not confident doing it yourself. It’ll
It
be around a 10 minute job. Research the prices/rates before committing!

Page | 20
Remove the protective tape
tap from the two stand offs on the MatrixPortal.
MatrixPortal You can
use some tweezers or a fingernail.

Page | 21
Screw in the spade connectors to each corresponding standoff.

 Red wire to +5V

 Black wire to GND

Plug the four-conductor

conductor power plug into the power connector pins
pin on the back
of the panel. Either one will do. The plug can only go in one way. That way is
marked on the board.

Page | 22
NOTE:: Make sure this plug is all the way in. Otherwise, the graphics will appear
glitched due to connection issues.

Plug one end of the ribbon cable into the left side shrouded 8x2 connector. The
plug can only go in one way. That way is indicated by the plastic connector
frame on the board.

Page | 23
If you’re using a MatrixPortal S3, skip the following instructions and instead
follow the instructions on page 26 and onwards.

Snap the 16-pin strip male header to two headers with lengths of 8 pins.

For both headers, slide the plastic joining bar so it is slightly off half-way.

BEFORE AFTER

Page | 24
Insert the longer end of the headers into the MatrixPortal from the top of the
board.

NOTE: You may feel some resistance as the pins hit the sides of the holes. Make
sure the pins are perpendicular to the board so it slides in neatly.

Page | 25
Insert the other end of the ribbon cable into the top of the MatrixPortal board.

Page | 26
Check everything is plugged in firmly.

Plug the MatrixPortal into your computer or powerbank using a USB Cable.

Page | 27
If everything is done correctly, the LED Display should show a pre-programmed
pre
demo:

• MatrixPortal S3 – Basic display

di demo
• MatrixPortal M4 - Rainbow digital sand demo (It shifts and falls depending
on where you tilt the MatrixPortal board!)

Congrats! You can play with this for a bit before moving on to the coding
process.

Page | 28
Prep the Code
If you’re using a MatrixPortal
ixPortal M4
M4, open the folder ‘For
For MatrixPortal M4’.
M4
If you’re using a MatrixPortal S4,
S4 open the folder ‘For
For MatrixPortal S4’.
S4

Plug the MatrixPortal into your computer using a USB cable.

Double-click
click the RESET button on your MatrixPortal board (located at a the top
left corner). The NeoPixel RGB LED will turn green. If it turns red, check the USB
cable or try another USB port.

Page | 29
NOTE: If double-clicking
clicking doesn't work the first time, try again. It can take a few
tries to get the rhythm right.

On your computer,
ter, a new disk drive will appear called MATRIXBOOT (on M4) or
MATRXS3BOOT (on S3).

NOTE:: There is an issue with the MatrixPortal S3 product line where some of
them are not flashed properly. If the above still does not work on the
MatrixPortal S3, pleasee follow the instructions here to factory reset and re-flash
re
the board:

https://learn.adafruit.com/adafruit
https://learn.adafruit.com/adafruit-matrixportal-s3/factory
s3/factory-reset

Then try again.

Page | 30
From the boot folder, drag the adafruit-circuitpython-matrixportal_XX-en_GB-
8.2.7 UF2 file to the MATRIXBOOT/MATRXS3BOOT drive.

The LED will flash. Give it a minute or two and the

MATRIXBOOT/MATRXS3BOOT drive will be replaced with a new disk drive
called CIRCUITPY.

Delete the files in the CIRCUITPY drive, or move them to another drive for
backup.

Page | 31
Copy the 3 files from the SimplifiedVersion Assets folder and paste into the
CIRCUITPY drive.

If you are using a 2.5 mm pitch Adafruit 64x32 RGB LED Matrix, then go to the
2.5mm Pitch folder, and copy the 3 files from the 2.5mm SimplifiedVersion
Assets folder instead and paste into the CIRCUITPY drive.

Give it a minute and a preset face should appear on the LED Display.

Page | 32
Congrats! Now you have a working LED Display with changing faces.

Page | 33
Customisation
Custom Faces
You can change the preset face with your own by replacing the image files.

Go into the CIRCUITPY drive and open the sprites folder. The images you can
change are:

 base.bmp
 exp.bmp
 eyes.bmp
 mouth.bmp

They have to be the same dimensions and have the same file name as the file
you’re replacing. Remember to erase the guide lines and labels in the images,
otherwise they will show up too in the final product.

NOTE: The image files must be INDEXED BMP graphics. BMP is the file type. The
colour mode must be INDEXED. You can use Aseprite or Adobe Photoshop. Free
alternatives include GIMP or the GNU Image Manipulation Program.

The above is in Aseprite.

Page | 34
Use the existing bmp files as a guide for your own images.

base.bmp

This is the ‘background’ of your LED Display face. Keep it opaque black if you
have a simple design. Otherwise, you can use it for markings or patterns behind
the eyes and mouth.

eyes.bmp

The eyes blink automatically at random intervals to give the illusion of life,
cycling through the frames in chronological order then reverse. The magenta
colour (255, 0, 255) will appear transparent.

Page | 35
 mouth.bmp

The mouth moves in sync to the mic input. The louder the sound, the bigger the
mouth. The magenta colour (255, 0, 255) will appear transparent.

Page | 36
 exp.bmp

The face changes to the above expressions depending on the directional tilt of
the MatrixPortal board, NOT the LED Display. It will play through frames 1, 2 and
hold on frame 3. Keep this image file opaque. No transparent colours!

Neutral

Left Tilt

Right Tilt

Up Tilt

Down Tilt

Keep in mind the orientation of the MatrixPortal board.

Page | 37
The images are layered in this order.

exp.bmp

mouth.bmp

eyes.bmp

base.bmp

Go wild!

Page | 38
Animation Frame Speed
Adjust the frame rate speed at which the expression animation plays when tilting
the board. You can speed it up or slow it down to your liking.

Go into the CIRCUITPY drive and open the code.py file in Notepad.

Locate the following line of code. You can simply find the words or CTRL + F.

FRAMES_HOLD = 9 #Animation frame speed

Note: The number may vary.

Page | 39
Change the number to any number you wish, as long as it is a multiple of 3. The
larger the number, the longer the Frames 1 and 2 will hold.

For example:

FRAMES_HOLD = 3

FRAMES_HOLD = 27

FRAMES_HOLD = 600

Save the file and test out your LED Display. If it’s not to your liking then adjust
the numbers again as needed.

And you’re done!

Page | 40
Transparency Colour
The BMP file format does not directly support transparency, but can pick a
specific colour and make it transparent. This will only apply to the eyes.bmp and
mouth.bmp. Currently, the transparency colour is magenta (255, 0, 255).

So the left images will appear like the images on the right.

To change the colour you want transparent, go into the CIRCUITPY drive and
open the sprites folder.

Page | 41
Open the data.py file in Notepad.

Change the highlighted numbers below to the decimal values of the colour you
would like to become transparent.

Page | 42
Save the file and you're
re done!

Page | 43
Safety
Highly recommended safety measures to consider when installing your working
LED Display to protect you and the tech, whether it’s for a cosplay or a desk
decoration, etc.

LED Matrix Diffuser

A transparent faceplate can protect the LEDs, reduce the glare of the lights and
improve the pixel clarity. This can be a clear acrylic sheet, or a clear
polycarbonate sheet, etc.

Use clear, double-sided mounting tapes to adhere the sheet to the LED Display. I
arranged mine like so:

NOTE: This won’t stick permanently to the faceplate, but it is strong enough to
stay as long as I need it to, before tearing it off for maintenance or cleaning.

Page | 44
You can add tinting to the faceplate to help conceal details on the event you use
this as a mask or TV Head helmet. This can be a spray or an adhesive film.

Below I used a 5% VLT tinting adhesive film on a clear polycarbonate sheet.

NOTE: My polycarbonate sheet above only appears opaque because I kept the
sheet’s protective film on for this process. The tinting is done on the side with
the protective film peeled off.

Page | 45
Raw LED Display on the left. LED Display with a tinted polycarbonate sheet on
the right.

Page | 46
Conformal Coating
A conformal coating over the electronics
electronics can protect them from the elements. If
you're
re using this for a TV Head cosplay,, it will likely be exposed to condensation
and sweat.

Please do your research before trying this. These are dangerous chemicals. Do
this in an area with plenty of ventilation.

Apply a layer of conformal coating over the exposed parts on the MatrixPortal
board and the back of the LED Display. Avoid painting the buttons and mic
sensor!

Page | 47
Let it fully dry for 24 hours.

And you should get something like this:

Page | 48
Electronics Case
A 3D printed hard case can protect your electronics and keep them in one place.

This is a case I designed and use. It was 3D printed in PLA, a renewable and
biodegradable material. You can find the model named case.stl in the 3dmodel
folder.

Page | 49
Place the electronics and case pieces together in this order:

Slide the ribbon cable through the back opening of the case.

Plug the ribbon cable into the MatrixPortal board.

Page | 50
Slide the board into the case slot.

Add the second layer on top and place the Electret Mic into the slot.

Page | 51
Slip the lid on top. The Electret Mic sensor should align perfectly with the hole in
the lid.

Use 4 M3 x 6mm bolts and nuts to hold it all together.

Page | 52
And done!

NOTE:: You might notice mine looks a little different.

different. It is an old, improvised
model! The 3d model attached with this package for you is updated to fit nicer
and be more compact. Feel free to edit the model to suit your needs.

Page | 53
Microphone Cover
Use a microphone muff or a foam windscreen cover over the Elec lectret Mic. This
will improve sound detection by reducing the wind noise and breathing sounds
into the microphone. It also protects it from dust and particles expelled while
speaking.

I used a mini microphone headset windscreen sponge foam.

Cut it in half.

Page | 54
Place it on top of the Electret
lectret Mic,, and sandwich it with a lid like below.

And done!

Page | 55
Periscope
Use two mirrors to make a periscope to be able to see while wearing the LED
Display in a TV Head. They can be plastic mirrors, or acrylic mirrors,
rors, etc.

FRONT SIDE

NOTE:: The mirrors will fog up in a TV Head helmet set up. Here are some ways to
minimise this:

• Wear a mask
• Rub handsoap on the mirror surfaces
• Install a cooling fan

Page | 56
TV Head Case
A 3D printed TV Head case to house all your electronics and equipment in one
place, suitable for cosplay or display!

This is a case I designed and use. It was 3D printed in PLA, a renewable and
biodegradable material. Navigate to the 3dmodel folder and open the TV Head
folder for the 3D model files.

You will find four files:

Page | 57
minbitt TV Head.stl

The TV Head model with its pieces assembled a whole. This is what the final
product should look like.

Page | 58
minbitt TV Head.skp

The SketchUp file of the TV Head model as a whole. Each component is divided
for easy editing in the app 3D SketchUp.

Page | 59
TV Head piece 1 – FRAME.stl

Frame piece of the TV Head model only. Piece 1 out of 2 Pieces. Install a clear
polycarbonate sheet on the back of this to make a screen, using adhesives like
superglue.

Page | 60
TV Head piece 2 – BASE.stl

Base piece of the TV Head only. Piece 2 out of 2 Pieces.

Page | 61
Remember to cut the model up into parts for more accurate
accurate and cheaper 3D
printing. Otherwise, the 3D printing is at high risk of warping due to its size and
structure.

Reassemble by melting, gluing, sanding, etc.

Note: There are cheaper

aper and easier alternatives too! Consider these options:

• A cardboard construction
• An empty CRT monitor shell (Must be empty! CAREFUL when handling the
internal battery!)

Page | 62
Once 3D printed and pieced together, slot the frame into the base.

Page | 63
Use bolts and nuts to hold the pieces together.

• Two M6 x 12mm for the top sides.

• Two M3 x 6mm for the bottom.

Feel free to decorate this with paint, stickers, vinyl, etc!

Page | 64
Special Thanks
Thanks to Zweitonegoismus
eitonegoismus for providing the code fix for the 2.5mm Pitch RGB
Matrix.

And thank you for your interest and for making it this far!

If you have any doubts, questions or want to share your creation feel free to
reach me at the following links:

Ko-fi - @minbitt

Gumroad - @minbitt

TikTok - @minbitts

Twitter - @minbitt

YouTube - @minbitt

Email – [email protected]

Happy creating!

Page | 65