diff --git a/dev/index.html b/dev/index.html index 751ee6d..6c32228 100644 --- a/dev/index.html +++ b/dev/index.html @@ -18,6 +18,8 @@
+ + diff --git a/package.json b/package.json index cbc5f3e..4aa6f19 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "q5", - "version": "2.5.6", + "version": "2.6.0", "description": "A sequel to p5.js that's optimized for interactive art", "author": "quinton-ashley", "contributors": [ diff --git a/q5.js b/q5.js index 2f76167..dedeaf1 100644 --- a/q5.js +++ b/q5.js @@ -1,6 +1,6 @@ /** * q5.js - * @version 2.5 + * @version 2.6 * @author quinton-ashley, Tezumie, and LingDong- * @license LGPL-3.0 * @class Q5 @@ -3075,7 +3075,11 @@ Q5.renderers.webgpu.canvas = ($, q) => { if ($.colorMode) $.colorMode('rgb', 1); - let pass, colorsLayout; + let pass, + mainView, + colorsLayout, + colorIndex = 1, + colorStackIndex = 8; $._pipelineConfigs = []; $._pipelines = []; @@ -3085,8 +3089,11 @@ Q5.renderers.webgpu.canvas = ($, q) => { let drawStack = ($.drawStack = []); // colors used for each draw call + + let colorStack = ($.colorStack = new Float32Array(1e6)); + // prettier-ignore - let colorsStack = ($.colorsStack = [ + colorStack.set([ 0, 0, 0, 1, // black 1, 1, 1, 1 // white ]); @@ -3118,7 +3125,7 @@ Q5.renderers.webgpu.canvas = ($, q) => { entries: [ { binding: 0, - visibility: GPUShaderStage.FRAGMENT, + visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'read-only-storage', hasDynamicOffset: false @@ -3134,28 +3141,49 @@ Q5.renderers.webgpu.canvas = ($, q) => { usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }); + let createMainView = () => { + mainView = Q5.device + .createTexture({ + size: [$.canvas.width, $.canvas.height], + sampleCount: 4, + format: 'bgra8unorm', + usage: GPUTextureUsage.RENDER_ATTACHMENT + }) + .createView(); + }; + $._createCanvas = (w, h, opt) => { q.ctx = q.drawingContext = c.getContext('webgpu'); opt.format ??= navigator.gpu.getPreferredCanvasFormat(); opt.device ??= Q5.device; - // needed for blend modes but couldn't get it working + // needed for other blend modes but couldn't get it working // opt.alphaMode = 'premultiplied'; $.ctx.configure(opt); Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh])); + createMainView(); + return c; }; $._resizeCanvas = (w, h) => { $._setCanvasSize(w, h); + createMainView(); + }; + + $.pixelDensity = (v) => { + if (!v || v == $._pixelDensity) return $._pixelDensity; + $._pixelDensity = v; + $._setCanvasSize(c.w, c.h); + createMainView(); + return v; }; // current color index, used to associate a vertex with a color - let colorIndex = 1; let addColor = (r, g, b, a = 1) => { if (typeof r == 'string') r = $.color(r); else if (b == undefined) { @@ -3163,8 +3191,21 @@ Q5.renderers.webgpu.canvas = ($, q) => { a = g ?? 1; g = b = r; } - if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a); - else colorsStack.push(r, g, b, a); + if (r._q5Color) { + a = r.a; + b = r.b; + g = r.g; + r = r.r; + } + + let cs = colorStack, + i = colorStackIndex; + cs[i++] = r; + cs[i++] = g; + cs[i++] = b; + cs[i++] = a; + colorStackIndex = i; + colorIndex++; }; @@ -3451,7 +3492,8 @@ Q5.renderers.webgpu.canvas = ($, q) => { label: 'q5-webgpu', colorAttachments: [ { - view: $.ctx.getCurrentTexture().createView(), + view: mainView, + resolveTarget: $.ctx.getCurrentTexture().createView(), loadOp: 'clear', storeOp: 'store' } @@ -3468,7 +3510,6 @@ Q5.renderers.webgpu.canvas = ($, q) => { }); new Float32Array(transformBuffer.getMappedRange()).set(transformStates.flat()); - transformBuffer.unmap(); $._transformBindGroup = Q5.device.createBindGroup({ @@ -3482,14 +3523,13 @@ Q5.renderers.webgpu.canvas = ($, q) => { pass.setBindGroup(0, $._transformBindGroup); - const colorsBuffer = Q5.device.createBuffer({ - size: colorsStack.length * 4, + let colorsBuffer = Q5.device.createBuffer({ + size: colorStackIndex * 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); - new Float32Array(colorsBuffer.getMappedRange()).set(colorsStack); - + new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex)); colorsBuffer.unmap(); $._colorsBindGroup = Q5.device.createBindGroup({ @@ -3501,19 +3541,15 @@ Q5.renderers.webgpu.canvas = ($, q) => { for (let m of $._hooks.preRender) m(); - let drawVertOffset = 0; - let imageVertOffset = 0; - let textCharOffset = 0; - let curPipelineIndex = -1; - let curTextureIndex = -1; + let drawVertOffset = 0, + imageVertOffset = 0, + textCharOffset = 0, + curPipelineIndex = -1, + curTextureIndex = -1; - for (let i = 0; i < drawStack.length; i += 2) { + for (let i = 0; i < drawStack.length; i += 3) { let v = drawStack[i + 1]; - - if (drawStack[i] == -1) { - v(); - continue; - } + let o = drawStack[i + 2]; if (curPipelineIndex != drawStack[i]) { curPipelineIndex = drawStack[i]; @@ -3522,8 +3558,8 @@ Q5.renderers.webgpu.canvas = ($, q) => { if (curPipelineIndex == 0) { // v is the number of vertices - pass.draw(v, 1, drawVertOffset); - drawVertOffset += v; + pass.drawIndexed(v, 1, 0, drawVertOffset); + drawVertOffset += o; } else if (curPipelineIndex == 1) { if (curTextureIndex != v) { // v is the texture index @@ -3532,7 +3568,7 @@ Q5.renderers.webgpu.canvas = ($, q) => { pass.draw(6, 1, imageVertOffset); imageVertOffset += 6; } else if (curPipelineIndex == 2) { - pass.setBindGroup(2, $._font.bindGroup); + pass.setBindGroup(2, $._fonts[o].bindGroup); pass.setBindGroup(3, $._textBindGroup); // v is the number of characters in the text @@ -3548,12 +3584,13 @@ Q5.renderers.webgpu.canvas = ($, q) => { pass.end(); let commandBuffer = $.encoder.finish(); Q5.device.queue.submit([commandBuffer]); + q.pass = $.encoder = null; // clear the stacks for the next frame $.drawStack.length = 0; - $.colorsStack.length = 8; colorIndex = 1; + colorStackIndex = 8; rotation = 0; transformStates.length = 1; $._transformIndexStack.length = 0; @@ -3586,35 +3623,45 @@ Q5.webgpu = async function (scope, parent) { Q5.renderers.webgpu.drawing = ($, q) => { let c = $.canvas, drawStack = $.drawStack, - verticesStack = [], + vertexStack = new Float32Array(1e7), + indexStack = new Uint32Array(1e6), + vertIndex = 0, + vertCount = 0, + idxBufferIndex = 0, colorIndex; let vertexShader = Q5.device.createShaderModule({ label: 'drawingVertexShader', code: ` +struct VertexInput { + @location(0) pos: vec2f, + @location(1) colorIndex: f32, + @location(2) transformIndex: f32 +} struct VertexOutput { @builtin(position) position: vec4f, - @location(0) colorIndex: f32 -}; - + @location(0) color: vec4f +} struct Uniforms { halfWidth: f32, halfHeight: f32 -}; +} @group(0) @binding(0) var uniforms: Uniforms; -@group(0) @binding(1) var transforms: array>; +@group(0) @binding(1) var transforms: array>; + +@group(1) @binding(0) var colors : array; @vertex -fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput { - var vert = vec4f(pos, 0.0, 1.0); - vert = transforms[i32(transformIndex)] * vert; +fn vertexMain(input: VertexInput) -> VertexOutput { + var vert = vec4f(input.pos, 0.0, 1.0); + vert = transforms[i32(input.transformIndex)] * vert; vert.x /= uniforms.halfWidth; vert.y /= uniforms.halfHeight; var output: VertexOutput; output.position = vert; - output.colorIndex = colorIndex; + output.color = colors[i32(input.colorIndex)]; return output; } ` @@ -3623,12 +3670,9 @@ fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2 let fragmentShader = Q5.device.createShaderModule({ label: 'drawingFragmentShader', code: ` -@group(1) @binding(0) var colors : array; - @fragment -fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { - let index = i32(colorIndex); - return mix(colors[index], colors[index + 1], fract(colorIndex)); +fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f { + return color; } ` }); @@ -3660,74 +3704,92 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { entryPoint: 'fragmentMain', targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }] }, - primitive: { topology: 'triangle-list' } + primitive: { topology: 'triangle-list' }, + multisample: { + count: 4 + } }; $._pipelines[0] = Q5.device.createRenderPipeline($._pipelineConfigs[0]); - let shapeVertices; - - $.beginShape = () => { - shapeVertices = []; - }; - - $.vertex = (x, y) => { - if ($._matrixDirty) $._saveMatrix(); - shapeVertices.push(x, -y, $._fillIndex, $._transformIndex); - }; - - $.endShape = (close) => { - if (!$._doFill) { - shapeVertices = []; - return; - } - let v = shapeVertices; - if (v.length < 12) { - throw new Error('A shape must have at least 3 vertices.'); - } - if (close) { - // Close the shape by adding the first vertex at the end - v.push(v[0], v[1], v[2], v[3]); - } - // Convert the shape to triangles - let triangles = []; - for (let i = 4; i < v.length; i += 4) { - triangles.push( - v[0], // First vertex - v[1], - v[2], - v[3], - v[i - 4], // Previous vertex - v[i - 3], - v[i - 2], - v[i - 1], - v[i], // Current vertex - v[i + 1], - v[i + 2], - v[i + 3] - ); + const addVert = (x, y, ci, ti) => { + let v = vertexStack, + i = vertIndex; + v[i++] = x; + v[i++] = y; + v[i++] = ci; + v[i++] = ti; + vertIndex = i; + vertCount++; + }; + + const addIndex = (i1, i2, i3) => { + let is = indexStack, + ii = idxBufferIndex; + is[ii++] = i1; + is[ii++] = i2; + is[ii++] = i3; + idxBufferIndex = ii; + }; + + const addQuad = (x1, y1, x2, y2, x3, y3, x4, y4, ci, ti) => { + let v = vertexStack, + i = vertIndex; + + let i1 = vertCount++; + v[i++] = x1; + v[i++] = y1; + v[i++] = ci; + v[i++] = ti; + + let i2 = vertCount++; + v[i++] = x2; + v[i++] = y2; + v[i++] = ci; + v[i++] = ti; + + let i3 = vertCount++; + v[i++] = x3; + v[i++] = y3; + v[i++] = ci; + v[i++] = ti; + + let i4 = vertCount++; + v[i++] = x4; + v[i++] = y4; + v[i++] = ci; + v[i++] = ti; + + vertIndex = i; + + let is = indexStack, + ii = idxBufferIndex; + is[ii++] = i1; + is[ii++] = i2; + is[ii++] = i3; + is[ii++] = i1; + is[ii++] = i3; + is[ii++] = i4; + idxBufferIndex = ii; + + drawStack.push(0, 6, 4); + }; + + const addEllipse = (x, y, a, b, n, ci, ti) => { + let t = 0, + angleIncrement = $.TAU / n, + indicesStart = vertIndex / 4; + addVert(x, y, ci, ti); // Center vertex + for (let i = 0; i <= n; i++) { + let vx = x + a * Math.cos(t), + vy = y + b * Math.sin(t); + addVert(vx, vy, ci, ti); + if (i > 0) { + addIndex(indicesStart, indicesStart + i, indicesStart + i + 1); + } + t += angleIncrement; } - shapeVertices = []; - - verticesStack.push(...triangles); - drawStack.push(0, triangles.length / 4); - }; - - $.triangle = (x1, y1, x2, y2, x3, y3) => { - $.beginShape(); - $.vertex(x1, y1); - $.vertex(x2, y2); - $.vertex(x3, y3); - $.endShape(1); - }; - - $.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => { - $.beginShape(); - $.vertex(x1, y1); - $.vertex(x2, y2); - $.vertex(x3, y3); - $.vertex(x4, y4); - $.endShape(1); + drawStack.push(0, n * 3, n + 2); }; $.rectMode = (x) => ($._rectMode = x); @@ -3735,81 +3797,101 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { $.rect = (x, y, w, h) => { let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode); let ci, ti; - - if ($._doFill) { - ci = colorIndex ?? $._fillIndex; - if ($._matrixDirty) $._saveMatrix(); - ti = $._transformIndex; - // two triangles make a rectangle - // prettier-ignore - verticesStack.push( - l, t, ci, ti, - r, t, ci, ti, - l, b, ci, ti, - r, t, ci, ti, - l, b, ci, ti, - r, b, ci, ti - ); - drawStack.push(0, 6); - } + if ($._matrixDirty) $._saveMatrix(); + ti = $._transformIndex; if ($._doStroke) { ci = $._strokeIndex; + + // outer rectangle coordinates let sw = $._strokeWeight / 2; - // Outer rectangle coordinates - let to = t - sw, - bo = b + sw, + let to = t + sw, + bo = b - sw, lo = l - sw, ro = r + sw; - // Inner rectangle coordinates - let ti = t + sw, - bi = b - sw, - li = l + sw, - ri = r - sw; - - // Create vertices for the stroke as a shape - // prettier-ignore - verticesStack.push( - lo, to, ci, ti, // Top side - ro, to, ci, ti, - lo, ti, ci, ti, - lo, ti, ci, ti, - ro, to, ci, ti, - ro, ti, ci, ti, - ro, to, ci, ti, // right side - ro, bo, ci, ti, - ri, to, ci, ti, - ri, to, ci, ti, - ro, bo, ci, ti, - ri, bo, ci, ti, - ro, bo, ci, ti, // Bottom side - lo, bo, ci, ti, - ro, bi, ci, ti, - ro, bi, ci, ti, - lo, bo, ci, ti, - lo, bi, ci, ti, - lo, bo, ci, ti, // Left side - lo, to, ci, ti, - li, bo, ci, ti, - li, bo, ci, ti, - lo, to, ci, ti, - li, to, ci, ti - ); + // stroke is simply a bigger rectangle drawn first + addQuad(lo, to, ro, to, ro, bo, lo, bo, ci, ti); - drawStack.push(0, 24); + // inner rectangle coordinates + t -= sw; + b += sw; + l += sw; + r -= sw; + } + + if ($._doFill) { + ci = colorIndex ?? $._fillIndex; + + // two triangles make a rectangle + addQuad(l, t, r, t, r, b, l, b, ci, ti); } }; $.square = (x, y, s) => $.rect(x, y, s, s); + // prettier-ignore + const getArcSegments = (d) => + d < 4 ? 6 : + d < 6 ? 8 : + d < 10 ? 10 : + d < 16 ? 12 : + d < 20 ? 14 : + d < 22 ? 16 : + d < 24 ? 18 : + d < 28 ? 20 : + d < 34 ? 22 : + d < 42 ? 24 : + d < 48 ? 26 : + d < 56 ? 28 : + d < 64 ? 30 : + d < 72 ? 32 : + d < 84 ? 34 : + d < 96 ? 36 : + d < 98 ? 38 : + d < 113 ? 40 : + d < 149 ? 44 : + d < 199 ? 48 : + d < 261 ? 52 : + d < 353 ? 56 : + d < 461 ? 60 : + d < 585 ? 64 : + d < 1200 ? 70 : + d < 1800 ? 80 : + d < 2400 ? 90 : + 100; + + $.ellipseMode = (x) => ($._ellipseMode = x); + + $.ellipse = (x, y, w, h) => { + let n = getArcSegments(w == h ? w : Math.max(w, h)); + let a = Math.max(w, 1) / 2; + let b = w == h ? a : Math.max(h, 1) / 2; + let ci; + if ($._matrixDirty) $._saveMatrix(); + let ti = $._transformIndex; + if ($._doStroke) { + let sw = $._strokeWeight / 2; + addEllipse(x, y, a + sw, b + sw, n, $._strokeIndex, ti); + a -= sw; + b -= sw; + } + if ($._doFill) { + addEllipse(x, y, a, b, n, colorIndex ?? $._fillIndex, ti); + } + }; + + $.circle = (x, y, d) => $.ellipse(x, y, d, d); + $.point = (x, y) => { colorIndex = $._strokeIndex; + $._doStroke = false; let sw = $._strokeWeight; if (sw < 2) { sw = Math.round(sw); $.rect(x, y, sw, sw); } else $.ellipse(x, y, sw, sw); + $._doStroke = true; colorIndex = null; }; @@ -3817,16 +3899,93 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { colorIndex = $._strokeIndex; $.push(); - $.translate(x1, y1); + $._doStroke = false; + $.translate(x1, -y1); $.rotate($.atan2(y2 - y1, x2 - x1)); let length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); - let sw = $._strokeWeight; - $.rect(0, -sw / 2, length, sw); + let sw = $._strokeWeight, + hsw = sw / 2; + $._rectMode = 'corner'; + if (sw < 4) { + $.rect(-hsw, -hsw, length + hsw, sw); + } else { + $._ellipseMode = 'center'; + $.ellipse(0, 0, sw, sw); + $.ellipse(length, 0, sw, sw); + $.rect(0, -hsw, length, sw); + } + $.pop(); colorIndex = null; }; + let shapeVertCount; + + $.beginShape = () => { + shapeVertCount = 0; + }; + + $.vertex = (x, y) => { + if ($._matrixDirty) $._saveMatrix(); + addVert(x, -y, $._fillIndex, $._transformIndex); + shapeVertCount++; + }; + + $.endShape = (close) => { + if (shapeVertCount < 3) { + throw new Error('A shape must have at least 3 vertices.'); + } + + let firstVert = vertCount - shapeVertCount; + + if ($._doFill) { + // make a simple triangle fan, starting from the first vertex + for (let i = firstVert + 1; i < vertCount - 1; i++) { + addIndex(firstVert, i, i + 1); + } + drawStack.push(0, (shapeVertCount - 2) * 3, shapeVertCount); + } + + if ($._doStroke) { + let first = firstVert * 4, + last = vertIndex - 4; + for (let i = first; i < last; i += 4) { + let x1 = vertexStack[i], + y1 = vertexStack[i + 1], + x2 = vertexStack[i + 4], + y2 = vertexStack[i + 5]; + $.line(x1, y1, x2, y2); + } + if (close) { + let x1 = vertexStack[last], + y1 = vertexStack[last + 1], + x2 = vertexStack[first], + y2 = vertexStack[first + 1]; + $.line(x1, y1, x2, y2); + } + } + + shapeVertCount = 0; + }; + + $.triangle = (x1, y1, x2, y2, x3, y3) => { + $.beginShape(); + $.vertex(x1, y1); + $.vertex(x2, y2); + $.vertex(x3, y3); + $.endShape(); + }; + + $.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => { + $.beginShape(); + $.vertex(x1, y1); + $.vertex(x2, y2); + $.vertex(x3, y3); + $.vertex(x4, y4); + $.endShape(); + }; + $.background = (r, g, b, a) => { $.push(); $.resetMatrix(); @@ -3847,96 +4006,41 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { if (!$._fillSet) $._fillIndex = 1; }; - /** - * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28) - * This lookup table is used for better performance. - * @param {Number} d diameter of the circle - * @returns n number of segments - */ - // prettier-ignore - const getArcSegments = (d) => - d < 4 ? 6 : - d < 6 ? 8 : - d < 10 ? 10 : - d < 16 ? 12 : - d < 20 ? 14 : - d < 22 ? 16 : - d < 24 ? 18 : - d < 28 ? 20 : - d < 34 ? 22 : - d < 42 ? 24 : - d < 48 ? 26 : - d < 56 ? 28 : - d < 64 ? 30 : - d < 72 ? 32 : - d < 84 ? 34 : - d < 96 ? 36 : - d < 98 ? 38 : - d < 113 ? 40 : - d < 149 ? 44 : - d < 199 ? 48 : - d < 261 ? 52 : - d < 353 ? 56 : - d < 461 ? 60 : - d < 585 ? 64 : - d < 1200 ? 70 : - d < 1800 ? 80 : - d < 2400 ? 90 : - 100; - - $.ellipseMode = (x) => ($._ellipseMode = x); - - $.ellipse = (x, y, w, h) => { - const n = getArcSegments(w == h ? w : Math.max(w, h)); - - let a = Math.max(w, 1) / 2; - let b = w == h ? a : Math.max(h, 1) / 2; - - let t = 0; // theta - const angleIncrement = $.TAU / n; - const ci = colorIndex ?? $._fillIndex; - if ($._matrixDirty) $._saveMatrix(); - const ti = $._transformIndex; - let vx1, vy1, vx2, vy2; - for (let i = 0; i <= n; i++) { - vx1 = vx2; - vy1 = vy2; - vx2 = x + a * Math.cos(t); - vy2 = y + b * Math.sin(t); - t += angleIncrement; - - if (i == 0) continue; - - verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti); - } - - drawStack.push(0, n * 3); - }; - - $.circle = (x, y, d) => $.ellipse(x, y, d, d); - $._hooks.preRender.push(() => { $.pass.setPipeline($._pipelines[0]); - const vertexBuffer = Q5.device.createBuffer({ - size: verticesStack.length * 4, + let vertexBuffer = Q5.device.createBuffer({ + size: vertIndex * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); - new Float32Array(vertexBuffer.getMappedRange()).set(verticesStack); + new Float32Array(vertexBuffer.getMappedRange()).set(vertexStack.slice(0, vertIndex)); vertexBuffer.unmap(); $.pass.setVertexBuffer(0, vertexBuffer); + + let indexBuffer = Q5.device.createBuffer({ + size: idxBufferIndex * 4, + usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, + mappedAtCreation: true + }); + + new Uint32Array(indexBuffer.getMappedRange()).set(indexStack.slice(0, idxBufferIndex)); + indexBuffer.unmap(); + + $.pass.setIndexBuffer(indexBuffer, 'uint32'); }); $._hooks.postRender.push(() => { - verticesStack.length = 0; + vertIndex = 0; + vertCount = 0; + idxBufferIndex = 0; }); }; Q5.renderers.webgpu.image = ($, q) => { $._textureBindGroups = []; - let verticesStack = []; + let vertexStack = []; let vertexShader = Q5.device.createShaderModule({ label: 'imageVertexShader', @@ -3944,15 +4048,14 @@ Q5.renderers.webgpu.image = ($, q) => { struct VertexOutput { @builtin(position) position: vec4f, @location(0) texCoord: vec2f -}; - +} struct Uniforms { halfWidth: f32, halfHeight: f32 -}; +} @group(0) @binding(0) var uniforms: Uniforms; -@group(0) @binding(1) var transforms: array>; +@group(0) @binding(1) var transforms: array>; @vertex fn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput { @@ -4111,7 +4214,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode); // prettier-ignore - verticesStack.push( + vertexStack.push( l, t, 0, 0, ti, r, t, 1, 0, ti, l, b, 0, 1, ti, @@ -4120,7 +4223,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { r, b, 1, 1, ti ); - $.drawStack.push(1, img.textureIndex); + $.drawStack.push(1, img.textureIndex, 0); }; $._hooks.preRender.push(() => { @@ -4130,7 +4233,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { $.pass.setPipeline($._pipelines[1]); const vertexBuffer = Q5.device.createBuffer({ - size: verticesStack.length * 4, + size: vertexStack.length * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); @@ -4142,7 +4245,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { }); $._hooks.postRender.push(() => { - verticesStack.length = 0; + vertexStack.length = 0; }); }; @@ -4163,35 +4266,35 @@ const pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0)); struct VertexInput { @builtin(vertex_index) vertex : u32, - @builtin(instance_index) instance : u32, -}; + @builtin(instance_index) instance : u32 +} struct VertexOutput { @builtin(position) position : vec4f, - @location(0) texcoord : vec2f, - @location(1) colorIndex : f32 -}; + @location(0) texCoord : vec2f, + @location(1) fillColor : vec4f +} struct Char { texOffset: vec2f, texExtent: vec2f, size: vec2f, offset: vec2f, -}; +} struct Text { pos: vec2f, scale: f32, transformIndex: f32, fillIndex: f32, strokeIndex: f32 -}; +} struct Uniforms { halfWidth: f32, halfHeight: f32 -}; +} @group(0) @binding(0) var uniforms: Uniforms; -@group(0) @binding(1) var transforms: array>; +@group(0) @binding(1) var transforms: array>; -@group(1) @binding(0) var colors : array; +@group(1) @binding(0) var colors : array; @group(2) @binding(0) var fontTexture: texture_2d; @group(2) @binding(1) var fontSampler: sampler; @@ -4217,13 +4320,13 @@ fn vertexMain(input : VertexInput) -> VertexOutput { var output : VertexOutput; output.position = vert; - output.texcoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset; - output.colorIndex = text.fillIndex; + output.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset; + output.fillColor = colors[i32(text.fillIndex)]; return output; } -fn sampleMsdf(texcoord: vec2f) -> f32 { - let c = textureSample(fontTexture, fontSampler, texcoord); +fn sampleMsdf(texCoord: vec2f) -> f32 { + let c = textureSample(fontTexture, fontSampler, texCoord); return max(min(c.r, c.g), min(max(c.r, c.g), c.b)); } @@ -4233,18 +4336,17 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { // uses the default which is 4. let pxRange = 4.0; let sz = vec2f(textureDimensions(fontTexture, 0)); - let dx = sz.x*length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x))); - let dy = sz.y*length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y))); + let dx = sz.x*length(vec2f(dpdxFine(input.texCoord.x), dpdyFine(input.texCoord.x))); + let dy = sz.y*length(vec2f(dpdxFine(input.texCoord.y), dpdyFine(input.texCoord.y))); let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy); - let sigDist = sampleMsdf(input.texcoord) - 0.5; + let sigDist = sampleMsdf(input.texCoord) - 0.5; let pxDist = sigDist * toPixels; let edgeWidth = 0.5; let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist); if (alpha < 0.001) { discard; } - let fillColor = colors[i32(input.colorIndex)]; - return vec4f(fillColor.rgb, fillColor.a * alpha); + return vec4f(input.fillColor.rgb, input.fillColor.a * alpha); } ` }); @@ -4336,6 +4438,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { } } + $._fonts = []; let fonts = {}; let createFont = async (fontJsonUrl, fontName, cb) => { @@ -4422,6 +4525,8 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { $._font = new MsdfFont(fontBindGroup, atlas.common.lineHeight, chars, kernings); + $._font.index = $._fonts.length; + $._fonts.push($._font); fonts[fontName] = $._font; q._preloadCount--; @@ -4451,11 +4556,6 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { $.textFont = (fontName) => { $._font = fonts[fontName]; - - // replay the change of font in the draw stack - $.drawStack.push(-1, () => { - $._font = fonts[fontName]; - }); }; $.textSize = (size) => { $._textSize = size; @@ -4568,7 +4668,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { } } - let charsData = new Float32Array((str.length - spaces) * 4); + let charsData = []; let ta = $._textAlign, tb = $._textBaseline, @@ -4614,7 +4714,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { } $._charStack.push(charsData); - let text = new Float32Array(6); + let text = []; if ($._matrixDirty) $._saveMatrix(); @@ -4626,7 +4726,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { text[5] = $._strokeIndex; $._textStack.push(text); - $.drawStack.push(2, measurements.printedCharCount); + $.drawStack.push(2, measurements.printedCharCount, $._font.index); }; $.textWidth = (str) => { @@ -4639,11 +4739,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { if ($._doFill) { let fi = $._fillIndex * 4; - g.fill(colorsStack.slice(fi, fi + 4)); + g.fill(colorStack.slice(fi, fi + 4)); } if ($._doStroke) { let si = $._strokeIndex * 4; - g.stroke(colorsStack.slice(si, si + 4)); + g.stroke(colorStack.slice(si, si + 4)); } let img = g.createTextImage(str, w, h); @@ -4694,7 +4794,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { totalTextSize += charsData.length * 4; } - // Create a single buffer for all text data + // Create a single buffer for all char data let charBuffer = Q5.device.createBuffer({ size: totalTextSize, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, @@ -4702,12 +4802,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { }); // Copy all text data into the buffer - let textArray = new Float32Array(charBuffer.getMappedRange()); - let o = 0; - for (let arr of $._charStack) { - textArray.set(arr, o); - o += arr.length; - } + new Float32Array(charBuffer.getMappedRange()).set($._charStack.flat()); charBuffer.unmap(); // Calculate total buffer size for metadata @@ -4722,12 +4817,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { }); // Copy all metadata into the buffer - let metadataArray = new Float32Array(textBuffer.getMappedRange()); - o = 0; - for (let array of $._textStack) { - metadataArray.set(array, o); - o += array.length; - } + new Float32Array(textBuffer.getMappedRange()).set($._textStack.flat()); textBuffer.unmap(); // Create a single bind group for the text buffer and metadata buffer diff --git a/q5.min.js b/q5.min.js index 2f23a87..a53aa81 100644 --- a/q5.min.js +++ b/q5.min.js @@ -1,8 +1,8 @@ /** * q5.js - * @version 2.5 + * @version 2.6 * @author quinton-ashley, Tezumie, and LingDong- * @license LGPL-3.0 * @class Q5 */ -function Q5(e,t,r){let n,a=this;if(a._q5=!0,a._parent=t,a._renderer=r||"q2d",a._preloadCount=0,e??="global","auto"==e){if(!window.setup&&!window.draw)return;e="global"}a._scope=e,"global"==e&&(Q5._hasGlobal=a._isGlobal=!0,n=Q5._nodejs?global:window);let o=new Proxy(a,{set:(e,t,r)=>(a[t]=r,a._isGlobal&&(n[t]=r),!0)});a.canvas=a.ctx=a.drawingContext=null,a.pixels=[];let i=null;a.frameCount=0,a.deltaTime=16,a._targetFrameRate=0,a._targetFrameDuration=16.666666666666668,a._frameRate=a._fps=60,a._loop=!0,a._hooks={postCanvas:[],preRender:[],postRender:[]};let s=0;a.millis=()=>performance.now()-s,a.noCanvas=()=>{a.canvas?.remove&&a.canvas.remove(),a.canvas=0,o.ctx=o.drawingContext=0},window&&(a.windowWidth=window.innerWidth,a.windowHeight=window.innerHeight,a.deviceOrientation=window.screen?.orientation?.type),a._incrementPreload=()=>o._preloadCount++,a._decrementPreload=()=>o._preloadCount--,a._draw=e=>{let t=e||performance.now();if(a._lastFrameTime??=t-a._targetFrameDuration,a._didResize&&(a.windowResized(),a._didResize=!1),a._loop)i=d(a._draw);else if(a.frameCount&&!a._redraw)return;if(i&&a.frameCount){if(t-a._lastFrameTime{a._loop=!1,i=null},a.loop=()=>{a._loop=!0,null==i&&a._draw()},a.isLooping=()=>a._loop,a.redraw=(e=1)=>{a._redraw=!0;for(let t=0;t{a.noLoop(),a.canvas.remove()},a.frameRate=e=>(e&&(a._targetFrameRate=e,a._targetFrameDuration=1e3/e),a._frameRate),a.getTargetFrameRate=()=>a._targetFrameRate,a.getFPS=()=>a._fps,a.Element=function(e){this.elt=e},a._elements=[],a.TWO_PI=a.TAU=2*Math.PI,a.log=a.print=console.log,a.describe=()=>{};for(let e in Q5.modules)Q5.modules[e](a,o);let l=Q5.renderers[a._renderer];for(let e in l)l[e](a,o);for(let e in Q5)"_"!=e[1]&&e[1]==e[1].toUpperCase()&&(a[e]=Q5[e]);if("graphics"==e)return;"global"==e&&(Object.assign(Q5,a),delete Q5.Q5);for(let e of Q5.methods.init)e.call(a);for(let[e,t]of Object.entries(Q5.prototype))"_"!=e[0]&&"function"==typeof a[e]&&(a[e]=t.bind(a));if("global"==e){let e=Object.getOwnPropertyNames(a);for(let t of e)"_"!=t[0]&&(n[t]=a[t])}"function"==typeof e&&e(a),Q5._instanceCount++;let d=window.requestAnimationFrame||function(e){const t=a._lastFrameTime+a._targetFrameDuration;return setTimeout((()=>{e(t)}),t-performance.now())},c=n||a;a._isTouchAware=c.touchStarted||c.touchMoved||c.mouseReleased;let h=c.preload,u=["setup","draw","preload","mouseMoved","mousePressed","mouseReleased","mouseDragged","mouseClicked","keyPressed","keyReleased","keyTyped","touchStarted","touchMoved","touchEnded","windowResized"];for(let e of u)c[e]?a._isGlobal&&(a[e]=()=>{try{return c[e]()}catch(e){throw a._aiErrorAssistance&&a._aiErrorAssistance(e),e}}):a[e]=()=>{};async function p(){if(a._startDone=!0,a._preloadCount>0)return d(p);s=performance.now(),await a.setup(),a._setupDone=!0,a.frameCount||(null===a.ctx&&a.createCanvas(100,100),a.ctx&&a.resetMatrix(),d(a._draw))}(a.setup||a.draw)&&(arguments.length&&"namespace"!=e&&"webgpu"!=r||h?(a.preload(),p()):(c.preload=a.preload=()=>{a._startDone||p()},setTimeout(a.preload,32)))}Q5.renderers={},Q5.modules={},Q5._nodejs="object"==typeof process,Q5._instanceCount=0,Q5._friendlyError=(e,t)=>{throw Error(t+": "+e)},Q5._validateParameters=()=>!0,Q5.methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=(e,t)=>Q5.methods[e].push(t),Q5.prototype.registerPreloadMethod=(e,t)=>Q5.prototype[e]=t[e],Q5._nodejs?global.p5??=global.Q5=Q5:"object"==typeof window?window.p5??=window.Q5=Q5:global.window=0,"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")})),Q5.modules.canvas=(e,t)=>{e.CENTER="center",e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom",e.BASELINE="alphabetic",e.NORMAL="normal",e.ITALIC="italic",e.BOLD="bold",e.BOLDITALIC="italic bold",e.ROUND="round",e.SQUARE="butt",e.PROJECT="square",e.MITER="miter",e.BEVEL="bevel",e.CHORD=0,e.PIE=1,e.OPEN=2,e.RADIUS="radius",e.CORNER="corner",e.CORNERS="corners",e.CLOSE=1,e.LANDSCAPE="landscape",e.PORTRAIT="portrait",e.BLEND="source-over",e.REMOVE="destination-out",e.ADD="lighter",e.DARKEST="darken",e.LIGHTEST="lighten",e.DIFFERENCE="difference",e.SUBTRACT="subtract",e.EXCLUSION="exclusion",e.MULTIPLY="multiply",e.SCREEN="screen",e.REPLACE="copy",e.OVERLAY="overlay",e.HARD_LIGHT="hard-light",e.SOFT_LIGHT="soft-light",e.DODGE="color-dodge",e.BURN="color-burn",e.P2D="2d",e.WEBGL="webgl",e._OffscreenCanvas=window.OffscreenCanvas||function(){return document.createElement("canvas")},Q5._nodejs?Q5._createNodeJSCanvas&&(t.canvas=Q5._createNodeJSCanvas(100,100)):"image"!=e._scope&&"graphics"!=e._scope||(t.canvas=new e._OffscreenCanvas(100,100)),e.canvas||("object"==typeof document?(t.canvas=document.createElement("canvas"),e.canvas.id="q5Canvas"+Q5._instanceCount,e.canvas.classList.add("q5Canvas")):e.noCanvas());let r=e.canvas;if(r.width=e.width=100,r.height=e.height=100,e._pixelDensity=1,e.displayDensity=()=>window.devicePixelRatio||1,"image"!=e._scope&&(r.renderer=e._renderer,r[e._renderer]=!0,e._pixelDensity=Math.ceil(e.displayDensity())),e._adjustDisplay=()=>{r.style&&(r.style.width=r.w+"px",r.style.height=r.h+"px")},e.createCanvas=function(t,n,a){a??=arguments[3];let o=Object.assign({},Q5.canvasOptions);"object"==typeof a&&Object.assign(o,a),"image"!=e._scope&&("graphics"==e._scope?e._pixelDensity=this._pixelDensity:window.IntersectionObserver&&new IntersectionObserver((e=>{r.visible=e[0].isIntersecting})).observe(r)),e._setCanvasSize(t,n),Object.assign(r,o);let i=e._createCanvas(r.w,r.h,o);if(e._hooks)for(let t of e._hooks.postCanvas)t();return i},e.createGraphics=function(t,r,n){let a=new Q5("graphics");return n??={},n.alpha??=!0,n.colorSpace??=e.canvas.colorSpace,a.createCanvas.call(e,t,r,n),a},e._save=async(e,t,r)=>{if(t=t||"untitled","jpg"==(r=r||"png")||"png"==r||"webp"==r)if(e instanceof OffscreenCanvas){const t=await e.convertToBlob({type:"image/"+r});e=await new Promise((e=>{const r=new FileReader;r.onloadend=()=>e(r.result),r.readAsDataURL(t)}))}else e=e.toDataURL("image/"+r);else{let t="text/plain";"json"==r&&("string"!=typeof e&&(e=JSON.stringify(e)),t="text/json"),e=new Blob([e],{type:t}),e=URL.createObjectURL(e)}let n=document.createElement("a");n.href=e,n.download=t+"."+r,n.click(),URL.revokeObjectURL(n.href)},e.save=(t,r,n)=>{if((!t||"string"==typeof t&&(!r||!n&&r.length<5))&&(n=r,r=t,t=e.canvas),n)return e._save(t,r,n);r?(r=r.split("."),e._save(t,r[0],r.at(-1))):e._save(t)},e._setCanvasSize=(n,a)=>{n??=window.innerWidth,a??=window.innerHeight,r.w=n=Math.ceil(n),r.h=a=Math.ceil(a),r.hw=n/2,r.hh=a/2,r.width=Math.ceil(n*e._pixelDensity),r.height=Math.ceil(a*e._pixelDensity),e._da?e.flexibleCanvas(e._dau):(t.width=n,t.height=a),e.displayMode&&!r.displayMode?e.displayMode():e._adjustDisplay()},"image"!=e._scope){if(r&&"graphics"!=e._scope){function n(){let t=e._parent;t??=document.getElementsByTagName("main")[0],t||(t=document.createElement("main"),document.body.append(t)),r.parent(t)}r.parent=t=>{function n(){e.frameCount>1&&(e._didResize=!0,e._adjustDisplay())}r.parentElement&&r.parentElement.removeChild(r),"string"==typeof t&&(t=document.getElementById(t)),t.append(r),"function"==typeof ResizeObserver?(e._ro&&e._ro.disconnect(),e._ro=new ResizeObserver(n),e._ro.observe(t)):e.frameCount||window.addEventListener("resize",n)},document.body?n():document.addEventListener("DOMContentLoaded",n)}e.resizeCanvas=(t,n)=>{if(!e.ctx)return e.createCanvas(t,n);t==r.w&&n==r.h||e._resizeCanvas(t,n)},e.canvas.resize=e.resizeCanvas,e.canvas.save=e.saveCanvas=e.save,e.pixelDensity=t=>t&&t!=e._pixelDensity?(e._pixelDensity=t,e._setCanvasSize(r.w,r.h),t):e._pixelDensity,e.flexibleCanvas=(n=400)=>{n?(e._da=r.width/(n*e._pixelDensity),t.width=e._dau=n,t.height=r.h/r.w*n):e._da=0},e._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textSize","_textAlign","_textBaseline"],e._styles=[],e.pushStyles=()=>{let t={};for(let r of e._styleNames)t[r]=e[r];e._styles.push(t)},e.popStyles=()=>{let t=e._styles.pop();for(let r of e._styleNames)e[r]=t[r]},window&&"graphics"!=e._scope&&window.addEventListener("resize",(()=>{e._didResize=!0,t.windowWidth=window.innerWidth,t.windowHeight=window.innerHeight,t.deviceOrientation=window.screen?.orientation?.type}))}},Q5.canvasOptions={alpha:!1,colorSpace:"display-p3"},window.matchMedia&&matchMedia("(dynamic-range: high) and (color-gamut: p3)").matches?Q5.supportsHDR=!0:Q5.canvasOptions.colorSpace="srgb",Q5.renderers.q2d={},Q5.renderers.q2d.canvas=(e,t)=>{let r=e.canvas;e.colorMode&&e.colorMode("rgb","integer"),e._createCanvas=function(n,a,o){return t.ctx=t.drawingContext=r.getContext("2d",o),"image"!=e._scope&&(e.ctx.fillStyle="white",e.ctx.strokeStyle="black",e.ctx.lineCap="round",e.ctx.lineJoin="miter",e.ctx.textAlign="left"),e.ctx.scale(e._pixelDensity,e._pixelDensity),e.ctx.save(),r},e.clear=()=>{e.ctx.save(),e.ctx.resetTransform(),e.ctx.clearRect(0,0,e.canvas.width,e.canvas.height),e.ctx.restore()},"image"!=e._scope&&(e._resizeCanvas=(t,n)=>{let a,o={};for(let t in e.ctx)"function"!=typeof e.ctx[t]&&(o[t]=e.ctx[t]);if(delete o.canvas,e.frameCount>1){a=new e._OffscreenCanvas(r.width,r.height),a.w=r.w,a.h=r.h,a.getContext("2d").drawImage(r,0,0)}e._setCanvasSize(t,n);for(let t in o)e.ctx[t]=o[t];e.scale(e._pixelDensity),a&&e.ctx.drawImage(a,0,0,a.w,a.h)},e.fill=function(t){if(e._doFill=e._fillSet=!0,Q5.Color&&(t._q5Color||("string"!=typeof t?t=e.color(...arguments):e._namedColors[t]&&(t=e.color(...e._namedColors[t]))),t.a<=0))return e._doFill=!1;e.ctx.fillStyle=e._fill=t.toString()},e.noFill=()=>e._doFill=!1,e.stroke=function(t){if(e._doStroke=e._strokeSet=!0,Q5.Color&&(t._q5Color||("string"!=typeof t?t=e.color(...arguments):e._namedColors[t]&&(t=e.color(...e._namedColors[t]))),t.a<=0))return e._doStroke=!1;e.ctx.strokeStyle=e._stroke=t.toString()},e.strokeWeight=t=>{t||(e._doStroke=!1),e._da&&(t*=e._da),e.ctx.lineWidth=e._strokeWeight=t||1e-4},e.noStroke=()=>e._doStroke=!1,e.opacity=t=>e.ctx.globalAlpha=t,e.translate=(t,r)=>{e._da&&(t*=e._da,r*=e._da),e.ctx.translate(t,r)},e.rotate=t=>{e._angleMode&&(t=e.radians(t)),e.ctx.rotate(t)},e.scale=(t,r)=>{r??=t,e.ctx.scale(t,r)},e.applyMatrix=(t,r,n,a,o,i)=>e.ctx.transform(t,r,n,a,o,i),e.shearX=t=>e.ctx.transform(1,0,e.tan(t),1,0,0),e.shearY=t=>e.ctx.transform(1,e.tan(t),0,1,0,0),e.resetMatrix=()=>{e.ctx.resetTransform(),e.scale(e._pixelDensity)},e.pushMatrix=()=>e.ctx.save(),e.popMatrix=()=>e.ctx.restore(),e.push=()=>{e.ctx.save(),e.pushStyles()},e.pop=()=>{e.ctx.restore(),e.popStyles()},e.createCapture=e=>{var t=document.createElement("video");return t.playsinline="playsinline",t.autoplay="autoplay",navigator.mediaDevices.getUserMedia(e).then((e=>{t.srcObject=e})),t.style.position="absolute",t.style.opacity=1e-5,t.style.zIndex=-1e3,document.body.append(t),t})},Q5.renderers.q2d.drawing=e=>{e._doStroke=!0,e._doFill=!0,e._strokeSet=!1,e._fillSet=!1,e._ellipseMode=e.CENTER,e._rectMode=e.CORNER,e._curveDetail=20,e._curveAlpha=0;let t=!0,r=[];function n(){e._doFill&&e.ctx.fill(),e._doStroke&&e.ctx.stroke()}function a(t,r,a,o,i,s,l,d){if(!e._doFill&&!e._doStroke)return;let c=e._angleMode,h=c?360:e.TAU;if((i%=h)<0&&(i+=h),(s%=h)<0&&(s+=h),0!=i||0!=s){if(i>s&&([i,s]=[s,i]),e.ctx.beginPath(),a==o)c&&(i=e.radians(i),s=e.radians(s)),e.ctx.arc(t,r,a/2,i,s);else{for(let n=0;ne.ctx.globalCompositeOperation=t,e.strokeCap=t=>e.ctx.lineCap=t,e.strokeJoin=t=>e.ctx.lineJoin=t,e.ellipseMode=t=>e._ellipseMode=t,e.rectMode=t=>e._rectMode=t,e.curveDetail=t=>e._curveDetail=t,e.curveAlpha=t=>e._curveAlpha=t,e.curveTightness=t=>e._curveAlpha=t,e.background=function(t){e.ctx.save(),e.ctx.resetTransform(),t.canvas?e.image(t,0,0,e.width,e.height):(Q5.Color&&!t._q5Color&&("string"!=typeof t?t=e.color(...arguments):e._namedColors[t]&&(t=e.color(...e._namedColors[t]))),e.ctx.fillStyle=t.toString(),e.ctx.fillRect(0,0,e.canvas.width,e.canvas.height)),e.ctx.restore()},e.line=(t,r,n,a)=>{e._doStroke&&(e._da&&(t*=e._da,r*=e._da,n*=e._da,a*=e._da),e.ctx.beginPath(),e.ctx.moveTo(t,r),e.ctx.lineTo(n,a),e.ctx.stroke())},e.arc=(t,r,n,o,i,s,l,d=25)=>{if(i==s)return e.ellipse(t,r,n,o);l??=e.PIE,e._ellipseMode==e.CENTER?a(t,r,n,o,i,s,l,d):e._ellipseMode==e.RADIUS?a(t,r,2*n,2*o,i,s,l,d):e._ellipseMode==e.CORNER?a(t+n/2,r+o/2,n,o,i,s,l,d):e._ellipseMode==e.CORNERS&&a((t+n)/2,(r+o)/2,n-t,o-r,i,s,l,d)},e.ellipse=(t,r,n,a)=>{a??=n,e._ellipseMode==e.CENTER?o(t,r,n,a):e._ellipseMode==e.RADIUS?o(t,r,2*n,2*a):e._ellipseMode==e.CORNER?o(t+n/2,r+a/2,n,a):e._ellipseMode==e.CORNERS&&o((t+n)/2,(r+a)/2,n-t,a-r)},e.circle=(t,r,a)=>{e._ellipseMode==e.CENTER?(e._da&&(t*=e._da,r*=e._da,a*=e._da),e.ctx.beginPath(),e.ctx.arc(t,r,a/2,0,e.TAU),n()):e.ellipse(t,r,a,a)},e.point=(t,r)=>{t.x&&(r=t.y,t=t.x),e._da&&(t*=e._da,r*=e._da),e.ctx.save(),e.ctx.beginPath(),e.ctx.arc(t,r,e.ctx.lineWidth/2,0,e.TAU),e.ctx.fillStyle=e.ctx.strokeStyle,e.ctx.fill(),e.ctx.restore()},e.rect=(t,r,n,a=n,o,s,l,d)=>{e._rectMode==e.CENTER?i(t-n/2,r-a/2,n,a,o,s,l,d):e._rectMode==e.RADIUS?i(t-n,r-a,2*n,2*a,o,s,l,d):e._rectMode==e.CORNER?i(t,r,n,a,o,s,l,d):e._rectMode==e.CORNERS&&i(t,r,n-t,a-r,o,s,l,d)},e.square=(t,r,n,a,o,i,s)=>e.rect(t,r,n,n,a,o,i,s),e.beginShape=()=>{r=[],e.ctx.beginPath(),t=!0},e.beginContour=()=>{e.ctx.closePath(),r=[],t=!0},e.endContour=()=>{r=[],t=!0},e.vertex=(n,a)=>{e._da&&(n*=e._da,a*=e._da),r=[],t?e.ctx.moveTo(n,a):e.ctx.lineTo(n,a),t=!1},e.bezierVertex=(t,n,a,o,i,s)=>{e._da&&(t*=e._da,n*=e._da,a*=e._da,o*=e._da,i*=e._da,s*=e._da),r=[],e.ctx.bezierCurveTo(t,n,a,o,i,s)},e.quadraticVertex=(t,n,a,o)=>{e._da&&(t*=e._da,n*=e._da,a*=e._da,o*=e._da),r=[],e.ctx.quadraticCurveTo(t,n,a,o)},e.bezier=(t,r,n,a,o,i,s,l)=>{e.beginShape(),e.vertex(t,r),e.bezierVertex(n,a,o,i,s,l),e.endShape()},e.triangle=(t,r,n,a,o,i)=>{e.beginShape(),e.vertex(t,r),e.vertex(n,a),e.vertex(o,i),e.endShape(e.CLOSE)},e.quad=(t,r,n,a,o,i,s,l)=>{e.beginShape(),e.vertex(t,r),e.vertex(n,a),e.vertex(o,i),e.vertex(s,l),e.endShape(e.CLOSE)},e.endShape=t=>{r=[],t&&e.ctx.closePath(),n()},e.curveVertex=(n,a)=>{if(e._da&&(n*=e._da,a*=e._da),r.push([n,a]),r.length<4)return;let o=function(e,t,r,n,a,o,i,s,l,d){function c(e,t,r,n,a,o){let i=Math.pow(n-t,2)+Math.pow(a-r,2);return Math.pow(i,.5*o)+e}let h=[],u=c(0,e,t,r,n,d),p=c(u,r,n,a,o,d),f=c(p,a,o,i,s,d);for(let d=0;d0?(g[e]=1,g[e+1]=0):(g[e]=0,g[e+1]=1));let _=e*g[0]+r*g[1],x=t*g[0]+n*g[1],m=r*g[2]+a*g[3],v=n*g[2]+o*g[3],y=a*g[4]+i*g[5],w=o*g[4]+s*g[5],b=_*g[6]+m*g[7],S=x*g[6]+v*g[7],M=m*g[8]+y*g[9],C=v*g[8]+w*g[9],R=b*g[2]+M*g[3],I=S*g[2]+C*g[3];h.push([R,I])}return h}(...r.at(-4),...r.at(-3),...r.at(-2),...r.at(-1),e._curveDetail,e._curveAlpha);for(let r=0;r{e.beginShape(),e.curveVertex(t,r),e.curveVertex(n,a),e.curveVertex(o,i),e.curveVertex(s,l),e.endShape()},e.curvePoint=(e,t,r,n,a)=>{const o=a*a*a,i=a*a;return e*(-.5*o+i-.5*a)+t*(1.5*o-2.5*i+1)+r*(-1.5*o+2*i+.5*a)+n*(.5*o-.5*i)},e.bezierPoint=(e,t,r,n,a)=>{const o=1-a;return Math.pow(o,3)*e+3*Math.pow(o,2)*a*t+3*o*Math.pow(a,2)*r+Math.pow(a,3)*n},e.curveTangent=(e,t,r,n,a)=>{const o=a*a;return e*(-3*o/2+2*a-.5)+t*(9*o/2-5*a)+r*(-9*o/2+4*a+.5)+n*(3*o/2-a)},e.bezierTangent=(e,t,r,n,a)=>{const o=1-a;return 3*n*Math.pow(a,2)-3*r*Math.pow(a,2)+6*r*o*a-6*t*o*a+3*t*Math.pow(o,2)-3*e*Math.pow(o,2)},e.erase=function(t=255,r=255){e.ctx.save(),e.ctx.globalCompositeOperation="destination-out",e.ctx.fillStyle=`rgba(0, 0, 0, ${t/255})`,e.ctx.strokeStyle=`rgba(0, 0, 0, ${r/255})`},e.noErase=function(){e.ctx.globalCompositeOperation="source-over",e.ctx.restore()},e.inFill=(t,r)=>{const n=e._pixelDensity;return e.ctx.isPointInPath(t*n,r*n)},e.inStroke=(t,r)=>{const n=e._pixelDensity;return e.ctx.isPointInStroke(t*n,r*n)}},Q5.renderers.q2d.image=(e,t)=>{Q5.Image??=class{constructor(e,t,r){let n=this;n._scope="image",n.canvas=n.ctx=n.drawingContext=null,n.pixels=[],Q5.modules.canvas(n,n);let a=Q5.renderers.q2d;for(let e of["canvas","image","soft_filters"])a[e]&&a[e](n,n);n._pixelDensity=r.pixelDensity||1,n.createCanvas(e,t,r),delete n.createCanvas,n._loop=!1}get w(){return this.width}get h(){return this.height}},e.createImage=(t,r,n)=>(n??={},n.alpha??=!0,n.colorSpace??=e.canvas.colorSpace||Q5.canvasOptions.colorSpace,new Q5.Image(t,r,n)),e.loadImage=function(r,n,a){if(r.canvas)return r;if("gif"==r.slice(-3).toLowerCase())throw new Error("q5 doesn't support GIFs due to their impact on performance. Use a video or animation instead.");t._preloadCount++;let o=[...arguments].at(-1);a="object"==typeof o?o:null;let i=e.createImage(1,1,a);function s(e){i.resize(e.naturalWidth||e.width,e.naturalHeight||e.height),i.ctx.drawImage(e,0,0),t._preloadCount--,n&&n(i)}if(Q5._nodejs&&global.CairoCanvas)global.CairoCanvas.loadImage(r).then(s).catch((e=>{throw t._preloadCount--,e}));else{let e=new window.Image;e.src=r,e.crossOrigin="Anonymous",e._pixelDensity=1,e.onload=()=>s(e),e.onerror=e=>{throw t._preloadCount--,e}}return i},e.imageMode=t=>e._imageMode=t,e.image=(t,r,n,a,o,i=0,s=0,l,d)=>{let c=t.canvas||t;Q5._createNodeJSCanvas&&(c=c.context.canvas),a??=t.width||t.videoWidth,o??=t.height||t.videoHeight,"center"==e._imageMode&&(r-=.5*a,n-=.5*o),e._da&&(r*=e._da,n*=e._da,a*=e._da,o*=e._da,i*=e._da,s*=e._da,l*=e._da,d*=e._da);let h=t._pixelDensity||1;l?l*=h:l=c.width||c.videoWidth,d?d*=h:d=c.height||c.videoHeight,e.ctx.drawImage(c,i*h,s*h,l,d,r,n,a,o),e._tint&&(e.ctx.globalCompositeOperation="multiply",e.ctx.fillStyle=e._tint.toString(),e.ctx.fillRect(r,n,a,o),e.ctx.globalCompositeOperation="source-over")},e._tint=null;let r=null;e._softFilter=()=>{throw new Error("Load q5-2d-soft-filters.js to use software filters.")},e.filter=(t,r)=>{if(!e.ctx.filter)return e._softFilter(t,r);if("string"==typeof t)f=t;else if(t==Q5.GRAY)f="saturate(0%)";else if(t==Q5.INVERT)f="invert(100%)";else if(t==Q5.BLUR){let t=Math.ceil(r*e._pixelDensity)||1;f=`blur(${t}px)`}else{if(t!=Q5.THRESHOLD)return e._softFilter(t,r);{r??=.5;let e=Math.floor(.5/Math.max(r,1e-5)*100);f=`saturate(0%) brightness(${e}%) contrast(1000000%)`}}e.ctx.filter=f,e.ctx.drawImage(e.canvas,0,0,e.canvas.w,e.canvas.h),e.ctx.filter="none"},"image"==e._scope&&(e.resize=(t,r)=>{let n=new e._OffscreenCanvas(e.canvas.width,e.canvas.height);n.getContext("2d",{colorSpace:e.canvas.colorSpace}).drawImage(e.canvas,0,0),e._setCanvasSize(t,r),e.ctx.clearRect(0,0,e.canvas.width,e.canvas.height),e.ctx.drawImage(n,0,0,e.canvas.width,e.canvas.height)}),e._getImageData=(t,r,n,a)=>e.ctx.getImageData(t,r,n,a,{colorSpace:e.canvas.colorSpace}),e.trim=()=>{let t=e._pixelDensity||1,r=e.canvas.width,n=e.canvas.height,a=e._getImageData(0,0,r,n).data,o=r,i=0,s=n,l=0,d=3;for(let e=0;ei&&(i=t),el&&(l=e)),d+=4;return s=Math.floor(s/t),l=Math.floor(l/t),o=Math.floor(o/t),i=Math.floor(i/t),e.get(o,s,i-o+1,l-s+1)},e.mask=t=>{e.ctx.save(),e.ctx.resetTransform();let r=e.ctx.globalCompositeOperation;e.ctx.globalCompositeOperation="destination-in",e.ctx.drawImage(t.canvas,0,0),e.ctx.globalCompositeOperation=r,e.ctx.restore()},e.inset=(t,r,n,a,o,i,s,l)=>{let d=e._pixelDensity||1;e.ctx.drawImage(e.canvas,t*d,r*d,n*d,a*d,o,i,s,l)},e.copy=()=>e.get(),e.get=(t,r,n,a)=>{let o=e._pixelDensity||1;if(void 0!==t&&void 0===n){let n=e._getImageData(t*o,r*o,1,1).data;return[n[0],n[1],n[2],n[3]/255]}t=(t||0)*o,r=(r||0)*o;let i=n=n||e.width,s=a=a||e.height;n*=o,a*=o;let l=e.createImage(n,a);return l.ctx.drawImage(e.canvas,t,r,n,a,0,0,n,a),l._pixelDensity=o,l.width=i,l.height=s,l},e.set=(t,r,n)=>{if(n.canvas){let a=e._tint;return e._tint=null,e.image(n,t,r),void(e._tint=a)}e.pixels.length||e.loadPixels();let a=e._pixelDensity||1;for(let o=0;o{r=e._getImageData(0,0,e.canvas.width,e.canvas.height),t.pixels=r.data},e.updatePixels=()=>{null!=r&&e.ctx.putImageData(r,0,0)},e.smooth=()=>e.ctx.imageSmoothingEnabled=!0,e.noSmooth=()=>e.ctx.imageSmoothingEnabled=!1,"image"!=e._scope&&(e.tint=function(t){e._tint=t._q5Color?t:e.color(...arguments)},e.noTint=()=>e._tint=null)},Q5.THRESHOLD=1,Q5.GRAY=2,Q5.OPAQUE=3,Q5.INVERT=4,Q5.POSTERIZE=5,Q5.DILATE=6,Q5.ERODE=7,Q5.BLUR=8,Q5.renderers.q2d.text=(e,t)=>{e._textAlign="left",e._textBaseline="alphabetic",e._textSize=12;let r="sans-serif",n=!1,a=15,o=3,i="normal",s=!1,l=0,d=[],c=!1,h=!1,u=0,p=12e3,f=e._textCache={};e.loadFont=(e,r)=>{t._preloadCount++;let n=e.split("/").pop().split(".")[0].replace(" ",""),a=new FontFace(n,`url(${e})`);return document.fonts.add(a),a.load().then((()=>{t._preloadCount--,r&&r(n)})),n},e.textFont=e=>{if(!e||e==r)return r;r=e,s=!0,l=-1},e.textSize=t=>{if(null==t||t==e._textSize)return e._textSize;e._da&&(t*=e._da),e._textSize=t,s=!0,l=-1,n||(a=1.25*t,o=a-t)},e.textStyle=e=>{if(!e||e==i)return i;i=e,s=!0,l=-1},e.textLeading=t=>{if(n=!0,null==t||t==a)return a;e._da&&(t*=e._da),a=t,o=t-e._textSize,l=-1},e.textAlign=(t,r)=>{e.ctx.textAlign=e._textAlign=t,r&&(e.ctx.textBaseline=e._textBaseline=r==e.CENTER?"middle":r)},e.textWidth=t=>e.ctx.measureText(t).width,e.textAscent=t=>e.ctx.measureText(t).actualBoundingBoxAscent,e.textDescent=t=>e.ctx.measureText(t).actualBoundingBoxDescent,e.textFill=e.fill,e.textStroke=e.stroke;e.textCache=(e,t)=>(t&&(p=t),void 0!==e&&(c=e),c),e.createTextImage=(t,r,n)=>(h=!0,img=e.text(t,0,0,r,n),h=!1,img);let g=[];e.text=(t,n,_,x,m)=>{if(void 0===t||!e._doFill&&!e._doStroke)return;t=t.toString(),e._da&&(n*=e._da,_*=e._da);let v,y,w,b,S=e.ctx;if(s&&(S.font=`${i} ${e._textSize}px ${r}`,s=!1),(c||h)&&(-1==l&&(()=>{let t=r+e._textSize+i+a,n=5381;for(let e=0;e>>0})(),v=f[t],v&&(v=v[l]),v)){if(v._fill==e._fill&&v._stroke==e._stroke&&v._strokeWeight==e._strokeWeight)return h?v:e.textImage(v,n,_);v.clear()}if(-1==t.indexOf("\n")?g[0]=t:g=t.split("\n"),t.length>x){let e=[];for(let t of g){let r=0;for(;r=t.length){e.push(t.slice(r));break}let a=t.lastIndexOf(" ",n);(-1===a||am)break;if(g.length=0,e._fillSet||(S.fillStyle=b),c||h){if(d.push(l),(f[t]??={})[l]=v,u++,u>p){let e=Math.ceil(u/2),t=d.splice(0,e);for(let e in f){e=f[e];for(let r of t)delete e[r]}u-=e}if(h)return v;e.textImage(v,n,_)}},e.textImage=(t,r,n)=>{"string"==typeof t&&(t=e.createTextImage(t));let a=e._imageMode;e._imageMode="corner";let o=e._textAlign;"center"==o?r-=t.canvas.hw:"right"==o&&(r-=t.width);let i=e._textBaseline;"alphabetic"==i?n-=t._leading:"middle"==i?n-=t._middle:"bottom"==i?n-=t._bottom:"top"==i&&(n-=t._top),e.image(t,r,n),e._imageMode=a},e.nf=(e,t,r)=>{let n=e<0,a=(e=Math.abs(e)).toFixed(r).split(".");a[0]=a[0].padStart(t,"0");let o=a.join(".");return n&&(o="-"+o),o}},Q5.modules.ai=e=>{e.askAI=(e="")=>{throw Error("Ask AI ✨ "+e)},e._aiErrorAssistance=async t=>{let r=t.message?.includes("Ask AI ✨");if(Q5.disableFriendlyErrors&&!r)return;!r&&Q5.errorTolerant||e.noLoop();let n=t.stack?.split("\n");if(!t.stack||n.length<=1)return;let a=1,o="(";for(-1==navigator.userAgent.indexOf("Chrome")&&(a=0,o="@");n[a].indexOf("q5")>=0;)a++;let i=n[a].split(o).at(-1);i=i.split(":");let s=parseInt(i.at(-2));r&&s++;let l=i.slice(0,-2).join(":"),d=l.split("/").at(-1);try{let e=(await(await fetch(l)).text()).split("\n"),n=e[s-1].trim(),a="",o=1;for(;a.length<1600&&(s-o>=0&&(a=e[s-o].trim()+"\n"+a),s+o10?t.message.slice(10):"Whats+wrong+with+this+line%3F+short+answer")+(r?"":"%0A%0A"+encodeURIComponent(t.name+": "+t.message))+"%0A%0ALine%3A+"+encodeURIComponent(n)+"%0A%0AExcerpt+for+context%3A%0A%0A"+encodeURIComponent(a);if(console.warn("Error in "+d+" on line "+s+":\n\n"+n),console.warn("Ask AI ✨ "+i),r)return window.open(i,"_blank")}catch(e){}}},Q5.modules.color=(e,t)=>{e.RGB=e.RGBA=e._colorMode="rgb",e.OKLCH="oklch",e.colorMode=(r,n)=>{e._colorMode=r;let a="srgb"==e.canvas.colorSpace||"srgb"==r;if(n??=a?"integer":"float",e._colorFormat="float"==n||1==n?1:255,"oklch"==r)t.Color=Q5.ColorOKLCH;else{let r="srgb"==e.canvas.colorSpace;255==e._colorFormat?t.Color=r?Q5.ColorRGBA_8:Q5.ColorRGBA_P3_8:t.Color=r?Q5.ColorRGBA:Q5.ColorRGBA_P3,e._colorMode="rgb"}},e._namedColors={aqua:[0,255,255],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],crimson:[220,20,60],cyan:[0,255,255],darkviolet:[148,0,211],gold:[255,215,0],green:[0,128,0],gray:[128,128,128],grey:[128,128,128],hotpink:[255,105,180],indigo:[75,0,130],khaki:[240,230,140],lightgreen:[144,238,144],lime:[0,255,0],magenta:[255,0,255],navy:[0,0,128],orange:[255,165,0],olive:[128,128,0],peachpuff:[255,218,185],pink:[255,192,203],purple:[128,0,128],red:[255,0,0],skyblue:[135,206,235],tan:[210,180,140],turquoise:[64,224,208],transparent:[0,0,0,0],white:[255,255,255],violet:[238,130,238],yellow:[255,255,0]},e.color=(t,r,n,a)=>{let o=e.Color;if(t._q5Color)return new o(...t.levels);if(null==r){if("string"==typeof t){if("#"==t[0])t.length<=5?(t.length>4&&(a=parseInt(t[4]+t[4],16)),n=parseInt(t[3]+t[3],16),r=parseInt(t[2]+t[2],16),t=parseInt(t[1]+t[1],16)):(t.length>7&&(a=parseInt(t.slice(7,9),16)),n=parseInt(t.slice(5,7),16),r=parseInt(t.slice(3,5),16),t=parseInt(t.slice(1,3),16));else{if(!e._namedColors[t])return console.error("q5 can't parse color: "+t+"\nOnly numeric input, hex, and common named colors are supported."),new o(0,0,0);[t,r,n,a]=e._namedColors[t]}1==e._colorFormat&&(t/=255,r&&(r/=255),n&&(n/=255),a&&(a/=255))}Array.isArray(t)&&([t,r,n,a]=t)}return null==n?new o(t,t,t,r):new o(t,r,n,a)},e.red=e=>e.r,e.green=e=>e.g,e.blue=e=>e.b,e.alpha=e=>e.a,e.lightness=e=>e.l?e.l:100*(.2126*e.r+.7152*e.g+.0722*e.b)/255,e.hue=t=>{if(t.h)return t.h;let r=t.r,n=t.g,a=t.b;255==e._colorFormat&&(r/=255,n/=255,a/=255);let o,i=Math.max(r,n,a),s=Math.min(r,n,a);return o=i==s?0:i==r?60*(n-a)/(i-s):i==n?60*(a-r)/(i-s)+120:60*(r-n)/(i-s)+240,o<0&&(o+=360),o},e.lerpColor=(t,r,n)=>{if("rgb"==e._colorMode)return new e.Color(e.constrain(e.lerp(t.r,r.r,n),0,255),e.constrain(e.lerp(t.g,r.g,n),0,255),e.constrain(e.lerp(t.b,r.b,n),0,255),e.constrain(e.lerp(t.a,r.a,n),0,255));{let a=r.h-t.h;a>180&&(a-=360),a<-180&&(a+=360);let o=t.h+n*a;return o<0&&(o+=360),o>360&&(o-=360),new e.Color(e.constrain(e.lerp(t.l,r.l,n),0,100),e.constrain(e.lerp(t.c,r.c,n),0,100),o,e.constrain(e.lerp(t.a,r.a,n),0,255))}}},Q5.Color=class{constructor(){this._q5Color=!0}},Q5.ColorOKLCH=class extends Q5.Color{constructor(e,t,r,n){super(),this.l=e,this.c=t,this.h=r,this.a=n??1}toString(){return`oklch(${this.l} ${this.c} ${this.h} / ${this.a})`}},Q5.ColorRGBA=class extends Q5.Color{constructor(e,t,r,n){super(),this.r=e,this.g=t,this.b=r,this.a=n??1}get levels(){return[this.r,this.g,this.b,this.a]}toString(){return`color(srgb ${this.r} ${this.g} ${this.b} / ${this.a})`}},Q5.ColorRGBA_P3=class extends Q5.ColorRGBA{toString(){return`color(display-p3 ${this.r} ${this.g} ${this.b} / ${this.a})`}},Q5.ColorRGBA_8=class extends Q5.ColorRGBA{constructor(e,t,r,n){super(e,t,r,n??255)}setRed(e){this.r=e}setGreen(e){this.g=e}setBlue(e){this.b=e}setAlpha(e){this.a=e}get levels(){return[this.r,this.g,this.b,this.a]}toString(){return`rgb(${this.r} ${this.g} ${this.b} / ${this.a/255})`}},Q5.ColorRGBA_P3_8=class extends Q5.ColorRGBA{constructor(e,t,r,n){super(e,t,r,n??255),this._edited=!0}get r(){return this._r}set r(e){this._r=e,this._edited=!0}get g(){return this._g}set g(e){this._g=e,this._edited=!0}get b(){return this._b}set b(e){this._b=e,this._edited=!0}get a(){return this._a}set a(e){this._a=e,this._edited=!0}toString(){if(this._edited){let e=(this._r/255).toFixed(3),t=(this._g/255).toFixed(3),r=(this._b/255).toFixed(3),n=(this._a/255).toFixed(3);this._css=`color(display-p3 ${e} ${t} ${r} / ${n})`,this._edited=!1}return this._css}},Q5.modules.display=e=>{if(!e.canvas||"graphics"==e._scope)return;let t=e.canvas;e.CENTERED="centered",e.FULLSCREEN="fullscreen",e.MAXED="maxed",e.PIXELATED="pixelated",0!=Q5._instanceCount||Q5._nodejs||document.head.insertAdjacentHTML("beforeend",""),e._adjustDisplay=()=>{let r=t.style,n=t.parentElement;r&&n&&t.displayMode&&("pixelated"==t.renderQuality&&(t.classList.add("q5-pixelated"),e.pixelDensity(1),e.noSmooth&&e.noSmooth(),e.textFont&&e.textFont("monospace")),"normal"==t.displayMode?(n.classList.remove("q5-centered","q5-maxed","q5-fullscreen"),r.width=t.w*t.displayScale+"px",r.height=t.h*t.displayScale+"px"):(n.classList.add("q5-"+t.displayMode),n=n.getBoundingClientRect(),t.w/t.h>n.width/n.height?("centered"==t.displayMode?(r.width=t.w*t.displayScale+"px",r.maxWidth="100%"):r.width="100%",r.height="auto",r.maxHeight=""):(r.width="auto",r.maxWidth="","centered"==t.displayMode?(r.height=t.h*t.displayScale+"px",r.maxHeight="100%"):r.height="100%")))},e.displayMode=(r="normal",n="default",a=1)=>{"string"==typeof a&&(a=parseFloat(a.slice(1))),Object.assign(t,{displayMode:r,renderQuality:n,displayScale:a}),e._adjustDisplay()},e.fullscreen=e=>{if(void 0===e)return document.fullscreenElement;e?document.body.requestFullscreen():document.body.exitFullscreen()}},Q5.modules.input=(e,t)=>{if("graphics"==e._scope)return;e.mouseX=0,e.mouseY=0,e.pmouseX=0,e.pmouseY=0,e.touches=[],e.mouseButton=null,e.keyIsPressed=!1,e.mouseIsPressed=!1,e.key=null,e.keyCode=null,e.UP_ARROW=38,e.DOWN_ARROW=40,e.LEFT_ARROW=37,e.RIGHT_ARROW=39,e.SHIFT=16,e.TAB=9,e.BACKSPACE=8,e.ENTER=e.RETURN=13,e.ALT=e.OPTION=18,e.CONTROL=17,e.DELETE=46,e.ESCAPE=27,e.ARROW="default",e.CROSS="crosshair",e.HAND="pointer",e.MOVE="move",e.TEXT="text";let r={},n=[e.LEFT,e.CENTER,e.RIGHT],a=e.canvas;function o(t){const r=e.canvas.getBoundingClientRect(),n=e.canvas.scrollWidth/e.width||1,a=e.canvas.scrollHeight/e.height||1;return{x:(t.clientX-r.left)/n,y:(t.clientY-r.top)/a,id:t.identifier}}if(e._startAudio=()=>{e.getAudioContext&&"suspended"==e.getAudioContext()?.state&&e.userStartAudio()},e._updateMouse=r=>{if(!r.changedTouches){if(a){let n=a.getBoundingClientRect(),o=a.scrollWidth/e.width||1,i=a.scrollHeight/e.height||1;t.mouseX=(r.clientX-n.left)/o,t.mouseY=(r.clientY-n.top)/i,"webgpu"==a.renderer&&(t.mouseX-=a.hw,t.mouseY-=a.hh)}else t.mouseX=r.clientX,t.mouseY=r.clientY;t.moveX=r.movementX,t.moveY=r.movementY}},e._onmousedown=r=>{e._startAudio(),e._updateMouse(r),t.mouseIsPressed=!0,t.mouseButton=n[r.button],e.mousePressed(r)},e._onmousemove=t=>{e._updateMouse(t),e.mouseIsPressed?e.mouseDragged(t):e.mouseMoved(t)},e._onmouseup=r=>{e._updateMouse(r),t.mouseIsPressed=!1,e.mouseReleased(r)},e._onclick=r=>{e._updateMouse(r),t.mouseIsPressed=!0,e.mouseClicked(r),t.mouseIsPressed=!1},e.cursor=(t,r,n)=>{let a="";t.includes(".")&&(t=`url("${t}")`,a=", auto"),void 0!==r&&(t+=" "+r+" "+n),e.canvas.style.cursor=t+a},e.noCursor=()=>{e.canvas.style.cursor="none"},e.requestPointerLock=document.body?.requestPointerLock,e.exitPointerLock=document.exitPointerLock,e._onkeydown=n=>{n.repeat||(e._startAudio(),t.keyIsPressed=!0,t.key=n.key,t.keyCode=n.keyCode,r[e.keyCode]=r[e.key.toLowerCase()]=!0,e.keyPressed(n),1==n.key.length&&e.keyTyped(n))},e._onkeyup=n=>{t.keyIsPressed=!1,t.key=n.key,t.keyCode=n.keyCode,r[e.keyCode]=r[e.key.toLowerCase()]=!1,e.keyReleased(n)},e.keyIsDown=e=>!!r["string"==typeof e?e.toLowerCase():e],e._ontouchstart=r=>{e._startAudio(),t.touches=[...r.touches].map(o),e._isTouchAware||(t.mouseX=e.touches[0].x,t.mouseY=e.touches[0].y,t.mouseIsPressed=!0,t.mouseButton=e.LEFT,e.mousePressed(r)||r.preventDefault()),e.touchStarted(r)||r.preventDefault()},e._ontouchmove=r=>{t.touches=[...r.touches].map(o),e._isTouchAware||(t.mouseX=e.touches[0].x,t.mouseY=e.touches[0].y,e.mouseDragged(r)||r.preventDefault()),e.touchMoved(r)||r.preventDefault()},e._ontouchend=r=>{t.touches=[...r.touches].map(o),e._isTouchAware||e.touches.length||(t.mouseIsPressed=!1,e.mouseReleased(r)||r.preventDefault()),e.touchEnded(r)||r.preventDefault()},a&&(a.addEventListener("mousedown",(t=>e._onmousedown(t))),a.addEventListener("mouseup",(t=>e._onmouseup(t))),a.addEventListener("click",(t=>e._onclick(t))),a.addEventListener("touchstart",(t=>e._ontouchstart(t))),a.addEventListener("touchmove",(t=>e._ontouchmove(t))),a.addEventListener("touchcancel",(t=>e._ontouchend(t))),a.addEventListener("touchend",(t=>e._ontouchend(t)))),window){let t=window.addEventListener;t("mousemove",(t=>e._onmousemove(t)),!1),t("keydown",(t=>e._onkeydown(t)),!1),t("keyup",(t=>e._onkeyup(t)),!1)}},Q5.modules.math=(e,t)=>{e.RADIANS=0,e.DEGREES=1,e.PI=Math.PI,e.HALF_PI=Math.PI/2,e.QUARTER_PI=Math.PI/4,e.abs=Math.abs,e.ceil=Math.ceil,e.exp=Math.exp,e.floor=Math.floor,e.loge=Math.log,e.mag=Math.hypot,e.max=Math.max,e.min=Math.min,e.round=Math.round,e.pow=Math.pow,e.sqrt=Math.sqrt,e.SHR3=1,e.LCG=2;let r=0;e.angleMode=t=>{"radians"==t&&(t=0),r=e._angleMode=t};let n=e._DEGTORAD=Math.PI/180,a=e._RADTODEG=180/Math.PI;function o(){let e,t,r=4294967295;return{setSeed(n){e=t=(n??Math.random()*r)>>>0},getSeed:()=>t,rand:()=>(e^=e<<17,e^=e>>13,e^=e<<5,(e>>>0)/r)}}e.degrees=t=>t*e._RADTODEG,e.radians=t=>t*e._DEGTORAD,e.map=Q5.prototype.map=(e,t,r,n,a,o)=>{let i=n+1*(e-t)/(r-t)*(a-n);return o?ne*(1-r)+t*r,e.constrain=(e,t,r)=>Math.min(Math.max(e,t),r),e.dist=function(){let e=arguments;return 4==e.length?Math.hypot(e[0]-e[2],e[1]-e[3]):Math.hypot(e[0]-e[3],e[1]-e[4],e[2]-e[5])},e.norm=(t,r,n)=>e.map(t,r,n,0,1),e.sq=e=>e*e,e.fract=e=>e-Math.floor(e),e.sin=e=>Math.sin(r?e*n:e),e.cos=e=>Math.cos(r?e*n:e),e.tan=e=>Math.tan(r?e*n:e),e.asin=e=>{let t=Math.asin(e);return r?t*a:t},e.acos=e=>{let t=Math.acos(e);return r?t*a:t},e.atan=e=>{let t=Math.atan(e);return r?t*a:t},e.atan2=(e,t)=>{let n=Math.atan2(e,t);return r?n*a:n};let i=o();i.setSeed(),e.randomSeed=e=>i.setSeed(e),e.random=(e,t)=>void 0===e?i.rand():"number"==typeof e?void 0!==t?i.rand()*(t-e)+e:i.rand()*e:e[Math.trunc(e.length*i.rand())],e.randomGenerator=t=>{t==e.LCG?i=function(){const e=4294967296;let t,r;return{setSeed(n){r=t=(n??Math.random()*e)>>>0},getSeed:()=>t,rand:()=>(r=(1664525*r+1013904223)%e,r/e)}}():t==e.SHR3&&(i=o()),i.setSeed()};var s=new function(){var e,t,r,n=new Array(128),a=new Array(256),o=new Array(128),s=new Array(128),l=new Array(256),d=new Array(256),c=()=>4294967296*i.rand()-2147483648,h=()=>.5+2.328306e-10*(c()|0),u=()=>{for(var t,a,i,l,d=3.44262;;){if(t=r*o[e],0==e){do{i=h(),l=h(),t=.2904764*-Math.log(i),a=-Math.log(l)}while(a+a0?d+t:-d-t}if(s[e]+h()*(s[e-1]-s[e]){for(var r;;){if(0==e)return 7.69711-Math.log(h());if(r=t*l[e],d[e]+h()*(d[e-1]-d[e])(r=c(),e=127&r,Math.abs(r)(t=c()>>>0){var e,t,r=2147483648,i=4294967296,c=3.442619855899,h=c,u=.00991256303526217,p=7.697117470131487,f=p,g=.003949659822581572;for(e=u/Math.exp(-.5*c*c),n[0]=Math.floor(c/e*r),n[1]=0,o[0]=e/r,o[127]=c/r,s[0]=1,s[127]=Math.exp(-.5*c*c),t=126;t>=1;t--)c=Math.sqrt(-2*Math.log(u/c+Math.exp(-.5*c*c))),n[t+1]=Math.floor(c/h*r),h=c,s[t]=Math.exp(-.5*c*c),o[t]=c/r;for(e=g/Math.exp(-p),a[0]=Math.floor(p/e*i),a[1]=0,l[0]=e/i,l[255]=p/i,d[0]=1,d[255]=Math.exp(-p),t=254;t>=1;t--)p=-Math.log(g/p+Math.exp(-p)),a[t+1]=Math.floor(p/f*i),f=p,d[t]=Math.exp(-p),l[t]=p/i}};let l;s.hasInit=!1,e.randomGaussian=(e,t)=>(s.hasInit||(s.zigset(),s.hasInit=!0),s.RNOR()*t+e),e.randomExponential=()=>(s.hasInit||(s.zigset(),s.hasInit=!0),s.REXP()),e.PERLIN="perlin",e.SIMPLEX="simplex",e.BLOCKY="blocky",e.Noise=Q5.PerlinNoise,e.noiseMode=e=>{t.Noise=Q5[e[0].toUpperCase()+e.slice(1)+"Noise"],l=null},e.noiseSeed=t=>{l=new e.Noise(t)},e.noise=(t=0,r=0,n=0)=>(l??=new e.Noise,l.noise(t,r,n)),e.noiseDetail=(t,r)=>{l??=new e.Noise,t>0&&(l.octaves=t),r>0&&(l.falloff=r)}},Q5.Noise=class{},Q5.PerlinNoise=class extends Q5.Noise{constructor(e){super(),this.grad3=[[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]],this.octaves=1,this.falloff=.5,this.p=null==e?Array.from({length:256},(()=>Math.floor(256*Math.random()))):this.seedPermutation(e),this.p=this.p.concat(this.p)}seedPermutation(e){let t,r,n=[];for(let e=0;e<256;e++)n[e]=e;for(let a=255;a>0;a--)t=(e=16807*e%2147483647)%(a+1),r=n[a],n[a]=n[t],n[t]=r;return n}dot(e,t,r,n){return e[0]*t+e[1]*r+e[2]*n}mix(e,t,r){return(1-r)*e+r*t}fade(e){return e*e*e*(e*(6*e-15)+10)}noise(e,t,r){let n=this,a=0,o=1,i=1,s=0;for(let l=0;l{e.Sound=Q5.Sound,e.loadSound=(e,r)=>{t._preloadCount++,Q5.aud??=new window.AudioContext;let n=new Q5.Sound(e,r);return n.crossOrigin="Anonymous",n.addEventListener("canplaythrough",(()=>{t._preloadCount--,n.loaded=!0,r&&r(n)})),n},e.getAudioContext=()=>Q5.aud,e.userStartAudio=()=>Q5.aud.resume()},Q5.Sound=class extends Audio{constructor(e){super(e);let t=this;t.load(),t.panner=Q5.aud.createStereoPanner(),t.source=Q5.aud.createMediaElementSource(t),t.source.connect(t.panner),t.panner.connect(Q5.aud.destination),Object.defineProperty(t,"pan",{get:()=>t.panner.pan.value,set:e=>t.panner.pan.value=e})}setVolume(e){this.volume=e}setLoop(e){this.loop=e}setPan(e){this.pan=e}isLoaded(){return this.loaded}isPlaying(){return!this.paused}},Q5.modules.util=(e,t)=>{e._loadFile=(r,n,a)=>{t._preloadCount++;let o={};return fetch(r).then((e=>"json"==a?e.json():e.text())).then((r=>{t._preloadCount--,"csv"==a&&(r=e.CSV.parse(r)),Object.assign(o,r),n&&n(r)})),o},e.loadText=(t,r)=>e._loadFile(t,r,"text"),e.loadJSON=(t,r)=>e._loadFile(t,r,"json"),e.loadCSV=(t,r)=>e._loadFile(t,r,"csv"),e.CSV={},e.CSV.parse=(e,t=",",r="\n")=>{let n=[],a=e.split(r),o=a[0].split(t);for(let e=1;er[e]=JSON.parse(i[t]))),n.push(r)}return n},"object"==typeof localStorage&&(e.storeItem=localStorage.setItem,e.getItem=localStorage.getItem,e.removeItem=localStorage.removeItem,e.clearStorage=localStorage.clear),e.year=()=>(new Date).getFullYear(),e.day=()=>(new Date).getDay(),e.hour=()=>(new Date).getHours(),e.minute=()=>(new Date).getMinutes(),e.second=()=>(new Date).getSeconds()},Q5.modules.vector=e=>{e.createVector=(t,r,n)=>new Q5.Vector(t,r,n,e)},Q5.Vector=class{constructor(e,t,r,n){this.x=e||0,this.y=t||0,this.z=r||0,this._$=n||window,this._cn=null,this._cnsq=null}set(e,t,r){return this.x=e?.x||e||0,this.y=e?.y||t||0,this.z=e?.z||r||0,this}copy(){return new Q5.Vector(this.x,this.y,this.z)}_arg2v(e,t,r){return void 0!==e?.x?e:void 0!==t?{x:e,y:t,z:r||0}:{x:e,y:e,z:e}}_calcNorm(){this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq)}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,this}div(){let e=this._arg2v(...arguments);return e.x?this.x/=e.x:this.x=0,e.y?this.y/=e.y:this.y=0,e.z?this.z/=e.z:this.z=0,this}mag(){return this._calcNorm(),this._cn}magSq(){return this._calcNorm(),this._cnsq}dot(){let e=this._arg2v(...arguments);return this.x*e.x+this.y*e.y+this.z*e.z}dist(){let e=this._arg2v(...arguments),t=this.x-e.x,r=this.y-e.y,n=this.z-e.z;return Math.sqrt(t*t+r*r+n*n)}cross(){let e=this._arg2v(...arguments),t=this.y*e.z-this.z*e.y,r=this.z*e.x-this.x*e.z,n=this.x*e.y-this.y*e.x;return this.x=t,this.y=r,this.z=n,this}normalize(){this._calcNorm();let e=this._cn;return 0!=e&&(this.x/=e,this.y/=e,this.z/=e),this._cn=1,this._cnsq=1,this}limit(e){this._calcNorm();let t=this._cn;if(t>e){let r=e/t;this.x*=r,this.y*=r,this.z*=r,this._cn=e,this._cnsq=e*e}return this}setMag(e){this._calcNorm();let t=e/this._cn;return this.x*=t,this.y*=t,this.z*=t,this._cn=e,this._cnsq=e*e,this}heading(){return this._$.atan2(this.y,this.x)}setHeading(e){let t=this.mag();return this.x=t*this._$.cos(e),this.y=t*this._$.sin(e),this}rotate(e){let t=this._$.cos(e),r=this._$.sin(e),n=this.x*t-this.y*r,a=this.x*r+this.y*t;return this.x=n,this.y=a,this}angleBetween(){let e=this._arg2v(...arguments),t=Q5.Vector.cross(this,e);return this._$.atan2(t.mag(),this.dot(e))*Math.sign(t.z||1)}lerp(){let e=[...arguments],t=e.at(-1);if(0==t)return this;let r=this._arg2v(...e.slice(0,-1));return this.x+=(r.x-this.x)*t,this.y+=(r.y-this.y)*t,this.z+=(r.z-this.z)*t,this}slerp(){let e=[...arguments],t=e.at(-1);if(0==t)return this;let r=this._arg2v(...e.slice(0,-1));if(1==t)return this.set(r);let n=this.mag(),a=r.mag();if(0==n||0==a)return this.mult(1-t).add(r.mult(t));let o=Q5.Vector.cross(this,r),i=o.mag(),s=Math.atan2(i,this.dot(r));if(i>0)o.div(i);else{if(se.copy().add(t),Q5.Vector.cross=(e,t)=>e.copy().cross(t),Q5.Vector.dist=(e,t)=>Math.hypot(e.x-t.x,e.y-t.y,e.z-t.z),Q5.Vector.div=(e,t)=>e.copy().div(t),Q5.Vector.dot=(e,t)=>e.copy().dot(t),Q5.Vector.equals=(e,t,r)=>e.equals(t,r),Q5.Vector.lerp=(e,t,r)=>e.copy().lerp(t,r),Q5.Vector.slerp=(e,t,r)=>e.copy().slerp(t,r),Q5.Vector.limit=(e,t)=>e.copy().limit(t),Q5.Vector.heading=e=>this._$.atan2(e.y,e.x),Q5.Vector.magSq=e=>e.x*e.x+e.y*e.y+e.z*e.z,Q5.Vector.mag=e=>Math.sqrt(Q5.Vector.magSq(e)),Q5.Vector.mult=(e,t)=>e.copy().mult(t),Q5.Vector.normalize=e=>e.copy().normalize(),Q5.Vector.rem=(e,t)=>e.copy().rem(t),Q5.Vector.sub=(e,t)=>e.copy().sub(t);for(let e of["fromAngle","fromAngles","random2D","random3D"])Q5.Vector[e]=(t,r,n)=>(new Q5.Vector)[e](t,r,n);Q5.renderers.webgpu={},Q5.renderers.webgpu.canvas=(e,t)=>{let r,n,a=e.canvas;a.width=e.width=500,a.height=e.height=500,e.colorMode&&e.colorMode("rgb",1),e._pipelineConfigs=[],e._pipelines=[];let o=e.drawStack=[],i=e.colorsStack=[0,0,0,1,1,1,1,1];e._transformLayout=Q5.device.createBindGroupLayout({label:"transformLayout",entries:[{binding:0,visibility:GPUShaderStage.VERTEX,buffer:{type:"uniform",hasDynamicOffset:!1}},{binding:1,visibility:GPUShaderStage.VERTEX,buffer:{type:"read-only-storage",hasDynamicOffset:!1}}]}),n=Q5.device.createBindGroupLayout({label:"colorsLayout",entries:[{binding:0,visibility:GPUShaderStage.FRAGMENT,buffer:{type:"read-only-storage",hasDynamicOffset:!1}}]}),e.bindGroupLayouts=[e._transformLayout,n];let s=Q5.device.createBuffer({size:8,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});e._createCanvas=(r,n,o)=>(t.ctx=t.drawingContext=a.getContext("webgpu"),o.format??=navigator.gpu.getPreferredCanvasFormat(),o.device??=Q5.device,e.ctx.configure(o),Q5.device.queue.writeBuffer(s,0,new Float32Array([e.canvas.hw,e.canvas.hh])),a),e._resizeCanvas=(t,r)=>{e._setCanvasSize(t,r)};let l=1,d=(t,r,n,a=1)=>{"string"==typeof t?t=e.color(t):null==n&&(a=r??1,r=n=t),t._q5Color?i.push(t.r,t.g,t.b,t.a):i.push(t,r,n,a),l++};e._fillIndex=e._strokeIndex=0,e._doFill=e._doStroke=!0,e.fill=(t,r,n,a)=>{d(t,r,n,a),e._doFill=e._fillSet=!0,e._fillIndex=l},e.stroke=(t,r,n,a)=>{d(t,r,n,a),e._doStroke=e._strokeSet=!0,e._strokeIndex=l},e.noFill=()=>e._doFill=!1,e.noStroke=()=>e._doStroke=!1,e._strokeWeight=1,e.strokeWeight=t=>e._strokeWeight=Math.abs(t),e.resetMatrix=()=>{e._matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],e._transformIndex=0},e.resetMatrix(),e._matrixDirty=!1;let c=[e._matrix.slice()];e._transformIndexStack=[],e.translate=(t,r,n)=>{(t||r||n)&&(e._matrix[12]+=t,e._matrix[13]-=r,e._matrix[14]+=n||0,e._matrixDirty=!0)},e.rotate=t=>{if(!t)return;e._angleMode&&(t*=e._DEGTORAD);let r=Math.cos(t),n=Math.sin(t),a=e._matrix,o=a[0],i=a[1],s=a[4],l=a[5];o||i||s||l?(a[0]=o*r+s*n,a[1]=i*r+l*n,a[4]=s*r-o*n,a[5]=l*r-i*n):(a[0]=r,a[1]=n,a[4]=-n,a[5]=r),e._matrixDirty=!0},e.scale=(t=1,r,n=1)=>{r??=t;let a=e._matrix;a[0]*=t,a[1]*=t,a[2]*=t,a[3]*=t,a[4]*=r,a[5]*=r,a[6]*=r,a[7]*=r,a[8]*=n,a[9]*=n,a[10]*=n,a[11]*=n,e._matrixDirty=!0},e.shearX=t=>{if(!t)return;e._angleMode&&(t*=e._DEGTORAD);let r=Math.tan(t),n=e._matrix[0],a=e._matrix[1],o=e._matrix[4],i=e._matrix[5];e._matrix[0]=n+o*r,e._matrix[1]=a+i*r,e._matrixDirty=!0},e.shearY=t=>{if(!t)return;e._angleMode&&(t*=e._DEGTORAD);let r=Math.tan(t),n=e._matrix[0],a=e._matrix[1],o=e._matrix[4],i=e._matrix[5];e._matrix[4]=o+n*r,e._matrix[5]=i+a*r,e._matrixDirty=!0},e.applyMatrix=(...t)=>{let r;if(r=1==t.length?t[0]:t,9==r.length)r=[r[0],r[1],0,r[2],r[3],r[4],0,r[5],0,0,1,0,r[6],r[7],0,r[8]];else if(16!=r.length)throw new Error("Matrix must be a 3x3 or 4x4 array.");e._matrix=r.slice(),e._matrixDirty=!0},e._saveMatrix=()=>{c.push(e._matrix.slice()),e._transformIndex=c.length-1,e._matrixDirty=!1},e.pushMatrix=()=>{e._matrixDirty&&e._saveMatrix(),e._transformIndexStack.push(e._transformIndex)},e.popMatrix=()=>{if(!e._transformIndexStack.length)return console.warn("Matrix index stack is empty!");let t=e._transformIndexStack.pop();e._matrix=c[t].slice(),e._transformIndex=t,e._matrixDirty=!1},e.push=()=>{e.pushMatrix(),e.pushStyles()},e.pop=()=>{e.popMatrix(),e.popStyles()},e._calcBox=(e,t,r,n,a)=>{let o,i,s,l,d=r/2,c=n/2;return a&&"corner"!=a?"center"==a?(o=e-d,i=e+d,s=-(t-c),l=-(t+c)):(o=e,i=r,s=-t,l=-n):(o=e,i=e+r,s=-t,l=-(t+n)),[o,i,s,l]};let h=["zero","one","src-alpha","one-minus-src-alpha","dst","dst-alpha","one-minus-dst-alpha","one-minus-src"],u=["add","subtract","reverse-subtract","min","max"];const p={normal:[2,3,0,2,3,0],additive:[1,1,0,1,1,0]};e.blendConfigs={};for(const[t,r]of Object.entries(p))e.blendConfigs[t]={color:{srcFactor:h[r[0]],dstFactor:h[r[1]],operation:u[r[2]]},alpha:{srcFactor:h[r[3]],dstFactor:h[r[4]],operation:u[r[5]]}};e._blendMode="normal",e.blendMode=t=>{if(t!=e._blendMode){"source-over"==t&&(t="normal"),"lighter"==t&&(t="additive"),t=t.toLowerCase().replace(/[ -]/g,"_"),e._blendMode=t;for(let r=0;r{},e._beginRender=()=>{e.encoder=Q5.device.createCommandEncoder(),r=t.pass=e.encoder.beginRenderPass({label:"q5-webgpu",colorAttachments:[{view:e.ctx.getCurrentTexture().createView(),loadOp:"clear",storeOp:"store"}]})},e._render=()=>{if(c.length>1||!e._transformBindGroup){let t=Q5.device.createBuffer({size:64*c.length,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(c.flat()),t.unmap(),e._transformBindGroup=Q5.device.createBindGroup({layout:e._transformLayout,entries:[{binding:0,resource:{buffer:s}},{binding:1,resource:{buffer:t}}]})}r.setBindGroup(0,e._transformBindGroup);const t=Q5.device.createBuffer({size:4*i.length,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(i),t.unmap(),e._colorsBindGroup=Q5.device.createBindGroup({layout:n,entries:[{binding:0,resource:{buffer:t}}]}),e.pass.setBindGroup(1,e._colorsBindGroup);for(let t of e._hooks.preRender)t();let a=0,l=0,d=0,h=-1;for(let t=0;t{r.end();let n=e.encoder.finish();Q5.device.queue.submit([n]),t.pass=e.encoder=null,e.drawStack.length=0,e.colorsStack.length=8,l=1,rotation=0,c.length=1,e._transformIndexStack.length=0}},Q5.initWebGPU=async()=>{if(!navigator.gpu)return console.warn("q5 WebGPU not supported on this browser!"),!1;if(!Q5.device){let e=await navigator.gpu.requestAdapter();if(!e)throw new Error("No appropriate GPUAdapter found.");Q5.device=await e.requestDevice()}return!0},Q5.webgpu=async function(e,t){if(e&&"global"!=e||(Q5._hasGlobal=!0),!await Q5.initWebGPU()){let r=new Q5(e,t);return r.colorMode("rgb",1),r._beginRender=()=>r.translate(r.canvas.hw,r.canvas.hh),r}return new Q5(e,t,"webgpu")},Q5.renderers.webgpu.drawing=(e,t)=>{let r,n,a=e.canvas,o=e.drawStack,i=[],s=Q5.device.createShaderModule({label:"drawingVertexShader",code:"\nstruct VertexOutput {\n\t@builtin(position) position: vec4f,\n\t@location(0) colorIndex: f32\n};\n\nstruct Uniforms {\n\thalfWidth: f32,\n\thalfHeight: f32\n};\n\n@group(0) @binding(0) var uniforms: Uniforms;\n@group(0) @binding(1) var transforms: array>;\n\n@vertex\nfn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput {\n\tvar vert = vec4f(pos, 0.0, 1.0);\n\tvert = transforms[i32(transformIndex)] * vert;\n\tvert.x /= uniforms.halfWidth;\n\tvert.y /= uniforms.halfHeight;\n\n\tvar output: VertexOutput;\n\toutput.position = vert;\n\toutput.colorIndex = colorIndex;\n\treturn output;\n}\n"}),l=Q5.device.createShaderModule({label:"drawingFragmentShader",code:"\n@group(1) @binding(0) var colors : array;\n\n@fragment\nfn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {\n\tlet index = i32(colorIndex);\n\treturn mix(colors[index], colors[index + 1], fract(colorIndex));\n}\n"}),d=Q5.device.createPipelineLayout({label:"drawingPipelineLayout",bindGroupLayouts:e.bindGroupLayouts});e._pipelineConfigs[0]={label:"drawingPipeline",layout:d,vertex:{module:s,entryPoint:"vertexMain",buffers:[{arrayStride:16,attributes:[{format:"float32x2",offset:0,shaderLocation:0},{format:"float32",offset:8,shaderLocation:1},{format:"float32",offset:12,shaderLocation:2}]}]},fragment:{module:l,entryPoint:"fragmentMain",targets:[{format:"bgra8unorm",blend:e.blendConfigs.normal}]},primitive:{topology:"triangle-list"}},e._pipelines[0]=Q5.device.createRenderPipeline(e._pipelineConfigs[0]),e.beginShape=()=>{n=[]},e.vertex=(t,r)=>{e._matrixDirty&&e._saveMatrix(),n.push(t,-r,e._fillIndex,e._transformIndex)},e.endShape=t=>{if(!e._doFill)return void(n=[]);let r=n;if(r.length<12)throw new Error("A shape must have at least 3 vertices.");t&&r.push(r[0],r[1],r[2],r[3]);let a=[];for(let e=4;e{e.beginShape(),e.vertex(t,r),e.vertex(n,a),e.vertex(o,i),e.endShape(1)},e.quad=(t,r,n,a,o,i,s,l)=>{e.beginShape(),e.vertex(t,r),e.vertex(n,a),e.vertex(o,i),e.vertex(s,l),e.endShape(1)},e.rectMode=t=>e._rectMode=t,e.rect=(t,n,a,s)=>{let l,d,[c,h,u,p]=e._calcBox(t,n,a,s,e._rectMode);if(e._doFill&&(l=r??e._fillIndex,e._matrixDirty&&e._saveMatrix(),d=e._transformIndex,i.push(c,u,l,d,h,u,l,d,c,p,l,d,h,u,l,d,c,p,l,d,h,p,l,d),o.push(0,6)),e._doStroke){l=e._strokeIndex;let t=e._strokeWeight/2,r=u-t,n=p+t,a=c-t,s=h+t,d=u+t,f=p-t,g=c+t,_=h-t;i.push(a,r,l,d,s,r,l,d,a,d,l,d,a,d,l,d,s,r,l,d,s,d,l,d,s,r,l,d,s,n,l,d,_,r,l,d,_,r,l,d,s,n,l,d,_,n,l,d,s,n,l,d,a,n,l,d,s,f,l,d,s,f,l,d,a,n,l,d,a,f,l,d,a,n,l,d,a,r,l,d,g,n,l,d,g,n,l,d,a,r,l,d,g,r,l,d),o.push(0,24)}},e.square=(t,r,n)=>e.rect(t,r,n,n),e.point=(t,n)=>{r=e._strokeIndex;let a=e._strokeWeight;a<2?(a=Math.round(a),e.rect(t,n,a,a)):e.ellipse(t,n,a,a),r=null},e.line=(t,n,a,o)=>{r=e._strokeIndex,e.push(),e.translate(t,n),e.rotate(e.atan2(o-n,a-t));let i=Math.sqrt((a-t)**2+(o-n)**2),s=e._strokeWeight;e.rect(0,-s/2,i,s),e.pop(),r=null},e.background=(t,r,n,o)=>{if(e.push(),e.resetMatrix(),e._doStroke=!1,t.src){let r=e._imageMode;e._imageMode="corner",e.image(t,-a.hw,-a.hh,a.w,a.h),e._imageMode=r}else{let i=e._rectMode;e._rectMode="corner",e.fill(t,r,n,o),e.rect(-a.hw,-a.hh,a.w,a.h),e._rectMode=i}e.pop(),e._fillSet||(e._fillIndex=1)};e.ellipseMode=t=>e._ellipseMode=t,e.ellipse=(t,n,a,s)=>{const l=(d=a==s?a:Math.max(a,s))<4?6:d<6?8:d<10?10:d<16?12:d<20?14:d<22?16:d<24?18:d<28?20:d<34?22:d<42?24:d<48?26:d<56?28:d<64?30:d<72?32:d<84?34:d<96?36:d<98?38:d<113?40:d<149?44:d<199?48:d<261?52:d<353?56:d<461?60:d<585?64:d<1200?70:d<1800?80:d<2400?90:100;var d;let c=Math.max(a,1)/2,h=a==s?c:Math.max(s,1)/2,u=0;const p=e.TAU/l,f=r??e._fillIndex;e._matrixDirty&&e._saveMatrix();const g=e._transformIndex;let _,x,m,v;for(let e=0;e<=l;e++)_=m,x=v,m=t+c*Math.cos(u),v=n+h*Math.sin(u),u+=p,0!=e&&i.push(t,n,f,g,_,x,f,g,m,v,f,g);o.push(0,3*l)},e.circle=(t,r,n)=>e.ellipse(t,r,n,n),e._hooks.preRender.push((()=>{e.pass.setPipeline(e._pipelines[0]);const t=Q5.device.createBuffer({size:4*i.length,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(i),t.unmap(),e.pass.setVertexBuffer(0,t)})),e._hooks.postRender.push((()=>{i.length=0}))},Q5.renderers.webgpu.image=(e,t)=>{e._textureBindGroups=[];let r=[],n=Q5.device.createShaderModule({label:"imageVertexShader",code:"\nstruct VertexOutput {\n\t@builtin(position) position: vec4f,\n\t@location(0) texCoord: vec2f\n};\n\nstruct Uniforms {\n\thalfWidth: f32,\n\thalfHeight: f32\n};\n\n@group(0) @binding(0) var uniforms: Uniforms;\n@group(0) @binding(1) var transforms: array>;\n\n@vertex\nfn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput {\n\tvar vert = vec4f(pos, 0.0, 1.0);\n\tvert = transforms[i32(transformIndex)] * vert;\n\tvert.x /= uniforms.halfWidth;\n\tvert.y /= uniforms.halfHeight;\n\n\tvar output: VertexOutput;\n\toutput.position = vert;\n\toutput.texCoord = texCoord;\n\treturn output;\n}\n\t"}),a=Q5.device.createShaderModule({label:"imageFragmentShader",code:"\n@group(2) @binding(0) var samp: sampler;\n@group(2) @binding(1) var texture: texture_2d;\n\n@fragment\nfn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {\n\t// Sample the texture using the interpolated texture coordinate\n\treturn textureSample(texture, samp, texCoord);\n}\n\t"}),o=Q5.device.createBindGroupLayout({label:"textureLayout",entries:[{binding:0,visibility:GPUShaderStage.FRAGMENT,sampler:{type:"filtering"}},{binding:1,visibility:GPUShaderStage.FRAGMENT,texture:{viewDimension:"2d",sampleType:"float"}}]});const i=Q5.device.createPipelineLayout({label:"imagePipelineLayout",bindGroupLayouts:[...e.bindGroupLayouts,o]});e._pipelineConfigs[1]={label:"imagePipeline",layout:i,vertex:{module:n,entryPoint:"vertexMain",buffers:[{arrayStride:0,attributes:[]},{arrayStride:20,attributes:[{shaderLocation:0,offset:0,format:"float32x2"},{shaderLocation:1,offset:8,format:"float32x2"},{shaderLocation:2,offset:16,format:"float32"}]}]},fragment:{module:a,entryPoint:"fragmentMain",targets:[{format:"bgra8unorm",blend:e.blendConfigs.normal}]},primitive:{topology:"triangle-list"}},e._pipelines[1]=Q5.device.createRenderPipeline(e._pipelineConfigs[1]);let s=Q5.device.createSampler({magFilter:"linear",minFilter:"linear"});e._textures=[];let l=0;e._createTexture=t=>{t.canvas&&(t=t.canvas);let r=[t.width,t.height,1],n=Q5.device.createTexture({size:r,format:"bgra8unorm",usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT});Q5.device.queue.copyExternalImageToTexture({source:t},{texture:n,colorSpace:e.canvas.colorSpace},r),e._textures[l]=n,t.textureIndex=l;const a=Q5.device.createBindGroup({layout:o,entries:[{binding:0,resource:s},{binding:1,resource:n.createView()}]});e._textureBindGroups[l]=a,l=(l+1)%12e3,e._textures[l]&&(e._textures[l].destroy(),delete e._textures[l],delete e._textureBindGroups[l])},e.loadImage=e.loadTexture=r=>{t._preloadCount++;const n=new Image;return n.crossOrigin="Anonymous",n.onload=()=>{e._createTexture(n),t._preloadCount--},n.src=r,n},e.imageMode=t=>e._imageMode=t,e.image=(t,n,a,o,i)=>{if(t.canvas&&(t=t.canvas),null==t.textureIndex)return;e._matrixDirty&&e._saveMatrix();let s=e._transformIndex;o??=t.width/e._pixelDensity,i??=t.height/e._pixelDensity;let[l,d,c,h]=e._calcBox(n,a,o,i,e._imageMode);r.push(l,c,0,0,s,d,c,1,0,s,l,h,0,1,s,d,c,1,0,s,l,h,0,1,s,d,h,1,1,s),e.drawStack.push(1,t.textureIndex)},e._hooks.preRender.push((()=>{if(!e._textureBindGroups.length)return;e.pass.setPipeline(e._pipelines[1]);const t=Q5.device.createBuffer({size:4*r.length,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(vertices),t.unmap(),e.pass.setVertexBuffer(1,t)})),e._hooks.postRender.push((()=>{r.length=0}))},Q5.THRESHOLD=1,Q5.GRAY=2,Q5.OPAQUE=3,Q5.INVERT=4,Q5.POSTERIZE=5,Q5.DILATE=6,Q5.ERODE=7,Q5.BLUR=8,Q5.renderers.webgpu.text=(e,t)=>{let r=Q5.device.createShaderModule({label:"MSDF text shader",code:"\n// Positions for simple quad geometry\nconst pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));\n\nstruct VertexInput {\n\t@builtin(vertex_index) vertex : u32,\n\t@builtin(instance_index) instance : u32,\n};\nstruct VertexOutput {\n\t@builtin(position) position : vec4f,\n\t@location(0) texcoord : vec2f,\n\t@location(1) colorIndex : f32\n};\nstruct Char {\n\ttexOffset: vec2f,\n\ttexExtent: vec2f,\n\tsize: vec2f,\n\toffset: vec2f,\n};\nstruct Text {\n\tpos: vec2f,\n\tscale: f32,\n\ttransformIndex: f32,\n\tfillIndex: f32,\n\tstrokeIndex: f32\n};\nstruct Uniforms {\n\thalfWidth: f32,\n\thalfHeight: f32\n};\n\n@group(0) @binding(0) var uniforms: Uniforms;\n@group(0) @binding(1) var transforms: array>;\n\n@group(1) @binding(0) var colors : array;\n\n@group(2) @binding(0) var fontTexture: texture_2d;\n@group(2) @binding(1) var fontSampler: sampler;\n@group(2) @binding(2) var fontChars: array;\n\n@group(3) @binding(0) var textChars: array;\n@group(3) @binding(1) var textMetadata: array;\n\n@vertex\nfn vertexMain(input : VertexInput) -> VertexOutput {\n\tlet char = textChars[input.instance];\n\n\tlet text = textMetadata[i32(char.w)];\n\n\tlet fontChar = fontChars[i32(char.z)];\n\n\tlet charPos = ((pos[input.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;\n\n\tvar vert = vec4f(charPos, 0.0, 1.0);\n\tvert = transforms[i32(text.transformIndex)] * vert;\n\tvert.x /= uniforms.halfWidth;\n\tvert.y /= uniforms.halfHeight;\n\n\tvar output : VertexOutput;\n\toutput.position = vert;\n\toutput.texcoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;\n\toutput.colorIndex = text.fillIndex;\n\treturn output;\n}\n\nfn sampleMsdf(texcoord: vec2f) -> f32 {\n\tlet c = textureSample(fontTexture, fontSampler, texcoord);\n\treturn max(min(c.r, c.g), min(max(c.r, c.g), c.b));\n}\n\n@fragment\nfn fragmentMain(input : VertexOutput) -> @location(0) vec4f {\n\t// pxRange (AKA distanceRange) comes from the msdfgen tool,\n\t// uses the default which is 4.\n\tlet pxRange = 4.0;\n\tlet sz = vec2f(textureDimensions(fontTexture, 0));\n\tlet dx = sz.x*length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));\n\tlet dy = sz.y*length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));\n\tlet toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);\n\tlet sigDist = sampleMsdf(input.texcoord) - 0.5;\n\tlet pxDist = sigDist * toPixels;\n\tlet edgeWidth = 0.5;\n\tlet alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);\n\tif (alpha < 0.001) {\n\t\tdiscard;\n\t}\n\tlet fillColor = colors[i32(input.colorIndex)];\n\treturn vec4f(fillColor.rgb, fillColor.a * alpha);\n}\n"}),n=Q5.device.createBindGroupLayout({label:"MSDF text group layout",entries:[{binding:0,visibility:GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT,buffer:{type:"read-only-storage"}},{binding:1,visibility:GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT,buffer:{type:"read-only-storage"}}]}),a=Q5.device.createSampler({minFilter:"linear",magFilter:"linear",mipmapFilter:"linear",maxAnisotropy:16}),o=Q5.device.createBindGroupLayout({label:"MSDF font group layout",entries:[{binding:0,visibility:GPUShaderStage.FRAGMENT,texture:{}},{binding:1,visibility:GPUShaderStage.FRAGMENT,sampler:{}},{binding:2,visibility:GPUShaderStage.VERTEX,buffer:{type:"read-only-storage"}}]}),i=Q5.device.createPipelineLayout({bindGroupLayouts:[...e.bindGroupLayouts,o,n]});e._pipelineConfigs[2]={label:"msdf font pipeline",layout:i,vertex:{module:r,entryPoint:"vertexMain"},fragment:{module:r,entryPoint:"fragmentMain",targets:[{format:"bgra8unorm",blend:e.blendConfigs.normal}]},primitive:{topology:"triangle-strip",stripIndexFormat:"uint32"}},e._pipelines[2]=Q5.device.createRenderPipeline(e._pipelineConfigs[2]);class s{constructor(e,t,r,n){this.bindGroup=e,this.lineHeight=t,this.chars=r,this.kernings=n;let a=Object.values(r);this.charCount=a.length,this.defaultChar=a[0]}getChar(e){return this.chars[e]??this.defaultChar}getXAdvance(e,t=-1){let r=this.getChar(e);if(t>=0){let n=this.kernings.get(e);if(n)return r.xadvance+(n.get(t)??0)}return r.xadvance}}let l={},d=e.createGraphics(1,1);d.colorMode(e.RGB,1),e.loadFont=(r,n)=>{if("json"!=r.slice(r.lastIndexOf(".")+1))return d.loadFont(r,n);let i=r.slice(r.lastIndexOf("/")+1,r.lastIndexOf("-"));return(async(r,n,i)=>{t._preloadCount++;let d=await fetch(r);if(404==d.status)return t._preloadCount--,"";let c=await d.json(),h=r.lastIndexOf("/"),u=-1!=h?r.substring(0,h+1):"";d=await fetch(u+c.pages[0]);let p=await createImageBitmap(await d.blob()),f=[p.width,p.height,1],g=Q5.device.createTexture({label:`MSDF ${n}`,size:f,format:"rgba8unorm",usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT});Q5.device.queue.copyExternalImageToTexture({source:p},{texture:g},f),"string"==typeof c.chars&&(c.chars=e.CSV.parse(c.chars," "),c.kernings=e.CSV.parse(c.kernings," "));let _=c.chars.length,x=Q5.device.createBuffer({size:32*_,usage:GPUBufferUsage.STORAGE,mappedAtCreation:!0}),m=new Float32Array(x.getMappedRange()),v=1/c.common.scaleW,y=1/c.common.scaleH,w={},b=0;for(let[e,t]of c.chars.entries())w[t.id]=t,w[t.id].charIndex=e,m[b]=t.x*v,m[b+1]=t.y*y,m[b+2]=t.width*v,m[b+3]=t.height*y,m[b+4]=t.width,m[b+5]=t.height,m[b+6]=t.xoffset,m[b+7]=-t.yoffset,b+=8;x.unmap();let S=Q5.device.createBindGroup({label:"msdf font bind group",layout:o,entries:[{binding:0,resource:g.createView()},{binding:1,resource:a},{binding:2,resource:{buffer:x}}]}),M=new Map;if(c.kernings)for(let e of c.kernings){let t=M.get(e.first);t||(t=new Map,M.set(e.first,t)),t.set(e.second,e.amount)}e._font=new s(S,c.common.lineHeight,w,M),l[n]=e._font,t._preloadCount--,i&&i(n)})(r,i,n),i},e._textSize=18,e._textAlign="left",e._textBaseline="alphabetic";let c=!1,h=22.5,u=4.5,p=1.25;e.textFont=t=>{e._font=l[t],e.drawStack.push(-1,(()=>{e._font=l[t]}))},e.textSize=t=>{e._textSize=t,c||(h=t*p,u=h-t)},e.textLeading=t=>{e._font.lineHeight=h=t,u=h-e._textSize,p=h/e._textSize,c=!0},e.textAlign=(t,r)=>{e._textAlign=t,r&&(e._textBaseline=r)},e._charStack=[],e._textStack=[];let f,g=(e,t,r)=>{let n=0,a=0,o=0,i=0,s=0,l=[],d=t.charCodeAt(0);for(let c=0;c{if(!e._font)return void(navigator.onLine&&!f&&(f=!0,e.loadFont("https://q5js.org/fonts/YaHei-msdf.json")));if(t.length>a){let e=[],r=0;for(;r=t.length){e.push(t.slice(r));break}let o=t.lastIndexOf(" ",n);(-1==o||o{let o=0;"center"==c?o=-.5*l.width- -.5*(l.width-l.lineWidths[n]):"right"==c&&(o=l.width-l.lineWidths[n]),d[_]=e+o,d[_+1]=t+r,d[_+2]=a.charIndex,d[_+3]=p,_+=4}))}else l=g(e._font,t,((e,t,r,n)=>{d[_]=e,d[_+1]=t,d[_+2]=n.charIndex,d[_+3]=p,_+=4})),"alphabetic"==u?n-=e._textSize:"center"==u?n-=.5*e._textSize:"bottom"==u&&(n-=h);e._charStack.push(d);let x=new Float32Array(6);e._matrixDirty&&e._saveMatrix(),x[0]=r,x[1]=-n,x[2]=e._textSize/44,x[3]=e._transformIndex,x[4]=e._fillSet?e._fillIndex:0,x[5]=e._strokeIndex,e._textStack.push(x),e.drawStack.push(2,l.printedCharCount)},e.textWidth=t=>e._font?g(e._font,t).width:0,e.createTextImage=(t,r,n)=>{if(d.textSize(e._textSize),e._doFill){let t=4*e._fillIndex;d.fill(colorsStack.slice(t,t+4))}if(e._doStroke){let t=4*e._strokeIndex;d.stroke(colorsStack.slice(t,t+4))}let a=d.createTextImage(t,r,n);if(null==a.canvas.textureIndex)e._createTexture(a);else if(a.modified){let t=a.canvas,r=[t.width,t.height,1],n=e._textures[t.textureIndex];Q5.device.queue.copyExternalImageToTexture({source:t},{texture:n,colorSpace:e.canvas.colorSpace},r),a.modified=!1}return a},e.textImage=(t,r,n)=>{"string"==typeof t&&(t=e.createTextImage(t));let a=e._imageMode;e._imageMode="corner";let o=e._textAlign;"center"==o?r-=t.canvas.hw:"right"==o&&(r-=t.width);let i=e._textBaseline;"alphabetic"==i?n-=t._leading:"center"==i?n-=t._middle:"bottom"==i?n-=t._bottom:"top"==i&&(n-=t._top),e.image(t,r,n),e._imageMode=a},e._hooks.preRender.push((()=>{if(!e._charStack.length)return;let t=0;for(let r of e._charStack)t+=4*r.length;let r=Q5.device.createBuffer({size:t,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0}),a=new Float32Array(r.getMappedRange()),o=0;for(let t of e._charStack)a.set(t,o),o+=t.length;r.unmap();let i=6*e._textStack.length*4,s=Q5.device.createBuffer({label:"textBuffer",size:i,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0}),l=new Float32Array(s.getMappedRange());o=0;for(let t of e._textStack)l.set(t,o),o+=t.length;s.unmap(),e._textBindGroup=Q5.device.createBindGroup({label:"msdf text bind group",layout:n,entries:[{binding:0,resource:{buffer:r}},{binding:1,resource:{buffer:s}}]})})),e._hooks.postRender.push((()=>{e._charStack.length=0,e._textStack.length=0}))}; +function Q5(e,t,r){let a,n=this;if(n._q5=!0,n._parent=t,n._renderer=r||"q2d",n._preloadCount=0,e??="global","auto"==e){if(!window.setup&&!window.draw)return;e="global"}n._scope=e,"global"==e&&(Q5._hasGlobal=n._isGlobal=!0,a=Q5._nodejs?global:window);let o=new Proxy(n,{set:(e,t,r)=>(n[t]=r,n._isGlobal&&(a[t]=r),!0)});n.canvas=n.ctx=n.drawingContext=null,n.pixels=[];let i=null;n.frameCount=0,n.deltaTime=16,n._targetFrameRate=0,n._targetFrameDuration=16.666666666666668,n._frameRate=n._fps=60,n._loop=!0,n._hooks={postCanvas:[],preRender:[],postRender:[]};let s=0;n.millis=()=>performance.now()-s,n.noCanvas=()=>{n.canvas?.remove&&n.canvas.remove(),n.canvas=0,o.ctx=o.drawingContext=0},window&&(n.windowWidth=window.innerWidth,n.windowHeight=window.innerHeight,n.deviceOrientation=window.screen?.orientation?.type),n._incrementPreload=()=>o._preloadCount++,n._decrementPreload=()=>o._preloadCount--,n._draw=e=>{let t=e||performance.now();if(n._lastFrameTime??=t-n._targetFrameDuration,n._didResize&&(n.windowResized(),n._didResize=!1),n._loop)i=d(n._draw);else if(n.frameCount&&!n._redraw)return;if(i&&n.frameCount){if(t-n._lastFrameTime{n._loop=!1,i=null},n.loop=()=>{n._loop=!0,null==i&&n._draw()},n.isLooping=()=>n._loop,n.redraw=(e=1)=>{n._redraw=!0;for(let t=0;t{n.noLoop(),n.canvas.remove()},n.frameRate=e=>(e&&(n._targetFrameRate=e,n._targetFrameDuration=1e3/e),n._frameRate),n.getTargetFrameRate=()=>n._targetFrameRate,n.getFPS=()=>n._fps,n.Element=function(e){this.elt=e},n._elements=[],n.TWO_PI=n.TAU=2*Math.PI,n.log=n.print=console.log,n.describe=()=>{};for(let e in Q5.modules)Q5.modules[e](n,o);let l=Q5.renderers[n._renderer];for(let e in l)l[e](n,o);for(let e in Q5)"_"!=e[1]&&e[1]==e[1].toUpperCase()&&(n[e]=Q5[e]);if("graphics"==e)return;"global"==e&&(Object.assign(Q5,n),delete Q5.Q5);for(let e of Q5.methods.init)e.call(n);for(let[e,t]of Object.entries(Q5.prototype))"_"!=e[0]&&"function"==typeof n[e]&&(n[e]=t.bind(n));if("global"==e){let e=Object.getOwnPropertyNames(n);for(let t of e)"_"!=t[0]&&(a[t]=n[t])}"function"==typeof e&&e(n),Q5._instanceCount++;let d=window.requestAnimationFrame||function(e){const t=n._lastFrameTime+n._targetFrameDuration;return setTimeout((()=>{e(t)}),t-performance.now())},c=a||n;n._isTouchAware=c.touchStarted||c.touchMoved||c.mouseReleased;let h=c.preload,u=["setup","draw","preload","mouseMoved","mousePressed","mouseReleased","mouseDragged","mouseClicked","keyPressed","keyReleased","keyTyped","touchStarted","touchMoved","touchEnded","windowResized"];for(let e of u)c[e]?n._isGlobal&&(n[e]=()=>{try{return c[e]()}catch(e){throw n._aiErrorAssistance&&n._aiErrorAssistance(e),e}}):n[e]=()=>{};async function p(){if(n._startDone=!0,n._preloadCount>0)return d(p);s=performance.now(),await n.setup(),n._setupDone=!0,n.frameCount||(null===n.ctx&&n.createCanvas(100,100),n.ctx&&n.resetMatrix(),d(n._draw))}(n.setup||n.draw)&&(arguments.length&&"namespace"!=e&&"webgpu"!=r||h?(n.preload(),p()):(c.preload=n.preload=()=>{n._startDone||p()},setTimeout(n.preload,32)))}Q5.renderers={},Q5.modules={},Q5._nodejs="object"==typeof process,Q5._instanceCount=0,Q5._friendlyError=(e,t)=>{throw Error(t+": "+e)},Q5._validateParameters=()=>!0,Q5.methods={init:[],pre:[],post:[],remove:[]},Q5.prototype.registerMethod=(e,t)=>Q5.methods[e].push(t),Q5.prototype.registerPreloadMethod=(e,t)=>Q5.prototype[e]=t[e],Q5._nodejs?global.p5??=global.Q5=Q5:"object"==typeof window?window.p5??=window.Q5=Q5:global.window=0,"object"==typeof document&&document.addEventListener("DOMContentLoaded",(()=>{Q5._hasGlobal||new Q5("auto")})),Q5.modules.canvas=(e,t)=>{e.CENTER="center",e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom",e.BASELINE="alphabetic",e.NORMAL="normal",e.ITALIC="italic",e.BOLD="bold",e.BOLDITALIC="italic bold",e.ROUND="round",e.SQUARE="butt",e.PROJECT="square",e.MITER="miter",e.BEVEL="bevel",e.CHORD=0,e.PIE=1,e.OPEN=2,e.RADIUS="radius",e.CORNER="corner",e.CORNERS="corners",e.CLOSE=1,e.LANDSCAPE="landscape",e.PORTRAIT="portrait",e.BLEND="source-over",e.REMOVE="destination-out",e.ADD="lighter",e.DARKEST="darken",e.LIGHTEST="lighten",e.DIFFERENCE="difference",e.SUBTRACT="subtract",e.EXCLUSION="exclusion",e.MULTIPLY="multiply",e.SCREEN="screen",e.REPLACE="copy",e.OVERLAY="overlay",e.HARD_LIGHT="hard-light",e.SOFT_LIGHT="soft-light",e.DODGE="color-dodge",e.BURN="color-burn",e.P2D="2d",e.WEBGL="webgl",e._OffscreenCanvas=window.OffscreenCanvas||function(){return document.createElement("canvas")},Q5._nodejs?Q5._createNodeJSCanvas&&(t.canvas=Q5._createNodeJSCanvas(100,100)):"image"!=e._scope&&"graphics"!=e._scope||(t.canvas=new e._OffscreenCanvas(100,100)),e.canvas||("object"==typeof document?(t.canvas=document.createElement("canvas"),e.canvas.id="q5Canvas"+Q5._instanceCount,e.canvas.classList.add("q5Canvas")):e.noCanvas());let r=e.canvas;if(r.width=e.width=100,r.height=e.height=100,e._pixelDensity=1,e.displayDensity=()=>window.devicePixelRatio||1,"image"!=e._scope&&(r.renderer=e._renderer,r[e._renderer]=!0,e._pixelDensity=Math.ceil(e.displayDensity())),e._adjustDisplay=()=>{r.style&&(r.style.width=r.w+"px",r.style.height=r.h+"px")},e.createCanvas=function(t,a,n){n??=arguments[3];let o=Object.assign({},Q5.canvasOptions);"object"==typeof n&&Object.assign(o,n),"image"!=e._scope&&("graphics"==e._scope?e._pixelDensity=this._pixelDensity:window.IntersectionObserver&&new IntersectionObserver((e=>{r.visible=e[0].isIntersecting})).observe(r)),e._setCanvasSize(t,a),Object.assign(r,o);let i=e._createCanvas(r.w,r.h,o);if(e._hooks)for(let t of e._hooks.postCanvas)t();return i},e.createGraphics=function(t,r,a){let n=new Q5("graphics");return a??={},a.alpha??=!0,a.colorSpace??=e.canvas.colorSpace,n.createCanvas.call(e,t,r,a),n},e._save=async(e,t,r)=>{if(t=t||"untitled","jpg"==(r=r||"png")||"png"==r||"webp"==r)if(e instanceof OffscreenCanvas){const t=await e.convertToBlob({type:"image/"+r});e=await new Promise((e=>{const r=new FileReader;r.onloadend=()=>e(r.result),r.readAsDataURL(t)}))}else e=e.toDataURL("image/"+r);else{let t="text/plain";"json"==r&&("string"!=typeof e&&(e=JSON.stringify(e)),t="text/json"),e=new Blob([e],{type:t}),e=URL.createObjectURL(e)}let a=document.createElement("a");a.href=e,a.download=t+"."+r,a.click(),URL.revokeObjectURL(a.href)},e.save=(t,r,a)=>{if((!t||"string"==typeof t&&(!r||!a&&r.length<5))&&(a=r,r=t,t=e.canvas),a)return e._save(t,r,a);r?(r=r.split("."),e._save(t,r[0],r.at(-1))):e._save(t)},e._setCanvasSize=(a,n)=>{a??=window.innerWidth,n??=window.innerHeight,r.w=a=Math.ceil(a),r.h=n=Math.ceil(n),r.hw=a/2,r.hh=n/2,r.width=Math.ceil(a*e._pixelDensity),r.height=Math.ceil(n*e._pixelDensity),e._da?e.flexibleCanvas(e._dau):(t.width=a,t.height=n),e.displayMode&&!r.displayMode?e.displayMode():e._adjustDisplay()},"image"!=e._scope){if(r&&"graphics"!=e._scope){function a(){let t=e._parent;t??=document.getElementsByTagName("main")[0],t||(t=document.createElement("main"),document.body.append(t)),r.parent(t)}r.parent=t=>{function a(){e.frameCount>1&&(e._didResize=!0,e._adjustDisplay())}r.parentElement&&r.parentElement.removeChild(r),"string"==typeof t&&(t=document.getElementById(t)),t.append(r),"function"==typeof ResizeObserver?(e._ro&&e._ro.disconnect(),e._ro=new ResizeObserver(a),e._ro.observe(t)):e.frameCount||window.addEventListener("resize",a)},document.body?a():document.addEventListener("DOMContentLoaded",a)}e.resizeCanvas=(t,a)=>{if(!e.ctx)return e.createCanvas(t,a);t==r.w&&a==r.h||e._resizeCanvas(t,a)},e.canvas.resize=e.resizeCanvas,e.canvas.save=e.saveCanvas=e.save,e.pixelDensity=t=>t&&t!=e._pixelDensity?(e._pixelDensity=t,e._setCanvasSize(r.w,r.h),t):e._pixelDensity,e.flexibleCanvas=(a=400)=>{a?(e._da=r.width/(a*e._pixelDensity),t.width=e._dau=a,t.height=r.h/r.w*a):e._da=0},e._styleNames=["_doStroke","_doFill","_strokeSet","_fillSet","_tint","_imageMode","_rectMode","_ellipseMode","_textSize","_textAlign","_textBaseline"],e._styles=[],e.pushStyles=()=>{let t={};for(let r of e._styleNames)t[r]=e[r];e._styles.push(t)},e.popStyles=()=>{let t=e._styles.pop();for(let r of e._styleNames)e[r]=t[r]},window&&"graphics"!=e._scope&&window.addEventListener("resize",(()=>{e._didResize=!0,t.windowWidth=window.innerWidth,t.windowHeight=window.innerHeight,t.deviceOrientation=window.screen?.orientation?.type}))}},Q5.canvasOptions={alpha:!1,colorSpace:"display-p3"},window.matchMedia&&matchMedia("(dynamic-range: high) and (color-gamut: p3)").matches?Q5.supportsHDR=!0:Q5.canvasOptions.colorSpace="srgb",Q5.renderers.q2d={},Q5.renderers.q2d.canvas=(e,t)=>{let r=e.canvas;e.colorMode&&e.colorMode("rgb","integer"),e._createCanvas=function(a,n,o){return t.ctx=t.drawingContext=r.getContext("2d",o),"image"!=e._scope&&(e.ctx.fillStyle="white",e.ctx.strokeStyle="black",e.ctx.lineCap="round",e.ctx.lineJoin="miter",e.ctx.textAlign="left"),e.ctx.scale(e._pixelDensity,e._pixelDensity),e.ctx.save(),r},e.clear=()=>{e.ctx.save(),e.ctx.resetTransform(),e.ctx.clearRect(0,0,e.canvas.width,e.canvas.height),e.ctx.restore()},"image"!=e._scope&&(e._resizeCanvas=(t,a)=>{let n,o={};for(let t in e.ctx)"function"!=typeof e.ctx[t]&&(o[t]=e.ctx[t]);if(delete o.canvas,e.frameCount>1){n=new e._OffscreenCanvas(r.width,r.height),n.w=r.w,n.h=r.h,n.getContext("2d").drawImage(r,0,0)}e._setCanvasSize(t,a);for(let t in o)e.ctx[t]=o[t];e.scale(e._pixelDensity),n&&e.ctx.drawImage(n,0,0,n.w,n.h)},e.fill=function(t){if(e._doFill=e._fillSet=!0,Q5.Color&&(t._q5Color||("string"!=typeof t?t=e.color(...arguments):e._namedColors[t]&&(t=e.color(...e._namedColors[t]))),t.a<=0))return e._doFill=!1;e.ctx.fillStyle=e._fill=t.toString()},e.noFill=()=>e._doFill=!1,e.stroke=function(t){if(e._doStroke=e._strokeSet=!0,Q5.Color&&(t._q5Color||("string"!=typeof t?t=e.color(...arguments):e._namedColors[t]&&(t=e.color(...e._namedColors[t]))),t.a<=0))return e._doStroke=!1;e.ctx.strokeStyle=e._stroke=t.toString()},e.strokeWeight=t=>{t||(e._doStroke=!1),e._da&&(t*=e._da),e.ctx.lineWidth=e._strokeWeight=t||1e-4},e.noStroke=()=>e._doStroke=!1,e.opacity=t=>e.ctx.globalAlpha=t,e.translate=(t,r)=>{e._da&&(t*=e._da,r*=e._da),e.ctx.translate(t,r)},e.rotate=t=>{e._angleMode&&(t=e.radians(t)),e.ctx.rotate(t)},e.scale=(t,r)=>{r??=t,e.ctx.scale(t,r)},e.applyMatrix=(t,r,a,n,o,i)=>e.ctx.transform(t,r,a,n,o,i),e.shearX=t=>e.ctx.transform(1,0,e.tan(t),1,0,0),e.shearY=t=>e.ctx.transform(1,e.tan(t),0,1,0,0),e.resetMatrix=()=>{e.ctx.resetTransform(),e.scale(e._pixelDensity)},e.pushMatrix=()=>e.ctx.save(),e.popMatrix=()=>e.ctx.restore(),e.push=()=>{e.ctx.save(),e.pushStyles()},e.pop=()=>{e.ctx.restore(),e.popStyles()},e.createCapture=e=>{var t=document.createElement("video");return t.playsinline="playsinline",t.autoplay="autoplay",navigator.mediaDevices.getUserMedia(e).then((e=>{t.srcObject=e})),t.style.position="absolute",t.style.opacity=1e-5,t.style.zIndex=-1e3,document.body.append(t),t})},Q5.renderers.q2d.drawing=e=>{e._doStroke=!0,e._doFill=!0,e._strokeSet=!1,e._fillSet=!1,e._ellipseMode=e.CENTER,e._rectMode=e.CORNER,e._curveDetail=20,e._curveAlpha=0;let t=!0,r=[];function a(){e._doFill&&e.ctx.fill(),e._doStroke&&e.ctx.stroke()}function n(t,r,n,o,i,s,l,d){if(!e._doFill&&!e._doStroke)return;let c=e._angleMode,h=c?360:e.TAU;if((i%=h)<0&&(i+=h),(s%=h)<0&&(s+=h),0!=i||0!=s){if(i>s&&([i,s]=[s,i]),e.ctx.beginPath(),n==o)c&&(i=e.radians(i),s=e.radians(s)),e.ctx.arc(t,r,n/2,i,s);else{for(let a=0;ae.ctx.globalCompositeOperation=t,e.strokeCap=t=>e.ctx.lineCap=t,e.strokeJoin=t=>e.ctx.lineJoin=t,e.ellipseMode=t=>e._ellipseMode=t,e.rectMode=t=>e._rectMode=t,e.curveDetail=t=>e._curveDetail=t,e.curveAlpha=t=>e._curveAlpha=t,e.curveTightness=t=>e._curveAlpha=t,e.background=function(t){e.ctx.save(),e.ctx.resetTransform(),t.canvas?e.image(t,0,0,e.width,e.height):(Q5.Color&&!t._q5Color&&("string"!=typeof t?t=e.color(...arguments):e._namedColors[t]&&(t=e.color(...e._namedColors[t]))),e.ctx.fillStyle=t.toString(),e.ctx.fillRect(0,0,e.canvas.width,e.canvas.height)),e.ctx.restore()},e.line=(t,r,a,n)=>{e._doStroke&&(e._da&&(t*=e._da,r*=e._da,a*=e._da,n*=e._da),e.ctx.beginPath(),e.ctx.moveTo(t,r),e.ctx.lineTo(a,n),e.ctx.stroke())},e.arc=(t,r,a,o,i,s,l,d=25)=>{if(i==s)return e.ellipse(t,r,a,o);l??=e.PIE,e._ellipseMode==e.CENTER?n(t,r,a,o,i,s,l,d):e._ellipseMode==e.RADIUS?n(t,r,2*a,2*o,i,s,l,d):e._ellipseMode==e.CORNER?n(t+a/2,r+o/2,a,o,i,s,l,d):e._ellipseMode==e.CORNERS&&n((t+a)/2,(r+o)/2,a-t,o-r,i,s,l,d)},e.ellipse=(t,r,a,n)=>{n??=a,e._ellipseMode==e.CENTER?o(t,r,a,n):e._ellipseMode==e.RADIUS?o(t,r,2*a,2*n):e._ellipseMode==e.CORNER?o(t+a/2,r+n/2,a,n):e._ellipseMode==e.CORNERS&&o((t+a)/2,(r+n)/2,a-t,n-r)},e.circle=(t,r,n)=>{e._ellipseMode==e.CENTER?(e._da&&(t*=e._da,r*=e._da,n*=e._da),e.ctx.beginPath(),e.ctx.arc(t,r,n/2,0,e.TAU),a()):e.ellipse(t,r,n,n)},e.point=(t,r)=>{t.x&&(r=t.y,t=t.x),e._da&&(t*=e._da,r*=e._da),e.ctx.save(),e.ctx.beginPath(),e.ctx.arc(t,r,e.ctx.lineWidth/2,0,e.TAU),e.ctx.fillStyle=e.ctx.strokeStyle,e.ctx.fill(),e.ctx.restore()},e.rect=(t,r,a,n=a,o,s,l,d)=>{e._rectMode==e.CENTER?i(t-a/2,r-n/2,a,n,o,s,l,d):e._rectMode==e.RADIUS?i(t-a,r-n,2*a,2*n,o,s,l,d):e._rectMode==e.CORNER?i(t,r,a,n,o,s,l,d):e._rectMode==e.CORNERS&&i(t,r,a-t,n-r,o,s,l,d)},e.square=(t,r,a,n,o,i,s)=>e.rect(t,r,a,a,n,o,i,s),e.beginShape=()=>{r=[],e.ctx.beginPath(),t=!0},e.beginContour=()=>{e.ctx.closePath(),r=[],t=!0},e.endContour=()=>{r=[],t=!0},e.vertex=(a,n)=>{e._da&&(a*=e._da,n*=e._da),r=[],t?e.ctx.moveTo(a,n):e.ctx.lineTo(a,n),t=!1},e.bezierVertex=(t,a,n,o,i,s)=>{e._da&&(t*=e._da,a*=e._da,n*=e._da,o*=e._da,i*=e._da,s*=e._da),r=[],e.ctx.bezierCurveTo(t,a,n,o,i,s)},e.quadraticVertex=(t,a,n,o)=>{e._da&&(t*=e._da,a*=e._da,n*=e._da,o*=e._da),r=[],e.ctx.quadraticCurveTo(t,a,n,o)},e.bezier=(t,r,a,n,o,i,s,l)=>{e.beginShape(),e.vertex(t,r),e.bezierVertex(a,n,o,i,s,l),e.endShape()},e.triangle=(t,r,a,n,o,i)=>{e.beginShape(),e.vertex(t,r),e.vertex(a,n),e.vertex(o,i),e.endShape(e.CLOSE)},e.quad=(t,r,a,n,o,i,s,l)=>{e.beginShape(),e.vertex(t,r),e.vertex(a,n),e.vertex(o,i),e.vertex(s,l),e.endShape(e.CLOSE)},e.endShape=t=>{r=[],t&&e.ctx.closePath(),a()},e.curveVertex=(a,n)=>{if(e._da&&(a*=e._da,n*=e._da),r.push([a,n]),r.length<4)return;let o=function(e,t,r,a,n,o,i,s,l,d){function c(e,t,r,a,n,o){let i=Math.pow(a-t,2)+Math.pow(n-r,2);return Math.pow(i,.5*o)+e}let h=[],u=c(0,e,t,r,a,d),p=c(u,r,a,n,o,d),f=c(p,n,o,i,s,d);for(let d=0;d0?(_[e]=1,_[e+1]=0):(_[e]=0,_[e+1]=1));let g=e*_[0]+r*_[1],x=t*_[0]+a*_[1],m=r*_[2]+n*_[3],v=a*_[2]+o*_[3],y=n*_[4]+i*_[5],w=o*_[4]+s*_[5],b=g*_[6]+m*_[7],S=x*_[6]+v*_[7],C=m*_[8]+y*_[9],M=v*_[8]+w*_[9],R=b*_[2]+C*_[3],E=S*_[2]+M*_[3];h.push([R,E])}return h}(...r.at(-4),...r.at(-3),...r.at(-2),...r.at(-1),e._curveDetail,e._curveAlpha);for(let r=0;r{e.beginShape(),e.curveVertex(t,r),e.curveVertex(a,n),e.curveVertex(o,i),e.curveVertex(s,l),e.endShape()},e.curvePoint=(e,t,r,a,n)=>{const o=n*n*n,i=n*n;return e*(-.5*o+i-.5*n)+t*(1.5*o-2.5*i+1)+r*(-1.5*o+2*i+.5*n)+a*(.5*o-.5*i)},e.bezierPoint=(e,t,r,a,n)=>{const o=1-n;return Math.pow(o,3)*e+3*Math.pow(o,2)*n*t+3*o*Math.pow(n,2)*r+Math.pow(n,3)*a},e.curveTangent=(e,t,r,a,n)=>{const o=n*n;return e*(-3*o/2+2*n-.5)+t*(9*o/2-5*n)+r*(-9*o/2+4*n+.5)+a*(3*o/2-n)},e.bezierTangent=(e,t,r,a,n)=>{const o=1-n;return 3*a*Math.pow(n,2)-3*r*Math.pow(n,2)+6*r*o*n-6*t*o*n+3*t*Math.pow(o,2)-3*e*Math.pow(o,2)},e.erase=function(t=255,r=255){e.ctx.save(),e.ctx.globalCompositeOperation="destination-out",e.ctx.fillStyle=`rgba(0, 0, 0, ${t/255})`,e.ctx.strokeStyle=`rgba(0, 0, 0, ${r/255})`},e.noErase=function(){e.ctx.globalCompositeOperation="source-over",e.ctx.restore()},e.inFill=(t,r)=>{const a=e._pixelDensity;return e.ctx.isPointInPath(t*a,r*a)},e.inStroke=(t,r)=>{const a=e._pixelDensity;return e.ctx.isPointInStroke(t*a,r*a)}},Q5.renderers.q2d.image=(e,t)=>{Q5.Image??=class{constructor(e,t,r){let a=this;a._scope="image",a.canvas=a.ctx=a.drawingContext=null,a.pixels=[],Q5.modules.canvas(a,a);let n=Q5.renderers.q2d;for(let e of["canvas","image","soft_filters"])n[e]&&n[e](a,a);a._pixelDensity=r.pixelDensity||1,a.createCanvas(e,t,r),delete a.createCanvas,a._loop=!1}get w(){return this.width}get h(){return this.height}},e.createImage=(t,r,a)=>(a??={},a.alpha??=!0,a.colorSpace??=e.canvas.colorSpace||Q5.canvasOptions.colorSpace,new Q5.Image(t,r,a)),e.loadImage=function(r,a,n){if(r.canvas)return r;if("gif"==r.slice(-3).toLowerCase())throw new Error("q5 doesn't support GIFs due to their impact on performance. Use a video or animation instead.");t._preloadCount++;let o=[...arguments].at(-1);n="object"==typeof o?o:null;let i=e.createImage(1,1,n);function s(e){i.resize(e.naturalWidth||e.width,e.naturalHeight||e.height),i.ctx.drawImage(e,0,0),t._preloadCount--,a&&a(i)}if(Q5._nodejs&&global.CairoCanvas)global.CairoCanvas.loadImage(r).then(s).catch((e=>{throw t._preloadCount--,e}));else{let e=new window.Image;e.src=r,e.crossOrigin="Anonymous",e._pixelDensity=1,e.onload=()=>s(e),e.onerror=e=>{throw t._preloadCount--,e}}return i},e.imageMode=t=>e._imageMode=t,e.image=(t,r,a,n,o,i=0,s=0,l,d)=>{let c=t.canvas||t;Q5._createNodeJSCanvas&&(c=c.context.canvas),n??=t.width||t.videoWidth,o??=t.height||t.videoHeight,"center"==e._imageMode&&(r-=.5*n,a-=.5*o),e._da&&(r*=e._da,a*=e._da,n*=e._da,o*=e._da,i*=e._da,s*=e._da,l*=e._da,d*=e._da);let h=t._pixelDensity||1;l?l*=h:l=c.width||c.videoWidth,d?d*=h:d=c.height||c.videoHeight,e.ctx.drawImage(c,i*h,s*h,l,d,r,a,n,o),e._tint&&(e.ctx.globalCompositeOperation="multiply",e.ctx.fillStyle=e._tint.toString(),e.ctx.fillRect(r,a,n,o),e.ctx.globalCompositeOperation="source-over")},e._tint=null;let r=null;e._softFilter=()=>{throw new Error("Load q5-2d-soft-filters.js to use software filters.")},e.filter=(t,r)=>{if(!e.ctx.filter)return e._softFilter(t,r);if("string"==typeof t)f=t;else if(t==Q5.GRAY)f="saturate(0%)";else if(t==Q5.INVERT)f="invert(100%)";else if(t==Q5.BLUR){let t=Math.ceil(r*e._pixelDensity)||1;f=`blur(${t}px)`}else{if(t!=Q5.THRESHOLD)return e._softFilter(t,r);{r??=.5;let e=Math.floor(.5/Math.max(r,1e-5)*100);f=`saturate(0%) brightness(${e}%) contrast(1000000%)`}}e.ctx.filter=f,e.ctx.drawImage(e.canvas,0,0,e.canvas.w,e.canvas.h),e.ctx.filter="none"},"image"==e._scope&&(e.resize=(t,r)=>{let a=new e._OffscreenCanvas(e.canvas.width,e.canvas.height);a.getContext("2d",{colorSpace:e.canvas.colorSpace}).drawImage(e.canvas,0,0),e._setCanvasSize(t,r),e.ctx.clearRect(0,0,e.canvas.width,e.canvas.height),e.ctx.drawImage(a,0,0,e.canvas.width,e.canvas.height)}),e._getImageData=(t,r,a,n)=>e.ctx.getImageData(t,r,a,n,{colorSpace:e.canvas.colorSpace}),e.trim=()=>{let t=e._pixelDensity||1,r=e.canvas.width,a=e.canvas.height,n=e._getImageData(0,0,r,a).data,o=r,i=0,s=a,l=0,d=3;for(let e=0;ei&&(i=t),el&&(l=e)),d+=4;return s=Math.floor(s/t),l=Math.floor(l/t),o=Math.floor(o/t),i=Math.floor(i/t),e.get(o,s,i-o+1,l-s+1)},e.mask=t=>{e.ctx.save(),e.ctx.resetTransform();let r=e.ctx.globalCompositeOperation;e.ctx.globalCompositeOperation="destination-in",e.ctx.drawImage(t.canvas,0,0),e.ctx.globalCompositeOperation=r,e.ctx.restore()},e.inset=(t,r,a,n,o,i,s,l)=>{let d=e._pixelDensity||1;e.ctx.drawImage(e.canvas,t*d,r*d,a*d,n*d,o,i,s,l)},e.copy=()=>e.get(),e.get=(t,r,a,n)=>{let o=e._pixelDensity||1;if(void 0!==t&&void 0===a){let a=e._getImageData(t*o,r*o,1,1).data;return[a[0],a[1],a[2],a[3]/255]}t=(t||0)*o,r=(r||0)*o;let i=a=a||e.width,s=n=n||e.height;a*=o,n*=o;let l=e.createImage(a,n);return l.ctx.drawImage(e.canvas,t,r,a,n,0,0,a,n),l._pixelDensity=o,l.width=i,l.height=s,l},e.set=(t,r,a)=>{if(a.canvas){let n=e._tint;return e._tint=null,e.image(a,t,r),void(e._tint=n)}e.pixels.length||e.loadPixels();let n=e._pixelDensity||1;for(let o=0;o{r=e._getImageData(0,0,e.canvas.width,e.canvas.height),t.pixels=r.data},e.updatePixels=()=>{null!=r&&e.ctx.putImageData(r,0,0)},e.smooth=()=>e.ctx.imageSmoothingEnabled=!0,e.noSmooth=()=>e.ctx.imageSmoothingEnabled=!1,"image"!=e._scope&&(e.tint=function(t){e._tint=t._q5Color?t:e.color(...arguments)},e.noTint=()=>e._tint=null)},Q5.THRESHOLD=1,Q5.GRAY=2,Q5.OPAQUE=3,Q5.INVERT=4,Q5.POSTERIZE=5,Q5.DILATE=6,Q5.ERODE=7,Q5.BLUR=8,Q5.renderers.q2d.text=(e,t)=>{e._textAlign="left",e._textBaseline="alphabetic",e._textSize=12;let r="sans-serif",a=!1,n=15,o=3,i="normal",s=!1,l=0,d=[],c=!1,h=!1,u=0,p=12e3,f=e._textCache={};e.loadFont=(e,r)=>{t._preloadCount++;let a=e.split("/").pop().split(".")[0].replace(" ",""),n=new FontFace(a,`url(${e})`);return document.fonts.add(n),n.load().then((()=>{t._preloadCount--,r&&r(a)})),a},e.textFont=e=>{if(!e||e==r)return r;r=e,s=!0,l=-1},e.textSize=t=>{if(null==t||t==e._textSize)return e._textSize;e._da&&(t*=e._da),e._textSize=t,s=!0,l=-1,a||(n=1.25*t,o=n-t)},e.textStyle=e=>{if(!e||e==i)return i;i=e,s=!0,l=-1},e.textLeading=t=>{if(a=!0,null==t||t==n)return n;e._da&&(t*=e._da),n=t,o=t-e._textSize,l=-1},e.textAlign=(t,r)=>{e.ctx.textAlign=e._textAlign=t,r&&(e.ctx.textBaseline=e._textBaseline=r==e.CENTER?"middle":r)},e.textWidth=t=>e.ctx.measureText(t).width,e.textAscent=t=>e.ctx.measureText(t).actualBoundingBoxAscent,e.textDescent=t=>e.ctx.measureText(t).actualBoundingBoxDescent,e.textFill=e.fill,e.textStroke=e.stroke;e.textCache=(e,t)=>(t&&(p=t),void 0!==e&&(c=e),c),e.createTextImage=(t,r,a)=>(h=!0,img=e.text(t,0,0,r,a),h=!1,img);let _=[];e.text=(t,a,g,x,m)=>{if(void 0===t||!e._doFill&&!e._doStroke)return;t=t.toString(),e._da&&(a*=e._da,g*=e._da);let v,y,w,b,S=e.ctx;if(s&&(S.font=`${i} ${e._textSize}px ${r}`,s=!1),(c||h)&&(-1==l&&(()=>{let t=r+e._textSize+i+n,a=5381;for(let e=0;e>>0})(),v=f[t],v&&(v=v[l]),v)){if(v._fill==e._fill&&v._stroke==e._stroke&&v._strokeWeight==e._strokeWeight)return h?v:e.textImage(v,a,g);v.clear()}if(-1==t.indexOf("\n")?_[0]=t:_=t.split("\n"),t.length>x){let e=[];for(let t of _){let r=0;for(;r=t.length){e.push(t.slice(r));break}let n=t.lastIndexOf(" ",a);(-1===n||nm)break;if(_.length=0,e._fillSet||(S.fillStyle=b),c||h){if(d.push(l),(f[t]??={})[l]=v,u++,u>p){let e=Math.ceil(u/2),t=d.splice(0,e);for(let e in f){e=f[e];for(let r of t)delete e[r]}u-=e}if(h)return v;e.textImage(v,a,g)}},e.textImage=(t,r,a)=>{"string"==typeof t&&(t=e.createTextImage(t));let n=e._imageMode;e._imageMode="corner";let o=e._textAlign;"center"==o?r-=t.canvas.hw:"right"==o&&(r-=t.width);let i=e._textBaseline;"alphabetic"==i?a-=t._leading:"middle"==i?a-=t._middle:"bottom"==i?a-=t._bottom:"top"==i&&(a-=t._top),e.image(t,r,a),e._imageMode=n},e.nf=(e,t,r)=>{let a=e<0,n=(e=Math.abs(e)).toFixed(r).split(".");n[0]=n[0].padStart(t,"0");let o=n.join(".");return a&&(o="-"+o),o}},Q5.modules.ai=e=>{e.askAI=(e="")=>{throw Error("Ask AI ✨ "+e)},e._aiErrorAssistance=async t=>{let r=t.message?.includes("Ask AI ✨");if(Q5.disableFriendlyErrors&&!r)return;!r&&Q5.errorTolerant||e.noLoop();let a=t.stack?.split("\n");if(!t.stack||a.length<=1)return;let n=1,o="(";for(-1==navigator.userAgent.indexOf("Chrome")&&(n=0,o="@");a[n].indexOf("q5")>=0;)n++;let i=a[n].split(o).at(-1);i=i.split(":");let s=parseInt(i.at(-2));r&&s++;let l=i.slice(0,-2).join(":"),d=l.split("/").at(-1);try{let e=(await(await fetch(l)).text()).split("\n"),a=e[s-1].trim(),n="",o=1;for(;n.length<1600&&(s-o>=0&&(n=e[s-o].trim()+"\n"+n),s+o10?t.message.slice(10):"Whats+wrong+with+this+line%3F+short+answer")+(r?"":"%0A%0A"+encodeURIComponent(t.name+": "+t.message))+"%0A%0ALine%3A+"+encodeURIComponent(a)+"%0A%0AExcerpt+for+context%3A%0A%0A"+encodeURIComponent(n);if(console.warn("Error in "+d+" on line "+s+":\n\n"+a),console.warn("Ask AI ✨ "+i),r)return window.open(i,"_blank")}catch(e){}}},Q5.modules.color=(e,t)=>{e.RGB=e.RGBA=e._colorMode="rgb",e.OKLCH="oklch",e.colorMode=(r,a)=>{e._colorMode=r;let n="srgb"==e.canvas.colorSpace||"srgb"==r;if(a??=n?"integer":"float",e._colorFormat="float"==a||1==a?1:255,"oklch"==r)t.Color=Q5.ColorOKLCH;else{let r="srgb"==e.canvas.colorSpace;255==e._colorFormat?t.Color=r?Q5.ColorRGBA_8:Q5.ColorRGBA_P3_8:t.Color=r?Q5.ColorRGBA:Q5.ColorRGBA_P3,e._colorMode="rgb"}},e._namedColors={aqua:[0,255,255],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],crimson:[220,20,60],cyan:[0,255,255],darkviolet:[148,0,211],gold:[255,215,0],green:[0,128,0],gray:[128,128,128],grey:[128,128,128],hotpink:[255,105,180],indigo:[75,0,130],khaki:[240,230,140],lightgreen:[144,238,144],lime:[0,255,0],magenta:[255,0,255],navy:[0,0,128],orange:[255,165,0],olive:[128,128,0],peachpuff:[255,218,185],pink:[255,192,203],purple:[128,0,128],red:[255,0,0],skyblue:[135,206,235],tan:[210,180,140],turquoise:[64,224,208],transparent:[0,0,0,0],white:[255,255,255],violet:[238,130,238],yellow:[255,255,0]},e.color=(t,r,a,n)=>{let o=e.Color;if(t._q5Color)return new o(...t.levels);if(null==r){if("string"==typeof t){if("#"==t[0])t.length<=5?(t.length>4&&(n=parseInt(t[4]+t[4],16)),a=parseInt(t[3]+t[3],16),r=parseInt(t[2]+t[2],16),t=parseInt(t[1]+t[1],16)):(t.length>7&&(n=parseInt(t.slice(7,9),16)),a=parseInt(t.slice(5,7),16),r=parseInt(t.slice(3,5),16),t=parseInt(t.slice(1,3),16));else{if(!e._namedColors[t])return console.error("q5 can't parse color: "+t+"\nOnly numeric input, hex, and common named colors are supported."),new o(0,0,0);[t,r,a,n]=e._namedColors[t]}1==e._colorFormat&&(t/=255,r&&(r/=255),a&&(a/=255),n&&(n/=255))}Array.isArray(t)&&([t,r,a,n]=t)}return null==a?new o(t,t,t,r):new o(t,r,a,n)},e.red=e=>e.r,e.green=e=>e.g,e.blue=e=>e.b,e.alpha=e=>e.a,e.lightness=e=>e.l?e.l:100*(.2126*e.r+.7152*e.g+.0722*e.b)/255,e.hue=t=>{if(t.h)return t.h;let r=t.r,a=t.g,n=t.b;255==e._colorFormat&&(r/=255,a/=255,n/=255);let o,i=Math.max(r,a,n),s=Math.min(r,a,n);return o=i==s?0:i==r?60*(a-n)/(i-s):i==a?60*(n-r)/(i-s)+120:60*(r-a)/(i-s)+240,o<0&&(o+=360),o},e.lerpColor=(t,r,a)=>{if("rgb"==e._colorMode)return new e.Color(e.constrain(e.lerp(t.r,r.r,a),0,255),e.constrain(e.lerp(t.g,r.g,a),0,255),e.constrain(e.lerp(t.b,r.b,a),0,255),e.constrain(e.lerp(t.a,r.a,a),0,255));{let n=r.h-t.h;n>180&&(n-=360),n<-180&&(n+=360);let o=t.h+a*n;return o<0&&(o+=360),o>360&&(o-=360),new e.Color(e.constrain(e.lerp(t.l,r.l,a),0,100),e.constrain(e.lerp(t.c,r.c,a),0,100),o,e.constrain(e.lerp(t.a,r.a,a),0,255))}}},Q5.Color=class{constructor(){this._q5Color=!0}},Q5.ColorOKLCH=class extends Q5.Color{constructor(e,t,r,a){super(),this.l=e,this.c=t,this.h=r,this.a=a??1}toString(){return`oklch(${this.l} ${this.c} ${this.h} / ${this.a})`}},Q5.ColorRGBA=class extends Q5.Color{constructor(e,t,r,a){super(),this.r=e,this.g=t,this.b=r,this.a=a??1}get levels(){return[this.r,this.g,this.b,this.a]}toString(){return`color(srgb ${this.r} ${this.g} ${this.b} / ${this.a})`}},Q5.ColorRGBA_P3=class extends Q5.ColorRGBA{toString(){return`color(display-p3 ${this.r} ${this.g} ${this.b} / ${this.a})`}},Q5.ColorRGBA_8=class extends Q5.ColorRGBA{constructor(e,t,r,a){super(e,t,r,a??255)}setRed(e){this.r=e}setGreen(e){this.g=e}setBlue(e){this.b=e}setAlpha(e){this.a=e}get levels(){return[this.r,this.g,this.b,this.a]}toString(){return`rgb(${this.r} ${this.g} ${this.b} / ${this.a/255})`}},Q5.ColorRGBA_P3_8=class extends Q5.ColorRGBA{constructor(e,t,r,a){super(e,t,r,a??255),this._edited=!0}get r(){return this._r}set r(e){this._r=e,this._edited=!0}get g(){return this._g}set g(e){this._g=e,this._edited=!0}get b(){return this._b}set b(e){this._b=e,this._edited=!0}get a(){return this._a}set a(e){this._a=e,this._edited=!0}toString(){if(this._edited){let e=(this._r/255).toFixed(3),t=(this._g/255).toFixed(3),r=(this._b/255).toFixed(3),a=(this._a/255).toFixed(3);this._css=`color(display-p3 ${e} ${t} ${r} / ${a})`,this._edited=!1}return this._css}},Q5.modules.display=e=>{if(!e.canvas||"graphics"==e._scope)return;let t=e.canvas;e.CENTERED="centered",e.FULLSCREEN="fullscreen",e.MAXED="maxed",e.PIXELATED="pixelated",0!=Q5._instanceCount||Q5._nodejs||document.head.insertAdjacentHTML("beforeend",""),e._adjustDisplay=()=>{let r=t.style,a=t.parentElement;r&&a&&t.displayMode&&("pixelated"==t.renderQuality&&(t.classList.add("q5-pixelated"),e.pixelDensity(1),e.noSmooth&&e.noSmooth(),e.textFont&&e.textFont("monospace")),"normal"==t.displayMode?(a.classList.remove("q5-centered","q5-maxed","q5-fullscreen"),r.width=t.w*t.displayScale+"px",r.height=t.h*t.displayScale+"px"):(a.classList.add("q5-"+t.displayMode),a=a.getBoundingClientRect(),t.w/t.h>a.width/a.height?("centered"==t.displayMode?(r.width=t.w*t.displayScale+"px",r.maxWidth="100%"):r.width="100%",r.height="auto",r.maxHeight=""):(r.width="auto",r.maxWidth="","centered"==t.displayMode?(r.height=t.h*t.displayScale+"px",r.maxHeight="100%"):r.height="100%")))},e.displayMode=(r="normal",a="default",n=1)=>{"string"==typeof n&&(n=parseFloat(n.slice(1))),Object.assign(t,{displayMode:r,renderQuality:a,displayScale:n}),e._adjustDisplay()},e.fullscreen=e=>{if(void 0===e)return document.fullscreenElement;e?document.body.requestFullscreen():document.body.exitFullscreen()}},Q5.modules.input=(e,t)=>{if("graphics"==e._scope)return;e.mouseX=0,e.mouseY=0,e.pmouseX=0,e.pmouseY=0,e.touches=[],e.mouseButton=null,e.keyIsPressed=!1,e.mouseIsPressed=!1,e.key=null,e.keyCode=null,e.UP_ARROW=38,e.DOWN_ARROW=40,e.LEFT_ARROW=37,e.RIGHT_ARROW=39,e.SHIFT=16,e.TAB=9,e.BACKSPACE=8,e.ENTER=e.RETURN=13,e.ALT=e.OPTION=18,e.CONTROL=17,e.DELETE=46,e.ESCAPE=27,e.ARROW="default",e.CROSS="crosshair",e.HAND="pointer",e.MOVE="move",e.TEXT="text";let r={},a=[e.LEFT,e.CENTER,e.RIGHT],n=e.canvas;function o(t){const r=e.canvas.getBoundingClientRect(),a=e.canvas.scrollWidth/e.width||1,n=e.canvas.scrollHeight/e.height||1;return{x:(t.clientX-r.left)/a,y:(t.clientY-r.top)/n,id:t.identifier}}if(e._startAudio=()=>{e.getAudioContext&&"suspended"==e.getAudioContext()?.state&&e.userStartAudio()},e._updateMouse=r=>{if(!r.changedTouches){if(n){let a=n.getBoundingClientRect(),o=n.scrollWidth/e.width||1,i=n.scrollHeight/e.height||1;t.mouseX=(r.clientX-a.left)/o,t.mouseY=(r.clientY-a.top)/i,"webgpu"==n.renderer&&(t.mouseX-=n.hw,t.mouseY-=n.hh)}else t.mouseX=r.clientX,t.mouseY=r.clientY;t.moveX=r.movementX,t.moveY=r.movementY}},e._onmousedown=r=>{e._startAudio(),e._updateMouse(r),t.mouseIsPressed=!0,t.mouseButton=a[r.button],e.mousePressed(r)},e._onmousemove=t=>{e._updateMouse(t),e.mouseIsPressed?e.mouseDragged(t):e.mouseMoved(t)},e._onmouseup=r=>{e._updateMouse(r),t.mouseIsPressed=!1,e.mouseReleased(r)},e._onclick=r=>{e._updateMouse(r),t.mouseIsPressed=!0,e.mouseClicked(r),t.mouseIsPressed=!1},e.cursor=(t,r,a)=>{let n="";t.includes(".")&&(t=`url("${t}")`,n=", auto"),void 0!==r&&(t+=" "+r+" "+a),e.canvas.style.cursor=t+n},e.noCursor=()=>{e.canvas.style.cursor="none"},e.requestPointerLock=document.body?.requestPointerLock,e.exitPointerLock=document.exitPointerLock,e._onkeydown=a=>{a.repeat||(e._startAudio(),t.keyIsPressed=!0,t.key=a.key,t.keyCode=a.keyCode,r[e.keyCode]=r[e.key.toLowerCase()]=!0,e.keyPressed(a),1==a.key.length&&e.keyTyped(a))},e._onkeyup=a=>{t.keyIsPressed=!1,t.key=a.key,t.keyCode=a.keyCode,r[e.keyCode]=r[e.key.toLowerCase()]=!1,e.keyReleased(a)},e.keyIsDown=e=>!!r["string"==typeof e?e.toLowerCase():e],e._ontouchstart=r=>{e._startAudio(),t.touches=[...r.touches].map(o),e._isTouchAware||(t.mouseX=e.touches[0].x,t.mouseY=e.touches[0].y,t.mouseIsPressed=!0,t.mouseButton=e.LEFT,e.mousePressed(r)||r.preventDefault()),e.touchStarted(r)||r.preventDefault()},e._ontouchmove=r=>{t.touches=[...r.touches].map(o),e._isTouchAware||(t.mouseX=e.touches[0].x,t.mouseY=e.touches[0].y,e.mouseDragged(r)||r.preventDefault()),e.touchMoved(r)||r.preventDefault()},e._ontouchend=r=>{t.touches=[...r.touches].map(o),e._isTouchAware||e.touches.length||(t.mouseIsPressed=!1,e.mouseReleased(r)||r.preventDefault()),e.touchEnded(r)||r.preventDefault()},n&&(n.addEventListener("mousedown",(t=>e._onmousedown(t))),n.addEventListener("mouseup",(t=>e._onmouseup(t))),n.addEventListener("click",(t=>e._onclick(t))),n.addEventListener("touchstart",(t=>e._ontouchstart(t))),n.addEventListener("touchmove",(t=>e._ontouchmove(t))),n.addEventListener("touchcancel",(t=>e._ontouchend(t))),n.addEventListener("touchend",(t=>e._ontouchend(t)))),window){let t=window.addEventListener;t("mousemove",(t=>e._onmousemove(t)),!1),t("keydown",(t=>e._onkeydown(t)),!1),t("keyup",(t=>e._onkeyup(t)),!1)}},Q5.modules.math=(e,t)=>{e.RADIANS=0,e.DEGREES=1,e.PI=Math.PI,e.HALF_PI=Math.PI/2,e.QUARTER_PI=Math.PI/4,e.abs=Math.abs,e.ceil=Math.ceil,e.exp=Math.exp,e.floor=Math.floor,e.loge=Math.log,e.mag=Math.hypot,e.max=Math.max,e.min=Math.min,e.round=Math.round,e.pow=Math.pow,e.sqrt=Math.sqrt,e.SHR3=1,e.LCG=2;let r=0;e.angleMode=t=>{"radians"==t&&(t=0),r=e._angleMode=t};let a=e._DEGTORAD=Math.PI/180,n=e._RADTODEG=180/Math.PI;function o(){let e,t,r=4294967295;return{setSeed(a){e=t=(a??Math.random()*r)>>>0},getSeed:()=>t,rand:()=>(e^=e<<17,e^=e>>13,e^=e<<5,(e>>>0)/r)}}e.degrees=t=>t*e._RADTODEG,e.radians=t=>t*e._DEGTORAD,e.map=Q5.prototype.map=(e,t,r,a,n,o)=>{let i=a+1*(e-t)/(r-t)*(n-a);return o?ae*(1-r)+t*r,e.constrain=(e,t,r)=>Math.min(Math.max(e,t),r),e.dist=function(){let e=arguments;return 4==e.length?Math.hypot(e[0]-e[2],e[1]-e[3]):Math.hypot(e[0]-e[3],e[1]-e[4],e[2]-e[5])},e.norm=(t,r,a)=>e.map(t,r,a,0,1),e.sq=e=>e*e,e.fract=e=>e-Math.floor(e),e.sin=e=>Math.sin(r?e*a:e),e.cos=e=>Math.cos(r?e*a:e),e.tan=e=>Math.tan(r?e*a:e),e.asin=e=>{let t=Math.asin(e);return r?t*n:t},e.acos=e=>{let t=Math.acos(e);return r?t*n:t},e.atan=e=>{let t=Math.atan(e);return r?t*n:t},e.atan2=(e,t)=>{let a=Math.atan2(e,t);return r?a*n:a};let i=o();i.setSeed(),e.randomSeed=e=>i.setSeed(e),e.random=(e,t)=>void 0===e?i.rand():"number"==typeof e?void 0!==t?i.rand()*(t-e)+e:i.rand()*e:e[Math.trunc(e.length*i.rand())],e.randomGenerator=t=>{t==e.LCG?i=function(){const e=4294967296;let t,r;return{setSeed(a){r=t=(a??Math.random()*e)>>>0},getSeed:()=>t,rand:()=>(r=(1664525*r+1013904223)%e,r/e)}}():t==e.SHR3&&(i=o()),i.setSeed()};var s=new function(){var e,t,r,a=new Array(128),n=new Array(256),o=new Array(128),s=new Array(128),l=new Array(256),d=new Array(256),c=()=>4294967296*i.rand()-2147483648,h=()=>.5+2.328306e-10*(c()|0),u=()=>{for(var t,n,i,l,d=3.44262;;){if(t=r*o[e],0==e){do{i=h(),l=h(),t=.2904764*-Math.log(i),n=-Math.log(l)}while(n+n0?d+t:-d-t}if(s[e]+h()*(s[e-1]-s[e]){for(var r;;){if(0==e)return 7.69711-Math.log(h());if(r=t*l[e],d[e]+h()*(d[e-1]-d[e])(r=c(),e=127&r,Math.abs(r)(t=c()>>>0){var e,t,r=2147483648,i=4294967296,c=3.442619855899,h=c,u=.00991256303526217,p=7.697117470131487,f=p,_=.003949659822581572;for(e=u/Math.exp(-.5*c*c),a[0]=Math.floor(c/e*r),a[1]=0,o[0]=e/r,o[127]=c/r,s[0]=1,s[127]=Math.exp(-.5*c*c),t=126;t>=1;t--)c=Math.sqrt(-2*Math.log(u/c+Math.exp(-.5*c*c))),a[t+1]=Math.floor(c/h*r),h=c,s[t]=Math.exp(-.5*c*c),o[t]=c/r;for(e=_/Math.exp(-p),n[0]=Math.floor(p/e*i),n[1]=0,l[0]=e/i,l[255]=p/i,d[0]=1,d[255]=Math.exp(-p),t=254;t>=1;t--)p=-Math.log(_/p+Math.exp(-p)),n[t+1]=Math.floor(p/f*i),f=p,d[t]=Math.exp(-p),l[t]=p/i}};let l;s.hasInit=!1,e.randomGaussian=(e,t)=>(s.hasInit||(s.zigset(),s.hasInit=!0),s.RNOR()*t+e),e.randomExponential=()=>(s.hasInit||(s.zigset(),s.hasInit=!0),s.REXP()),e.PERLIN="perlin",e.SIMPLEX="simplex",e.BLOCKY="blocky",e.Noise=Q5.PerlinNoise,e.noiseMode=e=>{t.Noise=Q5[e[0].toUpperCase()+e.slice(1)+"Noise"],l=null},e.noiseSeed=t=>{l=new e.Noise(t)},e.noise=(t=0,r=0,a=0)=>(l??=new e.Noise,l.noise(t,r,a)),e.noiseDetail=(t,r)=>{l??=new e.Noise,t>0&&(l.octaves=t),r>0&&(l.falloff=r)}},Q5.Noise=class{},Q5.PerlinNoise=class extends Q5.Noise{constructor(e){super(),this.grad3=[[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]],this.octaves=1,this.falloff=.5,this.p=null==e?Array.from({length:256},(()=>Math.floor(256*Math.random()))):this.seedPermutation(e),this.p=this.p.concat(this.p)}seedPermutation(e){let t,r,a=[];for(let e=0;e<256;e++)a[e]=e;for(let n=255;n>0;n--)t=(e=16807*e%2147483647)%(n+1),r=a[n],a[n]=a[t],a[t]=r;return a}dot(e,t,r,a){return e[0]*t+e[1]*r+e[2]*a}mix(e,t,r){return(1-r)*e+r*t}fade(e){return e*e*e*(e*(6*e-15)+10)}noise(e,t,r){let a=this,n=0,o=1,i=1,s=0;for(let l=0;l{e.Sound=Q5.Sound,e.loadSound=(e,r)=>{t._preloadCount++,Q5.aud??=new window.AudioContext;let a=new Q5.Sound(e,r);return a.crossOrigin="Anonymous",a.addEventListener("canplaythrough",(()=>{t._preloadCount--,a.loaded=!0,r&&r(a)})),a},e.getAudioContext=()=>Q5.aud,e.userStartAudio=()=>Q5.aud.resume()},Q5.Sound=class extends Audio{constructor(e){super(e);let t=this;t.load(),t.panner=Q5.aud.createStereoPanner(),t.source=Q5.aud.createMediaElementSource(t),t.source.connect(t.panner),t.panner.connect(Q5.aud.destination),Object.defineProperty(t,"pan",{get:()=>t.panner.pan.value,set:e=>t.panner.pan.value=e})}setVolume(e){this.volume=e}setLoop(e){this.loop=e}setPan(e){this.pan=e}isLoaded(){return this.loaded}isPlaying(){return!this.paused}},Q5.modules.util=(e,t)=>{e._loadFile=(r,a,n)=>{t._preloadCount++;let o={};return fetch(r).then((e=>"json"==n?e.json():e.text())).then((r=>{t._preloadCount--,"csv"==n&&(r=e.CSV.parse(r)),Object.assign(o,r),a&&a(r)})),o},e.loadText=(t,r)=>e._loadFile(t,r,"text"),e.loadJSON=(t,r)=>e._loadFile(t,r,"json"),e.loadCSV=(t,r)=>e._loadFile(t,r,"csv"),e.CSV={},e.CSV.parse=(e,t=",",r="\n")=>{let a=[],n=e.split(r),o=n[0].split(t);for(let e=1;er[e]=JSON.parse(i[t]))),a.push(r)}return a},"object"==typeof localStorage&&(e.storeItem=localStorage.setItem,e.getItem=localStorage.getItem,e.removeItem=localStorage.removeItem,e.clearStorage=localStorage.clear),e.year=()=>(new Date).getFullYear(),e.day=()=>(new Date).getDay(),e.hour=()=>(new Date).getHours(),e.minute=()=>(new Date).getMinutes(),e.second=()=>(new Date).getSeconds()},Q5.modules.vector=e=>{e.createVector=(t,r,a)=>new Q5.Vector(t,r,a,e)},Q5.Vector=class{constructor(e,t,r,a){this.x=e||0,this.y=t||0,this.z=r||0,this._$=a||window,this._cn=null,this._cnsq=null}set(e,t,r){return this.x=e?.x||e||0,this.y=e?.y||t||0,this.z=e?.z||r||0,this}copy(){return new Q5.Vector(this.x,this.y,this.z)}_arg2v(e,t,r){return void 0!==e?.x?e:void 0!==t?{x:e,y:t,z:r||0}:{x:e,y:e,z:e}}_calcNorm(){this._cnsq=this.x*this.x+this.y*this.y+this.z*this.z,this._cn=Math.sqrt(this._cnsq)}add(){let e=this._arg2v(...arguments);return this.x+=e.x,this.y+=e.y,this.z+=e.z,this}rem(){let e=this._arg2v(...arguments);return this.x%=e.x,this.y%=e.y,this.z%=e.z,this}sub(){let e=this._arg2v(...arguments);return this.x-=e.x,this.y-=e.y,this.z-=e.z,this}mult(){let e=this._arg2v(...arguments);return this.x*=e.x,this.y*=e.y,this.z*=e.z,this}div(){let e=this._arg2v(...arguments);return e.x?this.x/=e.x:this.x=0,e.y?this.y/=e.y:this.y=0,e.z?this.z/=e.z:this.z=0,this}mag(){return this._calcNorm(),this._cn}magSq(){return this._calcNorm(),this._cnsq}dot(){let e=this._arg2v(...arguments);return this.x*e.x+this.y*e.y+this.z*e.z}dist(){let e=this._arg2v(...arguments),t=this.x-e.x,r=this.y-e.y,a=this.z-e.z;return Math.sqrt(t*t+r*r+a*a)}cross(){let e=this._arg2v(...arguments),t=this.y*e.z-this.z*e.y,r=this.z*e.x-this.x*e.z,a=this.x*e.y-this.y*e.x;return this.x=t,this.y=r,this.z=a,this}normalize(){this._calcNorm();let e=this._cn;return 0!=e&&(this.x/=e,this.y/=e,this.z/=e),this._cn=1,this._cnsq=1,this}limit(e){this._calcNorm();let t=this._cn;if(t>e){let r=e/t;this.x*=r,this.y*=r,this.z*=r,this._cn=e,this._cnsq=e*e}return this}setMag(e){this._calcNorm();let t=e/this._cn;return this.x*=t,this.y*=t,this.z*=t,this._cn=e,this._cnsq=e*e,this}heading(){return this._$.atan2(this.y,this.x)}setHeading(e){let t=this.mag();return this.x=t*this._$.cos(e),this.y=t*this._$.sin(e),this}rotate(e){let t=this._$.cos(e),r=this._$.sin(e),a=this.x*t-this.y*r,n=this.x*r+this.y*t;return this.x=a,this.y=n,this}angleBetween(){let e=this._arg2v(...arguments),t=Q5.Vector.cross(this,e);return this._$.atan2(t.mag(),this.dot(e))*Math.sign(t.z||1)}lerp(){let e=[...arguments],t=e.at(-1);if(0==t)return this;let r=this._arg2v(...e.slice(0,-1));return this.x+=(r.x-this.x)*t,this.y+=(r.y-this.y)*t,this.z+=(r.z-this.z)*t,this}slerp(){let e=[...arguments],t=e.at(-1);if(0==t)return this;let r=this._arg2v(...e.slice(0,-1));if(1==t)return this.set(r);let a=this.mag(),n=r.mag();if(0==a||0==n)return this.mult(1-t).add(r.mult(t));let o=Q5.Vector.cross(this,r),i=o.mag(),s=Math.atan2(i,this.dot(r));if(i>0)o.div(i);else{if(se.copy().add(t),Q5.Vector.cross=(e,t)=>e.copy().cross(t),Q5.Vector.dist=(e,t)=>Math.hypot(e.x-t.x,e.y-t.y,e.z-t.z),Q5.Vector.div=(e,t)=>e.copy().div(t),Q5.Vector.dot=(e,t)=>e.copy().dot(t),Q5.Vector.equals=(e,t,r)=>e.equals(t,r),Q5.Vector.lerp=(e,t,r)=>e.copy().lerp(t,r),Q5.Vector.slerp=(e,t,r)=>e.copy().slerp(t,r),Q5.Vector.limit=(e,t)=>e.copy().limit(t),Q5.Vector.heading=e=>this._$.atan2(e.y,e.x),Q5.Vector.magSq=e=>e.x*e.x+e.y*e.y+e.z*e.z,Q5.Vector.mag=e=>Math.sqrt(Q5.Vector.magSq(e)),Q5.Vector.mult=(e,t)=>e.copy().mult(t),Q5.Vector.normalize=e=>e.copy().normalize(),Q5.Vector.rem=(e,t)=>e.copy().rem(t),Q5.Vector.sub=(e,t)=>e.copy().sub(t);for(let e of["fromAngle","fromAngles","random2D","random3D"])Q5.Vector[e]=(t,r,a)=>(new Q5.Vector)[e](t,r,a);Q5.renderers.webgpu={},Q5.renderers.webgpu.canvas=(e,t)=>{let r=e.canvas;r.width=e.width=500,r.height=e.height=500,e.colorMode&&e.colorMode("rgb",1);let a,n,o,i=1,s=8;e._pipelineConfigs=[],e._pipelines=[];let l=e.drawStack=[],d=e.colorStack=new Float32Array(1e6);d.set([0,0,0,1,1,1,1,1]),e._transformLayout=Q5.device.createBindGroupLayout({label:"transformLayout",entries:[{binding:0,visibility:GPUShaderStage.VERTEX,buffer:{type:"uniform",hasDynamicOffset:!1}},{binding:1,visibility:GPUShaderStage.VERTEX,buffer:{type:"read-only-storage",hasDynamicOffset:!1}}]}),o=Q5.device.createBindGroupLayout({label:"colorsLayout",entries:[{binding:0,visibility:GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT,buffer:{type:"read-only-storage",hasDynamicOffset:!1}}]}),e.bindGroupLayouts=[e._transformLayout,o];let c=Q5.device.createBuffer({size:8,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),h=()=>{n=Q5.device.createTexture({size:[e.canvas.width,e.canvas.height],sampleCount:4,format:"bgra8unorm",usage:GPUTextureUsage.RENDER_ATTACHMENT}).createView()};e._createCanvas=(a,n,o)=>(t.ctx=t.drawingContext=r.getContext("webgpu"),o.format??=navigator.gpu.getPreferredCanvasFormat(),o.device??=Q5.device,e.ctx.configure(o),Q5.device.queue.writeBuffer(c,0,new Float32Array([e.canvas.hw,e.canvas.hh])),h(),r),e._resizeCanvas=(t,r)=>{e._setCanvasSize(t,r),h()},e.pixelDensity=t=>t&&t!=e._pixelDensity?(e._pixelDensity=t,e._setCanvasSize(r.w,r.h),h(),t):e._pixelDensity;let u=(t,r,a,n=1)=>{"string"==typeof t?t=e.color(t):null==a&&(n=r??1,r=a=t),t._q5Color&&(n=t.a,a=t.b,r=t.g,t=t.r);let o=d,l=s;o[l++]=t,o[l++]=r,o[l++]=a,o[l++]=n,s=l,i++};e._fillIndex=e._strokeIndex=0,e._doFill=e._doStroke=!0,e.fill=(t,r,a,n)=>{u(t,r,a,n),e._doFill=e._fillSet=!0,e._fillIndex=i},e.stroke=(t,r,a,n)=>{u(t,r,a,n),e._doStroke=e._strokeSet=!0,e._strokeIndex=i},e.noFill=()=>e._doFill=!1,e.noStroke=()=>e._doStroke=!1,e._strokeWeight=1,e.strokeWeight=t=>e._strokeWeight=Math.abs(t),e.resetMatrix=()=>{e._matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],e._transformIndex=0},e.resetMatrix(),e._matrixDirty=!1;let p=[e._matrix.slice()];e._transformIndexStack=[],e.translate=(t,r,a)=>{(t||r||a)&&(e._matrix[12]+=t,e._matrix[13]-=r,e._matrix[14]+=a||0,e._matrixDirty=!0)},e.rotate=t=>{if(!t)return;e._angleMode&&(t*=e._DEGTORAD);let r=Math.cos(t),a=Math.sin(t),n=e._matrix,o=n[0],i=n[1],s=n[4],l=n[5];o||i||s||l?(n[0]=o*r+s*a,n[1]=i*r+l*a,n[4]=s*r-o*a,n[5]=l*r-i*a):(n[0]=r,n[1]=a,n[4]=-a,n[5]=r),e._matrixDirty=!0},e.scale=(t=1,r,a=1)=>{r??=t;let n=e._matrix;n[0]*=t,n[1]*=t,n[2]*=t,n[3]*=t,n[4]*=r,n[5]*=r,n[6]*=r,n[7]*=r,n[8]*=a,n[9]*=a,n[10]*=a,n[11]*=a,e._matrixDirty=!0},e.shearX=t=>{if(!t)return;e._angleMode&&(t*=e._DEGTORAD);let r=Math.tan(t),a=e._matrix[0],n=e._matrix[1],o=e._matrix[4],i=e._matrix[5];e._matrix[0]=a+o*r,e._matrix[1]=n+i*r,e._matrixDirty=!0},e.shearY=t=>{if(!t)return;e._angleMode&&(t*=e._DEGTORAD);let r=Math.tan(t),a=e._matrix[0],n=e._matrix[1],o=e._matrix[4],i=e._matrix[5];e._matrix[4]=o+a*r,e._matrix[5]=i+n*r,e._matrixDirty=!0},e.applyMatrix=(...t)=>{let r;if(r=1==t.length?t[0]:t,9==r.length)r=[r[0],r[1],0,r[2],r[3],r[4],0,r[5],0,0,1,0,r[6],r[7],0,r[8]];else if(16!=r.length)throw new Error("Matrix must be a 3x3 or 4x4 array.");e._matrix=r.slice(),e._matrixDirty=!0},e._saveMatrix=()=>{p.push(e._matrix.slice()),e._transformIndex=p.length-1,e._matrixDirty=!1},e.pushMatrix=()=>{e._matrixDirty&&e._saveMatrix(),e._transformIndexStack.push(e._transformIndex)},e.popMatrix=()=>{if(!e._transformIndexStack.length)return console.warn("Matrix index stack is empty!");let t=e._transformIndexStack.pop();e._matrix=p[t].slice(),e._transformIndex=t,e._matrixDirty=!1},e.push=()=>{e.pushMatrix(),e.pushStyles()},e.pop=()=>{e.popMatrix(),e.popStyles()},e._calcBox=(e,t,r,a,n)=>{let o,i,s,l,d=r/2,c=a/2;return n&&"corner"!=n?"center"==n?(o=e-d,i=e+d,s=-(t-c),l=-(t+c)):(o=e,i=r,s=-t,l=-a):(o=e,i=e+r,s=-t,l=-(t+a)),[o,i,s,l]};let f=["zero","one","src-alpha","one-minus-src-alpha","dst","dst-alpha","one-minus-dst-alpha","one-minus-src"],_=["add","subtract","reverse-subtract","min","max"];const g={normal:[2,3,0,2,3,0],additive:[1,1,0,1,1,0]};e.blendConfigs={};for(const[t,r]of Object.entries(g))e.blendConfigs[t]={color:{srcFactor:f[r[0]],dstFactor:f[r[1]],operation:_[r[2]]},alpha:{srcFactor:f[r[3]],dstFactor:f[r[4]],operation:_[r[5]]}};e._blendMode="normal",e.blendMode=t=>{if(t!=e._blendMode){"source-over"==t&&(t="normal"),"lighter"==t&&(t="additive"),t=t.toLowerCase().replace(/[ -]/g,"_"),e._blendMode=t;for(let r=0;r{},e._beginRender=()=>{e.encoder=Q5.device.createCommandEncoder(),a=t.pass=e.encoder.beginRenderPass({label:"q5-webgpu",colorAttachments:[{view:n,resolveTarget:e.ctx.getCurrentTexture().createView(),loadOp:"clear",storeOp:"store"}]})},e._render=()=>{if(p.length>1||!e._transformBindGroup){let t=Q5.device.createBuffer({size:64*p.length,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(p.flat()),t.unmap(),e._transformBindGroup=Q5.device.createBindGroup({layout:e._transformLayout,entries:[{binding:0,resource:{buffer:c}},{binding:1,resource:{buffer:t}}]})}a.setBindGroup(0,e._transformBindGroup);let t=Q5.device.createBuffer({size:4*s,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(d.slice(0,s)),t.unmap(),e._colorsBindGroup=Q5.device.createBindGroup({layout:o,entries:[{binding:0,resource:{buffer:t}}]}),e.pass.setBindGroup(1,e._colorsBindGroup);for(let t of e._hooks.preRender)t();let r=0,n=0,i=0,h=-1;for(let t=0;t{a.end();let r=e.encoder.finish();Q5.device.queue.submit([r]),t.pass=e.encoder=null,e.drawStack.length=0,i=1,s=8,rotation=0,p.length=1,e._transformIndexStack.length=0}},Q5.initWebGPU=async()=>{if(!navigator.gpu)return console.warn("q5 WebGPU not supported on this browser!"),!1;if(!Q5.device){let e=await navigator.gpu.requestAdapter();if(!e)throw new Error("No appropriate GPUAdapter found.");Q5.device=await e.requestDevice()}return!0},Q5.webgpu=async function(e,t){if(e&&"global"!=e||(Q5._hasGlobal=!0),!await Q5.initWebGPU()){let r=new Q5(e,t);return r.colorMode("rgb",1),r._beginRender=()=>r.translate(r.canvas.hw,r.canvas.hh),r}return new Q5(e,t,"webgpu")},Q5.renderers.webgpu.drawing=(e,t)=>{let r,a=e.canvas,n=e.drawStack,o=new Float32Array(1e7),i=new Uint32Array(1e6),s=0,l=0,d=0,c=Q5.device.createShaderModule({label:"drawingVertexShader",code:"\nstruct VertexInput {\n\t@location(0) pos: vec2f,\n\t@location(1) colorIndex: f32,\n\t@location(2) transformIndex: f32\n}\nstruct VertexOutput {\n\t@builtin(position) position: vec4f,\n\t@location(0) color: vec4f\n}\nstruct Uniforms {\n\thalfWidth: f32,\n\thalfHeight: f32\n}\n\n@group(0) @binding(0) var uniforms: Uniforms;\n@group(0) @binding(1) var transforms: array>;\n\n@group(1) @binding(0) var colors : array;\n\n@vertex\nfn vertexMain(input: VertexInput) -> VertexOutput {\n\tvar vert = vec4f(input.pos, 0.0, 1.0);\n\tvert = transforms[i32(input.transformIndex)] * vert;\n\tvert.x /= uniforms.halfWidth;\n\tvert.y /= uniforms.halfHeight;\n\n\tvar output: VertexOutput;\n\toutput.position = vert;\n\toutput.color = colors[i32(input.colorIndex)];\n\treturn output;\n}\n"}),h=Q5.device.createShaderModule({label:"drawingFragmentShader",code:"\n@fragment\nfn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {\n\treturn color;\n}\n"}),u=Q5.device.createPipelineLayout({label:"drawingPipelineLayout",bindGroupLayouts:e.bindGroupLayouts});e._pipelineConfigs[0]={label:"drawingPipeline",layout:u,vertex:{module:c,entryPoint:"vertexMain",buffers:[{arrayStride:16,attributes:[{format:"float32x2",offset:0,shaderLocation:0},{format:"float32",offset:8,shaderLocation:1},{format:"float32",offset:12,shaderLocation:2}]}]},fragment:{module:h,entryPoint:"fragmentMain",targets:[{format:"bgra8unorm",blend:e.blendConfigs.normal}]},primitive:{topology:"triangle-list"},multisample:{count:4}},e._pipelines[0]=Q5.device.createRenderPipeline(e._pipelineConfigs[0]);const p=(e,t,r,a)=>{let n=o,i=s;n[i++]=e,n[i++]=t,n[i++]=r,n[i++]=a,s=i,l++},f=(e,t,r)=>{let a=i,n=d;a[n++]=e,a[n++]=t,a[n++]=r,d=n},_=(e,t,r,a,c,h,u,p,f,_)=>{let g=o,x=s,m=l++;g[x++]=e,g[x++]=t,g[x++]=f,g[x++]=_;let v=l++;g[x++]=r,g[x++]=a,g[x++]=f,g[x++]=_;let y=l++;g[x++]=c,g[x++]=h,g[x++]=f,g[x++]=_;let w=l++;g[x++]=u,g[x++]=p,g[x++]=f,g[x++]=_,s=x;let b=i,S=d;b[S++]=m,b[S++]=v,b[S++]=y,b[S++]=m,b[S++]=y,b[S++]=w,d=S,n.push(0,6,4)},g=(t,r,a,o,i,l,d)=>{let c=0,h=e.TAU/i,u=s/4;p(t,r,l,d);for(let e=0;e<=i;e++){let n=t+a*Math.cos(c),i=r+o*Math.sin(c);p(n,i,l,d),e>0&&f(u,u+e,u+e+1),c+=h}n.push(0,3*i,i+2)};e.rectMode=t=>e._rectMode=t,e.rect=(t,a,n,o)=>{let i,s,[l,d,c,h]=e._calcBox(t,a,n,o,e._rectMode);if(e._matrixDirty&&e._saveMatrix(),s=e._transformIndex,e._doStroke){i=e._strokeIndex;let t=e._strokeWeight/2,r=c+t,a=h-t,n=l-t,o=d+t;_(n,r,o,r,o,a,n,a,i,s),c-=t,h+=t,l+=t,d-=t}e._doFill&&(i=r??e._fillIndex,_(l,c,d,c,d,h,l,h,i,s))},e.square=(t,r,a)=>e.rect(t,r,a,a);let x;e.ellipseMode=t=>e._ellipseMode=t,e.ellipse=(t,a,n,o)=>{let i=(s=n==o?n:Math.max(n,o))<4?6:s<6?8:s<10?10:s<16?12:s<20?14:s<22?16:s<24?18:s<28?20:s<34?22:s<42?24:s<48?26:s<56?28:s<64?30:s<72?32:s<84?34:s<96?36:s<98?38:s<113?40:s<149?44:s<199?48:s<261?52:s<353?56:s<461?60:s<585?64:s<1200?70:s<1800?80:s<2400?90:100;var s;let l=Math.max(n,1)/2,d=n==o?l:Math.max(o,1)/2;e._matrixDirty&&e._saveMatrix();let c=e._transformIndex;if(e._doStroke){let r=e._strokeWeight/2;g(t,a,l+r,d+r,i,e._strokeIndex,c),l-=r,d-=r}e._doFill&&g(t,a,l,d,i,r??e._fillIndex,c)},e.circle=(t,r,a)=>e.ellipse(t,r,a,a),e.point=(t,a)=>{r=e._strokeIndex,e._doStroke=!1;let n=e._strokeWeight;n<2?(n=Math.round(n),e.rect(t,a,n,n)):e.ellipse(t,a,n,n),e._doStroke=!0,r=null},e.line=(t,a,n,o)=>{r=e._strokeIndex,e.push(),e._doStroke=!1,e.translate(t,-a),e.rotate(e.atan2(o-a,n-t));let i=Math.sqrt((n-t)**2+(o-a)**2),s=e._strokeWeight,l=s/2;e._rectMode="corner",s<4?e.rect(-l,-l,i+l,s):(e._ellipseMode="center",e.ellipse(0,0,s,s),e.ellipse(i,0,s,s),e.rect(0,-l,i,s)),e.pop(),r=null},e.beginShape=()=>{x=0},e.vertex=(t,r)=>{e._matrixDirty&&e._saveMatrix(),p(t,-r,e._fillIndex,e._transformIndex),x++},e.endShape=t=>{if(x<3)throw new Error("A shape must have at least 3 vertices.");let r=l-x;if(e._doFill){for(let e=r+1;e{e.beginShape(),e.vertex(t,r),e.vertex(a,n),e.vertex(o,i),e.endShape()},e.quad=(t,r,a,n,o,i,s,l)=>{e.beginShape(),e.vertex(t,r),e.vertex(a,n),e.vertex(o,i),e.vertex(s,l),e.endShape()},e.background=(t,r,n,o)=>{if(e.push(),e.resetMatrix(),e._doStroke=!1,t.src){let r=e._imageMode;e._imageMode="corner",e.image(t,-a.hw,-a.hh,a.w,a.h),e._imageMode=r}else{let i=e._rectMode;e._rectMode="corner",e.fill(t,r,n,o),e.rect(-a.hw,-a.hh,a.w,a.h),e._rectMode=i}e.pop(),e._fillSet||(e._fillIndex=1)},e._hooks.preRender.push((()=>{e.pass.setPipeline(e._pipelines[0]);let t=Q5.device.createBuffer({size:4*s,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(o.slice(0,s)),t.unmap(),e.pass.setVertexBuffer(0,t);let r=Q5.device.createBuffer({size:4*d,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Uint32Array(r.getMappedRange()).set(i.slice(0,d)),r.unmap(),e.pass.setIndexBuffer(r,"uint32")})),e._hooks.postRender.push((()=>{s=0,l=0,d=0}))},Q5.renderers.webgpu.image=(e,t)=>{e._textureBindGroups=[];let r=[],a=Q5.device.createShaderModule({label:"imageVertexShader",code:"\nstruct VertexOutput {\n\t@builtin(position) position: vec4f,\n\t@location(0) texCoord: vec2f\n}\nstruct Uniforms {\n\thalfWidth: f32,\n\thalfHeight: f32\n}\n\n@group(0) @binding(0) var uniforms: Uniforms;\n@group(0) @binding(1) var transforms: array>;\n\n@vertex\nfn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput {\n\tvar vert = vec4f(pos, 0.0, 1.0);\n\tvert = transforms[i32(transformIndex)] * vert;\n\tvert.x /= uniforms.halfWidth;\n\tvert.y /= uniforms.halfHeight;\n\n\tvar output: VertexOutput;\n\toutput.position = vert;\n\toutput.texCoord = texCoord;\n\treturn output;\n}\n\t"}),n=Q5.device.createShaderModule({label:"imageFragmentShader",code:"\n@group(2) @binding(0) var samp: sampler;\n@group(2) @binding(1) var texture: texture_2d;\n\n@fragment\nfn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {\n\t// Sample the texture using the interpolated texture coordinate\n\treturn textureSample(texture, samp, texCoord);\n}\n\t"}),o=Q5.device.createBindGroupLayout({label:"textureLayout",entries:[{binding:0,visibility:GPUShaderStage.FRAGMENT,sampler:{type:"filtering"}},{binding:1,visibility:GPUShaderStage.FRAGMENT,texture:{viewDimension:"2d",sampleType:"float"}}]});const i=Q5.device.createPipelineLayout({label:"imagePipelineLayout",bindGroupLayouts:[...e.bindGroupLayouts,o]});e._pipelineConfigs[1]={label:"imagePipeline",layout:i,vertex:{module:a,entryPoint:"vertexMain",buffers:[{arrayStride:0,attributes:[]},{arrayStride:20,attributes:[{shaderLocation:0,offset:0,format:"float32x2"},{shaderLocation:1,offset:8,format:"float32x2"},{shaderLocation:2,offset:16,format:"float32"}]}]},fragment:{module:n,entryPoint:"fragmentMain",targets:[{format:"bgra8unorm",blend:e.blendConfigs.normal}]},primitive:{topology:"triangle-list"}},e._pipelines[1]=Q5.device.createRenderPipeline(e._pipelineConfigs[1]);let s=Q5.device.createSampler({magFilter:"linear",minFilter:"linear"});e._textures=[];let l=0;e._createTexture=t=>{t.canvas&&(t=t.canvas);let r=[t.width,t.height,1],a=Q5.device.createTexture({size:r,format:"bgra8unorm",usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT});Q5.device.queue.copyExternalImageToTexture({source:t},{texture:a,colorSpace:e.canvas.colorSpace},r),e._textures[l]=a,t.textureIndex=l;const n=Q5.device.createBindGroup({layout:o,entries:[{binding:0,resource:s},{binding:1,resource:a.createView()}]});e._textureBindGroups[l]=n,l=(l+1)%12e3,e._textures[l]&&(e._textures[l].destroy(),delete e._textures[l],delete e._textureBindGroups[l])},e.loadImage=e.loadTexture=r=>{t._preloadCount++;const a=new Image;return a.crossOrigin="Anonymous",a.onload=()=>{e._createTexture(a),t._preloadCount--},a.src=r,a},e.imageMode=t=>e._imageMode=t,e.image=(t,a,n,o,i)=>{if(t.canvas&&(t=t.canvas),null==t.textureIndex)return;e._matrixDirty&&e._saveMatrix();let s=e._transformIndex;o??=t.width/e._pixelDensity,i??=t.height/e._pixelDensity;let[l,d,c,h]=e._calcBox(a,n,o,i,e._imageMode);r.push(l,c,0,0,s,d,c,1,0,s,l,h,0,1,s,d,c,1,0,s,l,h,0,1,s,d,h,1,1,s),e.drawStack.push(1,t.textureIndex,0)},e._hooks.preRender.push((()=>{if(!e._textureBindGroups.length)return;e.pass.setPipeline(e._pipelines[1]);const t=Q5.device.createBuffer({size:4*r.length,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(t.getMappedRange()).set(vertices),t.unmap(),e.pass.setVertexBuffer(1,t)})),e._hooks.postRender.push((()=>{r.length=0}))},Q5.THRESHOLD=1,Q5.GRAY=2,Q5.OPAQUE=3,Q5.INVERT=4,Q5.POSTERIZE=5,Q5.DILATE=6,Q5.ERODE=7,Q5.BLUR=8,Q5.renderers.webgpu.text=(e,t)=>{let r=Q5.device.createShaderModule({label:"MSDF text shader",code:"\n// Positions for simple quad geometry\nconst pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));\n\nstruct VertexInput {\n\t@builtin(vertex_index) vertex : u32,\n\t@builtin(instance_index) instance : u32\n}\nstruct VertexOutput {\n\t@builtin(position) position : vec4f,\n\t@location(0) texCoord : vec2f,\n\t@location(1) fillColor : vec4f\n}\nstruct Char {\n\ttexOffset: vec2f,\n\ttexExtent: vec2f,\n\tsize: vec2f,\n\toffset: vec2f,\n}\nstruct Text {\n\tpos: vec2f,\n\tscale: f32,\n\ttransformIndex: f32,\n\tfillIndex: f32,\n\tstrokeIndex: f32\n}\nstruct Uniforms {\n\thalfWidth: f32,\n\thalfHeight: f32\n}\n\n@group(0) @binding(0) var uniforms: Uniforms;\n@group(0) @binding(1) var transforms: array>;\n\n@group(1) @binding(0) var colors : array;\n\n@group(2) @binding(0) var fontTexture: texture_2d;\n@group(2) @binding(1) var fontSampler: sampler;\n@group(2) @binding(2) var fontChars: array;\n\n@group(3) @binding(0) var textChars: array;\n@group(3) @binding(1) var textMetadata: array;\n\n@vertex\nfn vertexMain(input : VertexInput) -> VertexOutput {\n\tlet char = textChars[input.instance];\n\n\tlet text = textMetadata[i32(char.w)];\n\n\tlet fontChar = fontChars[i32(char.z)];\n\n\tlet charPos = ((pos[input.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;\n\n\tvar vert = vec4f(charPos, 0.0, 1.0);\n\tvert = transforms[i32(text.transformIndex)] * vert;\n\tvert.x /= uniforms.halfWidth;\n\tvert.y /= uniforms.halfHeight;\n\n\tvar output : VertexOutput;\n\toutput.position = vert;\n\toutput.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;\n\toutput.fillColor = colors[i32(text.fillIndex)];\n\treturn output;\n}\n\nfn sampleMsdf(texCoord: vec2f) -> f32 {\n\tlet c = textureSample(fontTexture, fontSampler, texCoord);\n\treturn max(min(c.r, c.g), min(max(c.r, c.g), c.b));\n}\n\n@fragment\nfn fragmentMain(input : VertexOutput) -> @location(0) vec4f {\n\t// pxRange (AKA distanceRange) comes from the msdfgen tool,\n\t// uses the default which is 4.\n\tlet pxRange = 4.0;\n\tlet sz = vec2f(textureDimensions(fontTexture, 0));\n\tlet dx = sz.x*length(vec2f(dpdxFine(input.texCoord.x), dpdyFine(input.texCoord.x)));\n\tlet dy = sz.y*length(vec2f(dpdxFine(input.texCoord.y), dpdyFine(input.texCoord.y)));\n\tlet toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);\n\tlet sigDist = sampleMsdf(input.texCoord) - 0.5;\n\tlet pxDist = sigDist * toPixels;\n\tlet edgeWidth = 0.5;\n\tlet alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);\n\tif (alpha < 0.001) {\n\t\tdiscard;\n\t}\n\treturn vec4f(input.fillColor.rgb, input.fillColor.a * alpha);\n}\n"}),a=Q5.device.createBindGroupLayout({label:"MSDF text group layout",entries:[{binding:0,visibility:GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT,buffer:{type:"read-only-storage"}},{binding:1,visibility:GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT,buffer:{type:"read-only-storage"}}]}),n=Q5.device.createSampler({minFilter:"linear",magFilter:"linear",mipmapFilter:"linear",maxAnisotropy:16}),o=Q5.device.createBindGroupLayout({label:"MSDF font group layout",entries:[{binding:0,visibility:GPUShaderStage.FRAGMENT,texture:{}},{binding:1,visibility:GPUShaderStage.FRAGMENT,sampler:{}},{binding:2,visibility:GPUShaderStage.VERTEX,buffer:{type:"read-only-storage"}}]}),i=Q5.device.createPipelineLayout({bindGroupLayouts:[...e.bindGroupLayouts,o,a]});e._pipelineConfigs[2]={label:"msdf font pipeline",layout:i,vertex:{module:r,entryPoint:"vertexMain"},fragment:{module:r,entryPoint:"fragmentMain",targets:[{format:"bgra8unorm",blend:e.blendConfigs.normal}]},primitive:{topology:"triangle-strip",stripIndexFormat:"uint32"}},e._pipelines[2]=Q5.device.createRenderPipeline(e._pipelineConfigs[2]);class s{constructor(e,t,r,a){this.bindGroup=e,this.lineHeight=t,this.chars=r,this.kernings=a;let n=Object.values(r);this.charCount=n.length,this.defaultChar=n[0]}getChar(e){return this.chars[e]??this.defaultChar}getXAdvance(e,t=-1){let r=this.getChar(e);if(t>=0){let a=this.kernings.get(e);if(a)return r.xadvance+(a.get(t)??0)}return r.xadvance}}e._fonts=[];let l={},d=e.createGraphics(1,1);d.colorMode(e.RGB,1),e.loadFont=(r,a)=>{if("json"!=r.slice(r.lastIndexOf(".")+1))return d.loadFont(r,a);let i=r.slice(r.lastIndexOf("/")+1,r.lastIndexOf("-"));return(async(r,a,i)=>{t._preloadCount++;let d=await fetch(r);if(404==d.status)return t._preloadCount--,"";let c=await d.json(),h=r.lastIndexOf("/"),u=-1!=h?r.substring(0,h+1):"";d=await fetch(u+c.pages[0]);let p=await createImageBitmap(await d.blob()),f=[p.width,p.height,1],_=Q5.device.createTexture({label:`MSDF ${a}`,size:f,format:"rgba8unorm",usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT});Q5.device.queue.copyExternalImageToTexture({source:p},{texture:_},f),"string"==typeof c.chars&&(c.chars=e.CSV.parse(c.chars," "),c.kernings=e.CSV.parse(c.kernings," "));let g=c.chars.length,x=Q5.device.createBuffer({size:32*g,usage:GPUBufferUsage.STORAGE,mappedAtCreation:!0}),m=new Float32Array(x.getMappedRange()),v=1/c.common.scaleW,y=1/c.common.scaleH,w={},b=0;for(let[e,t]of c.chars.entries())w[t.id]=t,w[t.id].charIndex=e,m[b]=t.x*v,m[b+1]=t.y*y,m[b+2]=t.width*v,m[b+3]=t.height*y,m[b+4]=t.width,m[b+5]=t.height,m[b+6]=t.xoffset,m[b+7]=-t.yoffset,b+=8;x.unmap();let S=Q5.device.createBindGroup({label:"msdf font bind group",layout:o,entries:[{binding:0,resource:_.createView()},{binding:1,resource:n},{binding:2,resource:{buffer:x}}]}),C=new Map;if(c.kernings)for(let e of c.kernings){let t=C.get(e.first);t||(t=new Map,C.set(e.first,t)),t.set(e.second,e.amount)}e._font=new s(S,c.common.lineHeight,w,C),e._font.index=e._fonts.length,e._fonts.push(e._font),l[a]=e._font,t._preloadCount--,i&&i(a)})(r,i,a),i},e._textSize=18,e._textAlign="left",e._textBaseline="alphabetic";let c=!1,h=22.5,u=4.5,p=1.25;e.textFont=t=>{e._font=l[t]},e.textSize=t=>{e._textSize=t,c||(h=t*p,u=h-t)},e.textLeading=t=>{e._font.lineHeight=h=t,u=h-e._textSize,p=h/e._textSize,c=!0},e.textAlign=(t,r)=>{e._textAlign=t,r&&(e._textBaseline=r)},e._charStack=[],e._textStack=[];let f,_=(e,t,r)=>{let a=0,n=0,o=0,i=0,s=0,l=[],d=t.charCodeAt(0);for(let c=0;c{if(!e._font)return void(navigator.onLine&&!f&&(f=!0,e.loadFont("https://q5js.org/fonts/YaHei-msdf.json")));if(t.length>n){let e=[],r=0;for(;r=t.length){e.push(t.slice(r));break}let o=t.lastIndexOf(" ",a);(-1==o||o{let o=0;"center"==d?o=-.5*s.width- -.5*(s.width-s.lineWidths[a]):"right"==d&&(o=s.width-s.lineWidths[a]),l[p]=e+o,l[p+1]=t+r,l[p+2]=n.charIndex,l[p+3]=u,p+=4}))}else s=_(e._font,t,((e,t,r,a)=>{l[p]=e,l[p+1]=t,l[p+2]=a.charIndex,l[p+3]=u,p+=4})),"alphabetic"==c?a-=e._textSize:"center"==c?a-=.5*e._textSize:"bottom"==c&&(a-=h);e._charStack.push(l);let g=[];e._matrixDirty&&e._saveMatrix(),g[0]=r,g[1]=-a,g[2]=e._textSize/44,g[3]=e._transformIndex,g[4]=e._fillSet?e._fillIndex:0,g[5]=e._strokeIndex,e._textStack.push(g),e.drawStack.push(2,s.printedCharCount,e._font.index)},e.textWidth=t=>e._font?_(e._font,t).width:0,e.createTextImage=(t,r,a)=>{if(d.textSize(e._textSize),e._doFill){let t=4*e._fillIndex;d.fill(colorStack.slice(t,t+4))}if(e._doStroke){let t=4*e._strokeIndex;d.stroke(colorStack.slice(t,t+4))}let n=d.createTextImage(t,r,a);if(null==n.canvas.textureIndex)e._createTexture(n);else if(n.modified){let t=n.canvas,r=[t.width,t.height,1],a=e._textures[t.textureIndex];Q5.device.queue.copyExternalImageToTexture({source:t},{texture:a,colorSpace:e.canvas.colorSpace},r),n.modified=!1}return n},e.textImage=(t,r,a)=>{"string"==typeof t&&(t=e.createTextImage(t));let n=e._imageMode;e._imageMode="corner";let o=e._textAlign;"center"==o?r-=t.canvas.hw:"right"==o&&(r-=t.width);let i=e._textBaseline;"alphabetic"==i?a-=t._leading:"center"==i?a-=t._middle:"bottom"==i?a-=t._bottom:"top"==i&&(a-=t._top),e.image(t,r,a),e._imageMode=n},e._hooks.preRender.push((()=>{if(!e._charStack.length)return;let t=0;for(let r of e._charStack)t+=4*r.length;let r=Q5.device.createBuffer({size:t,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(r.getMappedRange()).set(e._charStack.flat()),r.unmap();let n=6*e._textStack.length*4,o=Q5.device.createBuffer({label:"textBuffer",size:n,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST,mappedAtCreation:!0});new Float32Array(o.getMappedRange()).set(e._textStack.flat()),o.unmap(),e._textBindGroup=Q5.device.createBindGroup({label:"msdf text bind group",layout:a,entries:[{binding:0,resource:{buffer:r}},{binding:1,resource:{buffer:o}}]})})),e._hooks.postRender.push((()=>{e._charStack.length=0,e._textStack.length=0}))}; diff --git a/src/q5-core.js b/src/q5-core.js index f98dd72..e164139 100644 --- a/src/q5-core.js +++ b/src/q5-core.js @@ -1,6 +1,6 @@ /** * q5.js - * @version 2.5 + * @version 2.6 * @author quinton-ashley, Tezumie, and LingDong- * @license LGPL-3.0 * @class Q5 diff --git a/src/q5-webgpu-canvas.js b/src/q5-webgpu-canvas.js index 607a0ab..b7dfbfd 100644 --- a/src/q5-webgpu-canvas.js +++ b/src/q5-webgpu-canvas.js @@ -13,7 +13,11 @@ Q5.renderers.webgpu.canvas = ($, q) => { if ($.colorMode) $.colorMode('rgb', 1); - let pass, colorsLayout; + let pass, + mainView, + colorsLayout, + colorIndex = 1, + colorStackIndex = 8; $._pipelineConfigs = []; $._pipelines = []; @@ -23,8 +27,11 @@ Q5.renderers.webgpu.canvas = ($, q) => { let drawStack = ($.drawStack = []); // colors used for each draw call + + let colorStack = ($.colorStack = new Float32Array(1e6)); + // prettier-ignore - let colorsStack = ($.colorsStack = [ + colorStack.set([ 0, 0, 0, 1, // black 1, 1, 1, 1 // white ]); @@ -56,7 +63,7 @@ Q5.renderers.webgpu.canvas = ($, q) => { entries: [ { binding: 0, - visibility: GPUShaderStage.FRAGMENT, + visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'read-only-storage', hasDynamicOffset: false @@ -72,28 +79,49 @@ Q5.renderers.webgpu.canvas = ($, q) => { usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }); + let createMainView = () => { + mainView = Q5.device + .createTexture({ + size: [$.canvas.width, $.canvas.height], + sampleCount: 4, + format: 'bgra8unorm', + usage: GPUTextureUsage.RENDER_ATTACHMENT + }) + .createView(); + }; + $._createCanvas = (w, h, opt) => { q.ctx = q.drawingContext = c.getContext('webgpu'); opt.format ??= navigator.gpu.getPreferredCanvasFormat(); opt.device ??= Q5.device; - // needed for blend modes but couldn't get it working + // needed for other blend modes but couldn't get it working // opt.alphaMode = 'premultiplied'; $.ctx.configure(opt); Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh])); + createMainView(); + return c; }; $._resizeCanvas = (w, h) => { $._setCanvasSize(w, h); + createMainView(); + }; + + $.pixelDensity = (v) => { + if (!v || v == $._pixelDensity) return $._pixelDensity; + $._pixelDensity = v; + $._setCanvasSize(c.w, c.h); + createMainView(); + return v; }; // current color index, used to associate a vertex with a color - let colorIndex = 1; let addColor = (r, g, b, a = 1) => { if (typeof r == 'string') r = $.color(r); else if (b == undefined) { @@ -101,8 +129,21 @@ Q5.renderers.webgpu.canvas = ($, q) => { a = g ?? 1; g = b = r; } - if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a); - else colorsStack.push(r, g, b, a); + if (r._q5Color) { + a = r.a; + b = r.b; + g = r.g; + r = r.r; + } + + let cs = colorStack, + i = colorStackIndex; + cs[i++] = r; + cs[i++] = g; + cs[i++] = b; + cs[i++] = a; + colorStackIndex = i; + colorIndex++; }; @@ -389,7 +430,8 @@ Q5.renderers.webgpu.canvas = ($, q) => { label: 'q5-webgpu', colorAttachments: [ { - view: $.ctx.getCurrentTexture().createView(), + view: mainView, + resolveTarget: $.ctx.getCurrentTexture().createView(), loadOp: 'clear', storeOp: 'store' } @@ -406,7 +448,6 @@ Q5.renderers.webgpu.canvas = ($, q) => { }); new Float32Array(transformBuffer.getMappedRange()).set(transformStates.flat()); - transformBuffer.unmap(); $._transformBindGroup = Q5.device.createBindGroup({ @@ -420,14 +461,13 @@ Q5.renderers.webgpu.canvas = ($, q) => { pass.setBindGroup(0, $._transformBindGroup); - const colorsBuffer = Q5.device.createBuffer({ - size: colorsStack.length * 4, + let colorsBuffer = Q5.device.createBuffer({ + size: colorStackIndex * 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); - new Float32Array(colorsBuffer.getMappedRange()).set(colorsStack); - + new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex)); colorsBuffer.unmap(); $._colorsBindGroup = Q5.device.createBindGroup({ @@ -439,19 +479,15 @@ Q5.renderers.webgpu.canvas = ($, q) => { for (let m of $._hooks.preRender) m(); - let drawVertOffset = 0; - let imageVertOffset = 0; - let textCharOffset = 0; - let curPipelineIndex = -1; - let curTextureIndex = -1; + let drawVertOffset = 0, + imageVertOffset = 0, + textCharOffset = 0, + curPipelineIndex = -1, + curTextureIndex = -1; - for (let i = 0; i < drawStack.length; i += 2) { + for (let i = 0; i < drawStack.length; i += 3) { let v = drawStack[i + 1]; - - if (drawStack[i] == -1) { - v(); - continue; - } + let o = drawStack[i + 2]; if (curPipelineIndex != drawStack[i]) { curPipelineIndex = drawStack[i]; @@ -460,8 +496,8 @@ Q5.renderers.webgpu.canvas = ($, q) => { if (curPipelineIndex == 0) { // v is the number of vertices - pass.draw(v, 1, drawVertOffset); - drawVertOffset += v; + pass.drawIndexed(v, 1, 0, drawVertOffset); + drawVertOffset += o; } else if (curPipelineIndex == 1) { if (curTextureIndex != v) { // v is the texture index @@ -470,7 +506,7 @@ Q5.renderers.webgpu.canvas = ($, q) => { pass.draw(6, 1, imageVertOffset); imageVertOffset += 6; } else if (curPipelineIndex == 2) { - pass.setBindGroup(2, $._font.bindGroup); + pass.setBindGroup(2, $._fonts[o].bindGroup); pass.setBindGroup(3, $._textBindGroup); // v is the number of characters in the text @@ -486,12 +522,13 @@ Q5.renderers.webgpu.canvas = ($, q) => { pass.end(); let commandBuffer = $.encoder.finish(); Q5.device.queue.submit([commandBuffer]); + q.pass = $.encoder = null; // clear the stacks for the next frame $.drawStack.length = 0; - $.colorsStack.length = 8; colorIndex = 1; + colorStackIndex = 8; rotation = 0; transformStates.length = 1; $._transformIndexStack.length = 0; diff --git a/src/q5-webgpu-drawing.js b/src/q5-webgpu-drawing.js index ea3ba41..bb056af 100644 --- a/src/q5-webgpu-drawing.js +++ b/src/q5-webgpu-drawing.js @@ -1,35 +1,45 @@ Q5.renderers.webgpu.drawing = ($, q) => { let c = $.canvas, drawStack = $.drawStack, - verticesStack = [], + vertexStack = new Float32Array(1e7), + indexStack = new Uint32Array(1e6), + vertIndex = 0, + vertCount = 0, + idxBufferIndex = 0, colorIndex; let vertexShader = Q5.device.createShaderModule({ label: 'drawingVertexShader', code: ` +struct VertexInput { + @location(0) pos: vec2f, + @location(1) colorIndex: f32, + @location(2) transformIndex: f32 +} struct VertexOutput { @builtin(position) position: vec4f, - @location(0) colorIndex: f32 -}; - + @location(0) color: vec4f +} struct Uniforms { halfWidth: f32, halfHeight: f32 -}; +} @group(0) @binding(0) var uniforms: Uniforms; -@group(0) @binding(1) var transforms: array>; +@group(0) @binding(1) var transforms: array>; + +@group(1) @binding(0) var colors : array; @vertex -fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput { - var vert = vec4f(pos, 0.0, 1.0); - vert = transforms[i32(transformIndex)] * vert; +fn vertexMain(input: VertexInput) -> VertexOutput { + var vert = vec4f(input.pos, 0.0, 1.0); + vert = transforms[i32(input.transformIndex)] * vert; vert.x /= uniforms.halfWidth; vert.y /= uniforms.halfHeight; var output: VertexOutput; output.position = vert; - output.colorIndex = colorIndex; + output.color = colors[i32(input.colorIndex)]; return output; } ` @@ -38,12 +48,9 @@ fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2 let fragmentShader = Q5.device.createShaderModule({ label: 'drawingFragmentShader', code: ` -@group(1) @binding(0) var colors : array; - @fragment -fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { - let index = i32(colorIndex); - return mix(colors[index], colors[index + 1], fract(colorIndex)); +fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f { + return color; } ` }); @@ -75,74 +82,92 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { entryPoint: 'fragmentMain', targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }] }, - primitive: { topology: 'triangle-list' } + primitive: { topology: 'triangle-list' }, + multisample: { + count: 4 + } }; $._pipelines[0] = Q5.device.createRenderPipeline($._pipelineConfigs[0]); - let shapeVertices; - - $.beginShape = () => { - shapeVertices = []; + const addVert = (x, y, ci, ti) => { + let v = vertexStack, + i = vertIndex; + v[i++] = x; + v[i++] = y; + v[i++] = ci; + v[i++] = ti; + vertIndex = i; + vertCount++; }; - $.vertex = (x, y) => { - if ($._matrixDirty) $._saveMatrix(); - shapeVertices.push(x, -y, $._fillIndex, $._transformIndex); - }; - - $.endShape = (close) => { - if (!$._doFill) { - shapeVertices = []; - return; - } - let v = shapeVertices; - if (v.length < 12) { - throw new Error('A shape must have at least 3 vertices.'); - } - if (close) { - // Close the shape by adding the first vertex at the end - v.push(v[0], v[1], v[2], v[3]); - } - // Convert the shape to triangles - let triangles = []; - for (let i = 4; i < v.length; i += 4) { - triangles.push( - v[0], // First vertex - v[1], - v[2], - v[3], - v[i - 4], // Previous vertex - v[i - 3], - v[i - 2], - v[i - 1], - v[i], // Current vertex - v[i + 1], - v[i + 2], - v[i + 3] - ); - } - shapeVertices = []; - - verticesStack.push(...triangles); - drawStack.push(0, triangles.length / 4); + const addIndex = (i1, i2, i3) => { + let is = indexStack, + ii = idxBufferIndex; + is[ii++] = i1; + is[ii++] = i2; + is[ii++] = i3; + idxBufferIndex = ii; }; - $.triangle = (x1, y1, x2, y2, x3, y3) => { - $.beginShape(); - $.vertex(x1, y1); - $.vertex(x2, y2); - $.vertex(x3, y3); - $.endShape(1); + const addQuad = (x1, y1, x2, y2, x3, y3, x4, y4, ci, ti) => { + let v = vertexStack, + i = vertIndex; + + let i1 = vertCount++; + v[i++] = x1; + v[i++] = y1; + v[i++] = ci; + v[i++] = ti; + + let i2 = vertCount++; + v[i++] = x2; + v[i++] = y2; + v[i++] = ci; + v[i++] = ti; + + let i3 = vertCount++; + v[i++] = x3; + v[i++] = y3; + v[i++] = ci; + v[i++] = ti; + + let i4 = vertCount++; + v[i++] = x4; + v[i++] = y4; + v[i++] = ci; + v[i++] = ti; + + vertIndex = i; + + let is = indexStack, + ii = idxBufferIndex; + is[ii++] = i1; + is[ii++] = i2; + is[ii++] = i3; + is[ii++] = i1; + is[ii++] = i3; + is[ii++] = i4; + idxBufferIndex = ii; + + drawStack.push(0, 6, 4); }; - $.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => { - $.beginShape(); - $.vertex(x1, y1); - $.vertex(x2, y2); - $.vertex(x3, y3); - $.vertex(x4, y4); - $.endShape(1); + const addEllipse = (x, y, a, b, n, ci, ti) => { + let t = 0, + angleIncrement = $.TAU / n, + indicesStart = vertIndex / 4; + addVert(x, y, ci, ti); // Center vertex + for (let i = 0; i <= n; i++) { + let vx = x + a * Math.cos(t), + vy = y + b * Math.sin(t); + addVert(vx, vy, ci, ti); + if (i > 0) { + addIndex(indicesStart, indicesStart + i, indicesStart + i + 1); + } + t += angleIncrement; + } + drawStack.push(0, n * 3, n + 2); }; $.rectMode = (x) => ($._rectMode = x); @@ -150,81 +175,101 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { $.rect = (x, y, w, h) => { let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode); let ci, ti; - - if ($._doFill) { - ci = colorIndex ?? $._fillIndex; - if ($._matrixDirty) $._saveMatrix(); - ti = $._transformIndex; - // two triangles make a rectangle - // prettier-ignore - verticesStack.push( - l, t, ci, ti, - r, t, ci, ti, - l, b, ci, ti, - r, t, ci, ti, - l, b, ci, ti, - r, b, ci, ti - ); - drawStack.push(0, 6); - } + if ($._matrixDirty) $._saveMatrix(); + ti = $._transformIndex; if ($._doStroke) { ci = $._strokeIndex; + + // outer rectangle coordinates let sw = $._strokeWeight / 2; - // Outer rectangle coordinates - let to = t - sw, - bo = b + sw, + let to = t + sw, + bo = b - sw, lo = l - sw, ro = r + sw; - // Inner rectangle coordinates - let ti = t + sw, - bi = b - sw, - li = l + sw, - ri = r - sw; - - // Create vertices for the stroke as a shape - // prettier-ignore - verticesStack.push( - lo, to, ci, ti, // Top side - ro, to, ci, ti, - lo, ti, ci, ti, - lo, ti, ci, ti, - ro, to, ci, ti, - ro, ti, ci, ti, - ro, to, ci, ti, // right side - ro, bo, ci, ti, - ri, to, ci, ti, - ri, to, ci, ti, - ro, bo, ci, ti, - ri, bo, ci, ti, - ro, bo, ci, ti, // Bottom side - lo, bo, ci, ti, - ro, bi, ci, ti, - ro, bi, ci, ti, - lo, bo, ci, ti, - lo, bi, ci, ti, - lo, bo, ci, ti, // Left side - lo, to, ci, ti, - li, bo, ci, ti, - li, bo, ci, ti, - lo, to, ci, ti, - li, to, ci, ti - ); - - drawStack.push(0, 24); + // stroke is simply a bigger rectangle drawn first + addQuad(lo, to, ro, to, ro, bo, lo, bo, ci, ti); + + // inner rectangle coordinates + t -= sw; + b += sw; + l += sw; + r -= sw; + } + + if ($._doFill) { + ci = colorIndex ?? $._fillIndex; + + // two triangles make a rectangle + addQuad(l, t, r, t, r, b, l, b, ci, ti); } }; $.square = (x, y, s) => $.rect(x, y, s, s); + // prettier-ignore + const getArcSegments = (d) => + d < 4 ? 6 : + d < 6 ? 8 : + d < 10 ? 10 : + d < 16 ? 12 : + d < 20 ? 14 : + d < 22 ? 16 : + d < 24 ? 18 : + d < 28 ? 20 : + d < 34 ? 22 : + d < 42 ? 24 : + d < 48 ? 26 : + d < 56 ? 28 : + d < 64 ? 30 : + d < 72 ? 32 : + d < 84 ? 34 : + d < 96 ? 36 : + d < 98 ? 38 : + d < 113 ? 40 : + d < 149 ? 44 : + d < 199 ? 48 : + d < 261 ? 52 : + d < 353 ? 56 : + d < 461 ? 60 : + d < 585 ? 64 : + d < 1200 ? 70 : + d < 1800 ? 80 : + d < 2400 ? 90 : + 100; + + $.ellipseMode = (x) => ($._ellipseMode = x); + + $.ellipse = (x, y, w, h) => { + let n = getArcSegments(w == h ? w : Math.max(w, h)); + let a = Math.max(w, 1) / 2; + let b = w == h ? a : Math.max(h, 1) / 2; + let ci; + if ($._matrixDirty) $._saveMatrix(); + let ti = $._transformIndex; + if ($._doStroke) { + let sw = $._strokeWeight / 2; + addEllipse(x, y, a + sw, b + sw, n, $._strokeIndex, ti); + a -= sw; + b -= sw; + } + if ($._doFill) { + addEllipse(x, y, a, b, n, colorIndex ?? $._fillIndex, ti); + } + }; + + $.circle = (x, y, d) => $.ellipse(x, y, d, d); + $.point = (x, y) => { colorIndex = $._strokeIndex; + $._doStroke = false; let sw = $._strokeWeight; if (sw < 2) { sw = Math.round(sw); $.rect(x, y, sw, sw); } else $.ellipse(x, y, sw, sw); + $._doStroke = true; colorIndex = null; }; @@ -232,16 +277,93 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { colorIndex = $._strokeIndex; $.push(); - $.translate(x1, y1); + $._doStroke = false; + $.translate(x1, -y1); $.rotate($.atan2(y2 - y1, x2 - x1)); let length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); - let sw = $._strokeWeight; - $.rect(0, -sw / 2, length, sw); + let sw = $._strokeWeight, + hsw = sw / 2; + $._rectMode = 'corner'; + if (sw < 4) { + $.rect(-hsw, -hsw, length + hsw, sw); + } else { + $._ellipseMode = 'center'; + $.ellipse(0, 0, sw, sw); + $.ellipse(length, 0, sw, sw); + $.rect(0, -hsw, length, sw); + } + $.pop(); colorIndex = null; }; + let shapeVertCount; + + $.beginShape = () => { + shapeVertCount = 0; + }; + + $.vertex = (x, y) => { + if ($._matrixDirty) $._saveMatrix(); + addVert(x, -y, $._fillIndex, $._transformIndex); + shapeVertCount++; + }; + + $.endShape = (close) => { + if (shapeVertCount < 3) { + throw new Error('A shape must have at least 3 vertices.'); + } + + let firstVert = vertCount - shapeVertCount; + + if ($._doFill) { + // make a simple triangle fan, starting from the first vertex + for (let i = firstVert + 1; i < vertCount - 1; i++) { + addIndex(firstVert, i, i + 1); + } + drawStack.push(0, (shapeVertCount - 2) * 3, shapeVertCount); + } + + if ($._doStroke) { + let first = firstVert * 4, + last = vertIndex - 4; + for (let i = first; i < last; i += 4) { + let x1 = vertexStack[i], + y1 = vertexStack[i + 1], + x2 = vertexStack[i + 4], + y2 = vertexStack[i + 5]; + $.line(x1, y1, x2, y2); + } + if (close) { + let x1 = vertexStack[last], + y1 = vertexStack[last + 1], + x2 = vertexStack[first], + y2 = vertexStack[first + 1]; + $.line(x1, y1, x2, y2); + } + } + + shapeVertCount = 0; + }; + + $.triangle = (x1, y1, x2, y2, x3, y3) => { + $.beginShape(); + $.vertex(x1, y1); + $.vertex(x2, y2); + $.vertex(x3, y3); + $.endShape(); + }; + + $.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => { + $.beginShape(); + $.vertex(x1, y1); + $.vertex(x2, y2); + $.vertex(x3, y3); + $.vertex(x4, y4); + $.endShape(); + }; + $.background = (r, g, b, a) => { $.push(); $.resetMatrix(); @@ -262,90 +384,35 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f { if (!$._fillSet) $._fillIndex = 1; }; - /** - * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28) - * This lookup table is used for better performance. - * @param {Number} d diameter of the circle - * @returns n number of segments - */ - // prettier-ignore - const getArcSegments = (d) => - d < 4 ? 6 : - d < 6 ? 8 : - d < 10 ? 10 : - d < 16 ? 12 : - d < 20 ? 14 : - d < 22 ? 16 : - d < 24 ? 18 : - d < 28 ? 20 : - d < 34 ? 22 : - d < 42 ? 24 : - d < 48 ? 26 : - d < 56 ? 28 : - d < 64 ? 30 : - d < 72 ? 32 : - d < 84 ? 34 : - d < 96 ? 36 : - d < 98 ? 38 : - d < 113 ? 40 : - d < 149 ? 44 : - d < 199 ? 48 : - d < 261 ? 52 : - d < 353 ? 56 : - d < 461 ? 60 : - d < 585 ? 64 : - d < 1200 ? 70 : - d < 1800 ? 80 : - d < 2400 ? 90 : - 100; - - $.ellipseMode = (x) => ($._ellipseMode = x); - - $.ellipse = (x, y, w, h) => { - const n = getArcSegments(w == h ? w : Math.max(w, h)); - - let a = Math.max(w, 1) / 2; - let b = w == h ? a : Math.max(h, 1) / 2; - - let t = 0; // theta - const angleIncrement = $.TAU / n; - const ci = colorIndex ?? $._fillIndex; - if ($._matrixDirty) $._saveMatrix(); - const ti = $._transformIndex; - let vx1, vy1, vx2, vy2; - for (let i = 0; i <= n; i++) { - vx1 = vx2; - vy1 = vy2; - vx2 = x + a * Math.cos(t); - vy2 = y + b * Math.sin(t); - t += angleIncrement; - - if (i == 0) continue; - - verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti); - } - - drawStack.push(0, n * 3); - }; - - $.circle = (x, y, d) => $.ellipse(x, y, d, d); - $._hooks.preRender.push(() => { $.pass.setPipeline($._pipelines[0]); - const vertexBuffer = Q5.device.createBuffer({ - size: verticesStack.length * 4, + let vertexBuffer = Q5.device.createBuffer({ + size: vertIndex * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); - new Float32Array(vertexBuffer.getMappedRange()).set(verticesStack); + new Float32Array(vertexBuffer.getMappedRange()).set(vertexStack.slice(0, vertIndex)); vertexBuffer.unmap(); $.pass.setVertexBuffer(0, vertexBuffer); + + let indexBuffer = Q5.device.createBuffer({ + size: idxBufferIndex * 4, + usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, + mappedAtCreation: true + }); + + new Uint32Array(indexBuffer.getMappedRange()).set(indexStack.slice(0, idxBufferIndex)); + indexBuffer.unmap(); + + $.pass.setIndexBuffer(indexBuffer, 'uint32'); }); $._hooks.postRender.push(() => { - verticesStack.length = 0; + vertIndex = 0; + vertCount = 0; + idxBufferIndex = 0; }); }; diff --git a/src/q5-webgpu-image.js b/src/q5-webgpu-image.js index cb4f4da..f5fe62f 100644 --- a/src/q5-webgpu-image.js +++ b/src/q5-webgpu-image.js @@ -1,6 +1,6 @@ Q5.renderers.webgpu.image = ($, q) => { $._textureBindGroups = []; - let verticesStack = []; + let vertexStack = []; let vertexShader = Q5.device.createShaderModule({ label: 'imageVertexShader', @@ -8,15 +8,14 @@ Q5.renderers.webgpu.image = ($, q) => { struct VertexOutput { @builtin(position) position: vec4f, @location(0) texCoord: vec2f -}; - +} struct Uniforms { halfWidth: f32, halfHeight: f32 -}; +} @group(0) @binding(0) var uniforms: Uniforms; -@group(0) @binding(1) var transforms: array>; +@group(0) @binding(1) var transforms: array>; @vertex fn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput { @@ -175,7 +174,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode); // prettier-ignore - verticesStack.push( + vertexStack.push( l, t, 0, 0, ti, r, t, 1, 0, ti, l, b, 0, 1, ti, @@ -184,7 +183,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { r, b, 1, 1, ti ); - $.drawStack.push(1, img.textureIndex); + $.drawStack.push(1, img.textureIndex, 0); }; $._hooks.preRender.push(() => { @@ -194,7 +193,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { $.pass.setPipeline($._pipelines[1]); const vertexBuffer = Q5.device.createBuffer({ - size: verticesStack.length * 4, + size: vertexStack.length * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, mappedAtCreation: true }); @@ -206,7 +205,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f { }); $._hooks.postRender.push(() => { - verticesStack.length = 0; + vertexStack.length = 0; }); }; diff --git a/src/q5-webgpu-text.js b/src/q5-webgpu-text.js index 7ca3717..1fde7ba 100644 --- a/src/q5-webgpu-text.js +++ b/src/q5-webgpu-text.js @@ -7,35 +7,35 @@ const pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0)); struct VertexInput { @builtin(vertex_index) vertex : u32, - @builtin(instance_index) instance : u32, -}; + @builtin(instance_index) instance : u32 +} struct VertexOutput { @builtin(position) position : vec4f, - @location(0) texcoord : vec2f, - @location(1) colorIndex : f32 -}; + @location(0) texCoord : vec2f, + @location(1) fillColor : vec4f +} struct Char { texOffset: vec2f, texExtent: vec2f, size: vec2f, offset: vec2f, -}; +} struct Text { pos: vec2f, scale: f32, transformIndex: f32, fillIndex: f32, strokeIndex: f32 -}; +} struct Uniforms { halfWidth: f32, halfHeight: f32 -}; +} @group(0) @binding(0) var uniforms: Uniforms; -@group(0) @binding(1) var transforms: array>; +@group(0) @binding(1) var transforms: array>; -@group(1) @binding(0) var colors : array; +@group(1) @binding(0) var colors : array; @group(2) @binding(0) var fontTexture: texture_2d; @group(2) @binding(1) var fontSampler: sampler; @@ -61,13 +61,13 @@ fn vertexMain(input : VertexInput) -> VertexOutput { var output : VertexOutput; output.position = vert; - output.texcoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset; - output.colorIndex = text.fillIndex; + output.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset; + output.fillColor = colors[i32(text.fillIndex)]; return output; } -fn sampleMsdf(texcoord: vec2f) -> f32 { - let c = textureSample(fontTexture, fontSampler, texcoord); +fn sampleMsdf(texCoord: vec2f) -> f32 { + let c = textureSample(fontTexture, fontSampler, texCoord); return max(min(c.r, c.g), min(max(c.r, c.g), c.b)); } @@ -77,18 +77,17 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { // uses the default which is 4. let pxRange = 4.0; let sz = vec2f(textureDimensions(fontTexture, 0)); - let dx = sz.x*length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x))); - let dy = sz.y*length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y))); + let dx = sz.x*length(vec2f(dpdxFine(input.texCoord.x), dpdyFine(input.texCoord.x))); + let dy = sz.y*length(vec2f(dpdxFine(input.texCoord.y), dpdyFine(input.texCoord.y))); let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy); - let sigDist = sampleMsdf(input.texcoord) - 0.5; + let sigDist = sampleMsdf(input.texCoord) - 0.5; let pxDist = sigDist * toPixels; let edgeWidth = 0.5; let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist); if (alpha < 0.001) { discard; } - let fillColor = colors[i32(input.colorIndex)]; - return vec4f(fillColor.rgb, fillColor.a * alpha); + return vec4f(input.fillColor.rgb, input.fillColor.a * alpha); } ` }); @@ -180,6 +179,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { } } + $._fonts = []; let fonts = {}; let createFont = async (fontJsonUrl, fontName, cb) => { @@ -266,6 +266,8 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { $._font = new MsdfFont(fontBindGroup, atlas.common.lineHeight, chars, kernings); + $._font.index = $._fonts.length; + $._fonts.push($._font); fonts[fontName] = $._font; q._preloadCount--; @@ -295,11 +297,6 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { $.textFont = (fontName) => { $._font = fonts[fontName]; - - // replay the change of font in the draw stack - $.drawStack.push(-1, () => { - $._font = fonts[fontName]; - }); }; $.textSize = (size) => { $._textSize = size; @@ -412,7 +409,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { } } - let charsData = new Float32Array((str.length - spaces) * 4); + let charsData = []; let ta = $._textAlign, tb = $._textBaseline, @@ -458,7 +455,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { } $._charStack.push(charsData); - let text = new Float32Array(6); + let text = []; if ($._matrixDirty) $._saveMatrix(); @@ -470,7 +467,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { text[5] = $._strokeIndex; $._textStack.push(text); - $.drawStack.push(2, measurements.printedCharCount); + $.drawStack.push(2, measurements.printedCharCount, $._font.index); }; $.textWidth = (str) => { @@ -483,11 +480,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { if ($._doFill) { let fi = $._fillIndex * 4; - g.fill(colorsStack.slice(fi, fi + 4)); + g.fill(colorStack.slice(fi, fi + 4)); } if ($._doStroke) { let si = $._strokeIndex * 4; - g.stroke(colorsStack.slice(si, si + 4)); + g.stroke(colorStack.slice(si, si + 4)); } let img = g.createTextImage(str, w, h); @@ -538,7 +535,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { totalTextSize += charsData.length * 4; } - // Create a single buffer for all text data + // Create a single buffer for all char data let charBuffer = Q5.device.createBuffer({ size: totalTextSize, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, @@ -546,12 +543,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { }); // Copy all text data into the buffer - let textArray = new Float32Array(charBuffer.getMappedRange()); - let o = 0; - for (let arr of $._charStack) { - textArray.set(arr, o); - o += arr.length; - } + new Float32Array(charBuffer.getMappedRange()).set($._charStack.flat()); charBuffer.unmap(); // Calculate total buffer size for metadata @@ -566,12 +558,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f { }); // Copy all metadata into the buffer - let metadataArray = new Float32Array(textBuffer.getMappedRange()); - o = 0; - for (let array of $._textStack) { - metadataArray.set(array, o); - o += array.length; - } + new Float32Array(textBuffer.getMappedRange()).set($._textStack.flat()); textBuffer.unmap(); // Create a single bind group for the text buffer and metadata buffer diff --git a/src/readme.md b/src/readme.md index 6ede352..446a618 100644 --- a/src/readme.md +++ b/src/readme.md @@ -153,7 +153,7 @@ q5's WebGPU renderer drawing functions like `rect` don't immediately draw on the Implemented functions: -`rect`, `circle`, `ellipse`, `triangle`, `beginShape`, `vertex`, `endShape`, `blendMode` +- `rect`, `circle`, `ellipse`, `triangle`, `line`, `point`, `beginShape`, `vertex`, `endShape`, `rectMode`, `ellipseMode` ## webgpu-image