Research: Tablet Specs

In order to make the most of tablet devices, and in order to match technical requirements I must understand the specs, limitations and capabilities of these devices so I can work my design around them and integrate the technology as much as possible.

iPad
Apple's first generation iPad comes in one size with 16GB 32Gb and 64GB models available with either 3G or just Wifi wireless connection. Here are some of the technical specs from Apple's website (the ones I feel are most important):

Display:
9.7-inch (diagonal) LED-backlit glossy widescreen Multi-Touch display with IPS technology
1024-by-768-pixel resolution at 132 pixels per inch (ppi)
Fingerprint-resistant oleophobic coating
Support for display of multiple languages and characters simultaneously

Size:
Height:
9.56 inches (242.8 mm)
Width:
7.47 inches (189.7 mm)
Depth:
0.5 inch (13.4 mm)
Weight:
1.5 pounds (0.68 kg) Wi-Fi model
1.6 pounds (0.73 kg) Wi-Fi + 3G model

Sensors:
Accelerometer
Ambient light sensor

Accessibility:
Support for playback of closed-captioned content
VoiceOver screen reader
Full-screen zoom magnification
White on black display
Mono audio

Source: http://store.apple.com/uk/browse/home/shop_ipad/family/ipad?afid=p219|GOUK&cid=OAS-UK-KWG-GO_UK_Sitelinks_iPad-UK


Samsung Galaxy

Dimensions
64.2 X 122.4 X 9.9 mm (119g)

Display
4.0” WVGA(480x800) 16M SUPER AMOLED
mDNIe(Mobile Digital Natural Image engine)

OS
Samsung Android 2.1 (Eclair)

Sensors
Accelerometer sensor, Proximity Sensor, Digital Compass

Source: http://galaxys.samsungmobile.com/specification/spec.html?ver=high

Research: Presentation

Since my project relies largely on concept the way I present that idea to the judges is going to be an important element. In order to make it more tangable I need to demonstrate the functionality in a clear and concise manner. They have asked for me to show a slice through of features so I can keep it fast paced and short for more impact than a long, drawn out demonstration.

Apple iPad
When Apple launched the iPad they released demonstration videos and I have looked to them for inspiration as they have presented the iPad as well its key apps and functionality in a very clear and attractive way.

http://www.apple.com/ipad/ipad-video/

The presentation is very well paced and focusing on two key aspects, the iPad with the content and the human interaction with the device. The touch gestures are clearly shot in order to convey as much information about how you interact with the device, a key point when convincing people of new technology which is something I feel I have to do with Taschen.

Samsung Galaxy
One of the other leading tablet devices is the Samsung Galaxy. In their official advertisement they show a man walking around with their tablet device.

http://www.youtube.com/watch?v=GHPJdqgsJ9g

In this advertisement they do a lot of things that Apple did in their iPad demonstration, by focusing on the screen of the tablet and how the touch gestures work. The Samsung galaxy advert goes a bit further as it is trying to sell something directly and it actually shows functionality in context. For example, he is browsing a super market and making dinner while having a recipe book with ingredients listed on the tablet.

Putting functionality in context goes a long way to helping a user understand the functionality and also to provide a real world example of it's usefullness. It's one thing to say that you can use the iPad to see how to cook a meal, but to show someone using it in that situation is more visual, tangible and ultimately convincing. Something I might consider for my design.

Research: D&AD Entries

Taschen Magazine Demo from James Hull on Vimeo.
Source: http://vimeo.com/17782976

This is one of the entires for this Taschen brief created in December 2010 by James Hull. Like mine, it is a concept rather than building a functioning app. The creator chose for a stop motion paper based demonstration of ideas instead of a more realistic digital idea. The idea of the presentation is unique and might intrigue the judges as opposed to a more typical presentation.

It's useful to see what has been done as I can already see similarities between my ideas and this person's design which gives me room to rethink some aspects so mine is not too similar or typical. It has given me ideas about presenting my concept in a unique way though.

Research: Taschen

Now that I have picked my brief I need to do some research in to Taschen.

What is Taschen?
Taschen is a book/magazine by Benedikt Taschen. He started in Cologne, Germany with Taschen comics in 1980. They appear to set themselves up as a high quality, higher brow magazine than the standard shelf fodder by making it bi-annual wit content featuring mostly pieces about art, fashion, design and other creative industries.

There content has sometimes been controvesial or unusual.

