Xcode – Images App

Screen Shot 2015-02-21 at 20.35.02

Here is a screen shot of a scrolling image table app that I created in a workshop. I used existing knowledge of table views, arrays, labels and constraints and learnt new features regarding images and parallax scrolling.

I think the app looks okay, but next time I would try using images of similar qualities. I would also experiment with adding more images to scroll through.

It was beneScreen Shot 2015-02-21 at 20.51.22ficial to learn about adding images as we may decide to use images within our app. It is important that the Magna Carta app is not full of lots of text, so the inclusion of images could help to make it more visually appealing and interesting for users. An app full with text could be quite boring and a dull experience for users, so dependant on the aimed audience the amount of text and images will differ.

Screen Shot 2015-02-21 at 20.54.18

Changing the view of the image is also an important features as it allows you to suitably position and scale the images. The layout of an app is important and something I need to take on board for the Magna Carta app. It is essential that users can easily use the app without difficulty and have a good experience using it. The layout needs to be well thought out as well as the ratio of text and images, of which will be dependant on who we aim our app at.

Screen Shot 2015-02-21 at 20.59.57

I added a scroll view to the app, so that you can scroll through various images. This features could be useful and I think it is important to incorporate common touch screen gestures into our app.

Here is the code:

Screen Shot 2015-02-21 at 21.05.53

From this, I will continue to create some mini apps, in order to further develop my knowledge and think of features that we could incorporate in our app to enhance the users experience.

Brightness Thresholding Images

I analysed Daniel Shiffmans brightness threshold example and edited the code to create a piece inspired by the surreal photography I have been looking at. Here is the code…Screen Shot 2015-01-11 at 19.24.28

I feel confident in being able to re-work this code as it uses all previous knowledge I have learnt in processing workshops with the addition of threshold. It require the size setup, loading of an image and its pixels, for loop and a conditional statement so that if it is greater than the threshold it is white and black if less than. Here is the edited result:

Screen Shot 2015-01-11 at 19.43.12
I really like the brightness threshold effect and I may incorporate it into my interactive piece. Inspired by Cerise Doucède’s photography, I added floating tennis balls to the piece. Next, I will explore some video effect examples and further develop my idea.

Processing Workshop – Mapping

Today, I learnt about the map function, which ‘re-maps a number from one range to another’. I used existing knowledge of importing images and the 2d pixel array formula – x+(y*width), and mapped the pixel colours of the image to a height location on the screen which is determined by the mouse. Here is the code:Screen Shot 2014-12-11 at 14.46.59Learning the map function was useful as it advances my programming knowledge, however I don’t plan on using this function in my piece. If I was to relate this mapping idea more to the brief, I would setup up a video capture so that the colour pixels of the video are mapped.

Processing (2014). Processing: Map [online]. Available from: https://www.processing.org/reference/map_.html [Accessed 28 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].