Deployment

Set up time - As the set up with be in someone house the set up time for the project is very flexible. However it can not be unsociable hour due to other people in the house. It would also be a good idea to film while it was still daylight because this would produce the best light to see by.

Vandalism - As we are filming inside someone house vandalism is not a issue. The other problem we could have is from the other people in the house wanting to use the room. They could knock thing over and interferer with the setup.

Security - The project is something that we are going to put up and film and take down so the security isn't that big of a deal. The only thing we need to make sure is once the installation has been set up that no one is going to mess around with it. This is easily done in a house because we can lock the door and control who uses the room.

Filming - We will be filming inside. We need to make sure that we have good light available so we can see each part clearly. Another thing we are going to have to worry about is how to actually film it because it will set out over such a big space.Another issue that we might have is fully capturing the computer side.

Health and safety

• We could trip over the object on the floor, we will have to be careful where we step.

• No sharp object that we could cut ourselves on.

• No liquid near the electrics, chance of electrocution.

• Open flame should be secure, to lower chance of fire.

Deployment time table (put up)

10am - Get to house.

10:30am - Set up the PC in the room.

11am - Build the Rube Goldberg machine and set up PC side.

1pm - Dry run (making sure all the links work and it runs smoothly).

1:30pm - Make any adjustments needed.

2pm - Film and editing

Deployment time table (pull down)

4pm - Tidy equipment back into boxes.

4:15pm - Load up car.

4:30pm - Put room back together and return PC to proper place.

Equipment list

PC's
light sensors
Relay Switch
Computer Programmes
DVD Cases
Cardboard Box
Dominoes
String
Scissors
Candles
Playing cards
Bounce balls (4)
Bubbles
Tape/Glue
Cotton rel (Large one for wire)
Cardboard tube
Paper cups
Books
Elastic bands
Ruler
Kids toys (wind up toy, mechanic ect)
Fan
Dublo
Blue tack
Mousetrap the game
Kitchen roll

A week later

We presented our video on thursday and released the website during the presentation.

The website had tracking code embeded to each page which allowed us to track the page views through google analytics.

We are pleased to have received over 100 unique visitors to the site.
We can see from our stats that most people are getting the answer wrong first time. However we would like to add new pages so we can see whom is the most popular choice.

We also know that not everyone waits for the video to load as its hard to tell if its loading, so we need to sort out a loading page.

To see the full report visit cluedo.djtalbot.com/stats.pdf

We are hoping to make changes and keep the site free of bugs. But in summary after 5 days we are pleased with the amount of attention it has had and we are confident it will carry on, as we are finding from external stats we are getting an average of 6-10 new users every day to the site.

Page links

So the next step I decided to take was to set up a links at the top of the page. That are the same on every page. So I decided to use the same type of header links that we use in lectures. Where there are boxes for the links and they cover the whole way along the page width.

I thought this would look good because it would fit in very well with my colour theme. I could have the background of the links a lilac and the colour for the writing the same as the page background. I did wonder if there was a way to fit the header to any screen it was uploaded to.

(My link on my home page, with home page link highlighted)

I decided that I want it to highlight which page you are on. It will do this by turning a different shade of purple. When we did this is class the page we were on always appeared as the left hand link. I didn't want this. I wanted so the bar outline does not change and the highlighted part changes.

(My second page link bar, with page two highlighted)

I also decided to put mouse over on so when you hover over the button it highlight the button. You can see this below my mouse is over the form link (The last one on the right). You can see a box also pops up telling you the name. I am temped to take the mouse over function off. I do not think that it adds much value to the website. This is something I will decided as my website develops.


(Showing the mouse over function on my form)

Reflexive methods

This was a very confusing lecture which did not seem to follow the pattern of the other lectures. We looked at human behaviour, how people respond to different situations. We looked at pictures and analysed the behaviour behind it. I find human behaviour very interesting and why people do what they do.

 This is a picture of a bin where people have dropped chewing gum around the bin on the floor. We looked at why people drop the gum on the floor rather then put it in the bin. Are people really that lazy that they can not be bother to work the extra step to reach the bin.