Taschen has been a noteworthy force in making lesser-seen art available to mainstream bookstores, including some fetishistic imagery, queer art, historical erotica, pornography and adult magazines (including multiple books with Playboy magazine). Taschen has helped bring this art into broader public view, by publishing these potentially controversial volumes alongside its more mainstream books of comics reprints, art photography, painting, design, fashion, advertising history, film, and architecture.

Source: http://en.wikipedia.org/wiki/Taschen

Although this content sounds taboo, possibly explicit or offensive to certain values it is incorporated in to their high quality, upper class image whereas it would be too easy for that content to appear as smutty or innapropriate.


What do Taschen do?
Taschen are a publisher of many books based around creative topics as discussed above. They print both high profile work and lesser known work.


What do Taschen want?
Taschen, as a publisher, have a bi-annaul magazine that functions as partly a catalogue. They want their magazine redesigned for new technology, specificially tablet devices such as the iPad and Samsung Galaxy. They currently have a free iPhone app of their latest issue but they want something more optimized for the platform, that uses the features and is not just the print format on screen.


Goals
In the D&AD brief Tashcen have provided an outline of their background and goals.

The TASCHEN Magazine has been in print for about 10 years. As a publication it directly creates a link with the readers. Helping to generate awareness of upcoming titles and deepening the relationship between TASCHEN and their customers.This success is partly why TASCHEN are looking to invest in its future and help to bring it to new audiences.

This is the brief that I need to meet with my design.


History
The creator of Taschen, Benedikt Taschen, wrote a thank you message to the readers of Taschen published books that is n the website where he outlines in a nostalgic fashion how he got to where he is today.

When I was a boy, I appreciated people who treated me like an adult, because my interests were different from those of most of my peers; my mind was full of stories and pictures, and I was permanently looking for inspiration and food for thought. By respecting my passions—books, movies, art, and so on—my family and mentors helped me to grow and turn my imagination into reality.

At the top of my wish list for birthdays and holidays were art books, which were more expensive than the regular boy's toys. And young me—fully aware of the fact that I was a lucky and privileged child raised by liberal and unconventional parents—sensed early on that books could open doors to different worlds, and that a world full of artists and free-minded spirits was the world I wanted to be part of.

I thought that others might feel the same if books became more affordable and accessible. Luckily this has been confirmed by millions of readers who have bought our art monographs, starting with the first ones published in 1985.

Source: http://www.taschen.com/pages/en/company/history2/index.comic_beginnings_surreal_success_and_magical_artists.htm

He tells a personal story and how his upbringing is reflected in the subject of Taschen. He wanted to represent his interests in print that he didn't feel were present in the marketplace.

He then lays out some of the workings in starting up the magazine:

Our gang of young punks from Cologne became an international success story: in the 80s the key players were our two authors and editors, Ingo F. Walther and Gilles Néret (pictures 4 and 7, sadly both no longer alive) and our brilliant sales mind, Ludwig Könemann (picture 15, alive, but for two decades no longer with us). They laid the foundations for what became a truly international team of highly skilled and outrageously creative folks who have edited, designed, produced, promoted and sold more than two thousand subsequent titles.

After there Cologne shop they have set up retail outlets in Berlin, Brussels, Hollywood, Miami, London, New York, paris and more.
Source: http://www.taschen.com/pages/en/stores/index.taschen_stores.htm

It is clear Taschen is a well established magazine being 30 years old and having stores in a large number of the most populated and famous cities of the world. Their image reflects this worlwide, established background.

New Project: D&AD

For my new project I will be undertaking one or more of the 2011 D&AD briefs.

What is D&AD

D&AD is an organisation dedicated to creativity in design. By their own description from the website:

D&AD - home of the talented and skilled, the imaginative and the curious, the restless and the bloody- minded. Commercially savvy, sometimes romantic, often cynical and occasionally rather weird. A source of information and ideas: of professional development, support and inspiration, interesting people to talk and nice things to look at. All creative life is here.

Source: http://www.dandad.org/dandad/about

Each year they host Student awards. They receive briefs from major companies from around the world and put out an pen call to students to fulfill the brief. I will be looking at these briefs over the coming weeks and choosing one for my project.

Here is where I can find all of the available briefs:

http://www.dandad.org/awards/student/2011

Final Film

Link: http://www.youtube.com/watch?v=meNcCfYKe8g

Code Evaluation

Now that I have completed the coding portion of the project and filmed a demonstration it is time to see what I have done as well as the process that lead me here.

