filipedeschamps/doom-fire-algorithm

Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!

Doom Fire Algorithm Playground

A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.

Experiments

These people are making this repository MORE THAN AWESOME.

• First implementation using plain JavaScript and a Table to render (@filipedeschamps)
• Implementation using plain JavaScript and Canvas's drawRect to render (@leocavalcante)
• Implementation using plain JavaScript and Canvas's putImageData to render (@mccraveiro)
• Show case of JS + Rust (WebAssembly) + PixiJS + parcel-bundler + live-reload (@lucianopf)
• Implementation using PixiJS Graphics (@leocavalcante)
• Implementation using Rust and rendered in Terminal (@moog)
• First implementation at the upside down using plain JavaScript and a Table to render (@lucianopf)
• First implementation but with comments all around the code (@WhoisBsa)
• Transparent fire and with new buttons to interact (@mmoraisa)
• Render using particles with P5 + more fire controls (@SharkSharp)
• Embedded version implemented in C using SMT32F429 board and mbed (@agaelema)
• Rendering with a Table and Manual wind control (@hfabio)
• Rendering with a Table and Random wind direction (@hfabio)
• Lua/Love2D Implementation (@wesleycsj)
• Kotlin on Android Implementation (@kassiano)
• Random Walker (@filipedeschamps)
• SDL2 Implementation (@mrcsxsiq)
• Android with Kotlin and Custom View (@alvesleonardo)
• Render using Canvas, requestAnimationFrame and with a Responsive Layout (@kevinbreaker)
• 'Pagar.me's logo on fire' edition (@igorantun)
• Mouse Follower algorithm (@filipedeschamps)
• PSP Homebrew Implementation (@mrcsxsiq)
• Render using Canvas and HSL colors (@felipe-pita)
• Falling Stars (interactive demo) (@filipedeschamps)
• C++ SFML implementation (@edusporto)
• Elixir CLI for drawing doom fire effect in the terminal (@herbstrith)
• Pythonic Doom Fire + Blue Flame (@filipealvesdef)
• Go using the Ebiten 2D game library (@crgimenes)
• Implementation using Java and Graphics to render (@vinidg)
• Java Graphics2D Implementation (@fabiodelabruna)
• Making the fire more real, removing right to left site wind effect (@rattones)
• C++ Qt Multiplatform Implementation (@guidefloripa)
• First Go Terminal Implementation (@ayang64)
• C and Allegro 5 (@lucasew)
• Python 3 with PyGame (@DayllonXavier)
• Implementation using Unity 3D with Particle System (@MainDuelo)
• Dart 2.0 Implementation (@viniSaab)
• iOS implementation using SpriteKit (@pogist)
• Delphi using Firemonkey (@FelipeAngelini)
• Texts on Fire (@leonampd)
• Java and LibGdx (@leonampd)
• Extinguish the fire by the mouseover (@jotave42)
• React implementation (@urielkdev)
• React Native implementation (@SamuelHiroyuki)
• Python using Kivy (@sfadiga)
• Pink Fire (@valescaf)
• Faustão Edition (@WeslleyNasRocha)
• Bash Edition (@WeslleyNasRocha)
• Flutter Edition (@abraaolevi)
• Web Responsive Version (@AntonioPedro9)
• GDScript Implementation (Godot Engine) (@jshlw)
• Flutter with Painter (@aschiavon91)
• Using multidimensional array + Controls to interact (@gustavo-tp)
• Ascii Art Version (@aldrie)
• Meteor (@felipe-pita)
• CSS Grid Doom Fire (@thadeucity)
• Render Using GPU (@thadeucity)
• FogoDoom-Control screen resizing (@jhonathan)
• Non-uniform canvas 2d array implementation (@caioferrarezi)
• Led matrix, with arduino (@SamuelNunes)
• C# Console Implementation (@franck-gaspoz)
• Swift UI Version(@AdrianoAntoniev)
• Python version: fire-doom-simulator with interactive menu and color changing functionality(@FranciscoCharles)
• Godot Implementation with Shaders (Godot Engine)(@RisingThumb)
• Python Curses with ASCII characters version(@pserey)
• Controllers RGB and scale in pure javascript (@mak213k)
• First implementation with an input to change fire color (using HSL) (@BeatrizAguillera)

Contributors

