background

In a short video to brush a video of a thousand flower round, beautiful lines pull the old husband back to 2005, when the goddess floret holding her new toy said to me, see me to draw you a super beautiful flowerI have to say, it was small but it was amazing to me at the time, and it was my goddess who had such an amazing thing. At that time I must have never thought, after many years, the old man would use the program to crack the goddess of the “magic”.

I don’t remember any great man said that the principle behind the seemingly complicated surface is often very simple.

Okay, so if you look at it, it’s really simple and there are only two things you need to do to achieve this magic effect:

  1. Derive the formula of nib point and rotation Angle, can obtain all points according to the rotation Angle, connect into a line.
  2. As you swipe your finger across the screen, calculate the Angle of rotation based on the coordinates of the previous and current points.

Knowledge reserves

The wheel

A hypotrochoid is a trace obtained by tracing a point attached to a circle of radius R that rolls around the inside of a fixed circle of radius R, and the distance from this point to the center of the inner rolling circle is D.

Formula deduction video: [math] wonderful flower foot with cycloid (under) | using manim homemade 3 b1b style video _ bi li bi li _bilibili mathematics

As for how to derive it, you can just watch this video. Up is very clear. Direct paste formula:

Here we get the parametric equation of coordinates and θ angles as:

x=(R-r)Cos (theta) + dCos (R – R/R * theta)

y=(R-r)Sin (theta) – dSin (R – R/R * theta)

The Angle calculation

The rotation of the flower wheel depends on him to calculate the rotation Angle

The first parameter is passed to the center point, the second parameter is the start point, and the second parameter is the end point.

double angle(Offset cen, Offset first, Offset second) { double dx1, dx2, dy1, dy2; dx1 = first.dx - cen.dx; dy1 = first.dy - cen.dy; dx2 = second.dx - cen.dx; dy2 = second.dy - cen.dy; // Double ab2 = (second. Dx-first. dx) * (second. Dx-first. dx) + (second. Dy-first. dy) * (second first.dy); double oa2 = dx1 * dx1 + dy1 * dy1; double ob2 = dx2 * dx2 + dy2 * dy2; // clockwise bool isClockwise = ((first.dy-cen.dx) * (second-.dy-cen.dy) - (first.dy-cen.dy) * (second-.dx - cen.dx)) > 0; Double cosDegree = (oa2 + ob2-ab2)/(2 * math.sqrt (oa2) * math.sqrt (ob2)); double cosDegree = (oa2 + ob2-ab2)/(2 * math.sqrt (oa2) * math.sqrt (ob2)); If (cosDegree > 1) {cosDegree = 1; if (cosDegree > 1) {cosDegree = 1; } else if (cosDegree < -1) { cosDegree = -1; } // Double radian = math.acos (cosDegree); // Calculate the rotation Angle, clockwise is positive, counterclockwise is negative return isClockwise? radian : -radian; }Copy the code

Then you can do whatever you want

To complete the effect

Code address: github.com/AYoungXXX/I…