The Process
(Get it? ...nevermind)
I started out just reading the processing book I bought to learn the basics, tutorials on the website and the lectures with Seb. After I became a bit more confident I began playing with some of the examples that Seb created to teach us the principles of Processing. I have posted some on this blog, and while most of the time it was nothing more than changing values on the variables it really helped with the learning process to see a real visible change from a piece of code.

Up until we started messing with the webcam image in Processing I only had very abstract ideas about how to apply what I was learning to the camera and how I could use it. The majority of our lecture time was dedicated to the construction of a sketch at first and then a focus on how to create particles. In the end the lectures about particles ended up being useful as I found a way to use them in my sketch.

The real construction began near the end of our series of lectures from Seb. How my piece is ocnstructed is directly influenced by one of the examples he showed us for making particles respond to the webcam (one was brightness, this one was motion) where you could draw an image on the screen using the difference filter and threshold. Any area in the image that was different from the previous frame was filled in with white. Using this threshold filter an outline of the motion was outlined and had fading trails of the previous frames of motion.

Using this idea I looked in to how I could make this outline less like an outline and more like blobs of paint or light, as I was set on something more like a light painting instead of just showing the outline of people's bodies moving about.

My starting point was to go through Seb's example code breaking it down line by line and commenting it so that I could understand what was going on. Processing has a function where you can highlight a piece of code and look it up on the Processing website, Processing.org which is a very useful feature when trying to understand what the code is doing. By commenting each line, breaking it apart, taking parts out and adding parts in I was able to get an understanding of what his example did and what I wanted to do.

Production
Once I was done understanding the code I began writing out my sketch. I am very methodical and like t write as clean and clear as possible (a habit I picked up from writing out HTML and CSS). I also commented every line as I went along to make sure I got everything correct.

Initially it was fairly easy. Outlining the sketch was pretty simple and just involved importing the correct libraries (OpenCV for code and OpenGL for rendering), setting up the stage and drawing the webcam image. I used Seb's particle examples and his trails examples as the framework for my particle system and use of OpenCV for the webcam image.

I used the examples for reference, but thy are largely the same because I needed to recreate the same functionality. I just re-wrote it slightly differently in formatting and some of the names of objects so that I would understand them better and I could format it for my comments.

In line with my demand for clean coding I used Processing's tab feature to store pieces of code separate from the main sketch and then 'call' the functions in the main sketch using one short line making it much easier to read and a better sense of organisation.

I feel like I have written, structured and commented the code in such a way that pretty much anyone even with no code experience (like me at the start of the project) could understand what is going on and see what I am doing. i did this for myself but it is also useful for anyone examining/marking my code.

Conclusion and Code

As a conclusion I will post my code here so it is in a readily available and easily accessible format for anyone who wants to look at it. Of course, I would prefer the code to be viewed correctly formatted in Processing but you can't have everything in life.

/*

Draw Order:

- Cam with Trails Image, pre-applied filters from motiontracking

- Mask image, to mask out trails

- Particles, over the top of the mask

- Logo image, to sit over particle spawn location

*/

// Import Library Shizzle

import processing.opengl.*; // Import OpenGL, just incase ya'know

import hypermedia.video.*; // Import OpenCV

OpenCV opencv; // New OpenCV Object

// Particles Setup + Array

PImage particleImg; // Add the particle image

Particle[] particles; // Add the particle array

final int MAX_PARTICLES = 50; // Maximum particles to be added to array

// Create Images

PImage trailsImg; // Create image for trails

PImage maskImg; // Create mask image

PImage nikeMagic; // Create logo image

void setup()

{

// Setup Stage

size(640, 480, OPENGL); // Set stage size, OPENGL for performance

frameRate(30); // Set framerate, make sure it's 30

background(0); // Set backgrund to black for mask

noStroke(); // Just incase I need it

smooth(); // Also just incase

imageMode(CORNER); // Makes sure images drawn from corner

// Load Particles

particles=new Particle[0];

particleImg=loadImage("sparkle.png");

// Setup OpenCV

opencv=new OpenCV(this); // Initialise OpenCV object

opencv.capture(320, 240); // Open video capture stream

trailsImg=new PImage(640, 480); // Initialise trailsImg

// Load custom images

maskImg=loadImage("mask.png"); // Initialise mask image

nikeMagic=loadImage("nikemagic.png"); // Initialise logo image

}

void draw()

{

// Draw Camera, Scale it

pushMatrix(); // Start

scale(2); // Scale the camera up

motionTracking(); // Load Cam and Filters

popMatrix(); // Stop

// Draw Mask

image(maskImg, 0, 0); // Place mask image at top left corner

// Draw Particles

particleSpawn(); // Call particle varialbes

// Draw Logo

image(nikeMagic, (width-301), 0); // Place logo flush right, flush top

}

