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.
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]);
Comment using SSH! Info
