Story board and interface design

After further developed and digitize the rough story board and interface design sheet for the interactive application, the actual story board and the interface design sheet is out. Thumbnails are showed below:

Story board of the interactive application

 

Interface Design Sheet of the interactive application

Rough Storyboard and interface Design

Story boarding and Interface design is vital for the interactive application part of the installation. After the discussion among all the members, a very rough idea of story board and interface design is coming out.

 

Rough idea about the storyboard and interface design

 The rough is developed to become a much more presentable version.

Photo of the developed version of interface design

Photo of the developed version of Storyboard

Management Chart

Flow chart

Budget Planning and Documentation

Floor Plan

Gantt chart

Research on Webcam

A small portable video camera that rely on streaming and recording of images in real time/video to a computer, life streaming websites or network. It is connected by  USB cable, Ethernet, orWi-Fi.Their most popular use is the establishment of video links, permitting computers to act as videophones or video conference stations. It is widely use as security surveillance (CCTV mode), computer vision, video broadcasting, and for recording social videos. Webcams are selling in low manufacturing cost and can be bought/found in any of computer accessories shops. But, there is still disadvantage of the webcam in security and privacy issues, as some built-in webcams can be remotely activated via spyware by using hacking to access to other personal computer.

Ways of people using webcam:

Video calling and conferencing:

It is the most common way of people using webcam around the world. To access this ability, the person must have an account for instant messenger and Skype to access the live streaming with other friends by using video calling. In addition, this is also another new way of having conferencing with other friends around the world, which have reduce their pay for flight tickets to having conferencing in a particular area.

Video records and still image:

Webcam can be use as video record to record a short clip and even snap a photos for your posting. Mostly all the new Pc’s and laptops are building in with this feature/software when the computers arrive.

Childcare webcast video monitoring:
It offers improved security, communication, and increased service value in day-care facilities and in the house when the parent is not around or maybe the children are having stay over their babysitter’s house. By just simply click, children have their opportunity to talk by video calling with parent, which is temporary working in outstation. In addition, it can become a monitoring webcam to monitor the behaviour of children when they are alone in the house.

Webcam security:

Webcam can be use as security camera with some software that can be downloaded in the web. To access the viewing of webcam, it requires I.P address, USB or Wi-Fi of the computer that is connected to the webcam. How it works? well, the webcam will snap photos when  movement , sound and body heat of object that pass by the recording area is detected and being stored inside the computer itself. Other then snapping pictures, video recording of detected objects are also considered one of the way of webcam can do.

Reference: Wikipedia – webcam

Software for webcam:

Skype :

Website :www.skype.com

Operating System : IOS, Window XP, Window Vista, Mac Os X, Window Phone, Blackberry Os, HP WebOs, Symbian,Android and Linux.

Features :

 -video calling

-Screen sharing

-share files or links

-voice mail

-instant messaging

-making calls like phone

Active WebCam 11.4:

Website :http://www.pysoft.com/ActiveWebCamMainpage.htm

Operating System : Window XP, Window Vista.

Features :

- stream video

- runson own HTTP server that all users, connected to your
computer, can watch your cameras and play back recorded video files.

 -Uploads images to web site using FTP protocol for viewers point Internet

Browsers to your web site and watch captured video.

Camfrog video chat :

 

Website :http:www.camfrog.com

Operating System : Window XP, Window Vista,Window 2000,Window 2003,Mac Os X

Features :

- video chatting

- Video conferencing

- Instant messaging

-file transferring to others

Webcam Soft:

Website :http://webcamsoft.net/

Operating System : Window XP, Window Vista ,Mac Os X

Features :

- video chatting

- Video conferencing

- the software is add on with interactive particles effects ( when video

chatting, your face is being edited with the effects like become long face,

short face and triangular face. )

Research on creating own trigger

In our interactive installation project, button or trigger is necessary . The button or trigger is needed for user to initialize the interactive .  Rather than the existed input and trigger, we are more interest on the custom or hacked trigger. Example  of  methods to create customize  trigger can be:

Keyboard control (events)

Keyboard control or event can be used to trigger some other function other than for normal usage for keyboard. For example, we can make the alphabet 'A' to open a new program and so on.

There are a few ways to do with keyboard control.

- By using Action Script

Using letter keys to control movement (using Keyboard class)

