Add Path.drawToP5

package.json

@@ -44,6 +44,7 @@
 	"homepage": "https://baku89.github.io/pave",
 	"devDependencies": {
 		"@types/ccapture.js": "^1.1.3",
+		"@types/p5": "^1.7.6",
 		"@typescript-eslint/eslint-plugin": "^8.10.0",
 		"@typescript-eslint/parser": "^8.10.0",
 		"@vuepress/bundler-vite": "2.0.0-rc.2",

src/Path.ts

@@ -13,6 +13,7 @@ import {PathLocation, TimePathLocation} from './Location'
 import {Rect} from './Rect'
 import {Segment} from './Segment'
 import {memoize, toFixedSimple, normalizeIndex, normalizeOffset} from './utils'
+import type p5 from 'p5'
 
 paper.setup(document.createElement('canvas'))
 
@@ -2490,6 +2491,49 @@ export namespace Path {
 		drawToRenderingContext(path, context)
 	}
 
+	/**
+	 * Draws the given path to the context. It calls [`beginShape`](https://p5js.org/reference/p5/beginShape) at the beginning, drawing the path with `vertex` and `bezierVertex` commands, then calls [`endShape`](https://p5js.org/reference/p5/endShape) at the end if the curve is closed.
+	 * @param path The path to draw
+	 * @param p5Instance The p5.js instance. Pass the instance only if you are using p5.js in instance mode.
+	 */
+
+	export function drawToP5(path: Path, p5Instance: p5 | Window = window) {
+		const unarced = unarc(path)
+
+		const _p5 = p5Instance as p5
+
+		for (const {vertices, closed} of unarced.curves) {
+			_p5.beginShape()
+
+			const first = vertices.at(0)
+
+			if (first) {
+				_p5.vertex(...first.point)
+			}
+
+			for (const {point, command, args} of vertices.slice(1)) {
+				if (command === 'L') {
+					_p5.vertex(...point)
+				} else if (command === 'C') {
+					_p5.bezierVertex(...args[0], ...args[1], ...point)
+				}
+			}
+
+			if (closed) {
+				if (first) {
+					const {point, command, args} = first
+					if (command === 'L') {
+						_p5.vertex(...point)
+					} else if (command === 'C') {
+						_p5.bezierVertex(...args[0], ...args[1], ...point)
+					}
+				}
+
+				_p5.endShape(_p5.CLOSE)
+			}
+		}
+	}
+
 	/**
 	 * Converts the given path to paper.Path
 	 * @see http://paperjs.org/reference/pathitem/

yarn.lock

@@ -806,6 +806,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.6.0.tgz#9d7daa855d33d4efec8aea88cd66db1c2f0ebe16"
   integrity sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==
 
+"@types/p5@^1.7.6":
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/@types/p5/-/p5-1.7.6.tgz#f2ec2bb3cddaa40922afa5bb54b7903ce7e509ed"
+  integrity sha512-6pLTOo0V3N5jZb5nTwjiv3lPHLK3Z/TjbhQUj8CTWXocUk1Z/f6OHTp3Pcwi1BhWnf5gqKUcyEb1gP0KIJuQgw==
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"