@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

What do you think:

Rename this repository to doom-fire-playground
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
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
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 sei se eu fiz o pull request certo, pois não tenho muita experiência nisso :( mas se vc puder organizar o local do arquivo eu agradeço :)

from bs4 import BeautifulSoup from time import sleep from random import randint width = 40 height = 40 f = open("render.html", "r") fireColorsPallete = [[7, 7, 7],[31, 7, 7],[47, 15, 7],[71, 15, 7],[87, 23, 7],[103, 31, 7],[119, 31, 7],[143, 39, 7],[159, 47, 7],[175, 63, 7],[191, 71, 7],[199, 71, 7],[223, 79, 7],[223, 87, 7],[223, 87, 7],[215, 95, 7],[215, 95, 7],[215, 103, 15],[207, 111, 15],[207, 119, 15],[207, 127, 15],[207, 135, 23],[207, 135, 23],[199, 135, 23],[199, 143, 23],[199, 151, 31],[191, 159, 31],[191, 159, 31],[191, 167, 39],[191, 167, 39],[191, 175, 47],[183, 175, 47],[183, 183, 47],[183, 183, 55],[207, 207, 111],[223, 223, 159],[239, 239, 199],[255, 255, 255],]

def start(): FirePixels = createDataStructure() renderFire(FirePixels) createFireSource(FirePixels)

while True:
    calculateFirePropagation(FirePixels)
    
    sleep(0.1)

def createDataStructure(): pixArray = [] pixArray = [0 for i in range(width*height)]
return pixArray

def createFireSource(FirePixels): lastPixel = len(FirePixels) for collumn in range(width): source_index = (lastPixel - width) + collumn FirePixels[source_index] = 36

def calculateFirePropagation(FirePixels): for collumn in range(width): for row in range(height): index = collumn + row*width if index >= len(FirePixels) - width: continue else: decay = randint(0,2) FirePixels[index-decay] = FirePixels[index+width] - decay createFireSource(FirePixels) if FirePixels[index-decay] < 0: FirePixels[index-decay] = 0

renderFire(FirePixels)

def renderFire(FirePixels): debug = False html = '

for row in range(height):
    html += '<tr>'
    for collumn in range(width):
        index = collumn + row*width
        if debug:
            html += '<td>'
            html += str(FirePixels[index])
            html += '</td>'
        
        else:
            color = fireColorsPallete[FirePixels[index]]
            colorString = str(color[0])+',' + str(color[1])+ ',' +str(color[2])
            html += '<td style = "background-color: rgb(' + colorString + ')">'
            html += '</td>'
    html += '</tr>'

html += '</table>'
html += '<META HTTP-EQUIV="refresh" CONTENT="0.1">'
html += '</body>'
html += '<html>'
insertHtml(html)

def insertHtml(html): html_file = open('render.html','r') lines = html_file.readlines() for i, line in enumerate(lines): if line == """

\n""": lines[i] = line +" " + html if line.startswith(' <table',0,23): lines.pop(i)

new_html_file = open('render.html','w')
new_html = ''.join(lines)
new_html_file.write(new_html)

start()

opened by lucascbarbosa 4

Render using canvas image

This PR uses a canvas image on the render function. This will drastically improve performance as it won't manipulate DOM.

PS: I had no idea on how to fit the debug mode 😂

opened by mccraveiro 4

Input para mudar a cor do fogo adicionado

Oi, Filipe!! Tudo bem?

Repliquei o algoritmo original e criei um input para o usuário alterar a cor da chama do fogo usando HSL (o usuário muda a hue numa escala e uma function faz o resto). Foi minha primeira contribuição com um projeto público e também a primeira vez que repliquei um algoritmo todinho em JS.

Estou tão feliz!!! Você não imagina como seus conteúdos são valiosos pra gente! 💟

Já subi os arquivos pra uma pastinha nova dentro do /playground e adicionei minha fotinho no README, só não entendi como subir minha demo page pro GitHub Pages a partir do seu diretório (pra ficar igual aos outros, que estão tipo "https://filipedeschamps.github.io/doom-fire-algorithm/playground/......"). Se eu tento aqui pelo meu, fica a partir do meu usuário e aí dá erro depois, quando tenta acessar.

É a primeira vez que mexo aqui no GitHub, então estou meio perdida ainda rsrs, desculpa se tiver feito algo errado.

Espero ansiosa seu feedback e muuuito obrigada pelos ótimos conteúdos! 😄❤️

opened by BeatrizAguillera 3

add csharp console implementation

