---

I was thinking about different kinds of math-based art and I wanted to make something again. My Bezier Curves are the result of that and I wanted to explain the process a bit

When I was a kid I used to draw these all the time. I think I saw it in a book I got back in school but I'm not entirely sure. I was always into math and math-based art even when I was young. I would figure out what sizes/ratios of lines I could do while still being able to accurately measure it out with an imperial ruler and it was really fun.

My oringal plan was to just make something that would draw either cubic or just quadratic beziers but I got nostalgic for the art I used to do and instead decided to go with the version I have now.

As per usual with my math art projects, I started with a desmos calculator. I needed to draw my lines and find points along them. I briefly forgot algebra and skipped straight to trigonometry when finding the point because I had done a lot of that with some earlier projects. Now the points along the line are using the rise and run of the slope and scaled by the fraction of the distance along the line given by the t value. Translating the graphing calculator equations into my code, I find the points along one line, using a number t values given by the user evenly spaced out along the line, then the other, and then I iterate through and connect them. Repeat this for all of the pairs of connected lines and that makes all the lines for the outputs

After that I wanted to make the user able to move the points around. I have an event listener for the mouse and using a distance funtion I already had written for the earlier part of the project, I find when the mouse is within 10 px of any given point. If points overlap within that space it uses the one with the lowest index. I make the cursor a pointer and mark down both that it is in range and what point it is in range of so that when the mouse is clicked it can drag the point around. It updates the point's position and redraws all the lines. This part is definitely a bit inefficient since it recalculates all of the lines each time, as opposed to just the lines directly influenced by the point moving. I don't find this to be too much of an issue, however, since I've locked off both how many points there can be total, and how many lines there can be between points. With these restrictions, even with 20 points and 100 lines between then I get no noticable lag when dragging points around.

At this point, everything was still a closed loop. This is done by just having the first two points repeated at the end (and regarding moving around the points, if the first or second point is moved, it also moves it's corresponding point at the end of the list). I decided I wanted to be able to change that so there's a simple toggle that will either delete or add back the last two points to make it open or closed. There's some extra logic in the mouse move section to not break if it's open but everything else just works either way

The last thing I did was add some color. I love the way these kinds of things look with gradients so I grab evenly-spaced hues in the oklch color space and assign them in order with the lines. The beautiful part of this (more noticeable with less lines since you can see them in more detail) is that lines of the same color are connected along the whole path due to the order they're drawn in and that's probably my favorite part of the whole project.

---

I'm going to start writing up the design/development process of some of my web toys, as well as other web-related things I'm doing along the way