Reaction-Diffusion example with custom differential equations

[mcrimaldi]

I am trying to test the Reaction-Diffusion example with some custom reaction-diffusion differential equations.
Unfortunately I am a completely newbie to JavaScript (I have experience with Python and a little bit of C#) so I am seeking for help and suggestions.

The equations I want to use and test are these, where B and T are the two chemicals as in the example:

The parameter I would like to be set via GUI are the ones in this table:

Someone could help me to achieve this? I will obviously share the results.

Thankks

[amandaghassaei]

If you check out the reaction-diffusion example I posted, all the dynamics are happening in the "rxnDiffusion" GPUProgram (lines 48-112): https://github.com/amandaghassaei/gpu-io/blob/main/examples/reaction-diffusion/index.js

That GPUProgram solves the following:

where:
A = state.x
B = state.y
Da = u_diffusionA
Db = u_diffusionB
delta t = 1 (it is ignored)
feedRate (f) and removalRate (k) are functions of the x and y coordinates on the screen (but you could use constants instead)

You pass in parameters into the GPUProgram via uniforms, so you'll need to define some extra ones for your equations. The Laplace operator is the same between your equations and mine, even though the symbol is different. So you can use the same "laplacian" calculation that I have in there.

Hope that clarifies things, let me know if you have more questions. I'm really interested to see what this looks like!

[mcrimaldi]

Thank for the answer, I tried to rewrite the equations in a similar way as the example and I will try to code, somehow, this new set:

I'll let you know if I can figure out.
In the meanwhile, every tip and suggestion are welcome

[amandaghassaei]

if you take a stab at editing that GPUProgram code and run into trouble, I can help debug. Really interested to see what these looks like.

Since you're not as familiar with js, you might also want to check out the demo.html page:
https://github.com/amandaghassaei/gpu-io/blob/main/examples/demo/index.html
This is a minimal example that shows how to get set up with a canvas and a simpler GPUProgram that blurs the current pixels. This is what it looks like:
https://apps.amandaghassaei.com/gpu-io/examples/demo/

[mcrimaldi]

Ok, I think I am almost there. I spent a lot of time trying to understand everything, Let's see if I am doing it right.

First of all, I've noticed that my equations above have errors (k parameter is missing) so the equations should be like this ones, with A and B instead of B and T for better reading:

Now, in index.js I've changed some constants, uniforms, the main equation in rxnDiffusion and GUI parameters like so:

	const PARAMS = {
		gRate: 0.5,
		bMax: 1.0,
		dRate: 0.05,
		sensT: 0.15,
		diffusionB: 0.05,
		toxicC: 0.5,
		kdecayT: 0.1,
		renderLayer: 'Biomass B',,
	};

const rxnDiffusion = new GPUProgram(composer, {
		name: 'rxnDiffusion',
		fragmentShader: `
		in vec2 v_uv;

		uniform sampler2D u_state;
		uniform vec2 u_pxSize;
		uniform float u_gRate;
		uniform float u_diffusionB;
		uniform float u_bMax;
		uniform float u_dRate;
		uniform float u_sensT;
		uniform float u_toxicC;
		uniform float u_kdecayT;

		out vec2 out_state;

		void main() {
			// Calculate the laplacian of u_state.
			vec2 state = texture(u_state, v_uv).xy;
			vec2 n = texture(u_state, v_uv + vec2(u_pxSize.x, 0)).xy;
			vec2 s = texture(u_state, v_uv + vec2(-u_pxSize.x, 0)).xy;
			vec2 e = texture(u_state, v_uv + vec2(0, u_pxSize.y)).xy;
			vec2 w = texture(u_state, v_uv + vec2(0, -u_pxSize.y)).xy;
			vec2 laplacian = (n + s + e + w) - 4.0 * state;

			float reaction = state.x * state.y;
			out_state = clamp(state + vec2(
				-u_kdecayT * state.x + ((u_toxicC * u_dRate * state.y) - (u_toxicC * u_sensT * reaction)),
				u_diffusionB + ((u_diffusionB * laplacian.y * state.y) - u_gRate * state.y * (1 - (state.y/u_bMax)) - (state.y * u_dRate) - u_sensT * reaction)
			), 0.0, 1.0);
		}
	`,
		uniforms: [
			{ // Index of state GPULayer in "input" array.
				name: 'u_state',
				value: 0, // We don't even really need to set this uniform, bc all uniforms default to zero.
				type: INT,
			},
			{
				name: 'u_pxSize',
				value: [SIM_SCALE / canvas.width, SIM_SCALE / canvas.height],
				type: FLOAT,
			},
			{
				name: 'u_diffusionB',
				value: PARAMS.diffusionB,
				type: FLOAT,
			},
			{
				name: 'u_gRate',
				value: PARAMS.gRate,
				type: FLOAT,
			},
			{
				name: 'u_bMax',
				value: PARAMS.bMax,
				type: FLOAT,
			},
			{
				name: 'u_dRate',
				value: PARAMS.dRate,
				type: FLOAT,
			},
			{
				name: 'u_sensT',
				value: [PARAMS.sensT],
				type: FLOAT,
			},
			{
				name: 'u_kdecayT',
				value: [PARAMS.kdecayT],
				type: FLOAT,
			},
			{
				name: 'u_toxicC',
				value: PARAMS.toxicC,
				type: FLOAT,
			},

		]
	});

and finally the GUI:

// Init simple GUI.
	const ui = [];
	const diffusion = pane.addFolder({
		expanded: false,
 		title: 'Diffusion Rates',
	});
	diffusion.addInput(PARAMS, 'diffusionB', { min: 0.00, max: 0.22, step: 0.01, label: 'Diffusion B' }).on('change', () => {
		rxnDiffusion.setUniform('u_diffusionB', PARAMS.diffusionB);
	});
	const range = pane.addFolder({
		expanded: false,
 		title: 'Parameter Ranges',
	});

	range.addInput(PARAMS, 'dRate', {
		min: 0,
		max: 1.0,
		step: 0.01,
		label: 'Death Rate B',
	}).on('change', () => {
		rxnDiffusion.setUniform('u_dRate', [PARAMS.dRate]);
	});

		range.addInput(PARAMS, 'sensT', {
		min: 0,
		max: 1.0,
		step: 0.01,
		label: 'Sensitivity T',
	}).on('change', () => {
		rxnDiffusion.setUniform('u_sensT', [PARAMS.sensT]);
	});

	range.addInput(PARAMS, 'toxicC', {
		min: 0,
		max: 1.0,
		step: 0.1,
		label: 'Toxic Proportion',
	}).on('change', () => {
		rxnDiffusion.setUniform('u_toxicC', [PARAMS.toxicC]);
	});

	range.addInput(PARAMS, 'kdecayT', {
		min: 0.05,
		max: 0.2,
		step: 0.01,
		label: 'Decay of T',
	}).on('change', () => {
		rxnDiffusion.setUniform('u_kdecayT', [PARAMS.kdecayT]);
	});

	range.addInput(PARAMS, 'gRate', {
		min: 0.0,
		max: 1,
		step: 0.01,
		label: 'Growth Rate of B',
	}).on('change', () => {
		rxnDiffusion.setUniform('u_gRate', [PARAMS.gRate]);
	});

The HTML page starts but I can see only a white canvas. The GUI works, I can change every parameter set but apparently with no effect.

I think the problem is in the main equations in rxnDiffusion but I don't understand what's wrong.

[amandaghassaei]

open the browser's console, do you see an error?

[mcrimaldi]

Yes, these errors:

[amandaghassaei]

you need to change the 1 to 1.0 in the shader code, otherwise it is treated as an int.

[mcrimaldi]

Yes, thank you, I've changed the value from an int to float.
Now the page shows a black canvas with this console error:

PS sorry for the dumb questions and thank you so much for your help!

[amandaghassaei]

hmm, yeah debugging shader code can be a bit tricky. First check that you're actually rendering something to the screen by adding the line out_state = vec2(0.5, 0.5); to the very end of your reaction diffusion code. That should render out a medium grey color to the screen. If that works, then you should simplify your equations or change your parameters until you can get it to draw something to the screen (it's possible the equations are just returning zero). Also check that you are initializing the system with some non-zero values.

[mcrimaldi]

Yes, it returns a gray screen so I will double check my equation, parameters and everything else. I'll be back with the results (I hope) or with some other question.

[amandaghassaei]

ok good. yeah you can try using the touch interaction to add some non-zero values to the screen and then see if that does anything. In my examples the state is initialized with random values in the onResize function, but depending on the dynamics of the system and the parameters it may be zeroing things out immediately.