This project involves creating a cubic Bézier curve that accurately follows an SVG path to create a Cycloid curve on a flat plane. A cycloid curve can be drawn programmatically, but we want to use a Bézier curve if possible, to allow animation.
SVG diagrams are drawn using a coordinate system similar to familiar Cartesian graphs, but with the origin (0,0) at the top-left NOT the center of the graph.
Think of a cycloid curve as the path of an ant on a bicycle wheel as it (the wheel) rolls on a flat surface.
A cubic Bézier curve requires 2 Control Points and we are trying to determine if the x and y coordinates of these points can be determined prior to code execution. This would allow us to use the SVG path statement.
Bézier curves drawn in SVG require a path statement including the values of these 2 coordinates. But how to determine them?
Using regression analysis, we have discovered what may be a possible solution for any radius of circle to generate a Cycloid curve, based on the radius of the generating circle.
After generating several dozen cycloid curves & and their 'best fit' Bézier curves we have come up with 2 values to determine where the Control Points are:
- x factor: 0.417
- y factor: 0.673
These values are used thus:
CP1x=MidPoint - (Radius / xFactor);
CP1y=Baseline-(Radius * 2) - (Radius * yFactor);
CP2x=MidPoint + (Radius / xFactor);
CP2y=CP1y;
where
CP1x: Control Point 1, x coordinate
CP1y: Control Point 1, y coordinate
CP2x: Control Point 2, x coordinate
CP2y: Control Point 2, y coordinate
Baseline: y coordinate of line the circle rolls on
MidPoint: x coordinate of middle of the Baseline (250,250 here)
Radius: radius of generating circle
path statement used by SVG @keyframes rule:
<path id="test" d="M$xStart,$inBaseline C$CP1x,$CP1y $CP2x,$CP2y
$xEnd,$inBaseline" fill="none" stroke="pink" stroke-width="5" />
Note: dollar sign ($) above is a Perl sigil indicating a variable
Control Points can be thought of as magnets controlling a steel ball as it rolls between 2 points on a level, flat surface.
Caveat: R values in the range 10..100 have been used to determine these values, but any value in the range -160 to +160 can be used here.
Negative values of R can be used - they generate a curve UNDER the baseline, but work needs doing here.
After submitting this page, the curve will be generated by a circle defined by the radius you input. The position of the Control Points (blue dots) are what is calculated using the above 2 values.
This is shown in a gray square 500 x 500, so the value for Baseline can't be more than 500 or you won't see it.