You know times are crazy when you have to have instruction on how to use the loo. These sticker are popping up all around the UK. The reason these stickers that have been installed is because of the growing foreigners coming to the UK, because they have different loos.

This is an interesting photo where people our making their own path right next to a set of stairs. You have to wonder why people would walk up the muddy hill instead of walking up the stairs. Are people really that lazy?

Invtervention

Intervention is something that makes everyone cringe after the experience last year. Where we spend most of the term wondering what a intervention is and how we would come up with an idea for one. So went we were told we would be studying it again and had to come up with an idea, we automatically thought it would be horrible and very hard. 

However with the explanation for Mike Phillips, along with the video. It became very easy to understand what a intervention is. An intervention is creating something to change something in a positive way. We had to come up with different idea for interventions. Below is a diagram of the idea of some of the intervention I could have done. The point that is in purple is the intervention I would do if I had to put it into practise.
 

colour scheme

So I have to create at least a 3 page website about me.

1. Index (Intro)
2. Page 2
3. Page 3 (Form)

So I am going to start with the most basic thing first. What colours do I want my website to be? I want a colour that is really me. Something that is girly but still looks professional.

I thought having two different colours might make the website to bright. I like the idea of using the same colour with two different shades. I like the idea of havinfg a very dark background, so I started with black in mind. But I didnt want to use back I wanted a colour that was a bit more rich and elligent.

So I decided to have my background as a dark purple and my secondary colour as a lilac. The secondary colour will be used for my text and my page links.


So I decided to make a index page and make a .css file and try and get the colour showing up. I wrote my code out as I thought it should be. But it still didn't work. So I checked it with the work I had done in lecture and it matched. So there was something else wrong. I sat there for about 10 min just staring at this very short bit of code and then I realised that in href I put .ccs instead of .css. Its annoying when something so small can take so long to fix.

Evaluation

Idea

We still believe that the idea we came up with was a good idea. We tried to make it as interactive and fun as we could have in the time frame. There was a moment in the project where we started to think that our idea was to ambitious but we think the final product came out very well, better then we all expected it to.

Group work

We work very well as a group. Everyone went the extra mile to get this project done on time. People were always available when we needed them and were willing to stay late (as a couple of times we were in uni till 10pm). We could also relay on everyone to get their own parts done. Which was good because when it came to putting the whole thing together it made it a lot easier then if everyone hadn't done their own part. We were also able to get hold of everyone very easy. So if anything happened at the last minute, it was good that we could communicate. We also helped each other out with any problems that we came across.

Interactivity

I believe our interactivity was good. It is very easy to use and could be very enjoyable. The video could have been more interactivehowever i believe that it is fit for purpose. We could have done more on the clickable clues but with our time frame it just was not possible.

What worked?

The fact we are all friends and get on together really well helped when it came to doing the team work because we were spending so much time together it made it easier that we all knew each other. It also helped that we were all very committed to the project, we all wanted to get a good grade. So this meant that we all put the same amount of effort into the project.

What didn't work?

Lukas is going home on 30th March so this meant that we would have to be ready to present the week before everyone else. Having a shorter deadline did give the feeling that everything was a bit more rushed and that we all had to work up to the last min to finish the project to the standard we wanted it. But the overall standard of the video is very impressive for the amount of time we had.

What was good?

We believe that the interactivity of the video was the one thing that went very well. It really came together at the end. For a moment we thought that we would not be able to produce what we wanted to due to lack of time and technical skills. But thanks to a couple of all nighters and lots of hard work we were able to get produce finished and working smoothly.

What was not so good?

We could have expanded on the clues, we could make them more interactive and elaborate. This would however taken more time.

Making the website

For the website we are hosting it on Dom's website www.djtalbot.com
The aim is to put it in a sub directory so it has a personalized URL address which is easy to remember.
The url we shall use is cluedo.djtalbot.com
The things we need to put on the site are:
1. Introduction Video
2. Page to choose who did it
3. Page to tell the user they got answer wrong
4. Winning page

