2c:null 2d:["$","title",null,{"children":"Pixi.js x perfect-freehand | Nicolas Schmidt | Observable"}] 32: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` }); }33: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]); } } }34:[{"id":"a63dc71494ec6c359b031c386710051fefe66cd28d5ac6a774d3cad7f63027032d265f9217285d31ce420b7c9fe7c59315322ee3cf9ced4c0a4db71ca5b0a269","href":"https://static.observableusercontent.com/files/a63dc71494ec6c359b031c386710051fefe66cd28d5ac6a774d3cad7f63027032d265f9217285d31ce420b7c9fe7c59315322ee3cf9ced4c0a4db71ca5b0a269","name":"default.json","type":"application/json","lastModified":1687047715073.823,"size":10031}] 30:{"id":"63170df361bf08f9","slug":"pixi-js-x-perfect-freehand","title":"Pixi.js x perfect-freehand","thumbnail":"98425f0b961d70b86a8c66c9389a80a340df52e5e362d00cedb6d30c8bb97961","access_level":"public","create_time":"$D2023-06-17T18:27:28.004Z","update_time":"$D2023-11-17T01:47:43.910Z","view_time":null,"first_public_time":"$D2023-06-17T18:27:28.004Z","has_unpublished_edits":null,"fork":{"id":"6d58341e37398bd6","slug":"basic-pixi-js","title":"Basic pixi.js","owner":{"id":"cb9ae2821e1af43b","login":"sharonhsl","name":"Sharon Lam"}},"stars":16,"starred":false,"owner":{"type":"team","id":"57799c7dfb47a7cc","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":"starter_2024"},"version":678,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null}],"members":[{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null,"role":"editor"}],"comments":[{"id":"355f810787150fc4","reply_to_id":null,"content":"You'll have to remove the quotes from the URLs. :)","create_time":"$D2023-06-19T08:40:43.373Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"75c6dad61741c8c1","reply_to_id":"355f810787150fc4","content":"<3 thanks!","create_time":"$D2023-06-19T18:13:06.511Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pixi.js x perfect-freehand","cells":[{"id":0,"value":"# Pixi.js x perfect-freehand","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"### Alternative triangulation method to render fills using Tess2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"Stackoverflow: Pixi JS fill behaviour vs SVG fill behaviour ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"Pixi.js issue: Wrong fill on polygons","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"Pixi Playground: Triangulate","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"

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