This article is reprinted from the WeChat public account "Swift Community", written by Wei Xian Zhy. Please contact the Swift Community public account to reprint this article. To get some serious drawing done, I’ll walk you through creating a simple spirograph with SwiftUI. A “Spirograph” is the brand name for a toy where you place a pencil in a circle and spin it around the circumference of another circle to create various geometric patterns, called roulette — just like the casino game. This code contains a very specific formula. I’ll explain it, but it’s totally fine to skip this section if you’re not interested — this is just for fun, and there’s nothing new about Swift or SwiftUI here. Our algorithm has four inputs:
So let’s get started:
We then prepare three values from the data, starting with the greatest common divisor (GCD) of the inner and outer radii. Calculating the GCD of two numbers is usually done using Euclid's algorithm, which takes a slightly simplified form as follows:
Add this method to the Spirograph structure. The other two values are the difference between the inner radius and the outer radius, and how many steps we need to perform to draw the roulette wheel - this is 360 degrees times the outer radius divided by the greatest common divisor, times our quantity input. All of our inputs work best when they are provided as integers, but when drawing the roulette wheel we need to use CGFloat, so we'll also create CGFloat copies of our inputs. Now add this path(in:) method to the Spirograph structure:
Finally, we can draw the roulette wheel by looping from 0 to our end point, and placing the point at the exact X/Y coordinate. Calculating the X/Y coordinates of a given point in the loop (called "theta") is where the real math comes in, but to be honest, I just converted the standard equation from Wikipedia into Swift - it's not something I dream of memorizing!
This is the core algorithm, but we’re going to make two small changes: we’re going to add half the width or height of the drawing rectangle to X and Y, respectively, to center it in drawing space; and if θ is 0 — that is, if this is the first point drawn in the wheel — we’re going to call move(to:) instead of addLine(to:) on our path. Here’s the final code for the path(in:) method—replace the // more code to come comment with the following:
I realize this is a lot of heavy math, but the payoff is coming: we can now use this shape in a view, adding various sliders to control the inner radius, outer radius, distance, amount, and even color:
That’s a lot of code, but I hope you take the time to run the app and appreciate how beautiful the roulette wheel is. What you’re seeing is actually just a form of roulette, known as a hypotrochoid — with small tweaks to the algorithm, you can generate epitrochoids and so on, which are beautiful in different ways. Before I sign off, I want to remind you that the parametric equations used here are standard in mathematics, not something I just invented - I actually went to Baidu and looked up the page about hypotrochoids[1] and converted them into Swift. References [1]hypotrochoids: http://www.durangobill.com/Trochoids.html |
Nowadays, if you want to live a high-quality life...
From a global perspective, China's smartphone...
The annual large-scale shopping festival is comin...
As Douyin’s ability to sell goods continues to im...
Operations are basically a process of constantly ...
Operate the local delivery ordering group project...
Yesterday, for most couples, it was a grand 520 c...
Produced by: Science Popularization China Author:...
In recent years, operations positions have been v...
The Interim Measures for the Management of Recycl...
Snake, I'm about to become a meal Environment...
Hilsa shad, razor fish and puffer fish are collec...
Writing event strategy plans is the basic skill o...
In the previous issues, we talked about the produ...