Bezier Curve generator

Explorations to visualize how anchor points form splines in Solidworks, Illustrator, & Photoshop.

🎨
Interactive p5.js Demo
TODO: Implement p5.js Bezier curve generator
Click points on canvas, press spacebar to generate curves

Instructions:

  1. Scroll all the way down to the bottom of this page until the dividing line below disappears
  2. Click 2-10 points anywhere on the canvas
  3. Press the spacebar to generate the curve
  4. Feel free to screenshot your creation

Written with p5.js. Each point's location is recursively defined such that an anchor is simultaneously an ending and a beginning. The lines are drawn with a sinusoidal function to give the piece a sense of momentum. In motion graphics terms, this is referred to as "easy-ease." Still tuning color/stroke width.

Inspired by doodling lines on my notebooks that resembled Free Rider 2 curves I played in middle school.

← Back to Visual Design