void motionTracking()

{

// OpenCV Shizzle

opencv.read(); // Grab a frame

PImage camImage; // Make Image

camImage=opencv.image(); // Store Unprocessed Frame

// Filter Shizzle

opencv.absDiff(); // Difference Mode

opencv.flip(OpenCV.FLIP_HORIZONTAL); // Flip Image

opencv.convert(OpenCV.GRAY); // Difference Image to Grayscale

opencv.blur(OpenCV.BLUR,40); // Difference Blur

opencv.threshold(20); // Threshold Filter

// Blend movement image with trails image

trailsImg.blend(opencv.image(), 0, 0, 640, 480, 0, 0, 640, 480, SCREEN);

// Colour Shizzle

colorMode(HSB); // HSB so I can change Hue

tint(color(145, 255, 255)); // Tint with HSB - Hue(Blue), Saturation(Full), Brightness(Full)

image(trailsImg, 0, 0); // Display the blended difference image

noTint(); // Otherwise tints the mask, makes me sad when that happens

// Trails Shizzle

opencv.copy(trailsImg); // Copies trailsImg into OpenCV buffer for effects

opencv.blur( OpenCV.BLUR, 10); // Blur trails

opencv.brightness(-5); // Fade Speed for trails

trailsImg=opencv.image(); // Puts the modified image from the buffer back into trailsImg

opencv.remember(); // Remember current frame

}

void particleSpawn()

{

// Particle Shizzle

for(int i =0; i

{

Particle p = particles[i];

p.update(); // Update particles command

p.render(); // Draw Particles command

}

Particle p = new Particle((width/100)*85, (height/100)*15); //Calculates screen percentage and places particles

p.render();

particles = (Particle[]) append(particles, p);

if(particles.length>MAX_PARTICLES)

particles = (Particle[]) subset(particles, particles.length-MAX_PARTICLES); // Setup max particle controller

}

// Particle Variables

class Particle

{

float xPos;

float yPos;

float xVel;

float yVel;

float currentAlpha=255;

float currentScale=0;

float drag=0.95; // Drag speed

float fadeSpeed=6; // How quickly they fade out

float shrink=0.97; // How fast they shrink

float gravity=0.5; // Particle gravity

// Setup physics, scale etc

Particle(float xpos, float ypos)

{

this.xPos=xpos;

this.yPos=ypos;

this.xVel=random(-12,9); // How far left or right the particle go

this.yVel=random(2, 2); // Downward velocity

this.currentScale=random(0.3, 0.5); // Particle scaling variable

}

// Update each particle's variables every frame

void update()

{

xVel*=drag; // Calculate X axis drag

yVel*=drag; // Calculate Y axis drag

yVel+=gravity; // Calculate gravity (Y axis only, duh)

xPos+=xVel; // Add the X axis velocity to the X position

yPos+=yVel; // Add the Y axis delocity to the Y position

currentAlpha-=fadeSpeed; // Reduces to alpha each frame according to fadeSpeed

currentScale*=shrink; // Reduces scale each frame according to shrink variable

}

// Draw the particle

void render()

{

tint(255,currentAlpha); // Draws the particle at the currentAlpha

image(particleImg,xPos, yPos, particleImg.width*currentScale, particleImg.height*currentScale);

}

}

Feedback - Sue + Evaluation

After showing my sketch to my course tutor, Sue, I received some useful feedback, although it is too late at this stage as i have already submitted my code to the server. Nevertheless, it is useful to receive criticism of the final piece so I can improve in the future.

Feedback

My initial intensions with the idea of the mask was that people had to explore the digital canvas to uncover different objects. While I feel I was successful in this Sue pointed out that the objects where so big that there wasn't much room for exploration. The conditions in which she experienced are not representative of the intended experience (we were both very close to the camera to the point where the slightest movement filled most of the canvas, but it worked as a concept demonstration). Sue suggested reducing the size of the objects and introducing some more.

Evaluation

As I just said, my intention with this project was to create something that the user had to explore. As Sue pointed out the size of the objects could be smaller and introduce some more elements. One of the reasons for the mask existing as it does is because I expected to use a higher resolution mask but as the sketch developed and the project went on it became obvious that performance was going to be an issue. I should have adjusted the size of the objects to the very limited resolution that I ended up using (640x480).

Ultimately I am happy with the outcome of my project but I could have incorporated the improvements that Sue suggested, if they had been suggested earlier in the project.

Feedback - Seb

After showing my piece to Seb during one of the lectures I received some very useful feedback and advice.

Issue 1
Due to the way the processing sketch works, the webcam image is a mirror of he actual movement so when the person moves left it goes right and vice versa. This isn't ideal for an interactive piece that relies on motion, so I flipped the webcam image in processing so that the action on screen maps the movement. I did this using the translate property. it was a couple of lines of code applied to the webcam image, but Seb showed me a useful way of doing the same thing using a piece of OpenCV code reducing it even more.

Issue 2
One issue I had before the feedback session was performance. The light painting effect I created was fairly intensive for processing to do. This wasn't an issue initially, as the mask obscures most of the on screen action so the lower framerate isn't that noticeable. When I added my particle array (which is above the mask) this issue became much more noticeable. As the particles spawned it was painfully obvious that the framerate was much lower than 30.

The code for the particle array is extensive, but it is unlikely to be the cause of the low framerate. There's no code for collisions, no motion blur or other intensive effects. The particle image is a small PNG and there are only 50 particles on screen at any time. This means that there is something in the rest of the code that is slowing the framerate.

We discovered the source of the issue was the resolution that the camera was being sampled at. We halved it from 640x480 to 320x240 and then have that upscaled. This is much less intensive for OpenCV to process (since my sketch relies heavily on filtering processes in OpenCV). After changing this performance was significantly improved to the point where there was no longer an issue.

After discussing the issue with Seb we discussed further ways of improving performance and explained that the filtering effects of OpenCV are quite intensive. To create the initial image before effects it uses a difference filter. To make the image more abstract I am applying a heavy amount blur to this image so the difference isn't noticeable as the shape of the person as they move. Also, near the end of the code where the faded trailers of the difference image are being rendered I am applying a heavy amount of blur (again, to make it less like the object it's tracking) making it look more like a light painting.

