Hardware components | ||||||
![]() |
| × | 1 | |||
| × | 1 | ||||
Software apps and online services | ||||||
![]() |
|
I want to creted the clock using 8x8 WS2812 LED matrixes.
To make this clock a bit more unusual I want to add sool digit transformations when the time changes.
Currently I am working on a single digit and writing the code.
Second step would be to create custom PCB to connect all components. The last one would be putting it all together. So this post would be updated as I go along.
First step can be viewed at :
If you enjoy this content, like this video, and subscribe to my channel if you want to support me in creating similar content.
// MARIO's IDEAS
// "Final Countdown" on WS2812 Matrix
// Basic digit to digit transition
#include <FastLED.h>
// Variables to store the current digit. We start with 9
int Current_Digit=9;
//A selection of colors we randommly choose from to define the color of the outline of the digit
uint16_t Colors [27]{0x7FFF00,0x6495ED,0xDC143,0x00008B,0x8B008B,
0xFF8C00,0x00CED1,0x9400D3,0xFF1493,0x228B22,
0xFFD700,0xADFF2F,0x7CFC00,0x87CEFA,0x00FF00,
0xFF00FF,0x0000CD,0xFFA500,0x9ACD32,0xFFE4C4,
0x00FFFF,0x008B8B,0xE9967A,0xFFFACD,0xADD8E6,
0xFAFAD2,0xFFEFD5};
// Variables used to store the colors. They store the index of the color in the Colors arraay
int Current_Color=1; // color of the outline of the current digit
int Random_Color=2; //used for random color generation
// How many leds in your strip?
#define NUM_LEDS 64
// For led chips like Neopixels, which have a data line, ground, and power, you just
// need to define DATA_PIN. For led chipsets that are SPI based (four wires - data, clock,
// ground, and power), like the LPD8806, define both DATA_PIN and CLOCK_PIN
#define DATA_PIN 5
// Define the array of leds
CRGB leds[NUM_LEDS];
// 8x8 Arrays ZERO to NINE defining the layout of pixels in each digit. 0- blank pixel, 1 - the digit pixel, 2 - the outline pixel
int One [8] [8] ={
{0,0,0,0,1,2,0,0},
{0,0,0,1,1,2,0,0},
{0,0,1,2,1,2,0,0},
{0,1,2,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
};
int Two [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,1,2,0,0,0},
{0,0,1,2,0,0,0,0},
{0,1,2,0,0,0,0,0},
{0,1,1,1,1,1,2,0},
};
int Three [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,1,1,2,0,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Four [8] [8] ={
{0,0,0,0,1,2,0,0},
{0,0,0,1,1,2,0,0},
{0,0,1,2,1,2,0,0},
{0,1,2 ,0,1,2,0,0},
{0,1,1,1,1,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
};
int Five [8] [8] ={
{0,1,1,1,1,1,2,0},
{0,1,2,0,0,0,0,0},
{0,1,2,0,0,0,0,0},
{0,0,1,1,1,2,0,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Six [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,0,0,0},
{0,1,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Seven [8] [8] ={
{0,1,1,1,1,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,1,2,0,0,0},
{0,0,1,2,0,0,0,0},
{0,0,1,2,0,0,0,0},
{0,0,1,2,0,0,0,0},
};
int Eight [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Nine [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Zero [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
void setup() {
Serial.begin(9600);
Serial.println("resetting");
// Declaring the matrix and setting the LED brightness
LEDS.addLeds<WS2812,DATA_PIN,RGB>(leds,NUM_LEDS);
LEDS.setBrightness(84);
}
// function to check which type of pixel (0,1 or 2) we have in coordinates i,j in the array corresponding to digit passed by argument Number
int Check_Pixel_In_Digit(int Number, int i,int j){
int result;
if (Number ==0) result=Zero[i][j];
if (Number ==1) result=One[i][j];
if (Number ==2) result=Two[i][j];
if (Number ==3) result=Three[i][j];
if (Number ==4) result=Four[i][j];
if (Number ==5) result=Five[i][j];
if (Number ==6) result=Six[i][j];
if (Number ==7) result=Seven[i][j];
if (Number ==8) result=Eight[i][j];
if (Number ==9) result=Nine[i][j];
return result;
}
void loop() {
// displaying the digit corresponding to value stored in Current_Digit
for (int i=0;i<8;i++){
for (int j=0;j<8;j++){
if (Check_Pixel_In_Digit(Current_Digit,i,j)==1) leds[(i)*8+j]=CHSV( 0 , 0, 255);
if (Check_Pixel_In_Digit(Current_Digit,i,j)==2) leds[(i)*8+j]=Colors[Current_Color];
if (Check_Pixel_In_Digit(Current_Digit,i,j)==0) leds[(i)*8+j]=CHSV( 0 , 0, 0);
}
}
// Displaying all 64 LEDs in their current state
FastLED.show();
delay(500);
// Decreasing current digit by one
Current_Digit=Current_Digit-1;
// Generate the outline color for the next digit and making sure it is going to be a different one each time
while (Random_Color==Current_Color){
Random_Color=random(0,27);
}
Current_Color=Random_Color;
if (Current_Digit==-1){
Current_Digit=9;
}
}
// MARIO's IDEAS
// "Final Countdown" on WS2812 Matrix
// Fade transition transition
// After displaying the digit we decrease the brightness until the digit fades out.
// The next digit is displayed with full brightness and the process get repeated.
#include <FastLED.h>
// Variables to store the current digit we . We start with 9
int Current_Digit=9;
//A selection of colors we randommly choose from to define the color of the outline of the digit
uint16_t Colors [27]{0x7FFF00,0x6495ED,0xDC143,0x00008B,0x8B008B,
0xFF8C00,0x00CED1,0x9400D3,0xFF1493,0x228B22,
0xFFD700,0xADFF2F,0x7CFC00,0x87CEFA,0x00FF00,
0xFF00FF,0x0000CD,0xFFA500,0x9ACD32,0xFFE4C4,
0x00FFFF,0x008B8B,0xE9967A,0xFFFACD,0xADD8E6,
0xFAFAD2,0xFFEFD5};
// Variables used to store the colors. They store the index of the color in the Colors array
int Current_Color=1; // color of the outline of the current digit
int Random_Color=2; //used for random color generation
// How many leds in your strip?
#define NUM_LEDS 64
// For led chips like Neopixels, which have a data line, ground, and power, you just
// need to define DATA_PIN. For led chipsets that are SPI based (four wires - data, clock,
// ground, and power), like the LPD8806, define both DATA_PIN and CLOCK_PIN
#define DATA_PIN 5
// Define the array of leds
CRGB leds[NUM_LEDS];
// 8x8 Arrays ZERO to NINE defining the layout of pixels in each digit. 0- blank pixel, 1 - the digit pixel, 2 - the outline pixel
int One [8] [8] ={
{0,0,0,0,1,2,0,0},
{0,0,0,1,1,2,0,0},
{0,0,1,2,1,2,0,0},
{0,1,2,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
};
int Two [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,1,2,0,0,0},
{0,0,1,2,0,0,0,0},
{0,1,2,0,0,0,0,0},
{0,1,1,1,1,1,2,0},
};
int Three [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,1,1,2,0,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Four [8] [8] ={
{0,0,0,0,1,2,0,0},
{0,0,0,1,1,2,0,0},
{0,0,1,2,1,2,0,0},
{0,1,2 ,0,1,2,0,0},
{0,1,1,1,1,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
};
int Five [8] [8] ={
{0,1,1,1,1,1,2,0},
{0,1,2,0,0,0,0,0},
{0,1,2,0,0,0,0,0},
{0,0,1,1,1,2,0,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Six [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,0,0,0},
{0,1,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Seven [8] [8] ={
{0,1,1,1,1,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,1,2,0,0,0},
{0,0,1,2,0,0,0,0},
{0,0,1,2,0,0,0,0},
{0,0,1,2,0,0,0,0},
};
int Eight [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Nine [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Zero [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
void setup() {
Serial.begin(9600);
Serial.println("resetting");
// Declaring the matrix and setting the LED brightness
LEDS.addLeds<WS2812,DATA_PIN,RGB>(leds,NUM_LEDS);
LEDS.setBrightness(84);
}
// function to check which type of pixel (0,1 or 2) we have in coordinates i,j in the array corresponding to digit passed by argument Number
int Check_Pixel_In_Digit(int Number, int i,int j){
int result;
if (Number ==0) result=Zero[i][j];
if (Number ==1) result=One[i][j];
if (Number ==2) result=Two[i][j];
if (Number ==3) result=Three[i][j];
if (Number ==4) result=Four[i][j];
if (Number ==5) result=Five[i][j];
if (Number ==6) result=Six[i][j];
if (Number ==7) result=Seven[i][j];
if (Number ==8) result=Eight[i][j];
if (Number ==9) result=Nine[i][j];
return result;
}
void loop() {
// Setting the Brightness LEDs to fully lit
LEDS.setBrightness(84);
// displaying the digit corresponding to value stored in Current_Digit
for (int i=0;i<8;i++){
for (int j=0;j<8;j++){
if (Check_Pixel_In_Digit(Current_Digit,i,j)==1) leds[(i)*8+j]=CHSV( 0 , 0, 255);
if (Check_Pixel_In_Digit(Current_Digit,i,j)==2) leds[(i)*8+j]=Colors[Current_Color];
if (Check_Pixel_In_Digit(Current_Digit,i,j)==0) leds[(i)*8+j]=CHSV( 0 , 0, 0);
}
}
// Gradually decrease the brightnes of currently lit LEDs
for(int i=84;i>0;i--){
LEDS.setBrightness(i);
FastLED.show();
delay(15);
}
delay(300);
// Decrease current digit by one
Current_Digit=Current_Digit-1;
// Generate the outline color for the next digit and making sure it is going to be a different one each time
while (Random_Color==Current_Color){
Random_Color=random(0,27);
}
Current_Color=Random_Color;
// if zero is reached we start the countdown again from 9
if (Current_Digit==-1){
Current_Digit=9;
}
}
Color Blur Transition
ArduinoRandomly select pixels and set them to random colors. Then randomly select pixels and send them to color corresponding with tarhet digit
// MARIO's IDEAS
// "Final Countdown" on WS2812 Matrix
// Color Blur transition
// After displaying the digit randomly select pixels and lit them with random colors
// Then we randomly select pixels and set them to the colors that correspond with next digit to display
#include <FastLED.h>
// Variables to store the current digit we . We start with 9
int Current_Digit=9;
int led_x;
int led_y;
//A selection of colors we randommly choose from to define the color of the outline of the digit
uint16_t Colors [27]{0x7FFF00,0x6495ED,0xDC143,0x00008B,0x8B008B,0xFF8C00,0x00CED1,0x9400D3,
0xFF1493,0x228B22,0xFFD700,0xADFF2F,0x7CFC00,0x87CEFA,0x00FF00,0xFF00FF,
0x0000CD,0xFFA500,0x9ACD32,0xFFE4C4,0x00FFFF,0x008B8B,0xE9967A,0xFFFACD,0xADD8E6,0xFAFAD2,0xFFEFD5};
// Variables used to store the colors. They store the index of the color in the Colors array
int Current_Color=1;// color of the outline of the current digit
int Random_Color=2;//used for random color generation
// How many leds in your strip?
#define NUM_LEDS 64
// For led chips like Neopixels, which have a data line, ground, and power, you just
// need to define DATA_PIN. For led chipsets that are SPI based (four wires - data, clock,
// ground, and power), like the LPD8806, define both DATA_PIN and CLOCK_PIN
#define DATA_PIN 5
// Define the array of leds
CRGB leds[NUM_LEDS];
// 8x8 Arrays ZERO to NINE defining the layout of pixels in each digit. 0- blank pixel, 1 - the digit pixel, 2 - the outline pixel
int One [8] [8] ={
{0,0,0,0,1,2,0,0},
{0,0,0,1,1,2,0,0},
{0,0,1,2,1,2,0,0},
{0,1,2,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
};
int Two [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,1,2,0,0,0},
{0,0,1,2,0,0,0,0},
{0,1,2,0,0,0,0,0},
{0,1,1,1,1,1,2,0},
};
int Three [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,1,1,2,0,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Four [8] [8] ={
{0,0,0,0,1,2,0,0},
{0,0,0,1,1,2,0,0},
{0,0,1,2,1,2,0,0},
{0,1,2,0,1,2,0,0},
{0,1,1,1,1,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
{0,0,0,0,1,2,0,0},
};
int Five [8] [8] ={
{0,1,1,1,1,1,2,0},
{0,1,2,0,0,0,0,0},
{0,1,2,0,0,0,0,0},
{0,0,1,1,1,2,0,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Six [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,0,0,0},
{0,1,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Seven [8] [8] ={
{0,1,1,1,1,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,1,2,0,0},
{0,0,0,1,2,0,0,0},
{0,0,1,2,0,0,0,0},
{0,0,1,2,0,0,0,0},
{0,0,1,2,0,0,0,0},
};
int Eight [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Nine [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,1,2,0},
{0,0,0,0,0,1,2,0},
{0,0,0,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
int Zero [8] [8] ={
{0,0,1,1,1,2,0,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,1,2,0,0,1,2,0},
{0,0,1,1,1,2,0,0},
};
void setup() {
Serial.begin(9600);
Serial.println("resetting");
// Declaring the matrix and setting the LED brightness
LEDS.addLeds<WS2812,DATA_PIN,RGB>(leds,NUM_LEDS);
LEDS.setBrightness(84);
}
// Function to check which type of pixel (0,1 or 2) we have in coordinates i,j in the array corresponding to digit passed by argument Number
int Check_Pixel_In_Digit(int Number, int i,int j){
int result;
if (Number ==0) result=Zero[i][j];
if (Number ==1) result=One[i][j];
if (Number ==2) result=Two[i][j];
if (Number ==3) result=Three[i][j];
if (Number ==4) result=Four[i][j];
if (Number ==5) result=Five[i][j];
if (Number ==6) result=Six[i][j];
if (Number ==7) result=Seven[i][j];
if (Number ==8) result=Eight[i][j];
if (Number ==9) result=Nine[i][j];
return result;
}
void loop() {
//Repeat 100 times action of randomly selecting a pixel and assigning a random color to it to wipe out the currently displayed digit
for (int y=0;y<100;y++){
led_x=random(0,8);
led_y=random(0,8);
Random_Color=random(0,27);
leds[(led_y)*8+led_x]=Colors[Random_Color];
FastLED.show();
delay(5);
}
//Repeat 200 times action of randomly selecting a pixel and setting it to a pixel from the digit array corresponding with Current_digit
for (int y=0;y<250;y++){
led_x=random(0,8);
led_y=random(0,8);
if (Check_Pixel_In_Digit(Current_Digit,led_x,led_y)==1) leds[(led_x)*8+led_y]=CHSV( 0 , 0, 255);
if (Check_Pixel_In_Digit(Current_Digit,led_x,led_y)==2) leds[(led_x)*8+led_y]=Colors[Current_Color];
if (Check_Pixel_In_Digit(Current_Digit,led_x,led_y)==0) leds[(led_x)*8+led_y]=CHSV( 0 , 0, 0);
FastLED.show();
delay(2);
}
// Redisplay the number again in full in case we did not address all the pixels in the previous step
for (int i=0;i<8;i++){
for (int j=0;j<8;j++){
if (Check_Pixel_In_Digit(Current_Digit,i,j)==1) leds[(i)*8+j]=CHSV( 0 , 0, 255);
if (Check_Pixel_In_Digit(Current_Digit,i,j)==2) leds[(i)*8+j]=Colors[Current_Color];
if (Check_Pixel_In_Digit(Current_Digit,i,j)==0) leds[(i)*8+j]=CHSV( 0 , 0, 0);
}
}
FastLED.show();
delay(1000);
// Descrease current digit by one
Current_Digit=Current_Digit-1;
// Generate the outline color for the next digit and making sure it is going to be a different one each time
while (Random_Color==Current_Color){
Random_Color=random(0,27);
}
Current_Color=Random_Color;
// if zero is reached we start the countdown again from 9
if (Current_Digit==-1){
Current_Digit=9;
}
}
Comments
Please log in or sign up to comment.