Coding Challenge
Vložit
- čas přidán 5. 08. 2024
- In this coding challenge, I implement a pixel-based “fire” algorithm using Processing (Java). Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge 102: ...
🎥 Next video: • Coding Challenge #104:...
🎥 All videos: • Coding Challenges
References:
📓 Fire Simulation: web.archive.org/web/201604180...
💾 Processing: processing.org
Videos:
🚂 What is Perlin Noise?: • 13: What is Perlin Noise?
🔴 Livestream Archive: • Live Stream #136: More...
Related Coding Challenges:
🚂 #102 2D Water Ripple: • Coding Challenge 102: ...
🚂 #132 Fluid Simulation: • Coding Challenge #132:...
Timestamps:
0:00 Introduction
0:39 Fire algorithm
1:11 Let's Code
2:30 Add image buffers
5:20 Implement smoothing algorithm
11:58 Add cooling map
15:57 Introduce Perlin noise field
17:58 Add noise to the cooling map
22:04 Scroll the cooling map
24:32 Experiment with graphics objects
26:18 Add mouseDragged
27:52 Conclusion
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: czcams.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#firesimulation #perlinnoise #processing #p5js
25:00
Coding Challenge, A to Z,
interviews and live streams,
P5, Processing,
front-end API
Particles, Fireworks,
10PRINT, Flappy Bird,
Game of Life, Supershapes,
approximating Pi
GitHub, pull requests,
Linting, unit tests,
this.dot, MousePressed,
random Perlin noise
Unicorn, rainbow,
neural network, Tensorflow,
learning and intelligence,
chatbots using voice
Vectors, matrix math,
A* finds the shortest path,
Javascript, ES6,
cutting for a bugfix
Dan did start the fire
He was always coding, had the pixels loading
Dan did start the fire
He did not invent it, but did implement it~
This is amazing.
That is incredible! Very well done! :D
This is amazing!
Hey, great to see that people are still enjoying articles from my web site, even though it's just in the archive. How did you even find it? Try adding the warp map for really cool looking fire. - Hugo Elias
Are you really Hugo Elias? Cool!!! I was looking for the code for the water ripples a few years ago already and found a lot of forum threads pointing to the website.
Funny though coming to the same page again when searching for fire! :-)
Hi, yes. It's really me. :) Let me know if there's anything else you need, or any questions about the algorithms.
Someone at work was watching your videos, and heard you mention my name!
Fabulous!! Maybe you should get in touch with Dan, I assume he'll be very happy and curious to hear from you!
As someone pointed out already I guess the whole idea of making this water ripple and/or fire effect dates back to the demo scene of the early 90s or even 80s...
man if you're really hugo i'd love to see you in the train. get in contact with dan, i'm sure he'll like this collab too. btw do you have a website/blog where you post more recent stuff?
I just wanted to say thank You for motivating me to start learning java through p5.js and Processing and overall for great attitude in all your videos! Now I can actually do some satisfying creations instead of some boring algorithms and being stuck in console like i do in school. Thanks Dan!
Thanks for sharing - I first learned about this algorithm in the early 90's from a friend and implemented in QBasic and Freebasic back in the day. Was trying to remember it to play with making a Rust demo and came across this video. Good stuff!
Now you just need to make an earth effect and a wind effect and you will have the four elements!
Also it was a while since we didn't hear about perlin noise from you ,i was beginning to worry !
Love your work Dan !
Always great to watch your videos!
OMG He did it^^ I didn't think you were going to edit this together :)
(watched that whole stream live then^^)
It was funny^^
Love this!
This is actually so cool! Thanks so much!
Thanks for yet another awesome video!
_// tip:_
void settings() { _// use void settings() for variable sizes_
size(yourWidth, yourHeight, FX2D); _// use the FX2D renderer for much better performance_
}
Be kind to the elephants!
I'll definitely will try to play with this around.
You could try something simpler than noise: randomizing the generator rows at the bottom. Instead of filling them with white pixels, toss a coin (which might very well not be fair) to decide on white or black. I think it would be easiest with the code you had at roughly 14:10.
Thank you for all the great videos!
Yes, great suggestion!
Liked the new adjective, grayscaly! :)
Hey dan! I am a great fan of yours. You are the one who took my cmd small coding to another level teaching me JAVA AND JAVASCRIPT and i would like to ask a favour...
would you consider making a tutorial series with the p5 arduino library
Awesome.
yey! you finnaly covered fire. Thanks. you may only also want to color it :)
This gives me an idea, ever try using perlin noise to try making a digital lava lamp? Iv been looking for a way to programme a believable lava lamp for awhile and this video might have given me the solutions iv been looking for.
Hey Beta, Dan's code from the "Metaballs" video looks a bit like a lava lamp, I had the same thought when I tried it out.
@thecodingtrain I challenge you to visualize a rope that hangs from 2 points with a specified length, using math (so not just showing an image from google :P) so basically: changing the catenary formula to depend on those 2 points and the length instead of the lowest point of the line and some other value that determines how quickly it 'opens up'.
This video is fire
"so much to 'starting with that code'" xD Every coding challenge I have to laugh out loud at least once xD.
Nice ending
Drinking game: Shot every time Dan says that he should be more thoughtful about something
u r awesome! 3 weeks ago I have no idea about javascript (just android and some html), today I downloaded processing and tried my mod version of this if u wanna watch. I'll leave code below. I cant believe how much I learn in ur videos. its most than a coding chanel, pure maths.
PImage gr, cmp, sum;
float start = 0.0, xo, yo, increase, noi, value;
// this is the treshold for masking the flames
float cap = 160;
//this value should increased accord to lower resolution (size)
float trh = 1.2;
int w = 400;
int h = 200;
int ind, index;
float r, a, c;
color g, n;
void setup() {
size(400, 200);
frameRate(30);
gr = createImage(w, h, RGB); //done
cmp = createImage(w, h, RGB);
sum = createImage(w, h, ARGB);
gradient();
}
void noiseMap(){
//generate a noise map
cmp.loadPixels();
//x offset
xo = 0.0;
increase = 0.01;
for(int i = 0; i < w; i++){
xo += increase;
yo = start;
for(int j = 0; j < h; j++){
yo += increase;
//noise value
noi = noise(xo, yo);
//noise value eq to color value
value = pow(noi,3)*255;
cmp.pixels[i + j * w] = color(value);
}
}
cmp.updatePixels();
//scroll up noise map
start += 0.06;
}
void gradient(){
//generate a gradient from black to white
gr.loadPixels();
//throw columns
for(int i = 0; i < w; i++){
//reset every row;
float val = 0;
//runing throw rows
for(int j = 0; j < h; j++){
int index = i + j * w;
gr.pixels[index] = color(val);
val += trh;
}
}
gr.updatePixels();
}
void draw(){
noiseMap();
background(0);
//combine both images
gr.loadPixels();
sum.loadPixels();
for(int i = 0; i < w; i++){
for(int j = 0; j < h; j++){
ind = i + j * w;
//load pixels from both maps in same position
g = gr.pixels[ind];
n = cmp.pixels[ind];
//combine both colors
c = brightness(g) - (3*brightness(n));
//looks like smoke, so we have to divide in 2 channels
r = (pow(c,2)/sqrt(c))/1.5;
a = (c+(r/c))*1.2;
if(c
I tried implementing this with p5js, but somehow after turning on the 'smoothing' my cpu jumps to 110% and i only see my red line and some weird white/black glithcy lines through the black background (and then the whole buffer looks like it crashes) ...
Also when running your pde with processing js inside a webpage i see some sort of animation but nothing compared to your video?
I didn't know that YOU have created this Perlin Noise Field!!!
Hello, I am trying to design a website header where it is made up of little squares and when the mouse hovers over or you click on one of the squares they all scatter or move out of the screen.. Could you tell me how I can do that?
love your videos! I have a side question... I have an ellipse as a button that links to another page using window.open('') but it links it to another tab. is there a way to open the link in the same page, rather than opening a new tab using the p5 library?
TIA!!
window.open("www.youraddress.com","_self")
Found this on stackoverflow:
stackoverflow.com/questions/8454510/open-url-in-same-window-and-in-same-tab
How would you intersect or make union of two objects like rectangles or circles? make the intersected part new object as it is done in tools Illustrator?
Hi i have qouastion.
Can i in p5.js make my game i mean aplication and how to do that? {If i alredy now how programing game how to "build" that i dont now how else to explane}
2x speed and this guy is rockin da haos :)
The secret of a good pixel-based fire algorithm is in the color palette.
Look at my version inspired by the Final DOOM algorithm:
github.com/lsmanoel/DoomFireEffect_ProcessingVersion
Nice work! You can submit a link to the coding train website if you like!
github.com/CodingTrain/website/wiki/Community-Contributions-Guide
Isn't the whole point of using loadPixels() and updatePixels() to prevent you from overwriting the actual image data array while reading from it? Which basically makes the whole swaping-buffer-thing redundant?
16:36
Mister, no offence, but you're absolutely crazy!
Bloom HD ohh my gosh no! It's so beautiful!
I'm a 3rd year Computer Science student with NO portfolio other than the projects we made in class. These Coding Challenges are really cool! Is there a good website/list that has a ton of these to try to code them myself (Else Ill just pick out some of my favourites from your videos)?
You can find the full list here: thecodingtrain.com/CodingChallenges/
How are you getting intellisense for the Processing IDE?
Nice sir
Say, just a random thought, but doesn't the shape and colors of the ending animation (yeah... the one with you on top of the train), it kiiiiinda, (and I really mean kind of), seems to spell Google?? with the colors and the blurr? Just thought I saw that... Maybe it's too late and I need sleep...
The brighter (hotter) pixel is it should scroll bigger amount up (faster). That is how convection works.
Hey Mr Shiffman, can you tell me a good channel for me to learn python?
Can you program C TheCodingTrain?
How did we live before map()?
I know, I am slow.
Map is basically lerping with time equal to inverse lerping.
map(val, a, b, c, d) = lerp(c, d, inverseLerp(a, b, val))
What microphone does he use on his ear?
Not first commenter but at least Second commenter.Great sir..Can u make video on mongodb ?????
where can i find the code base?
Why newC * 0.25 instead of newC / 4? Is it faster?
I just had flashbacks to the long Skyrim loading screens
Fuego
Who dislikes this video?? Like seriously who comes on here and says "ya know what? Screw this guy" and clicks the dislike button? Must be a bunch of VisualBasic fans or something
Matt Thibodeau I truly miss VB.... With VBScript and VBA, you could make wonderful things. Wish I knew Nature of Code back then.🙂
kustomweb I just meant it as a joke, it's actually a really cool little language
Nah, there is something to Dan that makes people cringe. maybe that is why ppl dislike the vid. Dunno.
Who told you that the dislike button means "screw that person"?
Stop taking everything personally. Also the video has only FIVE downvotes even now. What more do you even want, you crazy little authoritarian?
Taxtro yikes, someone can't take a joke :P
title "fire effect"
join video, i just see some weird bubbles nice
this is interesting, but please, I want deep learning´s videos using tensorFlow!
What if you make a game that we can play against an AI using Deep Learning, that would be amazing!!
big! :)
Dan, your algorithm is a bit off. You subtracted the cooling before dividing. You need to subtract the cooling after taking the average of the four neighbors
Darth Torus haha I'm comming to say that, it's making me crazy!
Yes! I noticed this after the fact. The code on github is corrected. Thanks for the comment!
The Coding Train You could also add wind to blow the flames. If the wind is too much, the fire goes out
Would it help me be better at programming if I watched these speed videos and tried to follow along with my own compiler¿
(that's how i improved my coding :D (altho i watch the entire video first, then try to recreate the project
How do you find the algorithms you use in the coding challenge?
I get a lot of great suggestions! github.com/CodingTrain/Rainbow-Topics/issues
Okay thank you. =)
#Codingwithfire would've been an awesome name.
That was a common demoscene trick. One of the starter tricks noobs like me programmed Back in the day. My First Pascal/ASM code. (Yeah, that was the fashion back then, Pascal + ASM)
I think is from 1992 or 1993. (I got it from a book). Can't remember his name, but the first guy who did it was kinda famous.
Thanks, I'd love to make sure I credit the original source properly!
It may be common, but maaan it looks so good + it is so fast!
9:22 DRAIN THE SWAP!!
Hello Dan. Can you make a video about de es6 spread operator?
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
Why don't you use vanilla JavaScript for coding challanges?
MaoItsMe I can't speak for Dan, but for me it got tedious rewriting stuff like:
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.arc(x+50, y+50, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
Over and over again instead of:
fill(255, 0, 0);
ellipse(x, y, 100, 100);
Isaac Chen oke
You should try to make a Mastermind game
#codingflames
Does Daniel speak with a lisp? Odd, I had never realized it before
I think maybe a little? I'm using a new mic here that brings it out more.
are the source free to use?
Yes! You can find everything at thecodingtrain.com / github.com/CodingTrain/website
cool :D
Thanks and keep up the good work :D
You're fucking cool dude
i dont use twitter, i wish you could just post links here in the comments
You can and i'll take a look! You can submit a link to the coding train website if you like too:
github.com/CodingTrain/website/wiki/Community-Contributions-Guide
With all due respect, that looks more like smoke than fire. But it is a good simulation of smoke
because its an grey-scale, with orange it looks pretty good
Hey Daniel, I'm currently a patreon, would it be better to sponsor you via CZcams?
It's really up to you! For now I am using both, some more explanation here: czcams.com/channels/vjgXvBlbQiydffZU7m1_aw.htmlcommunity?lb=UgyXzi4X1jxv6y08d-t4AaABCQ
Thanks for the link, I thought I likely missed a discussion somewhere! In that case I'll just stick to patreon for the time being and keep an eye on how the sponsor feature pans out.
You should try to code Atari breakout...
Search setting: is purple
Me: >_>
Which language is this??
Java with Processing: processing.org
Do a coding challenge with python.
python is really slow tho
SeyVetch why?
well python is easy to code but slow that's how it is (well C langueges are deffinitly faster)
SeyVetch alright, but I still wanna see 😀
Why is that your videos looks like not monetized?
I challenge you to try any kind of different language, Python and create an app from it..
Patreon?
code challenge recommendation: implement firefly simulation
en.wikipedia.org/wiki/Firefly_algorithm
We didn't start the fire.
Just a reminder 🔥 is not white though
Hi
why java tho?
Necronoise Java is love
Necronoise isnt it Java script?
X-Mux 01 it's java
first
That smoke no fire :-)
it can be fire if you change the color
🤔
Allumer le feu !!!!!!!!!!!!!!
French joke (I'm French)
Another HUGE challenge for you: Don't use Java...
What is the secret of your happiness? U are the best!!!
P.S. dont tell me u are using drugs...
You are in use of language
I wrote something that looked better than this about 30 years ago.