Monday 27 October 2014

2D into 3D image Processing

Here is a sketch I did after conducting some research into the 3D effects you can apply in Processing. I used a still image from the movie "The Matrix Reloaded" an applied a 3D effect to the image which caused a part of the image to start  protruding when the user scrolls from one side of the screen to the other. This can give 2D images a three dimensional look and this can easily be adapted to track the movements of the audience by using a camera. Much like the pixel clock I created previously I can add an "if" statement to the mouseY position which would cause some other effect to happen when the user scrolls up and down.

The implementation of multiple effects enables the user to create more interesting dynamic visualisations. The ways in which I could adapt this project would be to use an image as the background instead of the solid green so that an image is hidden and it's the role of the user to interact with the sketch to reveal the hidden image. Another interesting effect I could apply would be to have two images which have the 2D into 3D effect applied to them but I would invert the protruding on one of images which would cause both images collide. This would result in the images looking somewhat like they are blending.

  During a lecture we explored various media concepts which we could apply to our projects and one which caught my attention was the idea of distorted data which can be revealed through user interaction. This concept would work well with this 2D too 3D sketch as data could take the form of an image but by using the 3D algorithm I would be able to distort the data by separating it's pixels or by applying filters. Using libraries such as "Face tracking" would enable me to apply interactions for the audience which would reveal the data either in one process or in a series of stages like a puzzle.


Pixel Clock in Processing

Over the weekend I created a Digital Pixel clock in Processing, this sketch compiles various things I learnt in last week's workshop such as loading images and using strings. Strings are useful for grouping, comparing and extracting data which would be very important for me to learn when creating data visualisations in Processing. In the Pixel Clock I created values such as year, month and hour and stored them in a string using the following method.

String[] apple={"A","P","P","L","E",};

  String ye= str(year());
  String mo= str(month());
  String d= str(day());
  String h= str(hour());
  String m= str(minute());
  String s= str(second());
  String time = ye +"/"+ mo + "/" + d + " " + h + ":" + m + ":" + s;

Values such as year are defined by the letters "ye" which enables the year value to be called later in the sketch. As you can see I decided to display and format the time/date values professionally by putting slashes and colons in the correct place.


I've also implemented a mouse click event which when triggered it changes the image which is loaded, in this case an image of a banana will appear when the left mouse button is held down. 

In terms of my interactive display project strings would be very useful if I want to create a visualisation which uses multiple values which can be references several times. It's also a way of display live data for example a public display may change it's background to dark during the night and  light during day hours. 

Monday 20 October 2014

Previous IT Projects (Part 2)

When building my security robot for my IT business project my overall design was greatly influenced by the needs/objectives specified by the client. In the development of a project it's basic practise to initially build something with functionality as the primary focus however as digital media designers we go beyond raw functionality and design our projects to challenge and engage our audience's senses.  Here's a document which outlines the design decisions caused by particular objectives for my IT project.

Storyboarding designs influenced by objectives

Objective 1:

The way in which the design of my robot has been influenced by objectives was that in my designs I made the sensor angle upwards so that I would detect higher objects. I included the design in my storyboard which shows that I implemented this in my design






Objective 2:

The way my designs have been influenced by objective 2 was to make my robot as small as possible so that it can remain undetectable to intruders. I will try to include the fewest amount of Lego components as possible without hindering performance.


Objective 3:

This objective influenced the programming and not the physical design. I will have to implement a forever loop on the NXT program for the robot and a wait block so that it will forever detect intruders after a 10 seconds cool down period between each detection.




Objective 4:

This objective influenced me to think that I will need to have another NXT brick in order to relay the detection secretly. I needed to think about the programming for the receiving brick as well as how to connect the Bluetooth together. This influenced the design of my pseudo code.


Objective 5:

During the planning of the project I believed that this is a serious factor in the project and I must be able to make the whole “Send Intrusion Message” function work correctly and work quickly. This influenced me to look at the various ways In which I’m able to send messages using the NXT bricks so Blue tooth became heavily involved in the design of the robot as well as in the programming. The use of Blue-tooth would need to be explained in my user guide as well as the Technical document. Blue-tooth also influenced me to look for additional ideas for  future development of the project. The use of Blue-tooth also improved the design of the project because in the early stages of planning the project I was thinking of using a wired technique of relaying detection messages but the blue-tooth enables the robot to stay as small as possible and without needing the change the physical design of the robot.

Previous IT Projects

While I was at college I developed various different projects ,one which was media based and one which was business based. The development cycle which was undertaken for these projects were slightly different, for example the IT business project required me to initially produce a gannt chart which I needed to keep to throughout the development process, the reason for this was to ensure that I kept to my preconceived schedule. The interactive media project had a longer testing and maintenance process as it required me to adapt my project multiple times to feedback before the client was happy with the final result.  I believe I had much more freedom in the design of the media project than I did with the business project as the business project  often required me to get the opinion of the client on almost all design decisions. 

These projects are significant as they highlight the impact of objectives and the specification on the design of project as well as the importance of testing. Due to the display project having much more freedom in terms of choosing what concept you want to reference in your work it enables the overall design of the project to be less constricted however it's important that the aims highlighted in the brief aren't overlooked as a result.

Here is an annotated review of the finished project where I describe what was good, bad and what I've learnt from the project as well as what I would do different next time.


This is a screenshot of one of the robots in the project. This is the detector (Sender Robot) which worked correctly throughout the development of the project. You can see that the robot doesn't consist of many Lego parts although there is advanced programming involved in the operation of the project. Which I produced on the Lego Mindstorms software. The overall design of the project is very much identical to the original design I produced at the start of the project. The construction of this robot was built ahead of schedule which enabled me to improve on the programming. The resources I required to enable me to build the project did in fact follow my initial estimate and resource sheet although there were a view components which I initially overlooked in the resource sheet such as the Bluetooth stick to enable me to change the NXT brick’s names

This is the NXT brick which receives the detection sent by the first NXT brick. This device needs to be initially connected to the other device via Bluetooth. Once this is done you run the “Receive” program before running the program on the other robot. This part of the project I did struggle with as there has to be certain terms before it works correctly such as if the battery was low on the robot wouldn’t be able to receive the detection. Once I replaced the batteries the whole program worked correctly. The programming of the whole project was completed following the same date set out on the Gantt Chart and it took me two weeks to complete which is what estimated on the Gantt chart.

This is a screenshot of the programming for the “Receiving” brick. You can see that there is a logic gate at the start which runs the program once detection is made. The actions which are performed after detection is made are to have the brick display the message “Alarm” as well as sounding an alarm. This part of the project worked great although there can be significant improvements such as the text on the NXT brick is very small and doesn’t particularly stand out. The actual sound of an alarm was very effective.  The programming is very similar to the pseudo code which I initially designed. The receiving brick’s program was pretty much identical to my initial pseudo code but of course some features weren’t as effective as I initially thought up. For example the text which suppose to appear on the NXT brick I thought it would be a lot clearer and more effective

The program for the main part of the robot is a bit more advanced than the receiving program because in this program I need to implement the sensor. The way in which this is programmed is if there hasn’t been any detection made then the program will continue to run until detection has been made.  The middle green block in the program is the send message block which you can see is linked to a text box so this results in the text being sent to the receiving NXT.



 The overall effectiveness of the whole project was pretty successful because I kept relatively close to the Gantt chart and used all the resources I stated initially before building the project but also added some resources which I initially didn’t think of. During the testing stage of the project there was some factors of the project which didn’t perform as well as I would of hoped such as when I was setting up the ultrasonic sensor I learnt that the overall range of the sensor wasn’t very good so this made it increasingly more important that I can position the robot close enough so that it would detect an intruder for example if they walk through a door way. The way in which this finding changed my design of the robot was to change the programming slightly too hopefully optimise the performance.

Design & Review of objectives
Initial objectives:
Objective 1: Must be able to detect movements higher up.
Design: The reason I thought this objective should be included in the project was because the robot is very small a person would be considerably taller so I thought I would need to put angle the sensor so it would detect taller objects.
Review: The robot is able to detect movement higher up because in the design I ensured that the ultrasonic sensor is facing at a 45 degree angle so this enables it do detect higher objects.

Objective 2: The robot will use an ultrasonic sensor to detect an intruder. The robot must be small enough so that it can remain hidden from a potential intruder.
Design:
During the design stage of the project I was thinking on how I would make the robot detect intruders so I thought that I should implement an ultrasonic sensor to enable the robot to detect movement. I also stated in the design that the robot should be as small as possible.
Review:
The robot can detect intruders but as I have previously stated the range of sensor was a drawback so I had to make sure the robot was small enough to enable it to remain hidden. The overall robot is very small as it’s only really the size of the NXT brick.

Objective 3:  The robot would remain silent and relay the detection then after duration of time restart the program.
Design:
In the design I stated that the detecting robot should remain silent so that the intruder is unaware they had triggered an alarm. The alarm should also be able to automatically restart after detection without the need for user input.
Review:
I did implement a loop block in the Lego Mindstorms programming on both the sending brick and the receiving brick. I did have problems with perfecting the loop as the receiving robot would always end after detection is made. 

Objective 4: The robot wouldn’t sound an alarm because it has to be a silent security device to relay the detection accurately to another device.
Design:
During the design stage I also thought that the project should use a wireless connection to send a message to the other device. The reason I set is as an objective was to ensure that the robot uses a wireless medium to send a receive messages as this makes the robot more stealthy.
Review:  I was able to make the robot relay detection onto another NXT brick via blutooth.

Objective 5: The alert must be sent to the device securely and a reasonable time after the detection is made.
Design:
A concern which I thought about in my design was the actual time taken to receive the detection from the other NXT brick if the time is too long then it’s very important that it’s made better so this was the reason I set it as an objective
Review: the alert is sent via Bluetooth so it’s done very fast and it’s secure because the connection between the NXT bricks is done via a secure connection which requires a password.

Ideas for Future Development

There are several ways in which this project can be improved such as it would be much better if the detection can be relayed to another device such as a mobile phone or it could even be relayed to set off a system alarm or trigger all the lights in the building to be activated. The range of the detection robot is also pretty poor so I think it would be good if the range can be improved so that it doesn’t have to be so close to the target before detection is made. It might also be a good idea to be able mount the robot on objects such as under a table or on a wall.
Another idea would be to connect several Security robots to one core receiver so which would be a perfect set-up for a building with multiple floors.

External Factors

There were external factors which did hinder the production of the project which were initially not identified during the planning. Such as during the testing of my robot there was a lack of batteries in the room which didn’t enable me to conduct all the tests in wanted and also a known bug in my project is that the robot doesn’t send a the detection to the 2nd NXT brick when there is low battery. Other external factors include weeks where I wasn’t able to work on the project because of half terms or holidays which resulted in me needing to create re-vamped Gantt charts.

Design Iterations Poster Feedback & Audience Analysis

Last Thursday we finally placed our posters in the foyer area of Weymouth house. We initially observed the movements of people entering and leaving the area to see which would be the best place to put the poster so that it would be seen by the most people. One of the most busiest areas of the Foyer is the Costa area which pretty much constantly has people queueing by it. The eye contact of people in the queue was either facing straight forward towards the counter or 45 degrees to the left and right. We initially wanted to place out poster on the pillars by the counter but the space was already taken by other posters. We placed one of our posters on the entrance/exit to Weymouth house in attempt to get people's attention as they left. From analysing the audience for an hour we would say that it got the attention of about 3 out 10 of the people who walked past it, when groups of people walked through the exit it would get the attention of one or two of them but this result did vary throughout the hour as people were in more of a hurry at the start of the hour than mid way through the hour.


The poster on the pillar was more successful than the poster on the door as the pillar was placed  somewhat central as you walk out from the stairs. Instinctively you look at the pillar so that you don't walk into it and the fact we placed it at about head height would ensure that's it's seen. We are happy with the changes we made to the design as a result of the feedback from other students, the larger font helped the text stand out at further distances and the darker blue on the sinking ship made it stand out especially under a dim light. We also interviewed some of the people who looked at the poster and asked them if they were from Dorset in a attempt to see if citizens of Dorset are more likely to interact with the poster rather than people who aren't, however the the results were roughly the same so no trends could be identified through that line of questioning.


Here is a floor sketch which illustrates the flow of people in and out of the foyer which also shows where we placed our posters and the areas with the most traffic. As you can see people mostly moved in between the two pillars and close to the Coste area.


From analysing the flow of people I would say that the screens closest coste would be the ideal place to have my interactive display as the display would likely be spectated by people waiting in the Coste queue and therefore might influence the people spectating to interact with the display themselves.

Tuesday 14 October 2014

Experimenting with Processing

Over the weekend I have been working my way through the Processing tutorials on Lynda.com and decided to work with my own data instead of the Olympic medal data shown in the Lynda tutorial.

The data I chose to use is somewhat relevant to digital media as it's the amount of Academy film awards awarded to animation studios, my data featured Pixar, Dreamworks as well as some other animation studios . The reason I did this was so that I could learn how to display my own data in a dynamic way in Processing, the sketches uses a rollover function which when triggered displays the studio's logo.


Here is a screenshot of the code which I have commented. In this sketch I use strings and integers to link numerical values to variables.



 I also use variables to set the height and width of the bars in the chart as well as the spacing between each bar. I also use different fonts for the title and labels by calling them at different parts of the sketch.


Friday 10 October 2014

Design Iterations Research

    For the development of my data visualization project, I'm conducting research into important components of the brief. One component of the brief which needs to be considered is the way in which I can dynamically display data in an interesting way.

    One important component is the camera which would be used as a input/navigation device for the audience. My design would need to react to the movements of the user, in processing a project using mouse commands can easily be changed to react to eye movements, which is good because the sketches I have been doing in Processing during the workshops have used quite a lot of mouse commands.  I would need to undertake some testing to see how the camera would react to large volumes of people.



In the brief it states that my visualization must relate to digital media concept which is significant to the twenty first century either from media theory or media practice. They can range from subjects such as demonstrating data compression, data storage or even the process of trending on social media.

For example this trendmap extracts data from twitter to determine if people are feeling negative or positive in a particular geographical location. Data visualizations such as this can be used by people to identify trends. In the example below you can see that the people living in the center of Melbourne are more negative than the people living on the outskirts, this can be identified by the green and red areas on the map.


During the process of learning how to program in processing I have seen various examples of data visualizations. For example in the Lynda.com tutorials I learnt about the "Nightingale Rose diagram" which isn't actually a data visualization graphic but is in fact an information visualization graphic.



There are two clear distinctions which can be established between an information visualization graphic and a data visualization graphic. An information visualization graphic is designed to convey clear information to it's audience and can only be interpreted one or two ways, an example of an information graphic is the "Nightingale Rose diagram" which clearly displays the causes of death of soldiers each month in the year of 1855. The design of  of this graphic would of initially began with the collection of "large data" over a twelve month period and then the data is plotted on this diagram in a way in which it can be used by people.

This "requirements gathering" process is a process which I conducted when I designed the poster for the foyer as it involved me conducting research into a particular space which would ultimately have an impact on the design of my interactive display.

Thursday 9 October 2014

Design Iterations Poster Feedback

Yesterday during the seminar we received feedback on our poster's and it was a split decision in terms of which poster they preferred. Some of the suggestions in terms of improvements were the font which some people considered hard to read at long distances. As a result we will modify the font size and placement so its visually clearer and easier to read.  There wasn't much feedback in regard to the contextual message of the poster so we will likely keep the slogans and imagery the same.

We also conducted some research in the area in which we will display the posters to see which would be the best place to hang up the posters. We analysed the behavior of the people in the display area to see what areas were the most busy and where people were looking when queuing for coffee, we also noticed that one side of the foyer was a lot brighter than the other side meaning that it would smart to place the poster in the illuminated section of the foyer.

This research was also very useful when considering our interactive displays as some  of the Processing libraries which focus on the tracking of objects or faces etc are quite reliant on good lighting therefore I would take this into account when developing my display idea.




Wednesday 8 October 2014

Design Iterations

     The first practical unit of my second year at university is Design Iterations. The aim of the unit is for students to document their understanding of design processes in the form of a blog. Their are various project life cycle which are applied to interactive design projects however it's my role as a student to apply a method which I believe would  be the most appropriate. I have a previous experience working to a business development mode,  a typical business project would consist of various different stages of development such as; specification, feasibility study, design, analysis, testing and maintenance. This business project model is a linear development process which required stages of the development to consume a fixed amount of resources and time however the development process for a  design project  wouldn't  be as linear as it would involve adapting and improving the product to feedback multiple times over until the client is happy with the final product. Feedback is typically conducted in a focus group made of people who you consider your target audience.

     In the Design iterations unit we have initially been asked to design a poster which conveys the message of an "independent Dorset".
  For this task its important to consider what makes Dorset different from the rest of the United Kingdom. My group initially conducted research into significant county landmarks and people in history in an attempt to identify places or people which could be used to represent independence. We also conducted research into national statistics and could identify trends such as Dorset has larger than the national average of older people and tourism plays a big role in the county's income.

   As a group we designed two posters which share the same message and theme but have different slogans and images. One of the posters is dominantly blue with the image of a sinking ship which  works cooperatively with the slogan "The UK is a sinking ship, vote to stay afloat." The technique we applied to this poster is a slight scare tactic which was used by the campaign group "Against the independence of Scotland". This scare tactic did prove to actually work on voters.

The reference to " A sinking ship" is to simply convey that the UK in general is on a social and economic decline and if the voter were to vote for independence they would save themselves from this impending disaster. On that poster we also included a lighthouse which is in fact a unique Dorset landmark known as Portland Bill which can be identified by the single stripe of red.

This is an image we included to signify that Dorset is a "Beacon of hope". (Panek 2010)



This is the design we are going to present and will adapt our design to feedback.


The significance of this initial task is so we get an understanding of how people move and interact in the foyer space as this is the location where our interactive displays will be installed. By understanding the space it will enable me to get an understanding on what's feasible for the interactive display. It will also enable me to get some insight on possible issues or hurdles which I might encounter due to factors which I might preconceive as insignificant such as lighting or traffic.



Panek, J. (2010). A Seeker's Thoughts. Available: http://www.aseekersthoughts.com/2010/01/lighthouse-as-symbol.html. Last accessed 8th Oct 2014.