const CANVAS_SIZE = 400;

​

// Vertex Shader

const vertShaderSrc = `

// vertex.vert

attribute vec3 aPosition;

uniform mat4 uModelViewMatrix;

uniform mat4 uProjectionMatrix;

​

void main() {

  // Transform the vertex position from local space to clip space

  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

}`;

​

// Fragment Shader

const fragShaderSrc = `

precision mediump float;

void main() {

  // Gradient from bottom (red) to top (blue)

  vec2 position = gl_FragCoord.xy / vec2(${CANVAS_SIZE}.0, ${CANVAS_SIZE}.0);

  vec3 color = mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), position.y);

  gl_FragColor = vec4(color, 1.0);

}`;

​

let sketch = function(p) {

  let shader;

  let x, y, dx, dy;

​

  p.preload = function() {

    shader = p.createShader(vertShaderSrc, fragShaderSrc);

  };

​

  p.setup = function() {

    p.createCanvas(CANVAS_SIZE, CANVAS_SIZE, p.WEBGL);

    p._renderer.GL.disable(p._renderer.GL.DEPTH_TEST); 

    p.background(0)

    p.noStroke();

    x = p.width / 2;

    y = p.height / 2;

    dx = 2;

    dy = 3;

  };

​

  p.draw = function() {

    // Using the shader

    p.shader(shader);

    p.rect(-p.width/2, -p.height/2, p.width, p.height)

    p.shader(shader);

    p.resetShader();

//     p._renderer.GL.disable(p._renderer.GL.DEPTH_TEST); // Disable depth test

    // Drawing the bouncing ball using p5.js

    p.translate(-p.width / 2, -p.height / 2); // Adjust coordinate system

    p.ellipse(x, y, 50, 50);

    x += dx;

    y += dy;

    if (x < 0 || x > p.width) dx *= -1;

    if (y < 0 || y > p.height) dy *= -1;

  };

};

​

new p5(sketch);

​