Shader Template [ WEBGL Canvas ]

import { mountFlex } from "https://cdn.jsdelivr.net/npm/p5.flex/src/p5.flex.min.mjs"

import { vert, frag } from "./shader.js"

​

mountFlex(p5)

​

new p5((p) => {

  const [WIDTH, HEIGHT] = [600, 600]

  const PIXEL_DENSITY = 1

  const CANVAS_SIZE = [WIDTH, HEIGHT]

  const TEXEL_SIZE = [

    1 / (p.width * PIXEL_DENSITY),

    1 / (p.height * PIXEL_DENSITY),

  ]

​

  let cnv, gfx, theShader

  p.setup = () => {

    cnv = p.createCanvas(WIDTH, HEIGHT, p.WEBGL)

    p.flex({ container: { padding: "20px" } })

    p.pixelDensity(PIXEL_DENSITY)

​

    gfx = p.createGraphics(p.width, p.height, p.WEBGL)

    theShader = p.createShader(vert, frag)

​

    p.noStroke()

    gfx.noStroke()

​

    p.imageMode(p.CENTER) // if canvas is in WEBGL mode

  }

​

  p.draw = () => {

    p.background(255)

    gfx.background(0)

​

    // draw square follow mouse

    p.push()

    p.translate(-p.width / 2, -p.height / 2) // if canvas is in WEBGL mode

    p.translate(p.mouseX, p.mouseY)

    p.rectMode(p.CENTER)

    p.rotate(p.frameCount * 0.05)

    p.fill("#FF0000")

    p.square(0, 0, 150)

    p.pop()

​

    gfx.shader(theShader)

    theShader.setUniform("tex0", cnv)

    theShader.setUniform("canvasSize", CANVAS_SIZE)

    theShader.setUniform("texelSize", TEXEL_SIZE)

    theShader.setUniform("mouse", [p.mouseX / p.width, p.mouseY / p.height])

    theShader.setUniform("time", p.frameCount)

    gfx.quad(-1, 1, 1, 1, 1, -1, -1, -1)

​

    p.image(gfx, 0, 0)

  }

})

​