Visualizing Bézier Curves
This video is a programming tutorial/guide on how you can build your own JavaScript (Processing) program, to emulate & visualize a bézier curve. I by no means claim that this is the best way to do it; and am in fact, aware of other parametric mathematical expressions that would be more efficient than manually interpolating each point by their constituents.
Resources:
Article I Wrote on My Website: (https://avergara.org/index.php/2023/0...)
Download Processing (https://processing.org/download)
ControlP5 Library (https://www.sojamo.de/libraries/contr...)
Wiki (https://en.wikipedia.org/wiki/B%C3%A9...)
Credits to Freya Holmér for providing an excellent video explanation of Splines & Parametric Bezier Curves; check out her video here! ( • The Beauty of Bézier Curves )
00:00 - Intro
01:23 - Demo
02:30 - Setup
04:17 - ControlP5
09:27 - Points Class
11:50 - Initializing New Points
16:13 - Drawing Array of Points
19:23 - Dragging a Point
26:30 - Dragging Multiple Points
28:30 - Connecting Main Points
31:00 - Intermediary Points
36:29 - Linear Interpolation
41:17 - Connecting Remaining Points
47:07 - Visualizing The Path
51:06 - Final Product