Projects

Showing posts with label Nike Magic. Show all posts
Showing posts with label Nike Magic. Show all posts

Final Film



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

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);
}
}
Labels:

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.
Labels:

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.
Labels:

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:

Labels:

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.

Labels:

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.
Labels:

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).
Labels:

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.
Labels:

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:

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:


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.
Labels:

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.
Labels:

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.
Labels:

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.






Labels:

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.
Labels:

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.
Labels:

Research: Interactive Installations

I will be looking at interactive advertisement installations in general to get an idea of what other companies have done.


Scion


Monster Media created a window installation for Scion, an automotive company, displayed in New York and Chicago. The interaction seems very simple and aimless. There are photos of cars from different angles places in bubbles, with a couple of bubbles across the screen. Passers by can stand in front of the window and swat away the bubbles and they move very fast and fly around the screen. Despite not really doing anything for the company or product the public engage with the installation in the video, and shows that it doesn't have to be deeply involved with the product or trying to sell anything.



Verizon


In this ad for Verizon the interactivity is a little more involved. A phone is in the centre of the screen and has some controls on it. There are robot arms on the side that are controlled by touching the controls on the screen. There is also a game aspect to the interactivity. The user has to use the robot arms to catch falling phones and place them at the bottom of the screen. it doesn't seem like there is a high level of fidelity of control in the movement but enough to feel engaging. Making a game of the interactivity also makes it more engaging, but is very involved and might put off casual passers by more than something simple and passive.



Apple


In this Apple installation from Berlin there are a series of thin vertical screens with static images of people. When somebody walks past the screens they animate and the video of the person starts dancing and stops when they are out of range. This seems to be a casual but fun installation. There is very little engagement but being able to control motion with motion is a simple and fun idea. The people dancing are iconic, and heavily associated with Apple so the installation itself.



Tokyo


This installation is floor based, and as people walk over the project various effects happen depending on what is on the screen at the time. Mainly the interactive effect is objects moving away and responding to people's feet as they walk over it.



Sony


This was an installation again by Monster media for Sony. On the side of the building there are many screens and on the screen there's a string of colourful objects as well as photographs of a laptop, the product they are selling. As people walk past the screens the objects enlarge so part of the line grows and it shrinks again when they are no longer in front of it and so as someone walks past it grows with them and shrinks behind them back to the regular size.
Labels:

Research: Nike Interactive

Something very relevant to my current project is interactivity, and Nike have done interactive installations in the past so as part of my research I will be looking at some of their installations to see what has been done in the past.


Osaka 2007



In Osaka Nike has touch screen installations outside the stores where people could walk by and interact with 2 60'' screens full of images of Nike shoes, essentially functioning as an interactive catalogue. The user is able to navigate between shoes and bring up information about them. This doesn't show much artistic creativity but it has a very specific purpose as a catalogue.


Magic Book



This is a similar concept to the Osaka installation, an interactive catalogue. This time they have done something slightly more abstract where they are using motion sensing to allow the user to flick through pages as if the catalogue were print based, and instead of just images of shoes with text each page is a creative magazine style page as it would appear in print. Light on the interaction but much more engaging because the turning page effect is very effective.


Run on Air



This was a shop window installation like the first example, only it is much more abstract in it's interaction. Motion based, as people walk past the image (of nike shoes) is masked by a red shape with the nike logo tick that follows the user. In the example it shows people walking past and not paying attention but the tick still follows them across the screen left to right or right to left. But it also supports more specific interaction, when people stopped and moved their arms around and it would follow the users hand. It could be used as a navigation tool but mainly people seemed to be interested in interacting with the image and having an effect of the movement.


Custom Dunk



In Seoul, South Korea Nike had an installation to celebrate their very popular 'Dunk' series in the country. The main attraction seems to be a large screen showing a shoe that was a live demo linked to small touch screens where people could customise the look of their dunk shoes by changing the colour on different parts. It creates a personal engagement with the product and gets you personally invested and involved. Not only that but you are creating something that appeals to you.


These have given me some ideas for how I could relate the product to interaction.
Labels:

Research: Nike Brand

For initial research I will be looking at the general Nike brand to get ideas for visual style and product context.

First, the official Nike website.


The website has a very focused sports motif. The background behind the main content is the turf on a football pitch, with the white painted lines. This sets the tone for the rest of the websites photographic style. All of the photos in the navigation at the bottom are in the context of sports (e.g. Wayne Rooney kicking a football). The range of Nike shoes displayed on the front page also seem to be designed to appeal to sports fashion.













The visual style for the website is a very clean and sharp interface, with soft rounded corners and high contrast text. It uses a lot of bright colours with dark text. It uses solid blocks of white and orange which looks very clean and simple. Along with the photographic visuals they work together to convey a glamorous or smart and appealing image of sports rather than a more realistic depiction with the dirt and mess associated with playing sports. Nike is clearly trying to set an image of high quality and cleanliness in their brand.














Nike's other advertising and branding seems to be split two different styles. First is the most direct advertising, usually in magazines where it is a photographic image of the shoe. The shoe is the main focus of the image usually, put in an abstract image or in the context of sports. Here are some examples:




































































The other type of advertising seems to be less focused on the product, more on the brand. This happens in their TV advertisements where they have video of general sporting activities, or inspirational messaging over sports to create an air of inspiration, achievement and excellence around the brand. For example, this Nike ad:





The term 'My Better is Better' refers to sporting ability and achievements, set to slow motion footage of sports men and women performing feats of agility, strength etc. Very little Nike products are actually shown, it is only subtly shown to the viewer through the clothing the people are wearing. The message promotes excellence, and the implication is that the brand, Nike, is associated with the message and the concept of excellence in the context of sports. The logos is shown at he end with the main slogan "Just do it.", which in itself is an inspirational message.

There are others, such as this humorous ad featuring Roger Federer, but again it is a representation of sports, in this case a strange comedy 'sketch' featuring sports, and the brand added on to the end in an abstract association. It isn't pushing a product on the viewer, it's associating the brand with a concept or 'feeling'.




There are exceptions to these advertisements but the main amount of advertising that I was able to find followed this pattern with their own variations.
Labels:

New Project: Nike 'Magic'

For this new project I am going to be producing an interactive installation for a new Nike shoe called 'Magic'. I will b using Processing, a coding language and piece of software of the same name to code an interactive program that advertises the shoe. The brief is very open in the sense that it has no guidance as to what the interaction should be, or how involved it should be with the product.

I will be learning Processing and how to implement code in order to be able to make a live demo that respond to user interaction by setting up a camera. The biggest challenge is going to be learning the code, but I will also be able to look to examples of code on the internet which I can modify for my purpose.
Labels:
Subscribe to: Posts (Atom)