Overview

The Heat Grid is comprised of a square of cells. Each cell has its own temperature. The cells you select will get hotter by having heat added to them so that their temperature will increase by 1 degree each heat interval. Additionally, during each heat interval, heat is transferred from hot cells to each neighboring cell, disappating outward. For example, if all cells are at 0 degrees and you turn on a center cell, during the first heat interval, the 1 degree of heat generated by that cell will be spread equally throughout the selected cell and also the eight neighboring cells. Each of these nine cells would then have 1/9 of a degree (0.111).

Note that heat dissipates and is lost off the edge of the grid.

As the heat for a particular cell increases, its background color changes. For this color pattern I mimicked the heat colors which actually occur when mild steel is heated.

Heat Grid Simulator is a useful coding challenge for learning front end frameworks. This was developed first in vanilla JavaScript, next using React, and finally using Angular.

How to Use Heat Grid Simulator

Click/tap on a cell (a square in the grid below) to select it and add one degree of heat to that cell per heat interval. (Selected cells are indicated by red borders.) You have the option to heat as many or as few of the cells as you like.

The "Turn All On" and "Turn All Off" buttons are quick and easy ways to see the Heat Grid Simulator in action.