Authoring Swift PlaygroundBooks — part 2
Polar Roses
Hello, world!
The first thing we need to do when starting to develop a PlaygroundBook is to determine the theme to be developed. As teachers, we can identify a topic in the teaching plan that we want to develop. It is important to remember that a Swift Playground is not just for teaching programming, but any other subject.
It is important to create a plan of chapters and pages in order to guide the student in their individual learning process. Thus, it is very important that we plan increasing levels of difficulty and exercises and tests along the way, so that the student can confirm what he has learned.
For this series, I want to develop a simple PlaygroundBook, as the goal is to teach you how to manipulate the common structure files presented in the first part of the series.
Therefore, I chose to work with something I love which is Generative Art. We are going to create a book that teaches what this modality is, presenting a practical example: Polar Roses.
The content of this article was presented in my Youtube channel, and simplified for our example. Watch the video for a more detailed background. Then I’ll explain the code base we’ll use here.
Polar Roses
In Mathematics, a polar rose is a sinusoidal function that has a very specific characteristic, following the equation:
r(Θ) = cos(kΘ)
Note that, in polar coordinates, the radius of the curve is variable with the angle and directly proportional to the cosine of the same angle, multiplied by a constant k. Based on this constant, you can determine how the generated image will be. For example:
- if k is an integer and odd, the rose drawn will have k petals;
- if k is an integer and even, the rose will have 2k petals;
- if k is irrational, we have a dense set of curves within the same radius;
These roses have some common names for some k values:
- k = 3 we have a Regular Trifolium;
- k = 2 (4 petals), we have a Regular Quadrifolium;
But this constant can also be a fraction. If k is equal to 1/2, for example, we have a Durer Folium.
Mathematical Model in Swift
With that in mind, we can create a swift class that represents this Polar Rose, containing some minimum attributes for determining the points of the generated curve.
See what we can already determine as attributes:
- n — numerator of constante k
- d — denominator of constante k
- P(x,y) — center point where the rose will be drawn (used to calculate the remaining points)
- r — radius of the circumference containing the rose
Using these attributes, we create a class in Swift that represents the Polar Rose mathematical model. Note that we are creating a framework independent model that will be used for Rosa’s drawing.
In the code above, see that the main function is generatePoints(), which creates a loop, incrementing the angle, calculating the new radius (based on the rose equation) and then calculating the Cartesian x and y values of the calculated point. For this, a conversion from polar to Cartesian coordinates is carried out (lines 33 and 34).
The rose points are then stored in the points array, which can be accessed for further drawing.
Drawing the Polar Rose in SpriteKit
Now comes the fun part: drawing on the screen!
Swift Playgrounds accepts various types of data as renderable elements. In the video, I used a ViewController, as the channel’s intention is to expand the project further. But for our work, we can adopt SKScene itself as a renderable element. Look:
Note that this is a scene like any other, but a drawing method was added that takes an array of points, line thickness and color. Using the CGMutablePath framework, we draw the point-to-point line. See more details in the video indicated at the beginning of the article.
Testing the code
Finally, to test our code, let’s instantiate the scene and a rose on the Playground homepage. See that in lines 4 to 7 we are initializing the scene and determining the scale and presentation parameters.
In lines 9 to 14, we create the variables with the parameters of the polar rose to be created. in lines 16 and 17, we create the rose and draw it on the canvas. Finally, on line 19, we set the view to be presented on the playground page as the view created at the beginning of the code.
Go ahead! Hit the Play button to run the code. It is to be expected that the result will be like this:
Conclusion
This is all the Swift code we’re going to need for this PlaygroundBook example that we’ll build throughout this article series. You can follow up with your own code too, if you like.
Throughout the series, we’ll edit the structure of the book. So you can use your own book for testing or use what we’re starting with polar roses.
In case you want to take advantage of what I’m doing, the starting point is in my playgrounds subscription. Want to know how to get it? access:
In the next article, we’ll talk about how to put a beautiful cover on the book! Take the time between them to subscribe to my Youtube channel and stay updated with the content I’m producing especially for you.
