HTML5 heat spreading simulation

with a simple JS algorithm

Posted by Christian Haschek on 2012-04-08
Never miss a post by liking this blog on Facebook

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

There are no ads on this (https enforced) blog. Please help me to keep it that way