@leocavalcante	@mccraveiro	@AcePetrucci	@eduardosilvapereira	@brunooomelo	@lucianopf
@moog	@WhoisBsa	@mmoraisa	@SharkSharp	@agaelema	@hfabio
@wesleycsj	@kassiano	@mrcsxsiq	@alvesleonardo	@kevinbreaker	@igorantun
@felipe-pita	@edusporto	@herbstrith	@filipealvesdef	@crgimenes	@vinidg
@fabiodelabruna	@rattones	@guidefloripa	@ayang64	@lucasew	@DayllonXavier
@MainDuelo	@viniSaab	@pogist	@FelipeAngelini	@leonampd	@osmarjunior
@jotave42	@urielkdev	@SamuelHiroyuki	@sfadiga	@valescaf	@WeslleyNasRocha
@cabonamigo	@abraaolevi	@AntonioPedro9	@jshlw	@aschiavon91	@gustavo-tp
@aldrie	@thadeucity	@jhonathan93	@SamuelNunes	@franck-gaspoz	@FranciscoCharles
@RisingThumb	@mak213k	@BeatrizAguillera

Author

@filipedeschamps

doom-fire-algorithm's Issues

React struggling to render the fire. HTML or Canvas.

Is anyone facing a low performance when trying to render using React? I didn't change much of the code but react is struggling to have a nice perfomance with setInterval and the amount of pixels.

Broken link: Faustão Edition

https://filipedeschamps.com.br/doom-fire-algorithm/playground/ta-pegando-fogo-bixo/ gives me a 404 error

Is this online somewhere else?

Wrong link to p5 version on README

On the README.md in experiments, the link to the demonstration of the P5 version(the last link) is the same as the transparent fire.

Why not use Canvas?

Hi Filipe, congrats for your project man, is very cool!

By the way, have you thought about using Canvas instead of drawing inside a DIV? I'm saying this because, from experience, canvas performes better for this type of application. As you can see in this example, the frame rate is not very stable. I did a test refactoring part of my code to use canvas and the gain was very expressive.

Cheers.

performance is horrible in firefox 64

hey I've noticed on the demo it was looking alot slower then the gif on the github and it seemed to be running at 2FPS acording to the performance monitor in firefox
https://www.dropbox.com/s/kazq1r0npd795hr/profile.json?dl=0
this is the log file from the performance tab in dev tools if you need anything else to help improve the performance I'll be glad to help
my cpu is the R5 1600 and a RX 590 so it defiantly souldnt be my PC

I had an idea to cover all implementations in this repository :)

What do you think:

1. Rename this repository to doom-fire-playground
2. For each implementation, create an isolated and self-contained directory, for example
   • original-implementation-with-table
   • render-engine-architecture
   • render-with-canvas
   • canvas-with-wind-control
3. To avoid name clashing, we should use something like what we do with migrations files, for example:
   • 2019-01-04-original-implementation-with-table
   • 2019-01-04-render-engine-architecture
   • 2019-01-05-render-with-canvas
   • 2019-01-17-canvas-with-wind-control
4. Since you will have your own directory, you could add a README.md file if you wish to explain your implementation.

After this, I can even create a video about this playground or transform this repository into a tutorial to encourage developers to try something, since any experiment will be valid :)

Let's do this? 👍

@leocavalcante @mccraveiro @AcePetrucci @brunooomelo @eduardosilvapereira @lucianopf @madureira @ninja85a

Não precisa chamar o renderFire() na função start()

Eu deletei o [i]renderFire()[/i] da função [i]start()[/i] e renderizou da mesma forma.

const firePixelsArray = []
const fireWidth = 60
const fireHeight = 60
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 hell() {
  createFireDataStructure() 
  createFireSource()
  console.log(firePixelsArray)

  setInterval(calculateFirePropagation, 45.7)

}

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() * 2.4)

const belowPixelFireIntensity = firePixelsArray[belowPixelIndex]
const newFireIntensity = belowPixelFireIntensity - decay >= 0 ? belowPixelFireIntensity - decay : 0
firePixelsArray[currentPixelIndex - decay] = newFireIntensity

}
function renderFire() {
  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('#welcomeHell').innerHTML = html

}

function createFireSource() {

  for (let column = 0; column <= fireWidth; column++) {

    const overflowPixelIndex = fireWidth * fireHeight
    const pixelIndex = (overflowPixelIndex - fireWidth) + column
    firePixelsArray[pixelIndex] = 36

}

}

hell()`

Erro ao acessar o domínio dos exemplos

Por algum motivo muito maluco que eu não estou conseguindo entender, quando acesso a URL:

https://filipedeschamps.github.io/doom-fire-algorithm/playground/1st-implementation-with-tables/

(note que está dentro do domínio do Github)

Ele redireciona para:

https://filipedeschamps.com.br/doom-fire-algorithm/playground/1st-implementation-with-tables

E dentro das configurações do repositório, ele mostra que está fazendo o deploy para o meu domínio (coisa que eu nunca configurei, tanto que todos os links no README eram para github.io

Preciso de ajuda

Alguém faz ideia de como remover um domínio customizado? Eu não tenho nada no meu DNS que faça esse redirecionamento (e até porque, eu não controlo o DNS do github.io

Adicionando em react e outros frameworks

https://github.com/kanrinha/add-doom-fire.git