Xcode – Checklist App

checklist appAbove are screen shots of a checklist app that I have been working on in workshops. As you can see, the app displays multiple rows with tasks to complete. If you swipe left on a row, then an option comes up to delete the task, and if you press the ‘+’ button, you can add a new task. Creating this checklist app enabled me to advance my knowledge and learn about new xcode features. I will explain some of the features I learnt and how they will come in useful when it comes to creating our group app.

– Using a table view controller. This is important if we wish to create an app that requires a table. I learnt how to set up an array of items and initiateScreen Shot 2015-02-21 at 17.53.21 them to display in the table. As well as using tableView methods such as numberOfRowsInSection and cellForRowAtIndexPath etc.

– Using if statements, so that if an item is pressed, the tick appears and disappears. As well as if the cell is swiped theScreen Shot 2015-02-21 at 17.56.48 delete button appears etc. Conditional statements are important to learn as they are required in most apps.

– Using delegates/protocols (a blueprint of methods, properties, and other requirements that suit a particular task or piece of functionality). These are important when it comes to creating more complex apps and isScreen Shot 2015-02-21 at 18.01.57 something I need to explore further if I want to become the programmer for our group app.

Screen Shot 2015-02-21 at 18.04.13– Using buttons – this is important to learn as is a common feature in apps. You can apply different properties to the button and connect it up so that when pressed it does a certain action.

Screen Shot 2015-02-21 at 18.06.14


I am pleased with the outcome and the app works as expected. To improve, I feel I could edit the colours and fonts to make it more visually appealing and to also make it stand out from existing checklist apps. From this, I feel that I need to explore delegates further in order to develop my knowledge.

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: https://developer.apple.com/library/ios/documentation/Swift/Conceptual/Swift_Programming_Language/TheBasics.html#//apple_ref/doc/uid/TP40014097-CH5-ID309 [Accessed 5 February 2015].

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: http://vimeo.com/shiffman/videos/ [Accessed 24 November 2014].

Processing Workshop – Vectors

In todays workshop, we learnt about Vectors. A vector has both a magnitude and direction, and represents the movement from one location to another. In processing PVector is used to describe the position and velocity (the speed of movement). Within the PVector class there are multiple different methods, the methods we used were add(), mult(), get() and sub (). Here is the code…

Screen Shot 2014-11-17 at 11.50.30

This code created a bouncing ball, which moves direction dependant on the mouses location. I can edit the velocity methods in order to speed up/slow down the balls movement. In order to ensure the ball stays within the sketch, I had to use existing knowledge of conditional statements, to set it so the ball reverses direction when it reaches the width/height of the sketch size. It was important to learn about vectors as if I want anything to move within my interactive piece, this knowledge will be required. From this workshop, an idea that I developed for my interactive piece is to have a ball that gravitates to the bottom of the screen. When people move into the camera, they can then obstruct the ball from falling and can interact by hitting it in different directions. The concept that this could apply to is audiences and ideas relating to audience passivity to activity. I am going to watch some processing tutorials in order to ensure that I fully understand vectors and movement within processing, as this is something I am interested in exploring further.

Processing (2014). Processing: PVector [online]. Available from: https://processing.org/reference/PVector.html  [Accessed 14 November 2014].

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: https://processing.org/tutorials/pixels/ [Accessed 24 October 2014].

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.