Introduction to Xcode and Swift


Logo_xcodeToday, we were introduced to the programming environment of which we will be using to create our apps. Due to previously using java in processing to create our interactive piece, I feel my programming knowledge has advanced. It was important to initially understand the similarities and differences between java and swift programming languages. Using the ‘playground’ feature in Xcode, we were able to experiment with swift and see the results immediately. A main difference was the use of ‘;’ at the end of each line of code, also declaring constants and variables, and using basic conditional statements, and for loops seemed to be simpler. Here is an example:

Screen Shot 2015-02-15 at 14.58.17

Constants are declared with the let keyword and variables with the var keyword. The value of a constant cannot be changed once it is set, whereas a variable can be set to a different value in the future.

A feature that is new in Swift is optionals, which handle the absence of a value. ‘Optionals are an example of the fact that Swift is a type safe language. Swift helps you to be clear about the types of values your code can work with’ (iOS Developer Library).
? = optional values
! = unwrap values
: = is of type

Here is an example of creating a class using swift, in this example I have created the blueprint for a person, consisting of variables: their name and age and optional gender.

Screen Shot 2015-02-15 at 15.21.42

It was important to learn the basic switch from java to swift and I think this workshop was beneficial. Understanding these basic features are essential in order for me to progress my xcode and swift knowledge further in order to create a successful ios application. From this, in each workshop we will be developing mini apps, in order to progress knowledge and advance our skills in order to be able to successfully make the app for Salisbury Cathedral.

iOS Developer Library, 2015. The Swift Programming Language [online]. Available from: [Accessed 5 February 2015].

Processing Workshop – Images

Today, I learnt how to add images into processing, and how to scale and tint them. To begin, I learnt the basic of how to add images to the sketch and load it. I used existed knowledge of mouseX, mouseY so that the image followed the mouse around the screen and I applied a blue tint to the image…

Screen Shot 2014-10-29 at 14.06.11

I then learnt about image pixels and how to use them in two dimensional as pixels are normal stored in a one dimensional linear sequence. I used the Processing tutorial in order to understand how pixels work and this diagram is particularly useful.

pixelarray2dTo get the pixels of my image, first I had to load the pixels. Then, I had to set up a nested for loop of so that it will continuously loop through all the pixels. I then had to use the formula x+(y*width) to calculate the one dimension locations from a two dimension grid and colour each pixel according to the image. I set the size of the pixels as an integer so I can easily change the value of ‘s’ and the pixels size will change.

Screen Shot 2014-10-29 at 14.59.48

I loaded another image into the sketch and used a conditional statement so that when the mouse pressed, the image changes. I also made the pixels shake by using the random() feature. I added text to each the images, of which I set the fill colour and positioning.


Gaining this knowledge of pixel was useful and it is something I could incorporate into my piece. The use of text is also a good skill and something that I would possibly like to explore further.

Processing (2014). Processing: Images And Pixels [online]. Available from: [Accessed 24 October 2014].

Processing Workshop – Functions and Arrays

In todays workshop, I developed my processing skills and learnt about functions and colour arrays. Here is a video of what I made

Screen Shot 2014-10-27 at 14.48.23I learnt how to draw basic shapes, in this case a square an triangle in order to make the house. I then used existed knowledge of for loops and rotation in order to made the houses and ellipses rotate. I learnt how to setup an array of colours, which I did using different hex values. As well as well learning about using functions and arguments, in this case the house was the function and the arguments were the sizes and colours. I also learnt how to make the video so I clearly show on the blog what I have designed in processing.


This workshop was useful as it allowed me to develop my processing knowledge. The use of arrays is particularly useful as if I want to create an array of colours/objects for my piece then this skill will be required.

Processing Workshop – Conditional Statements and Nested For Loops

In todays workshop, I developed my processing skills and learnt about nested for loops, conditional statements and rotation. Here are some examples…


In the above example, the squares randomly change size and colour. From this, I learnt how to use integers and floats, as well as about using the colour mode HSB (Hue, Saturation, Brightness).

Screen Shot 2014-10-13 at 16.24.52In the above example, the left mouse click draws ellipses and randomly generates different colours. The right mouse click takes an image of the preview and saves it in the selected folder. From this, I learnt how to do conditional statements for the different mouse click variables. Also, I learnt about modulus – if no modulus was set then the ellipses continues to get bigger and bigger. Setting the modulus restricts this so that when it reaches a certain size it reverts back to the original size.


In the above example, the rectangle randomly rotates around and changes hue colour. I used three integers to vary the rotation, size and colour. I also applied modulus to the integers so there were limits as to what size the rectangles reaches and the range of colours.

I experimented with the rotate examples by changing the fill, integers and modulus as well as using a triangle instead. I then incorporated the rotation elerotatements into a condition statement, so that wScreen Shot 2014-10-23 at 14.08.39hen you right click you get a rotating square and when you left click you get a rotating triangle:

Screen Shot 2014-10-23 at 14.21.20Learning about for loops and conditional statements was particularly important as in order to advance my processing skills I need to be confident with the basics. Most complex examples I have looked at include these features within, so learning this was essential in order for me to progress with processing and create my interactive piece.