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

Improvements – Shapes, Size, And Speed

Some suggested improvements I received when testing my piece was to possibly add more of each of the shapes. As well as to possibly make the speed at which the object fall slightly faster, and to make the size of the objects more varied.

Here is the code for initialising a new object and setting the size range, of which I changed the range to random(10,30):

Screen Shot 2015-01-13 at 17.02.10It was also suggested that I should have more objects, which I altered easily in the object arrays, where I can choose to have 0-infinity objects:

Screen Shot 2015-01-13 at 17.04.39

Changing the speed at which the objects descend has to be done in the individual classes constructor. I edited the yspeed so that objects descend and ascend slightly quicker:

Screen Shot 2015-01-13 at 17.06.50

I feel that these improvements have benefited my piece, highlighting the importance of carrying out user testing. I decided against turning my piece into a game as felt it would be too easy. As users could easily put out both hands and prevent the shapes from falling, like this example…

Screen Shot 2015-01-15 at 13.10.58

From this, I will go on to test my piece in a studio room, capturing more of the persons body rather than just the top half. Allowing me to see if there are any further refinements I could do before displaying my piece in the public space.

Processing Experiments

Over the holidays, I have been working on my interactive idea, developing the code and experimenting with different objects. Using Shiffmans brightness thresholding example, I then used existing knowledge of object orientated programming to create different classes (a blueprint that allows us to create an object), where each class contains data, constructors and methods. The methods I used for the different classes were all fairly similar:
void display () – displays the class (ellipse, rect, img etc.)
void descend () – descends to bottom of sketch (y+yspeed)
void bottom () – when they reach bottom, the start back at top of sketch (if (y > height){y=0;})

One idea is to have various brightly coloured shapes, here is an example:

I like the simplicity of this idea, and think the various shapes could work well. It makes the piece appeal like a game, which will hopefully encourage users to interact. I like the bright colours and this is something I would definitely use, no matter what objects I decide to use. The colours really stand out on the black and white video capture and I think it’ll look good when I go program it so the black pixels obstruct them from falling. I think the shapes would be a simple, yet effective objects to incorporate into the piece.

Another idea is to have ‘raining men’, here is an example:

golcondaThis idea links back to Magrittes’ surreal art work (image to right). I like the fact it looks quite unusual, and think it strongly relates to my concept of surrealism. I would have to program it so when the bottom of the ‘raining men’ figures reaches a black pixels then it moves up to a white. Again, I really like the bright colours and think they help make the piece stand out and look more appealing. The disadvantage is that it may be slightly harder to program using figures but I am willing to experiment further.

From this idea, I could incorporate various stick man doing different activities, in order to make it more varied and interesting. For example, I could have figures carrying out different sporting activities. Each figure could be a different bright colour, helping it to stand out and make it more visually appealing. Sport is something I enjoy and thus this will make my piece more personal. This can also relate back to my previous post regarding Slinkachu and his intriguing street photography of tiny people.


Another idea inspired by Cerise Doucède photography is to have falling objects that relate to the public space. Due to my interactive installation being in the Media School this idea could work well and users can relate to the various objects, here are some examples: social media 1 | black2012051003csicons-02

From experimenting with my interactive piece, I have learnt that the brightness thresholding example works best when the background is clear. Also, it depends on the lighting of the space and the set threshold number as to how silhouette like figures will be. I need to test these example in the space to see if it will work. I may find that the background may be a problem due to the walls having various photographs and posters on them. So, I will have to test on various public displays to see which one would work best and alter the thresholding accordingly. If needed, I may have to put up a white screen in the public space and set it up so users stand in front of the screen.

Next I will go on to add a class method:
void obstruct () – descend when on white pixel and ascend when on black pixel.
I plan to do this using previous knowledge of conditional statements and gaining help in workshop if required. Then, I will begin to test my piece both in the public space and with the target audience, to gain feedback and further follow the iterative design process.

Experimenting With Processing

In order to be able to advance my coding knowledge in processing, it is important that I fully understand all the basics that we have explored in previous workshop. However, as I didn’t feel entirely confident in my understanding, I have been watching lots of Daniel Shiffmans’ videos. Focussing on the skills I need to produce my idea, I further explored object-orientated programming. I felt that the knowledge I gained from the workshop was sufficient but felt I didn’t fully understand it. In specific, I looked at videos that taught me about classes, what they are and how to create them. As well as looking at arrays, what they are and how to use them, whether it be for 3, 100, or infinity amount of objects. From watching the videos I feel my understanding of object-orientated programming has developed, and I used this knowledge to produce a piece, that consists of 3 classes (circles, squares and rectangles), which continuously gravitating towards the bottom of the sketch. I produced an array of each class and set it so a certain amount of each shape appears. I also randomised the size of each so you get lots of gravitating shapes of different sizes. As well as setting up an if statement so that when the objects reach the bottom of the sketch, they start descending from the top again. Here is the outcome:

By carrying out more research on processing, I have been able to develop my skills and become more familiar with object-orientated programming. Classes are a template for an object, consisting of unique data and functionality, and an array is a list of data. What I learnt and have produced will be useful towards my final interactive piece. Next, I will further research video capturing, motion and thresholding.

Shiffman, D, 2014. Vimeo – Shiffman’s Videos [online]. Available from: [Accessed 24 November 2014].

Processing Workshop – Object Orientated Programming

Today, we learnt about object orientated programming. We learnt how to create and use classes within processing. A class  is a blueprint that allows us to create an object. Within a class, it needs to contain class data, constructor and class methods. The class data is unique to each class, and within this you have to declare the variables of the particular class that you are working on. The constructor is where you assign the variables to the class. Class methods are the interface of data, and these functions are shared. In the workshop, I created a class named ‘Agent’, that consisted of data, constructor and methods and a draw function of a square. I then incorporated the class into the main tab by using an ArrayList. An array is a block of data and an arraylist is a block of object data. I set up the basic void setup and void draw and incapsulated the class ‘Agent’ into these. I also used existed knowledge of mousePressed and mouseX mouseY, so that each time the mouse is click it creates a new agent(square). Here is the code…

Screen Shot 2014-11-03 at 12.32.06 Screen Shot 2014-11-03 at 12.32.57

Here is the outcome…


From this workshop, not only did I Iearn new skills regarding classes, I also developed my existing knowledge from previous workshops, about integers and floats, variables, for loops, arrays, mousePressed and random functions. We also briefly explored how we could convert images to agents in order to create some interesting motion effects to the image pixels. Using for loops, it iterates through the images pixel array to create an agent for each pixel, and by altering the class update methods, the motion of the pixels changes. To convert the image pixels to agents, I had to use previous knowledge from Workshop 4, in order to obtain the 2d array of pixels, using a nested for loop and the formula x+(y*width).  Here is the outcome…


When the mouse is pressed on the image, the agents(pixels) are updated, and in this instance they move randomly in a brownian motion. I would like to learn more about this and experiment with some different motions. Representation is a a possible concept I could explore for my final interactive piece, of which this could relate to as the moving agents blur the images representation. Next, I am going to look at some processing examples, in order to help me to further my understanding of processing and also to help gain more ideas for my interactive piece.