This extensive use of blurring may be contribute to low performance. Since reducing the resolution performance isn't as much of an issue. I reduced the use of blur filters to optimize it further, but it is a very useful thing to keep in mind about Processing and OpenCV.

Opinion

I asked for Seb's opinion on what I had done so far and he seemed to find it interesting and thought it could be enjoyable. He was reluctant to provide creative feedback but was very helpful in providing feedback on my code. Seb thought I had done a good job of thoroughly commenting my code, because I explained that by commenting each line I break it down to a point where I can understand it.

Outcome

With this new information and receiving feedback from Seb I have improved the performance of the sketch and made sure that my project is on track for submission.

Nike Logo

Considering my idea relies mostly on a blank screen (when no motion is detected) I thought it would be beneficial (and an improvement over my original mask idea) to have an additional image in the form of a logo in the corner of the screen.

The actual Nike logo is simple enough. I don't want to reinvent that, I wan it to be recognisable as Nike. To recreate the Nike look I used the font Impact and skewed it using free transform to make it look highly italicised.

The element that needs to differentiate itself is the 'magic', since it is a new type of shoe. In my brainstorming magic suggests elegance (images of traditional magicians with the suit, cape and top hat come to mind) and extravagance (since that is the nature of magic). Based on this I chose a font which is seriffed, cursive and ornamental. In the end I chose Bickham Script Pro, with a blue gradient on it to go with my colour scheme.

I tried various fonts, mostly script based fonts to see what would work best. I made the choices based on my brainstorming and idea development.


The bleeding cowboys font is very ornamental and also seriffed which fits with what I feel like the word magic needs. It is a 'grunge' font however, and features texturing and broken edges which I think goes against Nike's branding which I would like to maintain.

Brush Script has a good amount of cursive but the edges are so rounded that it might be a bit too soft and cartoon-like.



Edwardian script is a possibility as it is cursive, serif and ornamental with it's use of strokes.

Giddyup seems too gimmicky. The star dotted i is a cheap way of linking stars and magic. It's highly ornamental but perhaps too childish for Nike's image.

Bickham script shares all of of Edwardian Script's qualities but is bolder in certain letters. Another possibility.

Script MT Bold is much like bickham and edwardian but much less ornamental and therefore a bit more plain.


Here is an mockup of my final choice:

Colour Scheme

A lot of the examples that Seb has shown us have involved rainbow colours, or cycling through hue values as this shows variation but for my piece I would like to have a much more focused direction in the colour scheme. During brainstorming I listed several colours I associated with magic, namely dark colours. Black, because of the magician's costume. Red and purple, because of the lining of a magicians cape. White because of the ends of a magician's wand.

