import * as THREE from 'three'; const PAPER_TEX = 'tex_QuKKub4XsyWc'; const SND_BRUSH = 'sfx_uc2BHv8HUOoH'; const SND_DIP = 'sfx_lnlq26JVS0WC'; const SND_WASH = 'sfx_vVmIN2eA4uJ0'; const PALETTE = ['#2a4b9b', '#2f86b8', '#0f6b5c', '#5c7d2a', '#f2c230', '#c98a1b', '#d1402e', '#c43a6b', '#9a4a26', '#3a4250']; const SIZES = [10, 28, 64]; const VERT = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`; const PAPER_CHUNK = ` uniform sampler2D uPaper; uniform vec2 uPaperScale; uniform vec2 uPaperOff; float paperH(vec2 uv){ vec2 p = uv * uPaperScale + uPaperOff; float l = dot(texture2D(uPaper, p).rgb, vec3(0.299, 0.587, 0.114)); float lb = dot(texture2D(uPaper, p, 5.0).rgb, vec3(0.299, 0.587, 0.114)); return clamp(0.5 + (l - lb) * 4.0, 0.0, 1.0); }`; const TRANSFER_CHUNK = ` uniform float uGran; vec3 transferAmt(vec4 w, vec3 dry, float h){ float a = w.a; float g = mix(1.0, 0.25 + 1.5 * (1.0 - h), uGran); float rate = (0.0025 + 0.08 * smoothstep(0.12, 0.0, a)) * g; rate = a < 0.004 ? 1.0 : clamp(rate, 0.0, 1.0); vec3 lift = dry * 0.0012 * smoothstep(0.2, 0.7, a); return w.rgb * rate - lift; }`; const FLOW_FRAG = ` ${PAPER_CHUNK} uniform sampler2D uWet; uniform vec2 uTexel; uniform vec2 uSimSize; uniform vec2 uA; uniform vec2 uB; uniform float uR; uniform float uBrush; uniform float uWaterAmt; uniform vec3 uK; uniform float uLoad; uniform float uFlow; uniform float uEvap; varying vec2 vUv; void flux(vec4 c, float hc, vec2 off, inout float da, inout vec3 dp){ vec2 uv2 = vUv + off; vec4 n = texture2D(uWet, uv2); float hn = paperH(uv2); float Hc = c.a + 0.035 * hc; float Hn = n.a + 0.035 * hn; float f = 0.2 * uFlow * (Hn - Hc); bool inflow = f > 0.0; float donor = inflow ? n.a : c.a; float recv = inflow ? c.a : n.a; float hr = inflow ? hc : hn; float gate = recv > 0.02 ? step(0.012, donor) : step(0.5 + 0.35 * hr, donor) * 0.35; f *= gate; f = clamp(f, -c.a * 0.24, n.a * 0.24); vec3 conc = inflow ? n.rgb / max(n.a, 1e-3) : c.rgb / max(c.a, 1e-3); da += f; dp += conc * f; if (c.a > 0.012 && n.a > 0.012) { dp += 0.04 * (n.rgb / n.a - c.rgb / c.a) * min(c.a, n.a); } } void main(){ vec4 c = texture2D(uWet, vUv); float hc = paperH(vUv); float da = 0.0; vec3 dp = vec3(0.0); flux(c, hc, vec2(uTexel.x, 0.0), da, dp); flux(c, hc, vec2(-uTexel.x, 0.0), da, dp); flux(c, hc, vec2(0.0, uTexel.y), da, dp); flux(c, hc, vec2(0.0, -uTexel.y), da, dp); c.a += da; c.rgb += dp; if (uBrush > 0.5) { vec2 px = vUv * uSimSize; vec2 ab = uB - uA; float t = clamp(dot(px - uA, ab) / max(dot(ab, ab), 1e-4), 0.0, 1.0); float d = length(px - (uA + ab * t)); float r = uR * (0.9 + 0.2 * hc); float fall = smoothstep(r, r * 0.45, d); c.a += max(uWaterAmt - c.a, 0.0) * fall * 0.6; c.rgb += uK * uLoad * fall * 0.07 * (0.7 + 0.6 * (1.0 - hc)); } float ev = uEvap * (0.0007 + 0.0035 * smoothstep(0.25, 0.0, c.a)); c.a = max(c.a - ev, 0.0); c = clamp(c, 0.0, 8.0); gl_FragColor = c; }`; const DRY_FRAG = ` ${PAPER_CHUNK} ${TRANSFER_CHUNK} uniform sampler2D uWetT; uniform sampler2D uDryOld; varying vec2 vUv; void main(){ vec4 w = texture2D(uWetT, vUv); vec4 d = texture2D(uDryOld, vUv); vec3 T = transferAmt(w, d.rgb, paperH(vUv)); gl_FragColor = vec4(max(d.rgb + T, 0.0), 1.0); }`; const WET_FRAG = ` ${PAPER_CHUNK} ${TRANSFER_CHUNK} uniform sampler2D uWetT; uniform sampler2D uDryOld; varying vec2 vUv; void main(){ vec4 w = texture2D(uWetT, vUv); vec4 d = texture2D(uDryOld, vUv); vec3 T = transferAmt(w, d.rgb, paperH(vUv)); gl_FragColor = vec4(max(w.rgb - T, 0.0), w.a); }`; const COPY_FRAG = ` uniform sampler2D uSrc; uniform vec2 uRatio; varying vec2 vUv; void main(){ vec2 uv = (vUv - 0.5) * uRatio + 0.5; if (any(lessThan(uv, vec2(0.0))) || any(greaterThan(uv, vec2(1.0)))) { gl_FragColor = vec4(0.0); return; } gl_FragColor = texture2D(uSrc, uv); }`; const DISPLAY_FRAG = ` ${PAPER_CHUNK} uniform sampler2D uWet; uniform sampler2D uDry; uniform vec2 uTexel; uniform vec2 uCss; uniform float uPR; uniform vec3 uPaperTint; uniform vec2 uCursor; uniform float uCursorR; uniform float uCursorA; uniform float uHud; uniform vec4 uPanel; uniform vec2 uItems[16]; uniform float uItemR; uniform vec3 uSwK[11]; uniform float uSel; uniform float uSizeSel; uniform float uFlash; uniform vec4 uView; uniform float uEncode; varying vec2 vUv; float sdRound(vec2 p, vec2 b, float r){ vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; } float seg(vec2 p, vec2 a, vec2 b){ vec2 pa = p - a, ba = b - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - ba * h); } void main(){ vec2 puv = vUv * uView.xy + uView.zw; vec4 w = texture2D(uWet, puv); vec4 d = texture2D(uDry, puv); float h = paperH(puv); vec3 base = uPaperTint * (0.91 + 0.16 * h); vec3 K = d.rgb + w.rgb * 0.9; vec3 col = base * exp(-K * (0.88 + 0.24 * (1.0 - h))); float wet = smoothstep(0.0, 0.25, w.a); col *= 1.0 - 0.07 * wet; float gx = texture2D(uWet, puv + vec2(uTexel.x, 0.0)).a - texture2D(uWet, puv - vec2(uTexel.x, 0.0)).a; float gy = texture2D(uWet, puv + vec2(0.0, uTexel.y)).a - texture2D(uWet, puv - vec2(0.0, uTexel.y)).a; vec2 g = vec2(gx, gy); vec3 nrm = normalize(vec3(-g * 30.0, 1.0)); float spec = pow(clamp(dot(nrm, normalize(vec3(-0.5, 0.6, 1.0))), 0.0, 1.0), 30.0); col += vec3(1.0, 0.98, 0.95) * (0.22 * spec + 0.04 * clamp(length(g) * 6.0, 0.0, 1.0)) * wet; if (uHud > 0.5) { col *= 1.0 - 0.1 * pow(length(vUv - 0.5) * 1.3, 2.5); vec2 fp = vec2(gl_FragCoord.x, uCss.y * uPR - gl_FragCoord.y) / uPR; float cd = length(fp - uCursor); float ring = (1.0 - smoothstep(0.5, 1.5, abs(cd - uCursorR))) * uCursorA; col = mix(col, vec3(0.15, 0.15, 0.18), ring * 0.45); vec2 pc = fp - uPanel.xy; float pr = min(22.0, uPanel.w); float sh = 1.0 - smoothstep(-12.0, 24.0, sdRound(pc - vec2(0.0, 7.0), uPanel.zw, pr)); col *= 1.0 - 0.16 * sh; float pd = sdRound(pc, uPanel.zw, pr); float pm = 1.0 - smoothstep(-0.8, 0.8, pd); col = mix(col, vec3(0.985, 0.978, 0.962) * (0.975 + 0.03 * h), pm * 0.95); col = mix(col, vec3(0.78, 0.75, 0.71), (1.0 - smoothstep(0.0, 1.2, abs(pd))) * 0.45); if (pd < 30.0) { float r = uItemR; for (int i = 0; i < 11; i++) { vec2 q = fp - uItems[i]; float dd = length(q); if (dd > r + 9.0) continue; float rim = 1.0 - smoothstep(r + 1.5, r + 2.6, dd); col = mix(col, vec3(0.92, 0.91, 0.89), rim); float inner = 1.0 - smoothstep(r - 0.8, r + 0.2, dd); float amt = 0.8 + 0.35 * smoothstep(r, 0.0, dd) + 0.3 * (h - 0.5); vec3 pan = uPaperTint * exp(-uSwK[i] * amt); if (i == 10) pan = mix(vec3(0.84, 0.91, 0.96), vec3(0.97, 0.99, 1.0), smoothstep(r, 0.0, dd + r * 0.25)); pan += 0.3 * (1.0 - smoothstep(0.0, r * 0.35, length(q + vec2(r * 0.33, r * 0.38)))); col = mix(col, pan, inner); col *= 1.0 - 0.16 * inner * smoothstep(r * 0.65, r, dd); float sel = 1.0 - step(0.5, abs(float(i) - uSel)); col = mix(col, vec3(0.16, 0.16, 0.2), (1.0 - smoothstep(0.7, 1.7, abs(dd - (r + 5.0)))) * sel); } for (int i = 0; i < 3; i++) { vec2 q = fp - uItems[11 + i]; float dd = length(q); float rr = r * (0.2 + 0.27 * float(i)); col = mix(col, vec3(0.2, 0.21, 0.24), (1.0 - smoothstep(rr - 1.0, rr + 0.5, dd)) * 0.85); col = mix(col, vec3(0.6, 0.58, 0.56), (1.0 - smoothstep(0.5, 1.4, abs(dd - r))) * 0.4); float sel = 1.0 - step(0.5, abs(float(i) - uSizeSel)); col = mix(col, vec3(0.16, 0.16, 0.2), (1.0 - smoothstep(0.7, 1.7, abs(dd - (r + 5.0)))) * sel); } float s = r * 0.42; vec2 q = fp - uItems[14]; float dx = min(seg(q, vec2(-s), vec2(s)), seg(q, vec2(-s, s), vec2(s, -s))); col = mix(col, vec3(0.22, 0.22, 0.26), 1.0 - smoothstep(1.0, 2.2, dx)); col = mix(col, vec3(0.6, 0.58, 0.56), (1.0 - smoothstep(0.5, 1.4, abs(length(q) - r))) * 0.4); q = fp - uItems[15]; float da = seg(q, vec2(0.0, -s), vec2(0.0, s * 0.55)); da = min(da, seg(q, vec2(-s * 0.55, 0.0), vec2(0.0, s * 0.55))); da = min(da, seg(q, vec2(s * 0.55, 0.0), vec2(0.0, s * 0.55))); da = min(da, seg(q, vec2(-s, s * 1.05), vec2(s, s * 1.05))); col = mix(col, vec3(0.22, 0.22, 0.26), 1.0 - smoothstep(1.0, 2.2, da)); col = mix(col, vec3(0.6, 0.58, 0.56), (1.0 - smoothstep(0.5, 1.4, abs(length(q) - r))) * 0.4); } } col = mix(col, vec3(1.0), uFlash * 0.35); gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0); #include if (uEncode > 0.5) { vec3 c = clamp(gl_FragColor.rgb, 0.0, 1.0); gl_FragColor.rgb = mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c)); } }`; export default function sketch(ctx) { const { renderer, gui, size, canvas } = ctx; const sfx = ctx.sfx; const params = { color: PALETTE[0], brushSize: 28, water: 0.75, pigment: 0.65, paper: '#f6f1e6', dryRate: 1.0, flow: 1.0, granulation: 0.6, sound: 0.6, hideTray: false, clear: () => { clearAll(); playOne(SND_WASH, 0.5); }, save: () => savePNG(), }; canvas.style.touchAction = 'none'; // paper const paperTex = ctx.textures.get(PAPER_TEX, { repeat: 1 }); paperTex.wrapS = paperTex.wrapT = THREE.RepeatWrapping; const uPaper = { value: paperTex }; const uPaperScale = { value: new THREE.Vector2(1, 1) }; const uPaperOff = { value: new THREE.Vector2(0, 0) }; const uGran = { value: params.granulation }; // sim scene const ortho = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const quadScene = new THREE.Scene(); const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2)); quad.frustumCulled = false; quadScene.add(quad); const mk = (frag, uniforms) => new THREE.ShaderMaterial({ vertexShader: VERT, fragmentShader: frag, uniforms, depthTest: false, depthWrite: false }); const flowMat = mk(FLOW_FRAG, { uPaper, uPaperScale, uPaperOff, uWet: { value: null }, uTexel: { value: new THREE.Vector2() }, uSimSize: { value: new THREE.Vector2() }, uA: { value: new THREE.Vector2() }, uB: { value: new THREE.Vector2() }, uR: { value: 10 }, uBrush: { value: 0 }, uWaterAmt: { value: 0.7 }, uK: { value: new THREE.Vector3() }, uLoad: { value: 0.5 }, uFlow: { value: 1 }, uEvap: { value: 1 }, }); const dryMat = mk(DRY_FRAG, { uPaper, uPaperScale, uPaperOff, uGran, uWetT: { value: null }, uDryOld: { value: null } }); const wetMat = mk(WET_FRAG, { uPaper, uPaperScale, uPaperOff, uGran, uWetT: { value: null }, uDryOld: { value: null } }); const copyMat = mk(COPY_FRAG, { uSrc: { value: null }, uRatio: { value: new THREE.Vector2(1, 1) } }); const items = Array.from({ length: 16 }, () => new THREE.Vector2(-999, -999)); const swK = Array.from({ length: 11 }, () => new THREE.Vector3()); const displayMat = mk(DISPLAY_FRAG, { uPaper, uPaperScale, uPaperOff, uView: { value: new THREE.Vector4(1, 1, 0, 0) }, uEncode: { value: 0 }, uWet: { value: null }, uDry: { value: null }, uTexel: { value: new THREE.Vector2() }, uCss: { value: new THREE.Vector2() }, uPR: { value: 1 }, uPaperTint: { value: new THREE.Color(params.paper) }, uCursor: { value: new THREE.Vector2(-999, -999) }, uCursorR: { value: 10 }, uCursorA: { value: 0 }, uHud: { value: 1 }, uPanel: { value: new THREE.Vector4() }, uItems: { value: items }, uItemR: { value: 18 }, uSwK: { value: swK }, uSel: { value: 0 }, uSizeSel: { value: 1 }, uFlash: { value: 0 }, }); // absorbance from colour const tmpC = new THREE.Color(); function absorb(hex, out) { tmpC.set(hex); out.set(-Math.log(Math.max(tmpC.r, 0.015)), -Math.log(Math.max(tmpC.g, 0.015)), -Math.log(Math.max(tmpC.b, 0.015))); return out; } PALETTE.forEach((c, i) => absorb(c, swK[i])); swK[10].set(0, 0, 0); const brushK = absorb(params.color, new THREE.Vector3()); let sel = 0; let waterOnly = false; // targets let simW = 0, simH = 0, simScale = 1, cssW = 1, cssH = 1; // the paper only ever grows, so nothing painted is lost when the frame shrinks let paperW = 0, paperH = 0, grainX = 0, grainY = 0; let wetA, wetTmp, dryA, dryB; const makeRT = (w, h) => { const t = new THREE.WebGLRenderTarget(w, h, { type: THREE.HalfFloatType, format: THREE.RGBAFormat, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, depthBuffer: false }); t.texture.generateMipmaps = false; return t; }; function pass(mat, target) { quad.material = mat; renderer.setRenderTarget(target); renderer.render(quadScene, ortho); } function clearAll() { const prev = renderer.getClearAlpha(); renderer.setClearColor(0x000000, 0); for (const t of [wetA, wetTmp, dryA, dryB]) { renderer.setRenderTarget(t); renderer.clear(); } renderer.setRenderTarget(null); renderer.setClearColor(0x000000, prev); } function buildTargets() { const w = Math.max(2, size.width), h = Math.max(2, size.height); cssW = w; cssH = h; if (!wetA) simScale = Math.min(size.pixelRatio || 1, 1.25, 2400 / Math.max(w, h)); const maxCss = 3200 / simScale; const pw = Math.min(maxCss, Math.max(paperW, w)), ph = Math.min(maxCss, Math.max(paperH, h)); const nw = Math.max(2, Math.round(pw * simScale)), nh = Math.max(2, Math.round(ph * simScale)); if (wetA && nw === simW && nh === simH) return; const old = wetA ? { wet: wetA, dry: dryA, w: paperW, h: paperH, rest: [wetTmp, dryB] } : null; paperW = pw; paperH = ph; simW = nw; simH = nh; wetA = makeRT(simW, simH); wetTmp = makeRT(simW, simH); dryA = makeRT(simW, simH); dryB = makeRT(simW, simH); clearAll(); if (old) { copyMat.uniforms.uRatio.value.set(paperW / old.w, paperH / old.h); grainX += (paperW - old.w) / 2; grainY += (paperH - old.h) / 2; copyMat.uniforms.uSrc.value = old.wet.texture; pass(copyMat, wetA); copyMat.uniforms.uSrc.value = old.dry.texture; pass(copyMat, dryA); renderer.setRenderTarget(null); old.wet.dispose(); old.dry.dispose(); old.rest.forEach((t) => t.dispose()); } flowMat.uniforms.uTexel.value.set(1 / simW, 1 / simH); flowMat.uniforms.uSimSize.value.set(simW, simH); displayMat.uniforms.uTexel.value.set(1 / simW, 1 / simH); } // layout of the palette tray let itemR = 18, panelRect = { x: 0, y: 0, hw: 0, hh: 0 }; function layout() { buildTargets(); uPaperScale.value.set(paperW / 620, paperH / 620); uPaperOff.value.set(-grainX / 620, -grainY / 620); displayMat.uniforms.uView.value.set(cssW / paperW, cssH / paperH, (paperW - cssW) / 2 / paperW, (paperH - cssH) / 2 / paperH); const narrow = cssW < 720; const margin = 18; let sp; if (!narrow) { sp = Math.min(58, (cssW - 40) / 17.2); const units = []; let u = 0; for (let i = 0; i < 16; i++) { if (i === 11 || i === 14) u += 0.6; units.push(u); u += 1; } const span = u - 1; const y = cssH - margin - sp * 0.5; for (let i = 0; i < 16; i++) items[i].set(cssW / 2 + (units[i] - span / 2) * sp, y); } else { sp = Math.min(58, (cssW - 32) / 8.4); for (let i = 0; i < 16; i++) { const row = Math.floor(i / 8), col = i % 8; items[i].set(cssW / 2 + (col - 3.5) * sp, cssH - margin - sp * 0.5 - (1 - row) * sp); } } itemR = sp * 0.34; let x0 = 1e9, x1 = -1e9, y0 = 1e9, y1 = -1e9; for (const p of items) { x0 = Math.min(x0, p.x); x1 = Math.max(x1, p.x); y0 = Math.min(y0, p.y); y1 = Math.max(y1, p.y); } const pad = sp * 0.5; panelRect = { x: (x0 + x1) / 2, y: (y0 + y1) / 2, hw: (x1 - x0) / 2 + pad, hh: (y1 - y0) / 2 + pad }; displayMat.uniforms.uPanel.value.set(panelRect.x, panelRect.y, panelRect.hw, panelRect.hh); displayMat.uniforms.uItemR.value = itemR; displayMat.uniforms.uCss.value.set(cssW, cssH); displayMat.uniforms.uPR.value = renderer.getPixelRatio(); } layout(); // sound let brushVoice = null, brushVol = 0; if (sfx) { sfx.volume = params.sound; brushVoice = sfx.loop(SND_BRUSH, { volume: 0 }); } let lastOne = 0; function playOne(id, vol) { if (!sfx) return; const now = performance.now(); if (now - lastOne < 120) return; lastOne = now; sfx.play(id, { volume: vol * (0.85 + Math.random() * 0.3), rate: 0.9 + Math.random() * 0.25 }); } // gui const fb = gui.addFolder('Brush'); const colorCtrl = fb.addColor(params, 'color').name('Colour').onChange((v) => { waterOnly = false; sel = PALETTE.indexOf(String(v).toLowerCase()); absorb(v, brushK); }); const sizeCtrl = fb.add(params, 'brushSize', 4, 140, 1).name('Size'); fb.add(params, 'water', 0.05, 1.2).name('Water'); fb.add(params, 'pigment', 0.05, 1.5).name('Pigment'); const fpp = gui.addFolder('Paper'); fpp.addColor(params, 'paper').name('Paper'); fpp.add(params, 'dryRate', 0.2, 3).name('Drying'); fpp.add(params, 'flow', 0.1, 1.2).name('Bleed'); fpp.add(params, 'granulation', 0, 1).name('Granulation'); gui.add(params, 'sound', 0, 1).name('Sound').onChange((v) => { if (sfx) sfx.volume = v; }); gui.add(params, 'clear').name('Clear paper'); gui.add(params, 'hideTray').name('Hide tray'); gui.add(params, 'save').name('Save image'); // export: renders the whole sheet (no tray) offscreen and saves it as a PNG file let flash = 0; let cleanUntil = 0; let saving = false; function savePNG() { const vy = ctx.vybe || globalThis.vybe; if (!vy || !vy.save || saving || !wetA) return; saving = true; const du = displayMat.uniforms; const W = simW, H = simH; const rt = new THREE.WebGLRenderTarget(W, H, { type: THREE.UnsignedByteType, format: THREE.RGBAFormat, depthBuffer: false }); const prevView = du.uView.value.clone(); const prevHud = du.uHud.value, prevFlash = du.uFlash.value; let ok = false; try { du.uWet.value = wetA.texture; du.uDry.value = dryA.texture; du.uView.value.set(1, 1, 0, 0); du.uHud.value = 0; du.uFlash.value = 0; du.uEncode.value = 1; quad.material = displayMat; renderer.setRenderTarget(rt); renderer.render(quadScene, ortho); const px = new Uint8Array(W * H * 4); renderer.readRenderTargetPixels(rt, 0, 0, W, H, px); const out = document.createElement('canvas'); out.width = W; out.height = H; const c2 = out.getContext('2d'); const img = c2.createImageData(W, H); const row = W * 4; for (let y = 0; y < H; y++) img.data.set(px.subarray((H - 1 - y) * row, (H - y) * row), y * row); for (let i = 3; i < img.data.length; i += 4) img.data[i] = 255; c2.putImageData(img, 0, 0); const d = new Date(); const stamp = `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}-${String(d.getHours()).padStart(2, '0')}${String(d.getMinutes()).padStart(2, '0')}${String(d.getSeconds()).padStart(2, '0')}`; vy.save(out, `watercolour-${stamp}.png`).catch(() => {}).finally(() => { saving = false; }); ok = true; } catch (err) { console.warn('save failed', err); } finally { du.uView.value.copy(prevView); du.uHud.value = prevHud; du.uFlash.value = prevFlash; du.uEncode.value = 0; renderer.setRenderTarget(null); rt.dispose(); if (!ok) saving = false; } flash = 1; playOne(SND_DIP, 0.35); } window.addEventListener('keydown', onKey); function onKey(e) { if ((e.key === 's' || e.key === 'S') && !e.metaKey && !e.ctrlKey) { e.preventDefault(); savePNG(); } } function action(i) { if (i < 10) { params.color = PALETTE[i]; sel = i; waterOnly = false; absorb(params.color, brushK); colorCtrl.updateDisplay(); playOne(SND_DIP, 0.6); } else if (i === 10) { sel = 10; waterOnly = true; playOne(SND_DIP, 0.7); } else if (i < 14) { params.brushSize = SIZES[i - 11]; sizeCtrl.updateDisplay(); } else if (i === 14) { params.clear(); } else { savePNG(); } } function hitHud(x, y) { for (let i = 0; i < 16; i++) { if (Math.hypot(x - items[i].x, y - items[i].y) < itemR * 1.4) { action(i); return true; } } return Math.abs(x - panelRect.x) < panelRect.hw && Math.abs(y - panelRect.y) < panelRect.hh; } // pointer const brush = { x: 0, y: 0, px: 0, py: 0, pressure: 1, strokeLen: 0, speed: 0 }; const cursor = { x: -999, y: -999, inside: false, touch: false }; let painting = false, activeId = null; const local = (e) => { const r = canvas.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; canvas.addEventListener('pointerdown', (e) => { const [x, y] = local(e); cursor.touch = e.pointerType === 'touch'; cursor.x = x; cursor.y = y; cursor.inside = true; if (!params.hideTray && performance.now() >= cleanUntil && hitHud(x, y)) return; if (activeId !== null) return; activeId = e.pointerId; try { canvas.setPointerCapture(e.pointerId); } catch (_) {} painting = true; intro.active = false; brush.x = brush.px = x; brush.y = brush.py = y; brush.strokeLen = 0; brush.speed = 0; brush.pressure = e.pointerType === 'pen' ? Math.max(0.15, e.pressure || 0.5) * 1.4 : 1; }); canvas.addEventListener('pointermove', (e) => { const [x, y] = local(e); cursor.x = x; cursor.y = y; cursor.inside = true; cursor.touch = e.pointerType === 'touch'; if (e.pointerId === activeId) { brush.x = x; brush.y = y; if (e.pointerType === 'pen') brush.pressure = Math.max(0.15, e.pressure || 0.5) * 1.4; } }); const end = (e) => { if (e.pointerId === activeId) { painting = false; activeId = null; } if (e.pointerType === 'touch') cursor.inside = false; }; canvas.addEventListener('pointerup', end); canvas.addEventListener('pointercancel', end); canvas.addEventListener('pointerleave', () => { cursor.inside = false; }); // opening gesture so the paper is alive at first sight const intro = { active: true, prev: null, idx: -1, strokes: [ { t0: 0.2, t1: 1.7, a: [0.16, 0.34], b: [0.84, 0.42], bend: -0.09, col: 0, r: 0.065, w: 0.95, load: 0.75 }, { t0: 1.9, t1: 2.7, a: [0.32, 0.58], b: [0.52, 0.5], bend: 0.07, col: 7, r: 0.045, w: 0.9, load: 0.9 }, { t0: 2.9, t1: 3.8, a: [0.55, 0.46], b: [0.76, 0.62], bend: 0.05, col: 5, r: 0.04, w: 0.9, load: 0.9 }, ], }; const introK = new THREE.Vector3(); const STEPS = 2; const fu = flowMat.uniforms; function simulate(seg) { fu.uFlow.value = params.flow; fu.uEvap.value = params.dryRate; uGran.value = params.granulation; for (let s = 0; s < STEPS; s++) { fu.uWet.value = wetA.texture; if (seg && s === 0) { fu.uBrush.value = 1; const ox = (paperW - cssW) / 2, oy = (paperH - cssH) / 2; fu.uA.value.set((seg.ax + ox) * simScale, (cssH - seg.ay + oy) * simScale); fu.uB.value.set((seg.bx + ox) * simScale, (cssH - seg.by + oy) * simScale); fu.uR.value = Math.max(1, seg.r * simScale); fu.uWaterAmt.value = seg.water; fu.uLoad.value = seg.load; fu.uK.value.copy(seg.K); } else fu.uBrush.value = 0; pass(flowMat, wetTmp); dryMat.uniforms.uWetT.value = wetTmp.texture; dryMat.uniforms.uDryOld.value = dryA.texture; pass(dryMat, dryB); wetMat.uniforms.uWetT.value = wetTmp.texture; wetMat.uniforms.uDryOld.value = dryA.texture; pass(wetMat, wetA); const t = dryA; dryA = dryB; dryB = t; } renderer.setRenderTarget(null); } const segObj = { ax: 0, ay: 0, bx: 0, by: 0, r: 10, water: 0.7, load: 0.5, K: brushK }; return { update({ time }) { let seg = null; let speed = 0; if (painting) { const dx = brush.x - brush.px, dy = brush.y - brush.py; const dist = Math.hypot(dx, dy); brush.strokeLen += dist; brush.speed += (dist - brush.speed) * 0.3; speed = brush.speed; const charge = 0.3 + 0.7 * Math.exp(-brush.strokeLen / 2400); segObj.ax = brush.px; segObj.ay = brush.py; segObj.bx = brush.x; segObj.by = brush.y; segObj.r = params.brushSize * brush.pressure * (1 - 0.25 * Math.min(1, speed / 40)); segObj.water = params.water * (0.55 + 0.45 * charge); segObj.load = waterOnly ? 0 : params.pigment * charge; segObj.K = brushK; brush.px = brush.x; brush.py = brush.y; seg = segObj; } else if (intro.active) { const md = Math.min(cssW, cssH); let found = -1; intro.strokes.forEach((s, i) => { if (time >= s.t0 && time <= s.t1) found = i; }); if (found >= 0) { const s = intro.strokes[found]; const u = (time - s.t0) / (s.t1 - s.t0); const e = u * u * (3 - 2 * u); const ax = s.a[0] * cssW, ay = s.a[1] * cssH, bx = s.b[0] * cssW, by = s.b[1] * cssH; const len = Math.hypot(bx - ax, by - ay) || 1; const nx = -(by - ay) / len, ny = (bx - ax) / len; const bend = Math.sin(e * Math.PI) * s.bend * md; const x = ax + (bx - ax) * e + nx * bend, y = ay + (by - ay) * e + ny * bend; if (intro.idx !== found || !intro.prev) intro.prev = [x, y]; intro.idx = found; segObj.ax = intro.prev[0]; segObj.ay = intro.prev[1]; segObj.bx = x; segObj.by = y; segObj.r = s.r * md * (0.8 + 0.3 * Math.sin(u * Math.PI)); segObj.water = s.w; segObj.load = s.load * (1 - 0.5 * u); segObj.K = introK.copy(swK[s.col]); intro.prev = [x, y]; seg = segObj; } else if (time > 4) intro.active = false; } simulate(seg); // brush sound follows the stroke const target = painting ? 0.06 + 0.55 * Math.min(1, speed / 25) : 0; brushVol += (target - brushVol) * 0.15; if (brushVoice) { brushVoice.setVolume(brushVol); brushVoice.setRate(0.9 + Math.min(0.3, speed * 0.008)); } // display uniforms const du = displayMat.uniforms; du.uWet.value = wetA.texture; du.uDry.value = dryA.texture; du.uPaperTint.value.set(params.paper); du.uCursor.value.set(cursor.x, cursor.y); du.uCursorR.value = params.brushSize * (painting ? brush.pressure : 1); const ca = cursor.inside && !cursor.touch ? 1 : 0; du.uCursorA.value += (ca - du.uCursorA.value) * 0.25; du.uSel.value = sel; const si = SIZES.findIndex((v) => Math.abs(v - params.brushSize) < 1); du.uSizeSel.value = si; du.uHud.value = (params.hideTray || performance.now() < cleanUntil) ? 0 : 1; flash *= 0.9; du.uFlash.value = flash; }, render() { quad.material = displayMat; renderer.setRenderTarget(null); renderer.render(quadScene, ortho); }, resize() { layout(); }, dispose() { [wetA, wetTmp, dryA, dryB].forEach((t) => t && t.dispose()); if (brushVoice) brushVoice.stop(); window.removeEventListener('keydown', onKey); }, }; }