Halloween Pixel Art on GurgleApps Word Clock

The GurlgeApps Word Clock is an open-source digital clock which shows the time as words in English. This small USB-powered desktop clock has letters in an 8x8 grid layout which can be individually illuminated in any colour.

This article shows how to add background images to the MicroPython program running on the clock. Some Halloween-themed ones are shown as an example. The very low resolution of the clock's display presents a challenge for clear depictions in pixel art but it's fun to try.

The photograph above shows a white ghost with a transparent mouth and eyes over the time "TWENTY PAST TEN". The green letters of TWENTY show through the eyes. The mouth should be dark but the bright light from the surrounding RGB LEDs is making it glow dim red. A white outline has been drawn over the photograph to highlight the art work. The photograph doesn't quite convey the colour of the letters - they have richer colours to the eye.

1. GurgleApps Word Clock : Etsy (select Full Kit if you want to build it or Fully Built if you don't)

The three images drawn for this article were manually created as python variables with the MakeCode Arcade sprite/image editor acting as a visual aid. As an alternative, GIMP or anything that can create an indexed PNG file (one with a palette) can be used together with a simple script to convert that to the representation used in the MicroPython program.

GIMP with python script

1. Make a new image with appropriate small dimensions, like width 7 and height 8, under Advanced Options the image can be set to initially be filled with transparent pixels.
2. View > Zoom > Fit Image in Window may be needed to see it.
3. Change Image > Mode to Indexed... - this will allow a palette to be defined.
4. Draw the image creating approximate colours in the palette.
5. Export As to save the file with a .png file extension.

MakeCode Arcade with manual conversion

1. Click on the MakeCode Arcade in a browser.
2. Click on New Project, give it a name.
3. Click on Assets (at the top), click +, select Image and set the size at the bottom left.

Avoid using the brightest white value as (255, 255, 255) is used in the MatrixBackground class as a special value for transparency. Use (254, 254, 254) instead.

The colours only need to be approximate for the initial art work, they are likely to need tweaking later to optimise their rendition on the Word Clock.

Script

The pngtocode.py script can be used on a computer (i.e. not the Pi Pico W) to convert PNG files to output suitable to be cut and paste into a variable for use as an image with the MatrixBackground class.

The screenshot above shows a Python list but the code and code-generating script use a more memory efficient bytearray.

Manual

An image can be manually converted to the python representation by creating the palette and then typing in the values looking at the image. This is primitive and laborious but for one small image may be the quickest method if you're used to programming and working with bitmap data.

The software installation instructions can be found in Instructables: GurgleApps Word Clock Assembly With an Ambient Light Sensor. The forked (from main) version needs to be used as it has the MatrixBackground feature.

A new file was created for the HalloweenMB class. The code to render the falling wizard's hat is shown below.

The shift_y parameter is used to create the movement over a ten second period. It starts by placing the hat initially off the top of the display by shifting it by -12 pixels and then effectively moving it down screen to again be off the display at +8. The hat is ten pixels high making -10 to +8 a more optimal range.

The code has been placed in a new renderForeground() method. The MatrixBackground class needs renaming as it's become both a background and foreground class!

The main.py file needs modifying to include the new background. Excerpts from a context diff of the addition are shown below.

This new background can be selected by editing the config.json file on the Pi Pico W to include the line below.

The three images are shown above using six photographs of the Word Clock.

1. Wizard's hat (8x10), top left and bottom right.
2. Spooky ghost (7x8), top centre and top right.
3. Pumpkin (12x8), bottom centre and bottom right.

The video shows the three images. A new image normally appears every 5 minutes as the displayed time in words changes but for brevity in the video it was changed to cycle every 20 seconds.

1. 00:00 Twenty past three
2. 00:07 Pumpkin scrolls on
3. 00:17 Back to just the time
4. 00:29 Wizard's hat appears
5. 00:38 Back to just the time
6. 00:48 Ghost appears
7. 00:55 Ghost vanishes

The pumpkin is difficult to discern, the wizard's hat is a bit clearer. The ghost is a reasonable rendition particularly to the eye rather than a video camera.

Some ideas to explore:

1. Draw your own pixel art.
2. Try using a black outline to see if that improves the clarity of the art work.
3. Code your own animations.
4. Change the code so the background only runs during the seasonal period.
5. Create a SeasonalBackgroundMB class which displays a variety of images across different seasons.

A few Halloween projects:

1. Adafruit Learn:
2. Halloween Countdown Display Matrix
3. HalloWing Light Paintstick
4. Halloween Monsters with CRICKIT and Circuit Playground Express
5. GurgleApps: 8x8 LED Matrix Halloween Jack-o'-lantern / Pumpkin with a Pico
6. Instructables: Halloween Spooky Ghost With BBC Micro:bit on Cytron EDU:BIT
7. KidsCodeJeunesse: Getting musical and spooky with micro:bit (YouTube) - musical coffin made with two micro:bits.
8. Stu Lowe: Halloween neopixel jack-o-lanterns - Coding with micro:bit - Part 10 (YouTube) - laser-cut wooden pumpkins, NeoPixels and MakeCode.
9. Adafruit Forums: Halloween candle for Circuit Playground Express - make a simple flickering candle using the Adafruit Circuit Playground Express.
10. Instructables: Halloween Badges - circuits made from brass rod sculptures rather than PCBs.

Further reading:

1. Instructables: GurgleApps Word Clock Assembly With an Ambient Light Sensor
2. MakeCode Arcade - a block-based language for making simple, retro arcade games including lots of low resolution pixel art.