When it comes to my interactive piece however I don't think using such dark colours is a good idea, because my idea is based on having a plain black screen. If the light painting and graphic are also dark there will be very poor contrast and possibly make things hard to see. This is not ideal, as I want people to easily identify what is happening.

I have decided to use a light and heavily saturated blue colour to distinguish it from some of the other colour schemes of my peers and because blue is associated with cool and calming. To help me with this I went to Kuler, an Adobe website for colour.

http://kuler.adobe.com/

On this website you can create your own colour schemes. I set the base colour to a hexadecimal code I picked in Photoshop and then it picked several there relevant colours according to the monochromatic rule I set at the top. This kept all other colour choices within the same hue. Kuler provided me with all the data I needed for RGB, CMYK etc if I need to use the same colours in different colour modes.

Masking

The idea that I have developed in my sketchbook and decided to go with is the light painting idea, with the mask over the top. Making the motion sensitive painting effect will be written in code, but the mask placed over the top will be produced in photoshop so I have decided to do some mockups of what the mask could be like.

Placing a black image on a black background will mean that the image cannot be see. By selectively cutting areas out of the black image and placing it over the camera feed anything moving underneath will show through in these areas. This means that I need to export the mask image as a PNG with transparency so it can be overlayed (and appears after the camera feed in the code).

This is my first idea for a mask. The classic Nike 'tick' logo is the most prominent feature and is large because as users fill it in it will be the most recognisible of anything. Attached to it I have put a slogan 'Experience the magic', which refers to what they are doing as experiencing magic as well as wearing the shoe being experiencing the magic.

A simple illustration of the magic show is in close proximity as well which users can fill in. I have also placed a small star in the corner just to test out a shape with many more sides.

The shoe illustration isn't very appealing at the moment, and I feel like I need to add more things relevant to the Nike brand (such as Nike sports accessories) to give it more of a theme.

Final Idea

After discussing my work with Seb and some idea development I have decided to go with my light painting with mask idea. Using OpenCV I will import the camera feed in to processing and use the difference filter and threshold filter to draw on screen any motion on screen, which is a representation of the difference between the current frame and the previous frame. When coupled with the effect I am trying to create this creates the illusion of motion tracking.

This movement is represented on screen as blocks of colour that leave behind faded trails of the previous frames of motion. Over the top of this will be laid a mask image so that this abstract paint image appears only within certain shapes. The 'painted' areas will not fade immediately allowing users to fill in larger shapes without too much effort.

By having a seemingly blank screen fill in with motion I believe this will encourage people to move about in silly ways and discover new parts of the image that they can fill in, and the nature of the way the paint is retained encourages occasional rapid motion. By encouraging users to search the screen for more parts it keeps their attention more than a mere visual gimmick would (e.g. the paint effect without the mask).

Problem: OpenCV Not Working

I have had some major problems getting OpenCV working under windows. Working with my classmate Guy Willis he has helped me install OpenCV. The OpenCV library paths were not set correctly, and so I had to edit the 'Environmental Variables' under advance system settings and add "C:\Program Files(x86)\OpenCV\bin;" to the system paths. With that corrected I stopped getting errors. This was not the end of my problems however.

Even though I got processing to recognise the new camera, and eventually got OpenCV working via a hack, it refuses to work with OpenCV. The errors are gone but the stage doesn't show the camera feed at all, or any indication that it is working. This makes me completely unable to test anything I write.

I have done all I can at the moment to solve this issue. I have spoken to Seb with no available solution in sight, and looked up as many possible solutions on internet forums as I can. The only solution I can think of is to put in a lot of extra hours at the University so I can come in and use the Macs there.

Problem: Webcam Not Working

Now that I have begun working on my processing project at home on my windows machine, the webcams that were provided will not work with my windows 7 or Windows Vista installations. The hardware I am using is the Sony Playstation Eye Camera made for the PS3. The drivers for Mac allowed the camera to work with processing but I cannot get it to work on PC.

Here are the drivers I have found:

http://codelaboratories.com/products/eye/

The drivers allow the Playstation Eye to function as a webcam. It comes with an application for you to view and capture footage which seems to work perfectly fine. When running any processing sketch that uses video it would return errors saying that it cannot find the camera feed.

I contacted Seb for help with the problem and he responded:

http://twitter.com/#!/seb_ly/status/17516741563256832