Hi! I Have added a simple C# .net core console application that runs the amazing fire algo in a dedicated sub folders like the others implementations. could you merge please ? 😄

my profile: https://github.com/franck-gaspoz

opened by franck-gaspoz 3

O algortimo do fogo do doom aplicado em uma matrix de led usando Arduino!

E ai Filipe, blz?? Eu apliquei o algoritmo do fogo do doom, usando Arduino e uma fita led Endereçável organizada como se fosse uma matriz. Adoraria fazer parte do seu repositório incrível! Foi uma ótima oportunidade de criar um projeto, só para me divertir. E ainda assim, aprendi muita coisa legal! Obrigado pela oportunidade!

PS: Tive que diminuir a variedade das cores, pois minha matrix era bem pequena. Mas o efeito continuou otimo!

opened by SamueldaCostaAraujoNunes 3

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

opened by filipedeschamps 3

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.

opened by felipepastor 3

added compute shader fire code

Olá Filipe Deschamps! Tudo beleza?

Eu recriei o algoritmo do fogo do doom usando Compute Shaders, isso faz com que todo o algoritmo fica para a GPU, aumentando drasticamente o desempenho até em dimensões maiores do fogo em computadores mais modestos (o meu computador tem o Intel z5-Z8350 com gráfico integrado, bem fraquinho mesmo e conseguiu rodar em 60 FPS um fogo com tamanho 512x512 sem travar momento algum).

O problema é que como é um recurso experimental (mas funcional), só consegui fazer rodar nos meus testes no Google Chrome Canary (acredito que funcione no Microsoft EDGE Insider Channels) com umas flags habilitadas no chrome://flags (#enable-webgl2-compute-context, #use-angle e #enable-unsafe-webgpu).

Na página dá para mudar o fator de resfriamento, o fator de calor na base do fogo e a direção do vento. Mas eu tenho planos para adicionar mais coisas como mudar o gradiente da cor do fogo, mudar a resolução e o fps durante a execução, etc.

Abraços!!

opened by ghsoares 0

add portugol implementation

Implementação do "Fogo do Doom" na pseudolinguagem Portugol.

A base do código é muito semelhante, com alguns ajustes mínimos para conseguir executar na plataforma. Foi adicionado um controle de velocidade de animação, ao clicar nas teclas direcionais (setas).

Na parte superior do código é possível alterar o tamanho dos pixels, alterando o valor da variável tamanho_pixel.

Para redimensionar a janela é um pouco mais chato, pois o portugol não permite que seja atribuído uma expressão (a * b) à uma variável constante. Porém, é possível, basta alterar o valor de altura e largura, e colocar o produto da multiplicação destes na variável tamanho_vetor.

opened by mshlz 0

Implementação usando pygame e matriz no lugar da lista

Essa é uma implementação do algoritimo do fogo do doom feita em python3 utilizando a biblioteca pygame para renderização, utilizando matrizes no lugar de uma lista contendo todos os pixels sequencialmente e nesse algoritimo existe uma variavel "n" que indica quantas vezes a a tela será maior que a estrutura de dados, para não ficar renderizando literalmente uma tela de 100x100 pixels, no caso vai ser renderizada uma matriz de n(100)xn(100) pixels enquanto a estrutura de dados estará trabalhando com 100x100, eh noiiix

opened by jpalvesl 0

Owner

Filipe Deschamps

Vou fazer você se apaixonar por programação!

GitHub

A collection of demo variations, ideas, concepts & experiments.

Codrops Sketches A collection of demo variations, ideas, raw concepts & experiments. Demos 2022 Sketch 001: Repetition Hover Effect (Round) Sketch 002

56 Dec 27, 2022

Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

2.6k Jan 9, 2023

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

571 Nov 21, 2022

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

8 May 6, 2022

Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

333 Jan 4, 2023

A simple yet powerful native javascript plugin for a cool typewriter effect.

TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. <script src="htt

1.8k Jan 4, 2023

Simple Web Audio API based reverb effect.

soundbank-reverb Simple Web Audio API based reverb effect. Based on https://github.com/web-audio-components/simple-reverb by Nick Thompson. Intended f

21 May 30, 2022

This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.

SomaFM Music Player Web-App This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channe

123 Dec 27, 2022

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

112 Jul 27, 2022

Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to

89 Sep 20, 2022

A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.

Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np

120 Dec 23, 2022

A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

351 Dec 26, 2022

Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

289 Nov 1, 2022

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

797 Nov 26, 2022

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

Related tags

Overview

Doom Fire Algorithm Playground

Experiments

Contributors

Author

Comments