Design Board Process

The design of our design board has had to evolve throughout the project. We started by producing mood boards which would represent elements of our project such as direction, possible technology, related work, etc. Below is the first of such mood boards:

Below is a revised mood board. The colour scheme is more similar to what was used in the final design board, and the purpose of the imagery is somewhat more evident. We also greatly reduced the text content, as the final design board would need to communicate primarily through its design, and we wanted to reflect this. The content such as imagery and background was handled by Shane, and the colors/text by me. We tried to categorize the various elements of our project in order to visualize them in a simple, understandable manner.

Below is a picture of the design board in progress. The layout and design is much more simplistic/minimalist, as we wanted the purpose of the project to be obvious to the reader by providing basic images whose meaning is immediately apparent, and not obscured by unnecessary details.

Below is the finished design board. Shane and I worked closely to populate and structure this final board. We continued to use minimalistic and straightforward imagery, but we chose to also include some text. We wanted the important text to be striking, such as the tagline "Motion, Mood, Participation". We did this by utilizing size, colour, and placement on the page. We opted for a dark background with a subtle image, as we felt it pronounced the orange colours better, and gave more contrast to the imagery.

Using Text Data to Manipulate Images & Sound (pt. 2)

Following on from my previous experiment, my next idea was to use similar text-data to manipulate sound, as this would tie into our data-controlled MIDI concept.

What I created was a page which used the same functionality as the last one (creating coloured images which change depending on data), but accompanied by sound. Three 'notes' will appear onscreen at any one time. These notes are randomly selected from a range of numbers in a separate text document. Each of these numbers correlates to a sound file in another folder; the higher the number, the higher the sound. The sounds I used are royalty-free recordings of piano keys. These three notes will play at once when the page is loaded, forming a sort of chord, though due to the random nature of the note selection process this chord is usually rather discordant.

This project can be found here: http://dindins.web44.net/data%20stuff/test2.php

Initially the site would automatically refresh every few seconds so that the sounds would randomise continuously, but I removed this feature because I felt it was unnecessary and annoying. The page can be refreshed manually for the same result and a new 'chord' each time.

Below is a screenshot of the site in action:

As you can see, as with the previous test, the values extracted from the text file correlate to colour, as well as sound. The higher the number in the note's div tag, the more saturated/brighter the green. 

The next image will briefly explain how this was all achieved. The first section of code seen uses the same concatination approach as last time to style the colours of the div elements according to their note value. The second section shows how the audio files were launched. I used html5's audio tag functionality to add the sounds to the page. A similar method is used to the styling, where a random number is taken from the previously declared array, and related to a sound file with the same number in its filename.

This test suffers from the same 'undefined' issue that I experienced in the last one, but was otherwise quite successful. This test bridges the gap somewhat between our concepts of data gathering data and using music as an output or feature, as it utilises both of these ideas.

Varying Levels of User Interaction & Ambient Displays

Many researchers have been investigating ways to immerse users in an environment in which digital information is provided with varying levels of subtlety. An example of this would be the concept of ambient displays, which may provide digital information in the traditional format, but also utilise the user's surroundings and other senses to provide subtle information.

The following research paper, Ambient Displays: Turning Architectural Spaceinto an Interface between People and DigitalInformation, compared the use of a computer for gaining information to 'looking through a small window'. The authors noted that this method is limited in that it concentrates all of its information on the user's main area of focus. They propose that this experience can be enhanced by creating specialised environments where information exists all around the user.

One example the authors provided of such an environment is the ambientROOM. This was a project developed by the MIT Media Lab in 1997. It consisted of a fully enclosed room in which the user sat, surrounded by 'ambient media'. For example, a dot pattern on the wall would become busier depending on how many humans were detected in the area. The idea is that user would not fully focus their attention on this wallpaper, but this information would be subtly be tranferred to them through their peripheral vision.

