import { mountFlex } from "https://cdn.jsdelivr.net/npm/p5.flex@0.1.1/src/p5.flex.min.mjs"
import { vert, frag } from "./shader.js"
let [resW, resH] = [1024, 576]
let [deltaX, deltaY] = [0, 0]
img0 = p.loadImage(get_image_url("Rain_Window_01.jpg"))
img1 = p.loadImage(get_image_url("Tunnel_01.jpg"))
img2 = p.loadImage(get_image_url("The_Dome_of_Light_02.jpg"))
if (p.windowWidth < p.windowHeight) [resW, resH] = [resH, resW]
p.createCanvas(resW, resH, p.WEBGL)
p.flex({ container: { padding: "20px" }, canvas: { fit: p.SCALE_DOWN } })
Buffer = p.createFramebuffer({ format: p.FLOAT })
theShader = p.createShader(vert, frag)
deltaX += p.map(p.mouseX, 0, p.width, 0.005, -0.005)
deltaY += p.map(p.mouseY, 0, p.height, 0.005, -0.005)
theShader.setUniform("iResolution", [p.width, p.height])
theShader.setUniform("iPixelDensity", p.pixelDensity())
theShader.setUniform("iCanvas", Canvas)
theShader.setUniform("iImage0", img0)
theShader.setUniform("iImage1", img1)
theShader.setUniform("iImage2", img2)
theShader.setUniform("iMouse", [p.mouseX, p.mouseY])
theShader.setUniform("iTime", p.frameCount)
theShader.setUniform("iDelta", [deltaX, deltaY])
p.rect(0, 0, p.width, p.height)
const Border = (color, weight) => {
p.strokeWeight(weight * 2)
p.rect(0, 0, p.width, p.height)
const ClickStop = () => {
function get_image_url(filename) {
let root = "https://raw.githubusercontent.com/ZRNOF/.ink/main/Package/"