Heat Flow

If your first thought when you saw the above picture was "NASA photo" then you should tell me so. It will warm my heart. Actually, what I've got here is a simulation of heat flowing through a grid and a bad play on words in the previous sentence. I wanted to learn some javascript and I've also been meaning to replicate a simulation of heat flow that I wrote in college (at the time I used only Microsoft excel). I'm quite pleased with the result. The heat flow simulator can be found here, though I hope to eventually incorporate it properly into the rest of my site.

Here are the instructions:
To change the dimensions of the heat grid change the numbers in the "Rows" and "Columns" fields then click "Set dimensions".

For a quick demo click "Random Setup". This will randomly throw heat into the grid. The heat is represented by colored cells below the "Random Setup" button. Colors range from cold black to white hot with all the reds and yellows in between.

After setting up the grid you can watch the heat flow. Click "Start" to begin the process which will update every half second until you press "Stop" or close the window. Alternatively, you can click "Step" to watch the heat disperse one step at a time.

Below the buttons and the heat grid is another grid with green borders. This input grid has the same dimensions as the heat grid. Here you can enter your own heat values and then simulate them by clicking "Custom setup".

Due to the nature of HTML colors any number above 765 is going to appear white. That doesn't mean you can't enter numbers well above 765. I enjoy putting in numbers like 10,000 or more and watching the resulting "explosion".

Lastly, below the input grid, is a read-only text area that starts out blank. If you click the button, "Print CSV of heat", at the very bottom then the heat values in the current grid will print to the text area as comma separated values (CSV). It may look something like this:

0,0,0,0,2,4,7,8,7,4,2,0,0,0,0,
0,0,0,2,7,14,22,24,22,14,7,2,0,0,0,
0,0,2,8,21,40,56,64,56,40,21,8,2,0,0,
0,1,7,21,48,84,117,129,117,84,48,21,7,1,0,
0,4,14,40,84,142,193,215,193,142,84,40,14,4,0,
1,6,22,56,117,193,262,288,262,193,117,56,22,6,1,
1,7,24,64,129,215,288,319,288,215,129,64,24,7,1,
1,6,22,56,117,193,262,288,262,193,117,56,22,6,1,
0,4,14,40,84,142,193,215,193,142,84,40,14,4,0,
0,1,7,21,48,84,117,129,117,84,48,21,7,1,0,
0,0,2,8,21,40,56,64,56,40,21,8,2,0,0,
0,0,0,2,7,14,22,24,22,14,7,2,0,0,0,
0,0,0,0,1,4,6,7,6,4,1,0,0,0,0,
0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,

The CSV text can be copied and pasted into a text file (make sure the text file is blank except for whatever was pasted in). Finally, by changing the text file's extension from ".txt" to ".csv" you will be able to open the text file in excel and graph the heat surface, like I've shown below. Select a "Surface" graph in excel.

When you try to change the file's extension you will get a warning about the file becoming unusable. Just ignore it. You can always change the file extension back and changing the extension never affects the actual data in the file.

If, when attempting to name files, you don't see .doc, .txt, .html, or any other "dot" extensions, you will need to change your folder settings. Open a folder, any folder, open the "tools" tab. Select "Folder Options". Select the "view" tab. Under "advanced settings" un-check the box next to "Hide extensions for known file types." Click "Apply to All Folders." Then you will be able to view and modify file extensions.

Toy around with it. Make some pretty pictures. Enjoy.

Other tags this item is listed under include: smartamusement,