Summary

The article "Shapes with Paths using SwiftUI Part4" expands on a series demonstrating how to create complex shapes using SwiftUI, focusing on stars, crosses, and cogs with customizable points and features.

Abstract

In the fourth part of a comprehensive guide to shape creation in SwiftUI, the author builds upon previous installments that covered polygons, triangles, parallelograms, and random polygons. This article delves into constructing more intricate shapes such as stars with a specified number of points, crosses, and gear-like cogs using paths based on circles. The author provides code examples and animated GIFs to illustrate the dynamic mutation of shapes, emphasizing the versatility of SwiftUI in creating custom animatable shapes beyond standard SF Symbols. The tutorial introduces techniques for manipulating points on two concentric circles to form stars with varying numbers of points, and adapts these methods to create crosses and cogs. The article concludes with an invitation to subscribe for updates on future articles, with the author's commitment to regular posts on the subject.

Opinions

The author suggests that using SwiftUI's paths allows for more flexibility and customization compared to using pre-defined SF Symbols.
There is an emphasis on the educational aspect, with the author guiding readers through the process of shape creation step by step, including code snippets and visual examples.
The author implies that the techniques demonstrated can be adapted to create a wide range of shapes, hinting at the potential for future exploration beyond stars, crosses, and cogs.
The use of animated GIFs to show shape mutations indicates a preference for visual learning aids and an appreciation for the dynamic capabilities of SwiftUI.
By mentioning the client's requirement for an eight-pointed star, the author subtly endorses the practical application of the tutorial's content in real-world development scenarios.

Shapes with Paths using SwiftUI Part4

A compendium of shapes using paths

Some simple cogs, gears and stars build in SwiftUI using paths

In part 1, 2 and 3 of this series I covered isosceles polygons, the majority of triangles you could imagine, parallelograms and trapezoids and even random polygons; putting together routines to build them using methods based on circles. You can find the stories here. Shapes that you can mutate and animate to your hearts content in code.

Shapes with Paths using SwiftUI Part1

At school we all learn geometry and trigonometry on a grid, which makes perfect sense- which from from a SwiftUI…

medium.com

Shapes with Paths using SwiftUI Part2

In part 1 of this series I covered polygons principally, putting together routines to build them using paths with a few…

medium.com

Shapes with Paths using SwiftUI Part3

In part 1 and 2 of this series I covered isosceles polygons, equilateral triangles, right + left angles triangles…

medium.com

Bon. We done pretty well considering almost everything is based on a simple circle. What now. Well looking thru my client requirements for shapes he wants a star. We could use an SF Symbol. The code to do so looks like this.

struct ContentView: View {
  var body: some View {
  Image(systemName: "star")
    .font(.largeTitle)
    .foregroundColor(Color.red)
  }
}

Which looks ok — but.

Wait, this is an article all about using the path to build things, besides which the brief said he needed a star with eight points and this one has five. Can we do this with our magic circle.

Of course you can, although you need at least two circles this time, not just one.

Drawing along a path built by two circles

Yes, you counted correctly there are more than 8 points on this star when it finishes mutating, in fact with this method I can have a star with 360 points, which makes it look the sun, but no — that is a little too many, in this gif I limited the points to just 20.

So how do we this — basically the view uses two circles on which it calculates the number of points it needs [as in an 8 point star] in each circle. Skewing the placement of said points on the outer ring I then simply connect the dots.

With this code driving it. Note I used the repeat/while loop within this to ensure as I increased the number of points we used on the star, we would only use numbers that would be divisible by 360. Net net we got stars with five, six, eight, nine, ten, twelve, fifteen, eighteen and finally twenty points, at which point I stopped.

The parameters to the call dictate the number of points, the start angle, the width of star, the height of the star and the depth of the points relative to the body. Note the depth isn’t an absolute value, it is a percentage of the size.

Of course next in line next to star is the cross, which if you change the parameters in fact becomes a cog wheel. Sure I know, SF symbols has a cross too, but let’s ignore that and look at how we can do paths. The outcome will look like this.

A image that looks strangely familiar oddly enough. With the code to build this here, code that is almost identical to the star, with two rings and different dots to connect.

The driving code for this is identical to the star, with the exception of course of the goggly eyes which I added with this small mod to the end, just for fun since it’s been a long week.

All of which brings me to the end of this article. The last shape I mention in this article, the gear or cog wheel has a good deal more in it. In my next article I going to try and cover some of those variations.

Subscribe to medium.com and follow me and get notified when I post my next article. I am trying to do at least one a week, sometimes I manage two.

Keep calm, keep coding