I couldn't afford a Mac, nor had access to one so I bought 2 more webcams. One of them didn't work either but the second one I did get to work with the webcam examples in processing.

Learning Processing: Webcam & OpenCV

Webcams

I have come a long way from my first taste of processing. Having become comfortable with the code to a certain extent I have moved on from abstract examples of code and am now looking in to using webcams, which is essential for the current project.

Processing has several camera presets built in. Using presets is all well and good but knowing how to implement it in to my code is more important. In File > Examples > Library > Video (Capture). The basic one is GettingStartedCapture and thankfully the code is heavily commented, helping me understand how it is working.

/**

* Getting Started with Capture.

*

* Reading and displaying an image from an attached Capture device.

*/

import processing.video.*;

Capture cam;

void setup() {

size(640, 480);

// If no device is specified, will just use the default.

cam = new Capture(this, 320, 240);

// To use another device (i.e. if the default device causes an error),

// list all available capture devices to the console to find your camera.

//String[] devices = Capture.list();

//println(devices);

// Change devices[0] to the proper index for your camera.

//cam = new Capture(this, width, height, devices[0]);

// Opens the settings page for this capture device.

//camera.settings();

}

void draw() {

if (cam.available() == true) {

cam.read();

image(cam, 160, 100);

// The following does the same, and is faster when just drawing the image

// without any additional resizing, transformations, or tint.

//set(160, 100, cam);

}

}

This sets up a basic stage that displays a camera feed.

OpenCV

Seb has also discussed OpenCV, a set of additional libraries that processor can use to expand it's capabilities. It seems as though OpenCVs ability to manipulate video is more powerful and easier to use than the default processing capabilities and so it is likely that I will use OpenCV for my project.

The OpenCV libraries can be downloaded here: http://opencv.willowgarage.com/wiki/

OpenCV uses 2 important pieces of code at the start:

import hypermedia.video.*;
Imports a video stream.

OpenCV opencv;

This creates an OpenCV object that can be used to access things in the OpenCV library. In this case the object is called opencv.

After that we need to call the object and use it to display the camera feed, now that it has been imported.

opencv = new OpenCV( this );

This initialises the opencv object I made at the top of the sketch

opencv.capture( 320, 240 );

This uses to OpenCV object to hold the camera feed.

Looking at the code this granularly and having to explain it myself in this blog makes me feel like I am gaining a real understanding of what is going on rather than just passively learning the code.

Seb wrote an example code where processing would look for bright areas in the camera feed and spawn particles at that location, which is an interesting concept. It opens up possibilities for using light with interaction.

Outlining Ideas

Today I presented several rough ideas to our lecturer Seb to get feedback and insight in to how I couple implement it.

Idea #1
My first idea is based almost purely on Nike's sports image, where they make a lot of branded sports clothing. Along with that theme I came up with the idea of have an animated leg and a football. The leg would respond to motion from the user infront of a camera low to the ground. When the user kicks the ball it goes up in the air and it becomes a game of how high you can kick it.

The 'Magic' part would be reflected in the shoe and how high the ball goes when kicked. Unfortunately, after talking with Seb about it actually tracking how fast a person's leg is moving past the camera (to make the ball go higher) would be incredibly difficult. I don't want to overstretch my abilities to the point where I might not be able to get something workable for the brief so I will keep this idea in reserve.

Idea #2
This idea involves a mixture of the ideas I got from my Digit visit and some code from Seb that would cause movement to cause coloured trails. The user could paint with streaks of light on to the screen. Nike branding would be visible in various parts of the screen, and using a mask I could create areas where the users' movement fills in shapes.

Seb seemed confident that I could implement this without too much trouble. I need to work on the visual style to make sure it looks good though.

Idea #3
My third concept for an interactive installation is a shoe constructed from small versions of the nike logo. The amount of particles would be so dense that from afar it would look like a photo or illustration of the shoe. Using the camera the logos would move away from the position of the person's motion and then return to reform the image again.

Talking to Seb it sounds like there would be a lot involved with placing all of the images to form the shoe, but he says that he may have some code that would help by giving the particles a home position so when they respond to the motion they return to where I want them to be.

Conclusion
It was very valuable to be able to discuss my ideas with Seb because I'm still having a hard time grasping what is possible in processing and how to make it happen but I am confident I can get working versions of my ideas.

Learning Processing: Examples

Processing Progress

Now that I have had some lecture time with Seb, as well as looking at the processing material on the website and in the book I bought I feel I am starting to get an idea of what is possible with processing. The concept of making all of this work with a webcam at the moment is quite daunting but that will come with time.