This next report, Heuristic Evaluation of Ambient Displays, discusses how the effectiveness of these environments can be evaluated. This gives us a good idea of what features are important and how they should be implemented. The following bullet points outline some of these features, based off of the heuristics used in this report:

• All information provided should be relevant
• The display should be unobtrusive unless it requires full attention
• The user should notice a change in data, and not that the display clashes with its environment
• The display should be intuitive to minimise cognitive load
• Changes in the display's state should be easily noticeable
• It should be aesthetically pleasing

This final paper is in my opinion most relevant to our project, as it details the use of ambient displays in a public setting. It is quite possible that our project will be situated in such an environment, considering the directions we have been exploring (public data, public mood, collaboration, etc.).

It is called Interactive Public Ambient Displays: Transitioning from Implicitto Explicit, Public to Personal, Interaction with Multiple Users. The authors developed a system of displaying information in public, which provides more specific information depending on the user's engagement. For example, the system tracks how the user's body is oriented, so that if they are facing the screen they are assumed to be more engaged and are provided with more detailed information. 

Below is a video of this system in use:

These concepts could be beneficial to our project. If we are to base our project in a public setting, we might need a way to distinguish who is engaging with the project and who is simply passing by. In the area of data collection/representation, this provides us with a way of refining the data collected from that public environment, so that we are aware of the level of interaction the users were demonstrating.

External Links/References:

http://tmg-trackr.media.mit.edu/publishedmedia/Papers/314-Ambient%20Displays%20Turning%20Architectural/Published/PDF

http://tangible.media.mit.edu/project/ambientroom/

http://dl.acm.org.cit.idm.oclc.org/citation.cfm?id=1029656&CFID=565650252&CFTOKEN=48295749

http://dl.acm.org.cit.idm.oclc.org/citation.cfm?id=642642&CFID=565650252&CFTOKEN=48295749

Using Text Data to Manipulate Images & Sound (pt. 1)

I was given the task of extracting text data from a .txt file or equivalent, and using code to manipulate it to create images or sounds. This would form a foundation for our project, as once we know how to convert data into non text-based forms, we can start manipulating all sorts of data to do a variety of things.

Here is a link to my website, showing a visual representation of random values extracted from a text file: http://dindins.web44.net/data%20stuff/test.php

When I started work on this task I was initially inclined to use JavaScript to extract the text-file contents, because JavaScript is used to read XML files etc. and is what I planned to use to create the onscreen images. After several attempts at this however, I discovered that JavaScript is not capable of accessing local files for security reasons. In the end I had to resort to using PHP, which meant this process would only work if the text file was uploaded to a server. In future I hope to find a way of achieving these same results, but using files that are located locally on the users machine.

Below is a screenshot of some of the code to show my process. This process can be summarized as follows:

•  I was able to access the text file on the server using PHP
• I then stored this text in a JavaScript variable as a string
• Next I used the 'split' method to separate the string into single numbers
• I then created an array which contained each of these values
• This array could then be randomized using a shuffle function

To create the visuals of this text I used JavaScript to write 'div' tags into the document. I used the knowledge I gained doing my previous weather data project to edit the colours of these divs depending on the random value from the text file assigned to them. Below is a screenshot of this code:

Here is an example of one arrangement of these values:

These values will randomize each time the page is refreshed.

One problem I encountered when making this is that I always seemed to get one value back that was 'undefined'. I can only assume that this issue lies with the way I wrote the 'for loop' but I am yet unsure. I hope to resolve this issue for later projects.

Data Visualisation Test

I decided to begin testing ways of acquiring usable data and how to use code to represent it as a graphic. Here is a link to a simple website I made with visualised data:

http://dindins.web44.net/weather/visualtest.php

The site consists of three red circles representing Cork Institute of Technology, University College Dublin, and Massachusetts Institute of Technology. The site reads the current temperature for each of these locations and adjusts the appearance of these circles accordingly. The higher the temperature, the larger the circles become, and the more saturated the colour becomes. Below is a screenshot of the site:

