Reaction diffusion with shaders on WEBGL – Blancer.com Tutorials and projects

I’m writing a reaction diffusion simulation with p5js based on a video and this tutorial. The code so far is this:

var vertSrc = `
#ifdef GL_ES
precision mediump float;
#endif

attribute vec3 aPosition;
attribute vec2 aTexCoord;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

varying vec2 vTexCoord;

void main() {
    vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
    gl_Position = uProjectionMatrix * viewModelPosition;

    vTexCoord = aTexCoord;
}
`;

var fragSrc = `
#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D uTexture;
uniform vec2 uTexSize;

uniform float uDiffuRateA;
uniform float uDiffuRateB;
uniform float uFeedRate;
uniform float uKillRate;

varying vec2 vTexCoord;

vec2 laplacian(vec2 coord) {
    vec2 sum = vec2(0.0);

    mat3 kernel = mat3(
        0.05, 0.20, 0.05,
        0.20, -1.0, 0.20,
        0.05, 0.20, 0.05
    );

    for (int i = -1; i <= 1; i++) {
        for (int j = -1; j <= 1; j++) {
            vec2 offset = vec2(float(i), float(j)) / uTexSize;
            sum += texture2D(uTexture, coord + offset).rg * kernel[i+1][j+1];
        }
    }

    return sum;
}

void main() {
    vec4 color = texture2D(uTexture, vTexCoord);
    float A = color.r;
    float B = color.g;

    vec2 laplacianAB = laplacian(vTexCoord);

    float reaction = A * B * B;
    float feed = uFeedRate * (1.0 - A);
    float kill = (uKillRate + uFeedRate) * B;

    float dA = A + (uDiffuRateA * laplacianAB.r) - reaction + feed;
    float dB = B + (uDiffuRateB * laplacianAB.g) + reaction - kill;

    dA = clamp(dA, 0.0, 1.0);
    dB = clamp(dB, 0.0, 1.0);

    gl_FragColor = vec4(dA, dB, 0.0, 1.0);
}
`

var default_shader;
var cur_texture;
var buffer;

function preload() {
    default_shader = createShader(vertSrc, fragSrc);
}

function setup() {
    createCanvas(window.innerWidth, window.innerHeight, WEBGL);

    cur_texture = createFramebuffer({ channels: RGB, depth: false, textureFiltering: LINEAR });
    buffer = createFramebuffer({ channels: RGB, depth: false, textureFiltering: LINEAR });
    cur_texture.begin();
        background("#f00");
        fill("#0f0");
        circle(0, 0, 100);
    cur_texture.end();

    shader(default_shader);
    default_shader.setUniform("uTexSize", [cur_texture.width, cur_texture.height]);
    default_shader.setUniform("uDiffuRateA", 1.0);
    default_shader.setUniform("uDiffuRateB", 0.5);
    default_shader.setUniform("uFeedRate", 0.055);
    default_shader.setUniform("uKillRate", 0.062);

    noStroke();
}

function draw() {
    buffer.begin();
        background(0);
        default_shader.setUniform("uTexture", cur_texture);
        plane(width, height);
    buffer.end();

    let temp = cur_texture;
    cur_texture = buffer;
    buffer = temp;

    default_shader.setUniform("uTexture", cur_texture);
    plane(width, height);
}

html, body {
    margin: 0;
    padding: 0;
}

canvas {
    display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
  </head>
</html>

Insted of interesting patterns I get a green ring. The result is similar to this other question, but I don’t think p5js has a RGBA32F format for the buffers.

Changing the parameters does produce different effects but none similar to what I was expecting. For example, setting uDiffuRateA to 2 eventually fills the screen with green.