Generative Art Using Swift
Tags: swift, art
Published: 2018-10-05 04:25:27

---
title: Generative Art Using Swift
published: true
description: Converting Javascript to Swift to make Generative Art on iOS Devices
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yod9mdgs3q20g7czig66.jpg
tags: swift, art
---

A couple weeks ago a post by Ali Spittel came across my feed that showed how you can make generative art using Javascript: {% link https://dev.to/aspittel/intro-to-generative-art-2hi7 %}

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](https://generativeartistry.com/tutorials/tiled-lines/)  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:

{% gist https://gist.github.com/rockarts/ce1fffebd8c874c3c778c549b4284cd0 %}

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):

{% gist https://gist.github.com/rockarts/a98974f5bb0f2055c657c2eaba9b5d08 %}

Here is how it looks:

![Diagonal Line](https://thepracticaldev.s3.amazonaws.com/i/i7ez7pctd2fgltt8tnom.png)

##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

{% gist https://gist.github.com/rockarts/61bfa88dfc5bdad21a825849e7821927 %}

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

![Random Diagonal Line](https://thepracticaldev.s3.amazonaws.com/i/5pxxt4e4zljgr0mdw4n7.png)

##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. 

{% gist https://gist.github.com/rockarts/b3c3ddb73ca37c957e7ca2eaa03bd7d8 %}

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.

{% gist https://gist.github.com/rockarts/38e1af7b8f0e227782da213a75bf6733 %}

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

![End Result](https://thepracticaldev.s3.amazonaws.com/i/yod9mdgs3q20g7czig66.jpg)

{% gist https://gist.github.com/rockarts/f63cdca3db43cca7ac3cb27dd65d0ddd %}