Ordered Dithering

// Ordered Dithering © 2024-01-18 by Zaron Chen is licensed under CC BY 3.0. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/

​

import { mountFlex } from "https://cdn.jsdelivr.net/npm/p5.flex@0.2.0/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 / (WIDTH * PIXEL_DENSITY), 1 / (HEIGHT * PIXEL_DENSITY)]

  let gfx, theShader, img

​

  p.preload = () => {

    img = p.loadImage(

      "https://deckard.openprocessing.org/user324002/visual1820214/ha36fa4f28daa765149edd82274297dcb/cat.jpg"

    )

  }

​

  p.setup = () => {

    p.createCanvas(WIDTH, HEIGHT)

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

​

    p.pixelDensity(PIXEL_DENSITY)

​

    gfx = p.createGraphics(WIDTH, HEIGHT, p.WEBGL)

    theShader = p.createShader(vert, frag)

​

    p.noStroke()

    gfx.noStroke()

​

    p.containerBgColor(51)

    p.parentBgColor(51)

  }

​

  p.draw = () => {

    p.background(255)

    gfx.background(0)

​

    gfx.shader(theShader)

    theShader.setUniform("tex0", img)

    theShader.setUniform("canvasSize", CANVAS_SIZE)

    theShader.setUniform("texelSize", TEXEL_SIZE)

    theShader.setUniform("mouse", [p.mouseX / WIDTH, p.mouseY / HEIGHT])

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

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

​

    p.image(gfx, 0, 0)

  }

})

​