# Ping-pong buffer in p5js shader

**URL:** <https://discourse.processing.org/t/ping-pong-buffer-in-p5js-shader/33367>\
**Category:** Coding Questions\
**Created:** [November 6, 2021, 8:41pm UTC](https://discourse.processing.org/t/ping-pong-buffer-in-p5js-shader/33367 "2021-11-06T20:41:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![altitudinem](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@altitudinem](https://discourse.processing.org/u/altitudinem)\
**Post date:** [November 6, 2021, 8:41pm UTC](https://discourse.processing.org/t/ping-pong-buffer-in-p5js-shader/33367/1 "2021-11-06T20:41:24Z")

</div>

Hello everyone,

I need help to figure out how to use multiple buffers in shader. (within p5js)

First, this is the code that I’ve wrote so far.  
[https://editor.p5js.org/exusquam/sketches/ELEBXQ174](https://editor.p5js.org/exusquam/sketches/ELEBXQ174)

Below is the same code,  
\<sketch.js\>

```auto
let shaderGraphics;
let sh;
let dataShader;
let buf01, buf02;

function preload(){
    sh = loadShader('shader.vert', 'shader.frag');
    dataShader = loadShader('shader.vert','data.frag');
}

function setup(){
    pixelDensity(1);
    createCanvas(windowWidth, windowHeight, WEBGL);
    shaderGraphics = createGraphics(windowWidth, windowHeight, WEBGL);
    shaderGraphics.shader(sh);

    buf01 = createGraphics(windowWidth, windowHeight, WEBGL);
    buf02 = createGraphics(windowWidth, windowHeight, WEBGL);
    buf01.shader(dataShader);
    buf02.shader(dataShader);
    buf01.clear();
    buf02.background(1);
}

function draw(){
    buf01.shader(dataShader);
    dataShader.setUniform("backbuffer",buf02);
    dataShader.setUniform("resolution",[windowWidth,windowHeight]);
    buf01.clear();
    buf01.quad(-1,-1,1,-1,1,1,-1,1);
    [buf01, buf02] = [buf02, buf01];

    resetShader();

    shaderGraphics.shader(sh);
    sh.setUniform("resolution", [windowWidth,windowHeight]);
    sh.setUniform("data", buf01);
    shaderGraphics.quad(-1,-1,1,-1,1,1,-1,1);

    image(shaderGraphics,width*-0.5, height*-0.5);

}

```

\<data.frag\>

```auto
precision highp float;

varying vec2 vTexCoord;
uniform vec2 resolution;
uniform sampler2D backbuffer;

void main(){
    vec2 st=gl_FragCoord.xy/resolution;
    vec3 data=texture2D(backbuffer,vTexCoord).rgb;

    vec3 color = vec3(data.r+0.01);
    if(color.r>1.0) color = vec3(0.0);
    
    
    gl_FragColor=vec4(color,1.);
}

```

\<shader.frag\>

```auto
precision highp float;

varying vec2 vTexCoord;
uniform vec2 resolution;
uniform sampler2D data;

void main(){
  vec2 st=gl_FragCoord.xy/resolution;
  vec3 back=texture2D(data,vTexCoord).rgb;

  vec3 color = back;
  gl_FragColor=vec4(color,1.);
}

```

With this code, I was trying to use a simple ping-pong buffer that just adds up a small amount of increment of the grayscale pixel color.

I guess I know the right steps to do it but it doesn’t work as expected somehow.  
Could there be something that I’m missing?