// https://codepen.io/kekkorider/full/yRvbzm

​

const vertexShaderTxt = `

  attribute vec3 aPosition;

  attribute vec2 aTexCoord;

​

  uniform mat4 uModelViewMatrix;

  uniform mat4 uProjectionMatrix;

​

  varying vec2 vTexCoord;

​

  void main() {

    vTexCoord = aTexCoord;

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

  }

`

​

const fragmentShaderTxT = `

  precision mediump float;

  uniform vec2 u_mouse;

  varying vec2 vTexCoord;

​

  void main() {

    vec2 uv = vTexCoord;

​

    vec3 color1 = vec3(u_mouse.x, 0.7, 0.6);

    vec3 color2 = vec3(u_mouse.y, 0.1, 0.8);

    float mask = uv.x;

​

    vec3 gradient = mix(color1, color2, mask);

    gl_FragColor = vec4(gradient, 1.0);

  }

`

​

let myShader

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL)

  setAttributes("antialias", true)

  myShader = createShader(vertexShaderTxt, fragmentShaderTxT)

}

​

function draw() {

  background(100)

  noStroke()

  const cursX = map(mouseX, 0, width, 0, 1)

  const cursY = map(mouseY, 0, height, 0, 1)

  shader(myShader)

  myShader.setUniform("u_mouse", [cursX, cursY])

  push()

  translate(-200, 0, 0)

  rotateX(frameCount * 0.015)

  rotateY(frameCount * 0.01)

  box(100, 100, 100)

  pop()

  push()

  translate(200, 0, 0)

  rotateX(frameCount * 0.01)

  rotateY(frameCount * 0.015)

  box(100, 100, 100)

  pop()

}