Coding Challenge #13: Reaction Diffusion Algorithm in p5.js
Вставка
- Опубліковано 19 чер 2024
- In this coding challenge, I visualize a Reaction Diffusion simulation using the Gray Scott model in JavaScript (with the p5.js library). Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #12: ...
🎥 Next video: • Coding Challenge #14: ...
🎥 All videos: • Coding Challenges
References:
📖 Karl Sims' Reaction Diffusion Tutorial: karlsims.com/rd.html
📓 2D Array Tutorial: processing.org/tutorials/2dar...
📕 My NOC class on Kadenze: www.kadenze.com/courses/the-n...
Videos:
🔴 Livestream Archive: • Live Stream #39: Q&A a...
Related Coding Challenges:
🚂 #85 The Game of Life: • Coding Challenge #85: ...
🚂 #90 Floyd-Steinberg Dithering: • Coding Challenge #90: ...
🚂 #103 Fire Effect: • Coding Challenge #103:...
Timestamps:
0:00 Introducing today's topic
0:36 The Gray-Scott model
1:41 Key pieces of the algorithm
4:24 Convolutions
7:01 2D arrays
9:00 The grid stores the amount of a and b chemicals across every pixel
10:30 Create another array to store the next generation
11:37 Dealing with the pixel array
12:55 Set the pixel colors based on the amount of a and b
16:14 Write a function to swap the current and next grid
19:30 Add the reaction diffusion formulas to the code
24:27 Time steps
27:29 Add the Laplace functions
33:45 Seed a whole area with b
36:37 Recap of the code and suggestions for creative possibilities
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: ua-cam.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...
#math #reactiondiffusion #javascript #p5js
OMG! you are like the Bob Ross of programming! ^^'/
needs more hair
"let's declare some some happy little variables and some happy little classes. let's make the colour of our pixels titanium hwhite"
More like keanu reeves of coding
Yeah hey
Me, when Daniel does something: "that makes so much sense!"
JavaScript when I do something: "uncaught reference error"
Bro he is using different libraries to do all of this amazing stuff! 👍👍😊
“Oh boy, I’m not here”. Where are you if you’re not where you’re at? Great video thanks!
Seriously great work Daniel! I tried implementing this a few years ago no my own, but was never able to figure out what was meant by a 3x3 Laplacian convolution. All of my physics and math friends gave me insanely abstract and impractical answers, so I had to shelve the project for a while. But you just single-handedly figured out, implemented and, maybe most awesome to me, explained it in simple terms in under an hour! Watching you think through this was extremely helpful - I'm really looking forward to more videos on advanced topics like this in the future!
+Jason Webb thanks for this very nice feedback!
"All of my physics and math friends gave me insanely abstract and impractical answers, so I had to shelve the project for a while. " LOL story of my life man
They must've given you the mathematical, analog/continuous version of the laplacian, right?
Well this is computer science, where things are often discretized & simplified to a practical, good enough approximation. Like that "image processing" laplacian
Did you ask for the convolution? Because I think this is not the right mathematical term to use here. The Laplacian is a differential operator, and so can be approximated by a difference equation, very easy. Take a look at central difference for instance.
The numerics were described in this paper a quarter century ago. science.sciencemag.org/content/261/5118/189.abstract
Thank you. You explain everything (most of it I will never, ever need) so well, and with such enthusiasm that I enjoy watching a random person on the internet write programs that use random algorithms :)
I wondered since the dawn of time how to code this very kind of algorithm, thank you so much!
Thank you!!
Thank you for your work, Dan. This one has been on my list to try for years. I was finally able to get things working with python but this simulation is incredibly slow, even with a 100*100 grid. Thank you for the introduction to these calculus concepts that I thought were impossible to understand without college courses! I'm inspired to try this with shaders now.
This was an amazing intro to programming Gray Scott - thanks for the help!
I'm using the reaction diffusion simulator Ready, this totally helps breakdown what the variables mean. Thanks a ton :)
Omg i can't stop watching your tutorials! They're so experimental and creative and fun! and i love your attitude and personality
Thanks for doing these videos, very cool stuff. Just by changing the feed rate from 0.055 to 0.025 it really makes the mitosis part of the reaction stand out. Its amazing how small changes in those numbers, make a big difference to the reaction.
cool, glad to hear!
Thanks so much for this tutorial it was great fun. I recoded this in p5 but I circumvented most of the inefficiencies that you introduced (for simpler code, for sure) by researching and implementing javascript Typed Arrays. I was able to get more than a 4x improvement in performance by avoiding the overhead associated with JS array management and its untyped elements.
I've watched a bunch of your coding challenges and tutorials (love them!) and I've noticed that you often forgo using "super efficient" coding techniques in order to have code that's easier to read and follow on videos. I think it would be great if you could do a tutorial series on using Typed Arrays and their associated Buffers and Views. It would be a great introduction into "to the metal" programming techniques that anyone could use to push performance on complex data structures. Cheers!
This is great feedback, thank you! Can you post here? github.com/CodingTrain/Rainbow-Topics/issues
Done! Thanks again for these tutorials
Your enthusiasm for coding is infectious, great job!! I was following along and I think you don't need the swap function. Just "grid = next", this way you keep on building onto the latest iteration.
Has this language links between values? So if you change the next, then you also change the grid.
This is such a great tutorial on so many levels! I love your approach, and explaining how to convert mathematical formula into code is super helpful. It is something that I have shied away from in the past, but now I feel like I have a foot in the door. Thank you so much.
I'm so happy to hear this!
I'm learning Python and your example is so clear that I actually understood everything without even knowing Javascript. Thank you for all your work!
Kyle N Funny, I could pretty much say that word for word, including only knowing Python.
Excellent series of tutorials!
Didn't understand shit. Still loved every minute hahahah
haha, thanks!
Shaolinguru1 I have no problem with swearing, but seeing a curse word relating to this channel was oddly jarring. No complaints. Just observations. Carry on gentleman
Mind your words.
Turing himself wouldn't have explained it better! (and funnier ^^)
Thank you so much Daniel!! :D
Thank you. Coded something incorrectly in the draw() function. Still don't know what I did wrong, but I'm glad it works now. Now, for your WebGL playlist to speed things up!
this will be my next exercise study project. I had maked similar things dozends years ago in turbo pascal
Amazing!
Just Great! Thank you Sir
After the debugging pause, you forgot to say that you added constrains (34:56), which is what was causing the void expansion.
Edit: Also, in the calculation of the next A and B, you removed a multiplication of their current values in lines 40 and 44 (at that moment of the video)
Thanks for the notes!
Thanks for pointing this out.
非常精彩的教程，非常感谢
me when he says "we are so close now" and I check the time and it is almost exactly half. lmao
Nice, youtube has very good recommendations!
A bit late maybe, but I really think this is by far the most interesting video you have made! Keep up the good work Daniel :)
thanks, I'm glad to hear!
I have seen some impressive pieces of art made using the reaction-diffusion algorithm for dithering/instead of dithering, to turn a photo into a two-tone piece of art. (Usually cnc'd into wood)
kudos for bringing it to reality
I tried this in Javascript. Took me an hour!
Very nice
I once saw a gold fish make a similar pattern on sand to impress female gold fishes on BBC earth.
I think this is a nice approach to the problem. I would have tried a similar implementation but relying more on global operations over the arrays. I guess I would feel more comfortable with separate arrays for A and B. Also it should be possible and maybe not too obscure to calculate the Laplacians also as arrays in one go instead of doing it cell by cell.
Isn't the direct computation of the 2d correlation the bottleneck for the speed of the program? Probably here it won't benefit too much of attempting to use a FFT-based correlation computation, but that one might be worth of some other video. You could show that blur effect you mentioned and many other linear filters applied to some picture, as an example.
Topic Yes!
JS Yes!
CodeTrain explained Yes Yes Yes!
This is a really cool video. I'd like to try it with wrap-around borders and see what happens then!
awesome, let me know how it goes!
That's an awesome video! DSP suggestion: you'll probably get that convolution done faster if you use FFT instead of sweeping the image with a filter block :)
I don't understand what you mean. can you explain?
do fft and then a single pass of the image instaed somehow?
@@timeiskey1 convolution in the time (or in this case space) domain is multiplication in the frequency domain, so you can calculate the Fourier Transform FT of both signals, then multiply them, and inverse FT the result: this will be the same as convolution. this is called "FFT convolution" if you wanna search it more. I guess here you would calculate the FT of "grid" and then the FT of the 3x3 kernel given here, multiply them, and then inverse FT the image back. I haven't tried it yet tho!
Thanks for the amazing tutorial and explanation! I'm wondering why this runs so much slower on Processing than in the browser (on the same machine)
you're awesome
Hey Professor, convey my regards to Tokyo, Nairobi and Denver! Cheers!
36:39 It looks like a logo for a repair shop ^^
Hi Daniel, Thanks for the great video tutorials. I am currently working on my master thesis and plan to create biophilic light projections and the reaction diffusion approach is something I am considering for my database of effects. Question is, I am quite a novice at coding but I would like to connect a reaction diffusion sketch to a ZED camera via the OpenCV library. The idea is that every time the system receives a value (a person passing by), a new "blob" is added to the sketch and it starts diffusing. I'm struggling a bit with the coding part - might you know of some examples I could look into for inspiration? Thanks and keep up the great work. I love your channel.
I do have some "blob detection" tutorials if you search my channel (under Processing Video 11.x series I think?). I would also recommend checking out the Processing OpenCV library!
github.com/atduskgreg/opencv-processing
Hello Daniel. Can You teach us how to make Audio Reaction ?
Thank you, Dan!!!! This is awesome!! I'm trying to get this working in Processing and it is working except for this funny problem where the entire pattern very slowly shifts to the left. Ugh..
nevermind, i got it. dumb mistake...
yay!
Hey Dan, great challange!!
How would you alter the speed of the process?
I've tried adding the 'delta T' to the laplace functions...
it speeds up, but I lose the nice blurred look and it becomes kind of pixelated!!
Cheers!
The delta(t) is applied at the end of the entire equation, not just the Laplacian functions.
treat delta(t) as a small constant (~0.1)
Do they need swapping? Can't we use grid = next; and leave it as that, because next will be getting overwritten on the next update?
Yeah, but then you'd lose the original grid. So you'd have to initialize a new grid to hold the temporary values the next time. That'd be really bad on the performance.
Same goes for double buffering.
Swap solves that problem.
It's like using two calculators to calculate some value that depends on the previous one.
You *could* drop each calculator you don't need any more on the floor (and buy a new one for each opeartion)... or you could just swap them
You are correct. If next is going to be overwritten on the next iteration it doesn't matter what it holds. No swapping needed.
In which coding software are u performing the codes?
your change camera button has a lot of button bounce? have you thought of slapping a capacitor on it?
love your videos btw, your awesome! :)
You should be able to get rid of swapping and the second array all together by applying the transformation at a random pixel locations over and over again.
I stumbled upon something like this years ago; simply filling the screen with random colored pixels and then averaging it with it's neighbors. You can get a really interesting effect by using the random point update if you set the random coordinates up so they affect part of the screen more than other parts. If you have a 200x200 display try x&y locations given by two random values of 0 to 100 added together so that the center of the display is more likely to update than the edges. The image will evolve more in the center than the edges.
i think maybe the function of swap is not necessary,we just need one line of "prev=grid;"to replace that function.
Instead of swapping 'grid' and 'next', why not just copy 'next' to 'grid', leaving 'next' alone? We're going to be overwriting 'next' so who cares what's there?
yeah, that would be fine too. there was a time where saving the memory mattered but here it doesn't really.
It's not about the memory, but rather about the time. Copying next to grid will take some time t, but swapping them requires time 3*t. Considering that there aren't many other things the program does, this single handedly makes it run twice as slow.
Actually it doesn't.
Swapping the two arrays references takes constant time (O(1)), while the "copying next to grid" approach needs to iterate every element of the array, and thus takes O(width * height).
If you still don't believe me you're free to check yourself: jsfiddle.net/pqgmvsw7/2/
Yeah, but he doesn't swap the references, he copies A into some temporary array, then B into the A, and then the temporary into B.
I don't know what you're looking at, but the function he writes in the video (17:26) only swaps references. It doesn't create additional arrays, it doesn't loop over any array.
Remember that in JS arrays are objects, and in JS variables which refer to objects only contain a reference to the object itself: assignments will simply point the variable to an object, not create a copy of it.
If you want an actual copy you need to use some specific method (Arrays have splice), create it manually, or resort to something like jQuery.extend. Remember that if the object you're trying to copy contains references to other objects you might want to do a deep copy.
30:55 using sublime text, ignoring the multiple carets feature completely...
Its ctrl + d (for pc)
* sigh *
thank you!
Ha! Yea, i was itching the same thing all the time... hahaha... great tutorial though!
I didn't know this was a thing, thanks for pointing this out! :)
Hi Daniel whath is not have a project over ecuation of arrhenius kinects of food. Thank.
wat
Come again? I don’t understand what you were trying to say.
The most complicated cellular automata I've seen yet
Maybe one day you can code a 2d heat diffusion simulation based on given initial temperatures
I was trying to do this one in processing, but the way arrays are used is so different.. I can replace the function with void, I can replace var with int or float but these arrays are just messing me up!
it could be feed and flush rate
27:14 oow Dan Ghost!
Dan's hair gets messed up towards the end of this one - a true sign its a challenge. Therefore worth the extra time needed to finish!
amazing insight 😂👍
If the laplace function that's accessing one of an objects attributes in an array - how can you get one function to do both without needing a 3 dimensional array? (x, y, a/b)
Wouldn't you need a condition check for which attribute to use, A or B, and branch in the code to two different blocks of code inside the laplace function?
Without some slow object reflection, I don't know of any way in JavaScript to say you want the "second" attribute in an object.
In C# we could use reflection to enable the function to have a string parameter of the name of the attribute in the passed in function that you want to calculate on - but that's slow.
In javascript you can access property "a" of an object x using the syntax x.a OR x["a"]. "a" can be the name of any property in the object, so you could pass in the property name in the arguments of your function. I'm not sure about speed, but I'd assume it's close to the x.a
mr. sims is a god. he should have a temple.
Couldnt you use an object for this? You'd only need one grid of those objects, and you can write functions to calculate the new A and B separate to setting it
i did this in pure java, and i got it to work with 720*480 px with multiple treads working on it
great job
Thank you! I have been hitting my head against a wall on that page, no one explains what the heck a Laplacian 2D function is in regards to this usage. What you showed was dead simple, compared to the essays on calculus I find when looking for how it works (eg: "The Laplace operator is a second order differential operator in the n-dimensional Euclidean space, defined as the divergence (∇·) of the gradient (∇f). "... oh boy). I'm curious how what I've been finding about Laplacian functions relates to the convolution you've shown here.
Thanks for your vids!
I think that the thing you have too look for is the numerical or discrete version of the Laplace operator and its application on digital images.
You're funny, Shiffman. Haha
;)
hah, thanks!
Привет, это сново я.
Яхочу пожелать тебе удачи!! 👍👍
How can I increase the speed, while preserving the process?
I've tried scaling the equation by DeltaT but the entire process breaks down...
remember that the first part on the equation for the new a and b is not dependent on time so a1 = a0 + (part2 x dt). In his equations since he doesn't have a delta t it is 1.0 so you would need to make it larger to speed it up.
@@WolfRose11 Thanks for the reply. I didn't expect to get one this long after. I did end up figuring it out eventually though. I also realized that increasing dt too much would ultimately lead to such numerical instabilities anyway. So to increase the speed substantially I rewrote it in a fragment shader to run on the GPU. I still had to figure out lots of bugs though lol.
@@particlecat3142would you share the code? 😉
how would you have made this an interactive process?
very interesting. I'm curious to see what happens if you change var k and var feed over time. So maybe the feed decreases over time and the kill increases over time.
Shame I can't code to my life.
interesting idea, thanks!
I need help understanding the laplacian in the equation. Please help.
How is the convolution applied here?
Does the convolution move around the grid,
or is it only used once on nine neighbor grids?
It's applied for every pixel, so yes, it does move around the grid.
@@seanloughran6714 thank you, how does the convolution move around the grid?
So it's a very fancy version of Conway's game of life. Cool.
how many number of times will it iterate?
Other than the thumbnail... there is never any time where we get to see the finished program after it has finished the diffusion.
Do you have any idea how badly I wanted to move the screen around in this video just to see what was going on once you got it working?
I may have pulled some hair out.
With ES6 (the javascript 2015 standard), you can initialize a 2d array with var array = Array(width).fill(0).map(_=>Array(height).fill(value)), it's not recommended to do this in production code though, but I thought I mention it.
And to copy an array by reference, you can do var array2 = yourArray.slice()
thanks for the tips!
Is it possible to get this for processing? tried to translate it from js to java but don't get al the steps.
You can find it here! thecodingtrain.com/CodingChallenges/013-reactiondiffusion-p5.html
@@TheCodingTrain Hahaha found this question again after 4 years. Thanks a lot for the link
I think you cut the part of the video where you redid the colors in black and white and added a variable called c. You should've multiplied by 256 inside the floor function, not 255.
Thanks for pointing that out, oops! The full archive is here: ua-cam.com/video/FYRINCEDVKI/v-deo.html
You made a blindman see. Thanks, a 10^6 times!
i would love to learn how to replicate the Reaction -Diffusion algorithms that have to been used to model the development of hands.
yeah
anything with 3 elementals and their absorbers
Why not use simply "grid = next" instead of "temp = grid; grid = next; next = temp;" ? Do we need a copy of a useless grid on (being soon overwritten) next?
Because if you don't save reference to the original 'grid' in 'temp', you'll lose it when doing "grid = next"
"next = temp" doesn't copy the useless grid, it moves the 'next' pointer/reference to temp's(the original grid)
dammit, and I just had a great productive day at work too, left thinking I was super smart :'(
BTW: there are no 2-dimensional arrays in JavaScript. Because it implies that both a[x][y] and a[x+1][y], where x < a.length - 1, are array elements. It is not true. JavaScript array of arrays are always jagged arrays, not multi-dimensional arrays.
Thanks for the clarification!
7:00 How do you make a 4 dimensional array?
you do whatever needed to avoid it
those suggestions are the first thing i disable in any editor.
The flickering is your subliminal Patreon ad ;-)
how could we inmplement this in matlab
Your hand at 3:52 :p
Cant you simply display grid, then calculate next, then transfer next to grid while clearing next everytime, saves a swapping function, even better, if next is a product of the current grid which it is then you dont even need to clear next, simply override the values of next and only display the current grid, not next, unless im missing something lol
Ok so that didnt work like i thought lol
the link for the code no longer works , please update it ?
fixed!
See my Reaction Diffusion simulation: ua-cam.com/video/OhnRv3YkUkM/v-deo.html
x=8;y=16;
x=[y,(y=x)][0] //Swap x & y without temp
I know this is old but I'm confused why the math works. It should be a+( Da etc...) Meaning the math was a plus all the others calculated. But you didn't bracket the internal stuff.
So I'm not the only one who spotted this.
Yeah, I'm even later to this video than you but every instance of him having the formulas on screen and saying he got it right made me want to poke him back in time...
Looks like you forgot some essential parentheses in the formula^^
Ernst Florens Friedrich Chladni figures: ua-cam.com/video/M6F5T6rKga8/v-deo.html
Dude you need a big switch to move between camera views, not a button.
Totally agree.
pastebin.com/PHQV4FCi
I missed a 0 in constants FEED and K. It never worked. Took me an hour to find the bug!
oh dear, sorry!
processing code unavailable! :(
See: github.com/CodingTrain/website/tree/master/CodingChallenges/CC_013_ReactionDiffusion
I give up. I've spent 2 hours pouring over this video and my code and cant find a difference. Sadly the Source is gone now, so i can't compare on a text level. Moving on to the next.
Apologies I redesigned the website, just fixed the description with the new link. Here is is as well: thecodingtrain.com/CodingChallenges/013-reactiondiffusion-p5.html.
For anyone who wants to create Reaction Diffusion in After Effects without coding, here is a tool ua-cam.com/video/3lijW1EkrN0/v-deo.html
Why does this application take so long to generate on processing? I feel like there must be a way to make this run faster, can anyone help me out? if its not possible, WHY does it run so slow?
The "parents" can be picked multiple times so I just create elements until the population is full.
Maybe try reversing the x and y loops(putting the y outside the x)? That way pixels would be accessed in order, making use of the cache
I don't quite understand, can you explain it in detail ?
@@user-ci8rn8gb5q when you run it on a large window size, it takes up to 10min for the pattern to fill up the whole screen
@@ClimbnotWar Oh yes, I was going to ask Daniel that question, and I have the same doubts as you. By the way, I've seen people do it with shaders, and it speeds things up:
stackoverflow.com/questions/40350644/high-resolution-processing-output/40353261#40353261
miss the clock and you right spotting video time
I don’t get what the purpose of this is