HTML5 heat spreading simulation

with a simple JS algorithm

I was reading an algorithm book the other day and found a rather interesting section about simulations. I really like simulations and I think it's awesome that computers can calculate and display something from the real world.

I came across an algorithm called the "Gauss-Seidel iteration" which can be used to calculate heat spreading in 1 Dimension (stick) or 2D (like in a hotplate) or even in 3D rooms. I first implemented the 2D algorithm in Java and was very happy with the performance so I decided to recode it in HTML5.

Open in new Window

When you click and drag the mouse somewhere you create a heat spot (rendered red). This is done by adding another grid behind the rendered grid which is used just to store the heat.

The ASCII render mode just replaces tile colors with the heat values of the field. Each number represents the heat of its tile. The algorithm then recalculates the whole field and sets the color of each tile to the corresponding heat value.

This is the whole algorithm for calculating the tile values, it goes through every cell and performs its magic on it:

//field is an 2D array
//heat is also an 2D array that only contains the heat that should be applied to field
for(var i=0;i<canvas.width/cellsize;i++)
        for(var j=0;j<canvas.height/cellsize;j++)
            field[i][j] = (0.25 * (field[i-1][j]+field[i+1][j]+field[i][j-1]+field[i][j+1]) + heat[i][j]);
Tags: ascii coldness gauss heat hot vs cold html5 iteration seidel simulation

Comment using SSH! Info


Get new posts by email
(~ one email every couple of months & no spam)