For now I have been given some great code to play around with by Seb. We have been learning about how to create particle systems, something that seems to have many applications. The great thing about these examples is that I feel like I am not just learning specifics about particles in processing but also about syntax, coding conventions and how to do more with the code than literally what I am being shown.

Gallery

It's very interesting to play around with the code, changing variables to see the different effects that can be created. Here are a series of images from Seb's examples and one's that I have played with.

The first image is my own creation where when you click the mouse particles come down and slide down the screen like wet paint dripping down. This is heavily modified from one of the particle examples Seb gave us but is unrecognisable from what it once was.

Learning Processing: Starting Out

Processing
For this project we will be coding our interactive installation in the programming language 'Processing', which is compiled and executed in it's namesake program. The website, processing.org is where you can download the program and begin writing code.

http://processing.org/

The website is very helpful. Not only does it provide a download for the program but has a series of tutorials teaching you the fundamentals of how the program works, the principals behind the language itself and how to start writing code (including syntax and examples). I have bookmarked this website as I am sure it will be an invaluable resource.

One of the most interesting things about Processing is that it was founded in 2001 as a tool for designers to make creative and artistic things in code. Based on Java and tailored to inexperienced coders it is ideal for begginers, like myself, to dive in to.

Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts and visual design communities with the purpose of teaching the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks

Source:
http://en.wikipedia.org/wiki/Processing_(programming_language)


Extra Materials


As an extra and more definitive resource I have found a book called 'Getting Started with Processing' by Casey Reas & Ben Fry, the founders of Processing. It is filled with pages explaining principles of coding in processing, short exercises where you can make something simple but fun and excellent code examples that I may be able to use in my project.





http://www.amazon.co.uk/Getting-Started-Processing-Hands--Introduction/dp/144937980X/ref=sr_1_3?ie=UTF8&qid=1294764639&sr=8-3

I bought the book from Amazon this weekend and it will be useful to have during lectures and when writing code.


Lectures
A third component to learning processing is that we have Seb Lee-Delisle, a fantastic creative programmer. In the short time that I've known him he seems like a very creative and confident person who I am sure I can learn a lot from about processing and how to tackle this project.

Looking at his website (which is a stream of blog posts) it is inspiring to see some of the projects he has been involved with over the past year which you can view here:

http://sebleedelisle.com/

I have also started following him on twitter at http://twitter.com/seb_ly which might not help me with the project day to day but I need to expand my view by looking at what he is involved with and the work of others that he retweets to his followers so they can view. If he retweets it then it's probably worth viewing.

While his work is not limited to processing (he seems to have a wide range of coding languages stored in his head) he has stated that it shares a lot of the same principals with other languages and so his seemingly vast experience with coding has helped give me confidence to get in to programming not just for the sake of the project but also as another medium as a designer.

Research: Digit

We visited the interactive production company Digit, who specialize in making interactive products and installations for their clients. Before visiting their office I visited there website, which gave me a great impression of what they do:












http://www.digitlondon.com

They have done work for some fairly high profile clients such as MSN for branding, and installations such as the National Gallery. I sat through a presentation where they outlined their process, the most interesting portion I found was research and development. Due to the constantly changing state of technology and technical standards, as well as the demands of their clients they are always looking in to new options for their work. It prevents them from being static and getting left behind as the tech moves forward.

The most interesting part of the visit was that they had 2 of their previous installations set up. One would take a series of photos ad display them in rapid succession, making for some funn situations where people make different poses in front of it and it coms out looking very strange. This type of interaction is light and humorous and encourages people to stand in front of the installation and pay attention. It was also neatly tied in to the product because the phone it was 'advertising' had a similar feature. By making the user have fun with the installation it can suggest that they can have similar fun with the phone.

The second installation was for motorola and I found it to be very interesting. Using a bluetooth device inside a fake spray paint can you could hold it in front of the LCD screen and paint with the can like you were writing your own graffiti. After a while the screen would be cleared by an animated representation of a person, and the next person could come along and paint their own image. They also keyed in some unique sound to go along with how you painted with the can, which linked in to the placement of the installation (at a music festival).

This was in preparation for our interactive brief, which is for Nike Magic, and now that I have the brief and know what is expected playing with these installations got me thinking about what I could do. I like the idea of painting on to a screen, or even a projection as that seems magical. The resources available to us will no doubt be fairly limited, but I do know that we will be using cameras so perhaps I could create something motion based where your movement is used to paint on to the screen.