We shall make the website using a php based template, so that the header and footer are the same on every page.
In the footer we need to put thanks to the people who helped us.
Links to our sites, social net network sharing buttons, and we need to add copyright for the music and product name cluedo.

Dom has made a logo for Pear Inc. which we can put at the top of each page. The logo was created in illustrator.

The introduction page (cluedo.djtalbot.com) will show the introduction video along with the page template.

When the user clicks the ready to guess button it will take them to cluedo.djtalbot.com/final in which the user will be able to guess who did it.
The page is set up to show profile type images of each of the characters. Using CSS3 when the user hovers over an image it enlarges. Clicking on the image enables a lightbox which enlarges the image clicked and fades the rest of the page. If the user thinks the character they clicked did it then they click the button murderer.
If the user is correct they are directed to the winning page. On this page is a confession video from the murderer.

To stop people from sharing the link with their friends the right and wrong answer pages have been locked out with PHP, which redirects them to the choice page. Once they have gone through the choice page it allows them to go to the answer pages.

Processing

I really wanted to do something that was very cool for my processing, However I do not have the technical skills to do this. So I decided to create a sketch that make different balls bounce around the screen and depending how fast they move is depending on the wind speed. I decided to do this because it was simple to do.Below is a image of my processing embedded onto my website. This is the processing feed when new information had just been entered. It made all the balls only go up and down (where before they bounced all over the place) and made some balls go half off the screen.

I had to change the way my processing read the feed, instead of it reading value 27 (I thought they stayed in the same place) it now reads just the wind speed. This should keep my numbers in the same sort of values. However by using this method it automatically reads the top result on the page, which is the oldest result. The newest result is produced at the bottom of the page. Making it difficult to choose the newest feed. Sadly I was unable to figer out how to select the bottom feed. Another issue I had was reuploading it to the website. It was very hard to take off the old one and put on the new one. Below is a screen shot of the edited code.

Requirements

Below are the requirements for the installation. We decided these requirements from both our environmental survey and contextual study.

Digital interactive installation - It must use some form of technology that a person will be able to interactive with.

Board game inspiration - The idea for the installation must come from a board game. Once it has been produce you should still see element of the game.

Must be in a large open space - The space need to be able to hold our installation and deal with people interacting with the installation.

Must use multiply platform - We want the installation to use namy different platforms such as email, facebook, twitter ect.

Must run smoothly - We want something that doesnt rely to much on people interaction. Something that will run smoothly with barly any interacrtion.

Must be both real world and digital -We want to produce something that crosses from the real world into the digital work and back out again.

Creating the interaction

Sharing the work

We only had 3 weeks to do this project, due to members of our team not being here for the last week. So sharing the work between was very important to get it all finished on time. The filming is something that we all undertook. Discussing what dialog, shoots and lighting should be used. With the office scene filming we also took on board advice from Alexandru Levitschi as he has privier experience in this area. It wasn't until it came down to making the video interactive that we all took our own parts of the project.

Lukas/Alexandru - Edit the intro video.

Dom - Is building the website for the video to be hosted on. Plus he will be producing the flash video for the laptop clue. Which will link to our facebook accounts.

Lukas - Is putting the flash video together and making it interactive.

Lewis - Has to edit the interview videos and insert the voice overs.

Paddy - Is making the presentation to be presented in lecture.Will also produce a forensic evidence page for the knife clue.

Jodie - Is producing the blog and the fake accounts.

Fake Facebook profiles

We set up fake profile for all the characters, these will be used as clues and to give people a more in depth insight to the suspect.

Rouger Rouge

Samantha Scarlett

Derek Plum

William White

Peter Peacock

Fake Twitter account

Samantha Scarlett

Environmental study/ Contextual study

We decided that for our project we should use some indoor environment. Considering all the little parts which would create our domino we must avoid all side effect like wind and so on.

