fire.js

const firePixelsArray = []
var decayVariation;
var windVariation;
var fireStartMinIntensity
var fireStartIntensityVariation
var fireWidth = 60
var fireHeight = 40
var debug = false
const fireColorsPalette = [{"r":7,"g":7,"b":7},{"r":31,"g":7,"b":7},{"r":47,"g":15,"b":7},{"r":71,"g":15,"b":7},{"r":87,"g":23,"b":7},{"r":103,"g":31,"b":7},{"r":119,"g":31,"b":7},{"r":143,"g":39,"b":7},{"r":159,"g":47,"b":7},{"r":175,"g":63,"b":7},{"r":191,"g":71,"b":7},{"r":199,"g":71,"b":7},{"r":223,"g":79,"b":7},{"r":223,"g":87,"b":7},{"r":223,"g":87,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":95,"b":7},{"r":215,"g":103,"b":15},{"r":207,"g":111,"b":15},{"r":207,"g":119,"b":15},{"r":207,"g":127,"b":15},{"r":207,"g":135,"b":23},{"r":199,"g":135,"b":23},{"r":199,"g":143,"b":23},{"r":199,"g":151,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":159,"b":31},{"r":191,"g":167,"b":39},{"r":191,"g":167,"b":39},{"r":191,"g":175,"b":47},{"r":183,"g":175,"b":47},{"r":183,"g":183,"b":47},{"r":183,"g":183,"b":55},{"r":207,"g":207,"b":111},{"r":223,"g":223,"b":159},{"r":239,"g":239,"b":199},{"r":255,"g":255,"b":255}]

function start(){
    decayVariation = 3;
    windVariation = -1;
    fireStartMinIntensity = 36;
    fireStartIntensityVariation = 0;
    createFireDataStructure()
    createFireSource()

    setInterval(calculateFirePropagation, 50)
}

function createFireDataStructure(){
    const numberOfPixels = fireWidth * fireHeight

    for(let i = 0; i < numberOfPixels; i++){
        firePixelsArray[i] = 0
    }
}

function calculateFirePropagation(){
    for(let column = 0; column < fireWidth; column++){
        for(let row = 0; row < fireHeight; row++){
            const pixelIndex = column + (fireWidth * row)

            updateFireIntensityPerPixel(pixelIndex)
        }
    }

    renderFire()
}

function updateFireIntensityPerPixel(currentPixelIndex){
    const belowPixelIndex = currentPixelIndex + fireWidth

    if(belowPixelIndex >= fireHeight * fireWidth){
        return
    }

    const decay = Math.floor(Math.random() * decayVariation)
    const belowPixelFireIntensity = firePixelsArray[belowPixelIndex]
    const newFireIntensity = belowPixelFireIntensity - decay > 0 ? belowPixelFireIntensity - decay : 0
    firePixelsArray[currentPixelIndex + decay * windVariation] = newFireIntensity
}

function renderFire(){
    let html = '<table cellpadding=0 cellspacing=0>'

    for(let row = 0; row < fireHeight; row++){
        html += '<tr>'

        for(let column = 0; column < fireWidth; column++){
            const pixelIndex = column + (fireWidth * row)
            const fireIntensity = firePixelsArray[pixelIndex]
            
            if(debug === true){
                const color = fireColorsPalette[fireIntensity]
                const colorString = `${color.r},${color.g},${color.b}`

                html += `<td style="color: rgb(${colorString})">`
                html += `<div class="pixel-index">${pixelIndex}</div>`
                html += fireIntensity
                html += '</td>'
            }else{
                const color = fireColorsPalette[fireIntensity]
                const colorString = `${color.r},${color.g},${color.b}`

                html += `<td class="pixel" style="background-color: rgb(${colorString})">`
                html += '</td>'
            }
        }

        html += '</tr>'
    }

    html += '</table>'

    document.querySelector("#fireCanvas").innerHTML = html
}

function createFireSource(){
    for(let column = 0; column <= fireWidth; column++){
        const overflowPixelIndex = fireWidth * fireHeight
        const pixelIndex = (overflowPixelIndex - fireWidth) + column

        firePixelsArray[pixelIndex] = Math.floor(Math.random() * fireStartIntensityVariation + fireStartMinIntensity);
    }
}

function toggleDebugMode(){
    if(debug){ 
        debug = false
        fireHeight = 40
        fireWidth = 60
    }
    else{
        debug = true
        fireHeight = 17
        fireWidth = 25
    }

    createFireDataStructure()
    createFireSource()
}

function setFireStartIntensity(arg){
  if(arg == 'min'){  
    fireStartMinIntensity = 26;
    fireStartIntensityVariation = 10;
    decayVariation = 13;
  }
  else if(arg == 'increase' && fireStartMinIntensity < 36){
    fireStartMinIntensity++;
    fireStartIntensityVariation--;
    decayVariation--;
  }
  else if(arg == 'decrease'  && fireStartMinIntensity > 26){
    fireStartMinIntensity--;
    fireStartIntensityVariation++;
    decayVariation++;
  }
  else if(arg == 'max'){  
    fireStartMinIntensity = 36;
    fireStartIntensityVariation = 0;
    decayVariation = 3;
  }

  createFireSource();
}

function setWind(arg){
  if(arg == 'noWind'){  
    windVariation = 0;
  }
  else if(arg == 'increase' && windVariation < 2){
    windVariation++;
  }
  else if(arg == 'decrease' && windVariation > -2){
    windVariation--;
  }

}

start()