Coding Challenge #13: Reaction Diffusion Algorithm in p5.js
Why Stack Overflow recommends it
Stack Overflow users cite it as the source tutorial when they port, speed up, or debug their own reaction-diffusion implementations in Processing, Java, JavaFX and Python.
Recommended by 0 people across 0 different months, 2016 to 2017.
What it is
Daniel Shiffman of The Coding Train builds a Gray-Scott reaction diffusion simulation live in JavaScript with p5.js. He explains the model, convolution with a Laplacian kernel, 2D arrays, double buffering of grids, and pixel colouring, ending with a working animated sketch.
What people said
Cites tady159 · 2016-05 · Stack Overflow · on “Reaction-Diffusion algorithm on Processing + Multithreading”
I have made an implementation of the Reaction-Diffusion algorithm on Processing 3.1.1, following a video tutorial [this video] . I have made some adaptations on my code, like implementing it on a torus space, instead of a bounded box, like the video. However, I ran into this annoying issue, that the code runs really slow, proportional to the canvas size (larger, slower). With that, I tried optmizing the code, according to my (limited) knowledge. The main thing I did was to reduce the number of loops running. Even then, my code still ran quite slow. Since I have noticed that with a canvas of 50 x 50 in size, the algorithm ran at a good speed, I tried making it multithreaded, in such a way that the
Cites George Profenza · 2016-11 · Stack Overflow · on “High-Resolution Processing Output”
In addition to Kevin's answer, you can use JVisualVM [LINK] to see where most of the CPU time is spent on. After sampling and profiling the CPU at different times surprisingly most of the time was computing the RGB values: [LINK] [LINK] [LINK] It's best to start with the functions taking most of the CPU when optimizing. Here is a version of the sketch that uses the default 0-255 RGB range and computes the RGB value inlined (putting the A,R,G,B bytes together): import processing.pdf.*; import java.util.Arrays; float[][] z, v, a; int dim = 900; int dimScreen = dim/10; ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Cites Edv Beq · 2016-12 · Stack Overflow · on “Turing Diffusion in JavaFX”
I was trying to translate a Turing Diffusion model from JavaScript to JavaFX as seen here: CODE [LINK] VIDEO [this video] ... but my code is not behaving properly. I believe is a combination of bad logic and the way I am updating the UI . Any help would be greatly appreciated. Code compiles and runs. package application; import javafx.application.Application; import javafx.application.Platform; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.ScatterChart; import javafx.scene.chart.XYChart; import javafx.scene.control.Slider; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; p
Cites snoob dogg · 2017-11 · Stack Overflow · on “Python : Improve this Reaction-Diffusion algorithm with Numba?”
Based on the Coding Challenge #13: Reaction Diffusion Algorithm in p5.js [this video] from Daniel Shiffman, I did the following python script : import numpy as np from PIL import Image from numba import jit @jit def draw(imgA, imgB, nextImgA, nextImgB): laplace_kernel = np.array([[ .05, .2, .05], [ .2, -1, .2], [ .05, .2, .05]]) for x in range (1, w - 1): for y in range (1, h - 1): a = imgA[x,y] b = imgB[x,y] laplace_a = (imgA[x-1 : x+2, y-1 : y+2] * laplace_kernel).sum() laplace_b = (imgB[x-1 : x+2, y-1 : y+2] * laplace_kernel).sum() nextImgA[x,y] = a + (dA * laplace_a) - (a * b * b) + (feed * (1 - a)) nextImgB[x,y] = b + (dB * laplace_b) + (a * b * b) - ((k + feed) * b) nextImgA = np.clip(nextI