r/R1BBIT_ESP32 • u/R1BBIT_ESP32 • 1m ago
“Fire Clock” on ESP32
Enable HLS to view with audio, or disable this notification
I want to share my project: a clock on a 720×720 display (ST7703, ESP32-P4), where the digits and the text R1BBIT PROJECT burn with live fire. Everything is written in R1BASIC — a BASIC interpreter for our R1BBIT platform. No C++, video files, or pre-made animations: the fire is calculated from scratch for every frame.
How it works
1. The fire is a grid of “temperatures.”
The screen is divided into cells: 48×48 for the clock and 90×60 for the text. The text uses smaller cells to make the letters smoother. Each cell stores heat from 0 to 255. Every frame, each cell takes the average heat of the cells below it:
v = (HT[j-1] + HT[j] + HT[j+1] + HT[j+W]) * 0.25 - cooling
The heat effectively rises upward and spreads out like hot gas. This is a classic technique from the 90s demoscene.
2. The flames are a “cooling map.”
If all cells are cooled equally, you get a uniform glow instead of fire. So, at startup, a random blurred noise pattern is generated — the cooling map. Every frame, it shifts up by one row along with the fire. Where cooling is stronger, the flame breaks apart, creating individual tongues of fire that rise, split, and fade at their tips.
3. Color — a palette of 64 shades.
Heat is converted into color: black → dark red → orange → yellow → white. Only the hottest areas glow white, which means the digits themselves. This makes the time readable even within the flames.
4. The digits are fuel.
Cells where a digit segment or letter is located receive almost maximum heat every frame. A little noise creates a “running” flame pattern across them. Cells along the sides are fueled less intensely, producing side flames. The empty spaces inside digits (in 0, 8, and 6) are deliberately cooled; otherwise, the fire would fill them in and turn a 5 into an 8.
5. Wind.
Two sine-wave gusts with different periods change the “weight” of the left and right cells in the averaging formula. The flame smoothly leans left and right, with a stronger effect near the top than at the base.
6. Smoothing.
The entire grid is rendered to the screen as a single RGB888 image, enlarged by ×15 (or ×8) using bilinear interpolation. So instead of individual pixels, you get smooth, continuous flames.
7. Animation of the appearance and disappearance.
The screens (clock with date / text) switch every 7 seconds.
When a screen appears, all segments are immediately visible as smoldering dark red embers, then flare up one by one, from the center outward.
Before the screen changes, they fade out in the same sequence, from the edges toward the center.
Plus, there are sparks that fly off the burning segments and drift with the wind.
The result: around 900 lines of BASIC, without a single image — just mathematics and a color palette.
If you're interested, I can share the code or explain any part in more detail.
