DEV Community

Cover image for Generative Art Using Swift
Steven Rockarts
Steven Rockarts

Posted on

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:

Diagonal Line

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:

Random Diagonal 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!

End Result

Top comments (11)

Collapse
 
rockswiftllc profile image
Rockswift

I really enjoyed this! I decided to animate the drawing and make it regen on a tap and it is very pleasing to watch.

Collapse
 
rockarts profile image
Steven Rockarts

Nice! I was thinking about that the other day. Do you have a video of it?

Collapse
 
rockswiftllc profile image
Rockswift • Edited

Here you go.
animated gif of screen drawing

Thread Thread
 
rockarts profile image
Steven Rockarts

Awesome!

Collapse
 
patrickrche profile image
Patrick Roche

Any chance of seeing the animating code?

Thread Thread
 
rockswiftllc profile image
Rockswift

Sorry, code did not make it to my new machine.

Thread Thread
 
patrickrche profile image
Patrick Roche

Thanks for the reply.
I figured a solution myself. I can send you a link to my code. I would love to see what you think!

Thread Thread
 
patrickrche profile image
Patrick Roche

I put the code up on GitHub.
Hope I did it right - it is the first time i have used this service.!
Here is the URL
github.com/rochieGH/ZigZag/tree/ma...

Collapse
 
patrickrche profile image
Patrick Roche

Is there any chance of seeing this code.

Collapse
 
coolnerdcool profile image
Michel • Edited

Wow, just what I was looking for. Thank you.

Collapse
 
rockarts profile image
Steven Rockarts

Great! Glad you liked it, I'm hoping to do a couple more tutorials of generative art.