Add drawCurve and drawBezier in order to draw curved lines (#815)

* Added curve/bezier types to types.ts

* Added evaluateBezier to math.ts

* Added drawCurve and drawBezier to kaboom.ts

* Update kaboom.ts

* Update types.ts

* Update types.ts

src/kaboom.ts

@@ -92,6 +92,8 @@ import type {
 	DrawRectOpt,
 	DrawLineOpt,
 	DrawLinesOpt,
+	DrawCurveOpt.
+	DrawBezierOpt,
 	DrawTriangleOpt,
 	DrawPolygonOpt,
 	DrawCircleOpt,
@@ -2028,6 +2030,24 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 
 	}
 
+	function drawCurve(curve: (t: number) => Vec2, opt: DrawCurveOpt) {
+	    const segments = opt.segments ?? 16
+	    const p: Vec2[] = []
+	    for (let i = 0; i <= segments; i++) {
+	        p.push(curve(i / segments))
+	    }
+	    drawLines({
+	        pts: p,
+	        width: opt.width || 1,
+	        pos: opt.pos,
+	        color: opt.color,
+	    });
+	}
+
+	function drawBezier(opt: DrawBezierOpt) {
+	    drawCurve(t => evaluateBezier(opt.pt1, opt.pt2, opt.pt3, opt.pt4, t), opt)
+	}
+
 	function drawTriangle(opt: DrawTriangleOpt) {
 		if (!opt.p1 || !opt.p2 || !opt.p3) {
 			throw new Error("drawTriangle() requires properties \"p1\", \"p2\" and \"p3\".")
@@ -6604,6 +6624,7 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 		deg2rad,
 		rad2deg,
 		clamp,
+		evaluateBezier,
 		testLineLine,
 		testRectRect,
 		testRectLine,

src/math.ts

@@ -1080,6 +1080,15 @@ export class Polygon {
 	}
 }
 
+export function evaluateBezier(pt1: Vec2, pt2: Vec2, pt3: Vec2, pt4: Vec2, t: number) {
+    const t2 = t * t
+    const t3 = t2 * t
+    const mt = 1 - t
+    const mt2 = mt * mt
+    const mt3 = mt2 * mt
+    return pt1.scale(mt3).add(pt2.scale(3 * mt2 * t)).add(pt3.scale(3 * mt * t2)).add(pt4.scale(t3))
+}
+
 export function sat(p1: Polygon, p2: Polygon): Vec2 | null {
 	let overlap = Number.MAX_VALUE
 	let displacement = vec2(0)

src/types.ts

@@ -1916,6 +1916,10 @@ export interface KaboomCtx {
 	 * Return a value clamped to an inclusive range of min and max.
 	 */
 	clamp(n: number, min: number, max: number): number,
+	/**
+	 * Evaluate the Bezier at the given t
+	 */
+	evaluateBezier(pt1: Vec2, pt2: Vec2, pt3: Vec2, pt4: Vec2, t: number): Vec2,
 	/**
 	 * Check if a line and a point intersect.
 	 */
@@ -2088,6 +2092,35 @@ export interface KaboomCtx {
 	 * ```
 	 */
 	drawLines(options: DrawLinesOpt): void,
+	/**
+	 * Draw a curve.
+	 *
+	 * @example
+	 * ```js
+	 * drawCurve(t => evaluateBezier(a, b, c, d, t)
+         * {
+	 *     width: 2,
+	 *     color: rgb(0, 0, 255),
+	 * })
+	 * ```
+	 */
+	drawCurve(curve: (t: number) => Vec2, opt: DrawCurveOpt): void,
+	/**
+	 * Draw a cubic Bezier curve.
+	 *
+	 * @example
+	 * ```js
+	 * drawBezier({
+         *     pt1: vec2(100, 100),
+         *     pt2: vec2(200, 100),
+         *     pt3: vec2(200, 200),
+         *     pt4: vec2(100, 200),
+         *     width: 2,
+         *     color: GREEN
+	 * })
+	 * ```
+	 */
+	drawBezier(opt: DrawBezierOpt): void,
 	/**
 	 * Draw a triangle.
 	 *
@@ -3427,6 +3460,36 @@ export type DrawLinesOpt = Omit<RenderProps, "angle" | "scale"> & {
 	join?: LineJoin,
 }
 
+type DrawCurveOpt = RenderProps & {
+	/**
+	 * The amount of line segments to draw.
+	 */
+        segments?: number
+	/**
+	 * The width of the line.
+	 */
+        width?: number
+}
+
+type DrawBezierOpt = DrawCurveOpt & {
+	/**
+	 * The first point.
+	 */
+        pt1: Vec2,
+	/**
+	 * The the first control point.
+	 */
+        pt2: Vec2,
+	/**
+	 * The the second control point.
+	 */
+        pt3: Vec2,
+	/**
+	 * The second point.
+	 */
+        pt4: Vec2,
+}
+
 /**
  * How the triangle should look like.
  */