Generative Art Using Swift

A couple weeks ago a post by Ali Spittel came across my feed that showed how you can make generative art using Javascript:

The post had some good inspirational timing and I set out to convert the Javascript examples to Swift and display them on my iPhone. For this post I'm going to convert the tiled lines Javascript from the generative artistry tutorials to Swift. We'll make it a bit more Swifty!

To start off: Create a single view app in XCode and follow along!

Drawing in Swift

In order to draw in Swift we will need a custom UIView that we can add to our ViewController. Let's create one named DrawView, it will inherit from UIView. We will add two init methods, override the draw and add a method stub to draw a line like so:

Don't forget to add your custom view to your ViewController in the ViewDidLoad!

Now lets draw a line from the top corner to the bottom corner. To get the top left corner we can use the bounds of the frame: bounds.origin.x and bounds.origin.y this gives use the coordinates of (0,0). To get the bottom corner we can get the width and height of the device by using bounds.width and bounds.height.

To draw the line we will use the UIBezierPath class to create a path and tell it to start at the top left and draw a path to the bottom right, we will also set the colour to red and call the stroke to draw the line on the path and fill to fill the line with the current drawing properties (the red in this case):

Here is how it looks:

Converting to things to Swift

The next step in the Javascript tutorial is to use this code to come up with a random boolean which will draw a line from either the top left or the top right diagonally.

var leftToRight = Math.random() >= 0.5;

Luckily for us Swift developers we can just make use of the Bool.Random function to return us a random boolean value.

let leftToRight:Bool = Bool.random()

Lets change our drawLine method to randomly draw a diagonal line

After a couple tries reloading the simulator I finally got a right to left line:

Converting More Javascript to Swift

Now let's draw the rest of the owl...er the random tiles. The Javascript code introduces a step variable and steps through the x and y values by the step variable.

The Swift way to do this is to use the stride function. In the code below the start is the x value, through to the width of the screen by the step value.

This is what we end up with! The best part is it will work on any size device!