31:T7af,{ const height = 400; let points = []; let isDrawing = false; let firstRendering = true; const app = new PIXI.Application({ width: width, height, antialias: true, autoDensity: true, backgroundColor: 0xfefefe, resolution: window.devicePixelRatio || 1, }); invalidation.then(() => app.destroy(true, true)); const container = new PIXI.Container(); const viewport = app.stage.addChild(container); container.x = app.screen.width / 2; container.y = app.screen.height / 2; let g; if (triMethod === "earcut") { g = new PIXI.Graphics(); } else { g = new TessGraphics(); } let throttleToggle = false; app.view.onpointerdown = (e) => { isDrawing = true; firstRendering = false; }; app.view.onpointerup = (e) => { isDrawing = false; throttleToggle = false; points = []; }; app.view.onpointerout = (e) => { isDrawing = false; throttleToggle = false; points = []; }; app.view.onpointermove = (e) => { if (!isDrawing || throttleToggle) return throttleToggle = true; const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left - width * 0.5; const y = e.clientY - rect.top - height * 0.5; points.push([x, y, e.pressure]) } viewport.addChild(g); app.ticker.add((delta) => { if (points.length === 0 && !firstRendering) return throttleToggle = false; g.clear(); const stroke = firstRendering ? defaultStroke : PF.getStroke(points, options) g.beginFill(0x000000); // g.lineStyle(4, 0xff0000); g.moveTo(stroke[0][0], stroke[0][1]); stroke.forEach(([x0, y0], i, arr) => { if (i === 0) return const [x1, y1] = arr[(i + 1) % arr.length] g.quadraticCurveTo(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2) }) g.endFill(); }); return Object.assign(app.view, { style: `width: ${width}px` }); }32:T482,triangulate = function triangulate(graphicsData, graphicsGeometry) { let points = graphicsData.points; const holes = graphicsData.holes; const verts = graphicsGeometry.points; const indices = graphicsGeometry.indices; if (points.length >= 6) { const holeArray = []; // Comming soon for (let i = 0; i < holes.length; i++) { const hole = holes[i]; holeArray.push(points.length / 2); points = points.concat(hole.points); } const tess = new Tess2Wasm.Tess(); tess.addContours([points]); // Tesselate const res = tess.tesselate({ windingRule: Tess2.WINDING_POSITIVE, elementType: Tess2.POLYGONS, polySize: 3, vertexSize: 2 }); if (!res.elements.length) { return; } const vrt = res.vertices; const elm = res.elements; const vertPos = verts.length / 2; for (let i = 0; i < res.elements.length; i++ ) { indices.push(res.elements[i] + vertPos); } for(let i = 0; i < vrt.length; i++) { verts.push(vrt[i]); } } }33:[{"id":"a63dc71494ec6c359b031c386710051fefe66cd28d5ac6a774d3cad7f63027032d265f9217285d31ce420b7c9fe7c59315322ee3cf9ced4c0a4db71ca5b0a269","href":"https://static.observableusercontent.com/files/a63dc71494ec6c359b031c386710051fefe66cd28d5ac6a774d3cad7f63027032d265f9217285d31ce420b7c9fe7c59315322ee3cf9ced4c0a4db71ca5b0a269","name":"default.json","type":"application/json","lastModified":1687047715073.823,"size":10031}] 2f:{"title":"Pixi.js x perfect-freehand","cells":[{"id":0,"value":"# Pixi.js x perfect-freehand","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"Rendering [perfect-freehand](https://github.com/steveruizok/perfect-freehand) using [pixi.js](https://github.com/pixijs/pixijs).","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"options = {\n \n return {\n size,\n thinning,\n smoothing,\n streamline,\n easing: (t) => t,\n start: {\n taper: 0,\n easing: (t) => t,\n cap: true\n },\n end: {\n taper: 0,\n easing: (t) => t,\n cap: true\n }\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":584,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"viewof triMethod = Inputs.radio([\"earcut\", \"Tess2\"], {label: \"Triangulation: \", value: \"Tess2\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"viewof size = Inputs.range([1, 100], {label: \"Size\", step: 1, value: 18})","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"viewof thinning = Inputs.range([-1, 1], {label: \"Thinning\", step: 0.1, value: -1.0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof smoothing = Inputs.range([-1, 1], {label: \"Smoothing\", step: 0.1, value: -0.2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"viewof streamline = Inputs.range([0, 1], {label: \"Streamline\", step: 0.1, value: 0.8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":508,"value":"### Alternative triangulation method to render fills using Tess2","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"Stackoverflow: Pixi JS fill behaviour vs SVG fill behaviour ","pinned":false,"hidden":false,"mode":"html"},{"id":504,"value":"Pixi.js issue: Wrong fill on polygons","pinned":false,"hidden":false,"mode":"html"},{"id":506,"value":"Pixi Playground: Triangulate","pinned":false,"hidden":false,"mode":"html"},{"id":422,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"Note: triangulate differs from the linked examples on a single line:\n\n```diff\n+ windingRule: Tess2.WINDING_POSITIVE,\n- windingRule: Tess2.ODD,\n```","pinned":false,"hidden":false,"mode":"md"},{"id":427,"value":"TessGraphics = class TessGraphics extends PIXI.Graphics {\n render(r) { \n PIXI.graphicsUtils.buildPoly.triangulate = triangulate;\n super.render(r);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":554,"value":"#### Default Stroke","pinned":false,"hidden":false,"mode":"md"},{"id":538,"value":"defaultStroke = FileAttachment(\"default.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"#### Pixi.js","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"PIXI = import(\"https://cdn.jsdelivr.net/npm/pixi.js@7.2.4/+esm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"#### Perfect Freehand","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"PF = import('https://cdn.skypack.dev/perfect-freehand@1.2.0?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"#### Tess2","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"Tess2 = _Tess2.default","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"_Tess2 = import('https://cdn.skypack.dev/tess2@1.0.0?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"## Tess2-wasm","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"Tess2Wasm = await _Tess2Wasm.default()","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"_Tess2Wasm = import('https://cdn.skypack.dev/tess2-wasm@1.0.9')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}