# Use shader with another createCanvas

**URL:** <https://discourse.processing.org/t/use-shader-with-another-createcanvas/39280>\
**Category:** Coding Questions\
**Created:** [October 15, 2022, 9:10am UTC](https://discourse.processing.org/t/use-shader-with-another-createcanvas/39280 "2022-10-15T09:10:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [October 15, 2022, 9:10am UTC](https://discourse.processing.org/t/use-shader-with-another-createcanvas/39280/1 "2022-10-15T09:10:17Z")

</div>

hey, I’m doing a sketch with shaders inside a p5. I have 3 `p5.Renderer object` using `createGraphics`.  
the first one is the “screen” that I’m painting on, and the others are ‘currentFrame’ & ‘lastFrame’ which I’m trying to compute the shader on the ‘currentFrame’ and then copy it to ‘lastFrame’ and again and again (and like that I wish to make an animation).  
for “copying” the ‘currentFrame’ to ‘lastFrame’ I use `lastFrame.image(currentFrame, 0, 0);`.  
the problem is that I suspect that its not working fine, because here is a really basic code that whats it is supposed to do is to `lastFrame.image(screen,0, 0);` and then in the ‘frag shader’ to draw the `lastTexture`. but it just keeps the screen black. maybe there is a better way to do that?  
here is the code:  
`sketck:`

```auto
let shade;
let lastFrame;
let currentFrame;
let screen;

function preload(){
  shade = loadShader("shader.vert", "shader.frag");
}

function setup() {
  createCanvas(600, 600,WEBGL);
  currentFrame = createGraphics(width, height,WEBGL);
  lastFrame = createGraphics(width, height);
  screen = createGraphics(width, height);
  
  screen.background(0);
  screen.fill(255,0,0);
  screen.noStroke();
  screen.ellipse(width/2,height/2,200)
  screen.stroke(255);
  // noLoop();

}
function draw() {
  push();
  translate(-width/2, -height/2);
  if(mouseIsPressed) {
    screen.line(pmouseX,pmouseY,mouseX,mouseY);
  }
  lastFrame.image(screen,0, 0);

  currentFrame.shader(shade);
  
  shade.setUniform("currentTexture", screen);
  shade.setUniform("lastFrame", lastFrame);
  shade.setUniform("normalRes", [1.0/width, 1.0/height]);

  currentFrame.rect(0,0,width,height);
  // Copy current frame to last frame
  lastFrame.image(currentFrame, 0, 0);
   // Output to screen
  image(currentFrame, 0, 0);
  pop();
}

```

`Frag.shader: `

```auto
#ifdef GL_ES
precision highp float;
#endif

varying vec2 vTexCoord;
uniform vec2 normalRes;
uniform sampler2D currentTexture;
uniform sampler2D lastTexture;

void main() {
    vec2 uv = vTexCoord;

    uv.y = 1.0 - uv.y;
    vec4 currentColor = texture2D(currentTexture, uv);
    vec4 lastColor = texture2D(lastTexture, uv);
    float a = currentColor.r;

    vec4 color;

    float x = uv.x;
    float y = uv.y;
    color = vec4(texture2D(lastTexture, uv));

  
    gl_FragColor = color;

}

```

`Vert.shader: `

```auto
attribute vec3 aPosition;
attribute vec2 aTexCoord;

varying vec2 vTexCoord;

void main() {
  // copy the texcoords
  vTexCoord = aTexCoord;

  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

  gl_Position = positionVec4;
}

```

here is the sketch in the p5 editor:

> **[p5.js Web Editor](https://editor.p5js.org/omribergman05/sketches/1KOO-dZMu)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

any help would be great 🙂 thank you

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [October 15, 2022, 10:16am UTC](https://discourse.processing.org/t/use-shader-with-another-createcanvas/39280/2 "2022-10-15T10:16:55Z")

</div>

I believe this is called double buffering. You have a back buffer and a front buffer and switch them every frame.

The thread below should have the answers you’re looking for 🙂

> [@Backbuffer in p5js](https://discourse.processing.org/t/backbuffer-in-p5js/29769):
>
> I found a shader on the GLSL Sandbox website that I want to use. (It might be their e#375.15.) This shader wants to use WebGL’s backbuffer feature. It seems from a Google search that p5js does not allow reference to backbuffer. The p5js example that i did find uses creategrahics (same dimensions as the canvas) and ‘backbuffer.image(canvas, width \* -0.5, height \* -0.5, width, height)’ to populate it in the sketch’s draw function, so my question is ‘Is this (using createGrahics) really what I hav…

---

<div class="post-metadata">

**Author:** ![Omri](https://avatars.discourse-cdn.com/v4/letter/o/bc79bd/32.png) [@Omri](https://discourse.processing.org/u/Omri)\
**Post date:** [October 15, 2022, 4:27pm UTC](https://discourse.processing.org/t/use-shader-with-another-createcanvas/39280/3 "2022-10-15T16:27:15Z")

</div>

thanks for the answer @sableraph !  
I didn’t know that backBuffer was the name of it 🙂  
apparently, I made a mistake in my code and wrote:

```auto
  shade.setUniform("lastFrame", lastFrame);

```

instade of:

```auto
  shade.setUniform("lastTexture", lastFrame);

```

🥲 🥲 🥲