You can see that the circle for M.I.T. is the largest and most vibrantly coloured, which directly correlates to its high temperature. You can see the exact temperature figures in degrees celsius next to the place names.

 To do this I collected real-time weather data using The Dark Sky Weather Forecast API. Using php I input longitude and latitude coordinates from google maps to gather forecast data from. I then created containers whose style tags would adjust depending on the data. The current temperature for each of these location were stored in variables as numbers. I then manipulated these numbers by concatenating the variables with strings to correlate to the size (in pixels) of the containers and their RGB colour values. Below is a an example of the code that uses the temperature data variable to alter the style tag of a container:

Data Visualisation as Art

We have decided that a direction we want to explore is data visualisation in the form of art. Though we want the project to also use the data for some kind of practical function, this post is focusing on the art aspect only. Visualising data has become a popular art form, as it is a way of transcribing incomprehensibly complex data into a digestible form. "Human beings respond intuitively - and emotionally - to patterns" - these are the words of data artist Laurie Frick. More can be found on her art in this article:

http://www.theatlantic.com/entertainment/archive/2015/05/the-rise-of-the-data-artist/392399/

This week I have been looking into past examples of data being used to create art. I intend to avoid visualisations that come in the form of static graphics, as these are less analogous to the kind of project we want to produce. In my personal opinion, static two-dimensional imagery is somewhat of a stagnant art form, and I feel that if we are to create a large scale project using big data, we should use a more ambitious medium. We hope to present the visualisation with some form of tangibility or 3D depth.

An example of an artist who visualises data is Nathalie Miebach. Nathalie uses weather data to form 3D art sculptures, with each segment of the sculpture directly corresponding to a piece of data. Here is an example a sculpture which was made using ocean related data such as buoy height readings, wind speeds, biological patterns, etc:

In one of her projects she also created accompanying music from the same data as a sculpture. This series is called 'Weather Scores'. Below is a video example:

'On Broadway' is an interactive project created by Dan Goddemeyer that compiles 13 miles of Manhattan imagery into one installation. The most obvious data sources which provide the photos are google street view and instagram, but as you explore the piece you'll find all kinds of other data in visualised form such as median household income or taxi stops. This is very relevant to our project, as it is likely we would be gathering data from a city-center area given the project brief.


ON BROADWAY from Moritz Stefaner on Vimeo.

Here's an example I found of translating one form of art into another: Audiolandscape. This uses the data of an uploaded mp3 file to generate a scrolling landscape, similar to a 3D waveform, but more visually appealling. Below is a link to the site:

http://dan.nea.me/audiolandscape/

Wearable Technology

Shane and I were recently discussing how technology that is always present on the user and acts independently of them is interesting, and we came across some information about wearable technology.


This first link is a guide to designing wearables. Important points seem to be 'make it discreet', 'make it not touch-only' (for instance use haptic feedback, sound etc), and 'make sure it is not reliant on things like wi-fi'. Link:
https://wearablesguide.fjordnet.com/


This article talks about the rising popularity of wearables and where the technology is headed:
http://www.techrepublic.com/article/invisible-revolution-how-wearables-are-quietly-invading-the-enterprise/


And here's some specifically health-related info. The authors used an example of a mouthguard that senses impacts as they happen:
http://nuviun.com/content/preparing-healthcare-to-use-data-from-wearables-smart-fabrics-and-3d-printers


What we were considering from this were things along the lines of shoes/rings/keys that do tasks so the user doesn't have to. Like shoes that give you directions using GPS by vibrating or something along those lines, or that automatically pay bus/train fare upon entry using some kind of sensor or NFC. The UK have a system on the tube that uses NFC called Oyster Cards which track how far you've traveled to determine your fare.

Or keys that automatically unlock your car when you are within range and/or do a certain gesture.

Two forms of wireless we saw were NFC and RFID. These are possible technologies to explore when we are coming up with concepts for the project.