Fogo-Doom/main.js at master · devgl96/Fogo-Doom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
const firePixelsArray = [];
const fireWidth = 40;
const fireHeight = 40;
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(){
    createFireDataStructure();
    createFireSource();
    renderFire();

    setInterval(calculateFirePropagation, 40);
}

// Create a Data Structure
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 >= fireWidth * fireHeight){
        return;
    }

    const decay = Math.floor(Math.random() * 3);
    //const decay = 1;
    const belowPixelFireIntensity = firePixelsArray[belowPixelIndex];
    const newFireIntensity = belowPixelFireIntensity - decay >= 0 ? belowPixelFireIntensity - decay : 0;

    // Fire pra cima
    //firePixelsArray[currentPixelIndex] = newFireIntensity;
    // Fire + vento para esquerda
    firePixelsArray[currentPixelIndex - decay] = newFireIntensity;
    //Fire + vento para direita
    //firePixelsArray[currentPixelIndex + decay] = newFireIntensity;
}

function renderFire(){
    const debug = false;
    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){
                html += '<td>';
                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] = 36;
    }
}

start()