We are going to use a big room/house of one of use. The room must be big, I mean there should be a lot of space on a floor, because all the installation will be place there. We will be also filming it so the space is really essential. Optimally there shouldn't be any carpet to avoid disturbances on the floor, but some non-shaggy carpet is acceptable as well. Windows should be closed, because of the wind. As for the filming we should be interested in lighting as well. With poor lights we won't see much on the video so the lighting should be really good to make the room bright.

Mostly, we will be using just a flat space on the floor, but we would like to make it in more "dimensions". Some things might go more into height, some things might be flying, some dropping and so on.

As for the Digital part of our project we wants to make it really rich. When our domino hits a computer it stars being really interesting. First of all we decided what OS we are going to use and we decided for Mac OSX. The question you are asking probably is "How are we going to connect the 'real world' domino with computer"? The answer is Arduino. We are going to use mostly sensors. Light sensors and relay switches.

Internet, software and pages we wants to involve:

• Our website
• BBC
• Facebook
• Google
• Ebay
• Youtube
• Read it
• Email
• Processing
• Flash

Google:

Google is considered to be the most well-known website on the internet. It works as an internet search engine. We intend to use it for what it is meant to be used for. That means searching. It could be connect with other pages we want to use in a way of searching them...

Youtube:

Youtube is the biggest website with videos. It's meant to work as a place where people are able to upload their videos and comment and rate other videos. Basically it is just a huge database of videos. We intend to play some specific videos on this site.

Email:

The oldest and still massively used form of digital communication. Everybody should know it. It's pointless to describe what it is for and how it works. We want to use arduino and processing to send some emails and that could activate another arduino and switch something on. It might also have some influence on the user, ask them some questions and depending on their answer it would choose from a variety of continuation of our real-world/virtual domino.

Facebook

Facebook is a social networking site. It is used to communicate with friends and family across the globe. People create events, upload photos, create groups, play games and find out what’s going on in your friends day to day lives.

Ebay

Ebay is a site used to sell goods across the internet. User sign up to an account and then they have the ability to buy and sell items. The website is set up as an auction website where people bid on items and the highest bit wins. It also provides a buy it now option, which is down to the seller whether or not they want to use this. On Ebay you can buy anything from toys to cars.

Reddit

Reddit is a website used to upload everyday news stories, that wouldn’t normally make the news. People can upload videos, photos and text. Depending on what other user thought about the story is depending on how many votes the story gets. The more votes the stories get the higher up the rating they moves, the most popular one are on the homepage. Reddit also gives people the chance to comment on the stories and express their options.

BBC

The BBC website is a portal to services and websites available from the BBC, which includes:
1. News/Weather/Sports
2. iPlayer/TV
3. Radio

Visitors can change the main page around so that the subject matter that is the most interesting to them is viewed at the top, while anything that they aren't interested in can be removed from the page altogether. Visitors can also go from the main page to other pages such as iPlayer OR go directly to the site they are interesting in by typing in the right directory.

The BBC site has tons of up to date information, and with the user interactivity the site allows makes it a good site to use for our "Waterfall" effect.

Yahoo

What it is? Yahoo provides a web search service along with other Yahoo services including:
1. Dating
2. Maps
3. Games
4. Mail

Visitors can either use the home page to search the internet for anything of interest, or use one of the services that Yahoo provides by clicking the links down the left hand side of the web page.

With the services that Yahoo provides (stuff like dating and chatrooms) the page has a wealth of information and stuff people can get involved with, making the site very popular.

Processing

Processing is a programming language and development environment used within Digital Art to make artistic representations with code. Users can use things like RSS feeds to feed data into their programs, which in turn can change certain aspects of their visual design.

Users code into a "Sketch" using similar scripting styles as Javascript and ActionScript, following the style shown in the screenshot.

Processing is a very interesting program to work with, being that it can be used with arduino fairly easily. With easy configuration, sketches can be developed and implemented into websites for greater interaction.

Final intro video

his is the final cut of our interactive video. It was edited by Lukas with the advice of Alexandru (the camera man).

Diagramming

In the lecture we talked about three different types of diagrams. We looked at why people uses these and what is good about each one. Diagrams are good for visualisation because it can take a a huge system or network and make it easier for people to read.

