Overview

This is a p5.js sketch to demonstrate the dragging capability of the ‘Bezier’ object in p5js/common/shapes folder.

This exposes a bit more of the feature set of the Bezier.js object, including

• Drawing points along the curve
• Computes tangent at any point
• Computes perpendicular

The Tangent is simply computed by getting points just before and just after a slected point and treating it as line-segment.

Controls

Mouse

• Drag green control points.

JS Console

• Run console.log(bezierCurve.toCode(true)) in console to get code to draw the curve.

References:

• p5js.org - bezier() Reference docs on drawing a Bézier curve.
• p5js.org - bezierPoint() Reference docs on the function that allows you to get points along a Bézier curve.
• Wikipedia - Bézier Curve - more background on the Bézier curve.

Links:

• Live View
• Source on Github
• Code in this repo: line_segment.js - a separate class within this repo that models a line segment with start and end point.
• Code in this repo: bezier_curve.js - a class which contains points that represent a Bezier curve, and provides a wrapper around the bezier() and bezierPoint() functions in p5.js.

Screenshot: