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 |
Lige practical internal training virtual project ...
"Practice makes perfect", Jieshen Allia...
In the hot summer, eating a lychee is sweet and r...
Photonic computers of the future Jiao Shuming Gre...
A product is like a traffic pool, with fresh bloo...
In the past few years, Internet celebrity brands ...
As an operator , you must have done this: invite ...
Planning丨Yinuo Editor: Yinuo Visual丨Zhang Shan Re...
The bright moon rises over the sea, and the world...
=========================================...
Compared with the various opinions from the outsi...
The unique identifier of an Android device is oft...
Google's Fuchsia operating system, which has ...
Marriage and Family Counseling Instructor Video C...
The home improvement industry is a typical large ...