Architecture Diagram

This diagram is normally used for showing how computer system works. This is one of the most used out of all of the diagrams. This is a good way to visualisation a whole system, its makes it easy for people to understand just from a glance. 

Entity-Relationship Model


This is a diagram that widely used in data bases. This is a very easy way of displaying data and the relationship between the data.

Responsibility Cluster 


This is a very simple data to show how data flows and the relationship between certain fields. This can only be used for simple system because it is not very detailed.

Diagrams don't have to be boring

All the diagrams tend to be boring, however they do not have to be. Below is an example of the a flow diagram made with pictures. It is a lot more appealing to look at and people will want to look at it. 

Filming the office sceen

Filming extras

We were all in the film so we decided that we had to get someone else to do the filming for us. So we asked Alexandru Levitschi for help filming, he is doing a film degree.

We also needed someone to play Mrs Body. So we asked Jade Mcfetridge to do the acting. She isn't a actor but she gave a very convincing performance.

Raw footage

Meeting shot 1

In this shot we pan down from the ceiling to see everyone set around the table. They are all talking about how they are planning to save the company and cut back costs. The rest of this shot is a standard long short where you can everything that is happening.

Meeting shot 2

This shot is a shot that focus on the left hand side of the table, were Dom, Lukas and Jodie are sat. We used this before it was a more dynamic shot then the standard one.

Meeting shot 3

This shot is a shot that focus on the right hand side of the table, were Lewis and Paddy are sat. We already had a shot of the left side so we needed the same shot of the other side of the table as well.

Meeting shot 4

This shot is just a shot of Jade. A close up of her reactions and expression. This shot is a important one because she has to come across as someone you would hate. Someone you would want to kill. She also has to come across as a very confident person that doesn't care what people think of her.

Meeting shot 5

This shoot is a moving shoot where the camera moves around the table and focus on people that are talking. This makes for a very good shot, it gives will give us lots of shot to play around with then editing.

Meeting shot 6

In this shot the camera moves around the table to zoom into people when they are talking. This will be good shots to edit into our final video. It will give us the option to look close up at people reaction and how the act. This helps build the story and make it more convincing.

Twitter shoot (laptop)

This is a close up shot of Jodie (Miss Scarlett) trying on twitter. This shot helps to show the hate she has for her boss. It also helps develop the story more and give Miss Scarlett motive to why she would want to kill her boss.

Late Meeting

This shot is meant to look like time has pasted. Everyone is getting very fed up and snappy. They just want to all go home. Lewis walks in from of the camera when he leaves the room. We wanted the beginning shot to feel like that viewer was getting a insight into this meeting. Another thing that we did use is the reflection in the window, when Dom stands up you can still See what he is doing in the window. This gives a whole new depth to the shoot. It then zooms in to the boss (Jade) when she starts to get mad. This is a important of the video because this leads her to fire us all, giving us all motive to kill her.

Paddy and Jade shot 1

This shot is filmed from the right hand side. This allows you to see Jade reaction but only hear what Paddy says. It also always you to see how Paddy is moving though the space.

Paddy and Jade shot 2

This shot is a close up of Jade looking out the window. It allows the view to get a close up and jade reactions. It also allows people to see paddy walking away which you couldn't see before. It films this from the back of him.

Paddy and Jade shot 3

This is a shot from the left hand side. This shot is mainly to capture Paddy reactions and to walk him storm out from the front.

Jade alone

This is a pan view shot of the whole room. It pans from right to left and gives the impression that she is fully alone in the room.

Goes dark

This is a very simple shot. Where it is a static whole room shot and it just goes dark.

Jade alone in the dark

For this shot we decided to use a blue spot light (on the front of the camara) to fill. This allows us to film in the dark and still get the details we wanted. The shot is film from the front of jade. The camara moves with her, starting off very low and getting higher as it moves.

Finding body shoot 1

This shoot is filmed out in the hallway where everyone is walking from. It is filmed from the left hand side and shows everyone walking up to the door and walking in. This shot shows everyone from behind when the enter the room.

