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.

Design Methodologies

A methodology is a system of methods used in a particular area of study. It is important to explore different design methodologies in order to understand how the industry operates and to use the methodologies when producing our group app, in order to achieve a successful design solution. I will explore the outdates waterfall model, in comparison to iterative design, with a focus on agile methodologies.


Waterfall_modelThe waterfall methodology was one of the first to be introduced. It is a simple, linear model that it easy to follow and understand. The model is fixed and doesn’t offer room for constant improvements and refinements. Therefore, it would not be useful to follow these methods as it is important that we regularly engage the clients to ensure their requirements are being met. As well as constantly thinking about the users and testing our app with the target audience before submitted it to clients. Following a waterfall methodology could result in the following:


The illustration clearly explains mismatched expectations, hence showing the important of regularly having team meetings as well as meetings with clients in order to ensure that everyone is working along the same lines. From this, it is very important that we meet the clients requirements in our app and also to sustain users expectations.




This methodology is which I followed for the previous design iterations unit. It allows room for constant refinements and improvements to be made, and the cycle can be repeated various times, to produce a successful well developed end product. The testing stage in particular allows you to gain important user feedback, allowing you to improve on the product to enhance the users experience.




The agile methodology is an iterative model when designs are produced in incremental, rapid cycles. It is normally used when there is a short deadline and usually works best with smaller design teams.  It involves constant testing and engagement with clients in order to satisfy their needs and requirements, therefore avoided mismatched expectations show in the illustration above. This is a diagram to visually show the sprint cycles within agile methodologies:

scrum-overview-mark-hoogveldI feel that the scrum methodology is that which my team should follow for the production of the Magna Carta app. It will ensure that all team members are on track, continuously working to produce a product that will meet the expectations and requirements of the clients and users. I think that the daily scrum stand ups is something we could incorporate, as it will allow members to share how their work progress is going and any problems they are encountering. However, as we don’t have an dedicated office/room, the location would have to be organised in advance. Also, I feel that mainly stand ups could be held once/twice a week rather than daily as teams may not see each other every day at uni.

It is important to explore different design methodologies and I feel the agile methodology would be the best one to follow for this unit. Using methodologies would reflect the design industry and make our team more professional due to this project being a live brief. It is extremely important that team members each have a job role (programmer/designer etc) and I feel that by following an agile methodology, it will ensure that we are all working along the same lines in order to meet the users requirements and to produce a successful end product that satisfies the users.

Cheng, C, 2015. Why Scrum? Why Agile Development? [online]. Available from: http://calvinx.com/2014/05/22/why-scrum-why-agile-development/ [Accessed 10 February 2015].

ISTQB EXAM CERTIFICATION, 2015. What is Agile Model – Advantages, Disadvantages and When To Use It? [online]. Available from: http://istqbexamcertification.com/what-is-agile-model-advantages-disadvantages-and-when-to-use-it/ [Accessed 10 February 2015].

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.

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