Binary Animation
Animate every combination of segments in a 7-segment LCD digital numeric display. Each segment can be on (1) or off (0), creating 128 possible combinations of off + on. Each combination is represented by a base 2 number, i.e., 000 0000 to 111 1111.
List the numbers 0 to 127 (in base 2) to create a “display list” to drive the animation.
Numerals Animation
Then create a second animation displaying the segmented numerals from 0 to 9. For this, you will need to create a second display list (with only 10 lines).
Show More Process
1
In Figma, draw a 7-segment grid for numerals.
Each segment should be a filled polygon shape (not a line and not a rectangle).
Save the file in SVG format.
2
Use a tool (https://betravis.github.io/shape-tools/path-to-polygon/) to transfer path to polygon, since the Figma output file is all path.
3
Copy and paste SVG code to HTML file (download form professor), and revise. The meaning of this code is shown below.
4
Create 128 possibilities with function written in Javascript. (Code sponser by Zheng Li)
5
Create 0-9 binary representation.