Finding body shoot 2

This shot is set up from the room so all you can see is us entering throw the door. This is a good shot for reaction when we find the body. You can also see the body and just all standing above her looking down.

Final scene

The final scene is a shot of everyone and the dead body. Everyone is sitting around waiting for the police. We tried not to move much in this shot because this is the shot that will be interactive, that people will click on.

Close up of bin

This is a hand held shot where the camara moves from one side of the room to get a close up of the knife in the bin. This bit of footage will be used as a clue in the video.

Close up of laptop

This is a hand held shot where the camara moves from one side of the room to get a close up of the laptop screen. This bit of footage will be used as a clue in the video.

Photos from filming

This is a photo of the set up for the final interactive video. However where Alex is stood will be where Paddy is.

Academic Research

MIT Technology Review on Arduino

As electronic devices got more complicated in the past few decades, it became increasingly difficult and expensive to tinker with hardware. The 1970s garage engineers who built their own computers gave way to geeks who programmed their own software. But now the rise of open-source hardware is paving the way for a return of build-it-yourself electronics. Creators can start with devices such as the Arduino, an inexpensive control board that’s easy to program and can hook up to a wide variety of hardware. People can create projects that range from blinking light shows to more sophisticated efforts such as robotics. The Arduino started with designers in Italy, who license the boards to manufacturers and distributors that sell official versions for less than $50. The Arduino designers freely share the specifications for anyone to use, however, and third-party manufacturers all over the world offer versions of their own, sometimes optimized for specific purposes.

http://arduino.cc/blog/


Rube Goldberg Machine

Rube Goldberg's cartoons became well known for depicting complex devices that performed simple tasks in indirect, convoluted ways. An example on the right, is Goldberg's "Professor Butts and the Self-Operating Napkin", which was later reprinted in the postcard book, Rube Goldberg's Inventions!, compiled by Maynard Frank Wolfe from the Rube Goldberg Archives. The "Self-Operating Napkin" is activated when the soup spoon (A) is raised to mouth, pulling string (B) and thereby jerking ladle (C) which throws cracker (D) past parrot (E). Parrot jumps after cracker and perch (F) tilts, upsetting seeds (G) into pail (H). Extra weight in pail pulls cord (I), which opens and lights automatic cigar lighter (J), setting off skyrocket (K) which causes sickle (L) to cut string (M) and allow pendulum with attached napkin to swing back and forth, thereby wiping chin.

In 1931, the Merriam–Webster dictionary adopted the word "Rube Goldberg" as an adjective defined as accomplishing something simple through complex means

http://en.wikipedia.org/wiki/Rube_Goldberg_machine

Filming the interviews

Setting up the scene

We decided to use the green screen room because if the lighting it would provide for us. We wanted our shoots to look like the suspects where sat in a police interview room. The light help us give this impression, it also came in handly when we filmed the confession interview, We were able to the lighting look completely different and change the mood. As you can see from the pictures below.

Interview picture

Confuession picture

As you can see the lighting on the confession video is a lot darker and orange. This create the feeling of isolation. At this point Mr Plum (Lewis) is feeling alone and scared. He fances a life time in a jail. We tried to create light that relexs this feeling.

Filming photo's

Profile pictures

The profile picture will be used on the website for the user to select who they think the murderer was. These will be made of clickable links and will make up a poll of who people have choosen.

Mr Peacock (Paddy)

Miss Scarlett (Jodie)

Mr Rouge(Dom)

Mr Plum (Lewis)

Mr White (Lukas)

Voice over

We need the voice over for the detective voice. We decided to use someone else to do the voice over as you already know what we sound like and we be more realistic if we used someone else. The voice overs were done by Craig Potter. Craig is replacing the questions we ask our suspects.

Raw footage

Below is the raw unedited footage of us filming in the green screen room.

Lewis interview

Lewis confession interview



Dom interview part 1



Dom interview part 2



Paddy interview



Lukas interview



Jodie interview