A fully working clock that presents time using tetris pieces in a gamelike fashion
How To Use It
Open index.html in your browser. All code is contained in this single file
How Does It Work?
1. Rendering Blocks
When the page loads, the blocks needed to display the time are all created. There are 4 sections that will each hold a digit of the current time. Each of these digits are made up of a 20 X 36 grid or 720 individual blocks. These blocks are then positioned at -50px on the Y axis to hide them from view. At this point there are a total of 2,880 blocks on screen.
2. Positioning Blocks
Once the time is acquired for the current date, it is now time to display the desired digit on screen. using the function createElement(digit, spot) we can place corresponding blocks by passing in the number to be displayed and the spot in which to place it.
There are multiple steps that occur when createElement is called:
A. Number Identification
The entered digit information is retrieved from the numbers object. Each property of the object corresponds to a digit 0 - 9 and contains an array of arrays. This data is used to identify "outline coordinates" that will be used to draw a number without knowing each and every one of its 720 coordinates. In the image below, you can see that we only identified 24 coordinates to draw the number zero.
B. Randomly Choosing Blocks
Now that we have our outline coordinates for the desired number, it is time to choose which blocks will populate our digit and in what order. The sectionPatterns array contains arrays of arrays that hold 4 tetris block patterns (16 blocks) that can be used. In the image below we can see 10 predefined 4 block squares that are chosen at random to fill a portion of the digit.
C. Correctly Placing 4 Block Squares
Now that we have identified our outline coordinates and randomly chosen a block pattern, we can start to display the digit. We do this by looping over each 16 block square, using the outline coordinate as a reference. This is achieved by differentiating the offset in relation to the outline coordinate and corresponding the resulting index with a position in the chosen section pattern. In the image below, you can see the order in which the 16 block square is transversed.
D. Visually Defining Tetris Blocks
Now that we know where to place the 4 block squares, we can start to visually define the tetris blocks. Each tetris block (which consists of 4 blocks) is given the same color. The color of a tetris block is the result of stepping through the colors object. For instance, if the last color used was red, we would then select green, then blue and so on. Once the color list is exhausted, we start back at the beginning. This gives the overall digit a more uniform assortment of colors.
E. Animating Tetris Blocks
3. Wave Of White Effect
After all 4 digits have been fully created, they turn to white in a wavelike motion. This is achieved in 2 steps. First, we detect that all have digits have finished building by incrementing a variable until it reaches the total number of digits we have on screen. Once this variable reaches its max, we can then loop through each and every block per digit (starting with the rightmost digit) and fade it to white. The blocks for each digit are changed starting with the top right for the respective digit, going down, and then across. This order creates the illusion of a wave.
4. Wipe, Rinse, Repeat
Once the page detects a change in time, all of the blocks are then wiped from the screen. To avoid heavy lifting for the browser, we are reusing all of these blocks. First, we move each block (yes, all 2,880) to -50px on the Y axis. Second, we "rinse" them of their color and return it to black. This allows for a fading effect when transitioning. Lastly, we repeat the createElement call and display the time.