A tutorial on how to create a spirograph using SwiftUI

[[412896]]

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:

• The radius of the inner circle.
• The radius of the outer ring.
• The distance between the virtual pen and the center of the outer circle.
• How many roulette wheels to draw. This is optional, but I think it really helps to show what's going on when the algorithm is working.

So let’s get started:

 struct Spirograph: Shape {
 let innerRadius: Int  
 let outerRadius: Int  
 let distance: Int  
 let amount: CGFloat
 }

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:

 func gcd(_ a: Int , _ b: Int ) -> Int {
 var a = a
 var b = b
 while b != 0 {
 let temp = b
 b = a % b
 a = temp  
 }
 return a
 }

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:

 func path( in rect: CGRect) -> Path {
    let divisor = gcd(innerRadius, outerRadius)
    let outerRadius = CGFloat(self.outerRadius)
    let innerRadius = CGFloat(self.innerRadius)
    let distance = CGFloat(self.distance)
    let difference = innerRadius - outerRadius
    let endPoint = ceil(2 * CGFloat.pi * outerRadius / CGFloat(divisor)) * amount 
 
 // more code to come
 }

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!

• X is equal to the radius difference multiplied by the cosine of θ, multiplied by the cosine of the radius difference divided by the distance of the outer radius multiplied by θ.
• Y is equal to the radius difference times the sine of θ, minus the distance times the sine of the radius difference divided by the outer radius times θ.

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:

 var path = Path() 
 
 for theta in stride( from : 0, through: endPoint, by : 0.01) {
    var x = difference * cos(theta) + distance * cos(difference / outerRadius * theta)
    var y = difference * sin(theta) - distance * sin(difference / outerRadius * theta) 
 
 x += rect.width / 2
 y += rect.height / 2 
 
 if theta == 0 {
        path. move ( to : CGPoint(x: x, y: y))
 } else {
        path.addLine( to : CGPoint(x: x, y: y))
 }
 } 
 
 return path

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:

 struct ContentView: View {
    @State private var innerRadius = 125.0
    @State private var outerRadius = 75.0
    @State private var distance = 25.0
    @State private var amount: CGFloat = 1.0
    @State private var hue = 0.6 
 
 var body: some   View {
 VStack(spacing: 0) {
 Spacer() 
 
            Spirograph(innerRadius: Int (innerRadius), outerRadius: Int (outerRadius), distance: Int (distance), amount: amount)
                .stroke(Color(hue: hue, saturation: 1, brightness: 1), lineWidth: 1)
                .frame(width: 300, height: 300) 
 
 Spacer() 
 
 Group {
                Text( "Inner radius: \(Int(innerRadius))" )
                Slider(value: $innerRadius, in : 10...150, step: 1)
                    .padding([.horizontal, .bottom]) 
 
                Text( "Outer radius: \(Int(outerRadius))" )
                Slider(value: $outerRadius, in : 10...150, step: 1)
                    .padding([.horizontal, .bottom]) 
 
                Text( "Distance: \(Int(distance))" )
                Slider(value: $distance, in : 1...150, step: 1)
                    .padding([.horizontal, .bottom]) 
 
                Text( "Amount: \(amount, specifier: " %.2f ")" )
                Slider(value: $amount)
                    .padding([.horizontal, .bottom]) 
 
                Text( "Color" )
                Slider(value: $hue)
                    .padding(.horizontal)
 }
 }
 }
 }

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