private function keyPressedDown(e:KeyboardEvent):void {

        var key:uint = e.keyCode;

        var step:uint = 5;

        switch(key) {

            case Keyboard.LEFT:

            case Keyboard.A:

                player.x -= step;

                break;

            case Keyboard.RIGHT:

            case Keyboard.D:

                player.x += step;

                break;

            case Keyboard.UP:

            case Keyboard.W:

                player.y -= step;

                break;

            case Keyboard.DOWN:

            case Keyboard.S:

                player.y += step;

                break;

Reference:

http://edutechwiki.unige.ch/en/AS3_example_Keyboard_control

- By using Processing

Responding Differently to Different Key Presses

void keyPressed()

{

  switch (key) {

    case 'r':

      // do something if the key pressed was 'r'

      break;

    case 'g':

      // do something if the key pressed was 'g'

      break; 

    case 'b':

      // do something if the key pressed was 'b'

      break;     

    default:  

      break;

  }

}

Reference:

http://learning.codasign.com/index.php?title=Keyboard_Events_in_Processing

Software and Trigger Button

By using Arduino microcontroller, it is can be used to trigger the photobooth application and also other stuff.

How it works :

1. The button is pressed

2. An Arduino registers the button press

3. AAC keys listens to the serial port for serial commands.

- AAC keys is a free application which listens for serial commands and emulates mouse and keyboard    events.

4. Wiring the circuit

5. Writing the code (By using Processing)

const int buttonPin = 10; // the number of the pushbutton pin

int buttonState = 0; // variable for reading the pushbutton status

void setup() {

pinMode(buttonPin, INPUT);
Serial.begin(9600); // open the serial port at 9600 bps:
}

void loop(){

buttonState = digitalRead(buttonPin);

if (buttonState == HIGH) {
Serial.println();
}
else {
// nothing
}

}

6. Installing AAC keys

Reference:

http://www.instructables.com/id/A-Makers-Wedding-Photo-booth/step2/Software-and-Trigger-Button/

Research on the possible Authoring softwares

Interactive application is required for our interactive application. This application is used to interact with the users and process the motion data that capture by the webcam. It can be created and composed by media authoring software. Some of the possible authoring softwares are: 

Adobe Flash

Adobe Flash is a multimedia platform used to creating multimedia content, including graphics, animation, audio, video and interactive media into a interactive multimedia pieces. Flash is most commonly used to display animated or interactive content on web pages and other applications. It supports streaming of audio and video, the interactivity can be done by the mouse input, keyboard, microphone, webcam, video camera and so on.

Example of code snippet for displaying a webcam:
var camera = Camera.getCamera();
var video = new Video(camera.width*2, camera.height*2);
video.attachCamera(camera);
addChild(video);

reference:
http://www.youtube.com/watch?v=3hHedyl7Wls&feature=related

Processing

Processing is one of the most popular visual programming tools for artist and designers, it is built on top of the Java programming language. Processing works in an open sources environment, therefore it is an " electronic sketchbook" for most of the artist to develop their ideas, and it is easy to create interactive applications using powerful techniques. Processing offers a flexible real-time environment for interactive exploration.

Example of code snippet for displaying a webcam:
import processing.video.*;
Capture video;
PImage prevFrame;
float threshold = 50;

reference:
 http://www.learningprocessing.com/examples/chapter-16/example-16-13/

Adobe Director

Adobe Director is a multimedia application authoring platform that using scripting language " Lingo".  It allows users to build applications built on a movie metaphor, with the user as the "director" of the movie.  The function of it is very similar to Adobe Flash, extensibility is the main differences between the two, as are some of the sundry codecs that can be imported. This weakness manifest into the erosion of Director's ubiquity as the leader of authoring tools.

Example of code snippet for displaying a webcam:

property pRandomNum

on preloadNewImage me

    if pNetID <> 0 then
      netAbort (pNetID)
    end if
    clearCache ()
    pRandomNum = random (the maxInteger)
    pNetID = preloadNetThing (pURL & "?id=" & pRandomNum)
    timeout ("check webcam preload").new (100, #checkPreload, me)

end

reference:
http://www.director-online.com/buildArticle.php?id=1067
http://en.wikipedia.org/wiki/Adobe_Director

Isadora

Isadora is an award-winning, real-time media manipulation software to create interactive visuals, sounds, and environments. It is usually used in installation, live performance and real-time audio mixing. Isadora receive and utilize a myriad of input from the real-world and environment. It is used to control real-time video and audio manipulation modules with video tracking, audio amplitude and frequency, as well as mouse and keyboard. Unlike other authoring that build something from scratch( code writing), Isadora is a note base(drag and drop) authoring software.

reference:
http://troikatronix.com

Other softwares that can be use are:

VVVV
Pure Data
Max MSP