Coding Challenge
This section provides a coding challenge with helpful hints and a coded solution for the Tech-Box.io Laser Stem Matrix
Table of Contents - Laser Stem Matrix Instruction Guide
Coding Challenge
For this TechBox project, your coding challenge consists of two tasks:
- Create a static 8-by-8 pixel heart image and display it on the LED Laser Stems by adding it as the final "built-in" animation. You should be able to access this heart by pressing the push button 8 times to cycle to the end of the built-in animations.
- Animate the static heart with a heartbeat using multiple static frames to create the illusion of movement. As an example, by the end of this challenge, your Laser Stem Matrix should display something similar to this:
Helpful Hints
If you get stuck at any point, click the "Show Hint" buttons below to reveal helpful hints and code snippets. You can also scroll to the bottom to reveal and download the solution and code:
Hint #1:
Start by adding a new function named "animatedHeart()" to the end of the file:Then add that function name to the list of animations, "SimplePatternList gPatterns" on line 34. This will allow the animation to display when you press the push button to cycle through the options:
Lastly, update the number of modes, "numModes", on line 50 to "9" to allow the new animation to be displayed:
Hint #2:
Create a static 8-by-8 array for the heart image just above the new animatedHeart function. A "1" in the array will turn the LED "ON" for that position, while a "0" will turn that LED "OFF". Notice that the array of 1's looks like a heart shape:Then display the array to the LED matrix using the animatedHeart function by clearing the LED array, and cycling through each of the 64 LED positions using a "for" loop. This turns each LED "ON" (represented by the color red) or "OFF" using the 1's and 0's in the heart array object:
Hint #3:
Create a static 8-by-8 array for a smaller heart image above the animatedHeart function. Again, a "1" in the array will turn the LED "ON" for that position, while a "0" will turn the LED "OFF":Now create a frame variable to alternate between the larger and smaller heart frame above the animatedHeart function:
Lastly, create logic in the animatedHeart function that uses the frame variable to alternate between the smaller and larger heart arrays, and display those arrays to the leds[] object:
Solution:
There are countless different ways to code and solve this challenge. The provided solution is only one of those ways and is provided as an example. Feel free to expand or adapt it in any way you can imagine.The example solution code can be downloaded by clicking the link below and opening the file in the Arduino IDE (unzipping the file if necessary). The new animation can be viewed by pressing the push button to cycle through the animation modes until you reach the beating heart animation (8 button presses). The added components are fully commented, with 3 main parts:
- Adding the “animatedHeart()” function at the end of the file, and updating the number of modes (numModes) and pattern list “gPatterns” to account for the new function.
- Creating two static arrays that are two images which can be displayed cyclically to create an animation. An added frame variable keeps track of the active frame. These arrays correspond to the LEDs which appear in the smaller and larger heart images.
- Completing the logic of the animatedHeart() function to alternate between frames with a reasonable frame rate delay.
You can download the solution code by clicking here: Tech-BoxIO_Laser_Stem_Matrix_Challenge_Solution.ino
Congratulations!
You have completed the Laser Stem Matrix Coding Challenge! You are now a certified expert programmer and animator. Unleash your new skills and start customizing display colors, add new patterns and images, or anything you can imagine! Start Making your way!
