I first ran accross a morphing clock project at the Hackaday webiste when I was researching how to drive LED Matrix panels. I noted this, and then moved on to making the LED Matrix driver for the P2.
Later, after creating the HUB75 Adapter PCB for sale, and more work on the driver, etc. I decided to take a short break and looked into the means for driving this morphing.
This project is my nod to Hari Wiguna's HariFun #165 video but I chose to implement this using table driven animations with the table having been generated by a python script using "segment adjacency" along with "segment on/off changes from digit to digit" and using the types of animations that Hari used.
Demo: A Video of this project in action.
- Evaluate how hard it would be to plan and then generate the set of transitions using a Python script
- Generate animation Tables to be included in spin2 code for use on P2
- Create a demo using multiple LED Matrix panels driven by our new P2 driver
All of this has been achieved in this project as represented in this repo!
There are a couple of subdirectories in this repo:
| Directory Name | Description |
|---|---|
| Docs/ | A description file (.txt) annotated while studying the generated transitions and the generated table file (.out) produced by the latest version of the script |
| Generator/ | This directory contains the python script which generates the animation table |
| Src/ | This directory contains the source code which chaces the animation table and produces the LED Matrix output of morphing digits |
This is a simple script written in python and runnable anywhere you have python installed.
The algorithm too is simple: iterate over all the possible digit transitions and for each transition study the segments turning on and off and the segments they are adjacent to and determine from this which animation each segment should perform. (Segments that turn off animate turning off and segments that turn on animate turning on.) So for each digit transition (e.g., 0->1, 5->2, etc.) identify the list of segments changing and how they should animate this change.
When studying Hari's video one can see that there are two types of transitions: snakes and whole column (whole segment) moves. By studying the animations seen in Hari's video we can see the animations vary based on which segment is turning off, or on, and if there is a segment near it, that is on. While the column moves appear to be based on the left-most of the vertical pair of segments turning on, or off.
If we are going to study the segment positions and then be able to instruct segments to do their thing then we need to name the segments.
We letter-name each segment so we can now identify them:
-- A --
| |
F B
| |
-- G --
| |
E C
| |
-- D --
We then can note the segment adjacency, e.g., B is adjacent to A to A's right, F is adjacent to A to A's left, B is adjacent to A which is Up from B, G is adjacent to F to G's left, just to name a few, but you get the idea.
We have two kinds of moves our snake and column moves.
The snake moves are used for both turning-on and turning-off a segment. The snake moves add pixels to the end filling a segment or remove pixels from the end hiding the segment. These transitions can appear to be moving from left-to-right, right-to-left, top-to-bottom, or bottom-to-top.
The column moves have the E or F entire-segment moving right-to-left or left to right.
In total now we've identified what needs to be encoded:
- the name of the segment transitioning
- the desired end state ON/OFF
- the style of animation 4 snake types, and 2 column move types
The command line for running the script is pretty simple:
$ ./pymorph -o animationTable.outThis runs the script and instructs it to write the table output to a file named animationTable.out I then copied this content into the approparite file of my spin2 code.
The Morphing Digits demo consists of 4 files that are compiled along with the P2 LED Matrix Driver.
| File Name | Description |
|---|---|
| isp_hub75_demoMorphSeg.spin2 | the Top-Level file |
| isp_hub75_morphCounters.spin2 | the counter object comprised of N morphing digits |
| isp_hub75_morph7seg.spin2 | the 7-segment-digit object comprised of 7 morphing segments (contains the animation table and table chase algorithm |
| isp_hub75_morphSegment.spin2 | the individual morphing segment object - capable of both snake and column animations |
To use this code in your own project you will replace the top-level file with one containing your own logic. You will include the remaining files from this project and files from the LED Matrix driver project as shown in this demo top-level file. Lastly, let your imagination take you where you wish to go!
If you like my work and/or this has helped you in some way then feel free to help me out for a couple of ☕'s or 🍕 slices!
- I was encouraged by the challenge found in the HariFun #165 video. I'm not alone in this as others have shown videos (e.g., the bornach Generalizing... video) but not always provided links to their code. In my case I wanted to demonstrate that there was a way to study all the animations needed and then a short routine could then generate the needed animation descriptions. This can then be easily extended with a tiny bit more work to cover all 22 alpha-numeric digits that bornach used.
Licensed under the MIT License.
Follow these links for more information:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent