Showing posts with label processing. Show all posts
Showing posts with label processing. Show all posts

Nike Magic in location - shop window




These are mocks of the interactive shoe in a shop window. using external microphones aimed at the floor it will only react to people walking past the point where the microphone is aimed as i learnt in my experiments using the final project. This is very achievable and low in maintenance for the shop staff. there is no reason for it to be adjusted once its been installed correctly. this is some thing that could have human interaction 24 hours a day. it would arguably be more popular or effective at night time. using a large screen or a back lite projection this could be moved around from shop to shop. a large scale screen would be more suitable for this.

During the forst week of this it would be good to have staff out side giving out flyers or encouraging people to interact but as i have found in my research when one person starts to relise whats happening people usually want to interact or investigate for them selves.

<

Final working video

testing 1 2 3

This is what the set up was when i was testing my processing project. i was keen to give it a try in a nice open space with a good projector. there was some fine tuning done while playing with the project.

Final Bits...

This processing project basically animates the shoe up and down using sound as the input instead of a mouse position. I have used the microphone input to measure the sound level and add it to the image position in each loop that has been made. (similar to the last one) as the sound increases or continues the image moves higher and when it disappears off the top it changes and drifts back . if the sound stops the shoe will drift back and if the sound isn't high enough the shoe will hover and drift around un changed. the program has two modes, one is listen to the sound and move the shoe the other is when the shoe image has changed ignore the sound and just drift back to the home position before switching back to the listen mode.

This is based on an example that uses a microphone input with in the project.
An important thing with this project is that it initialises the sound objects correctly and when the program stops it calls the Stop function which shuts down the sound objects.

minim is library that is used to in put and out put sound. im only interested in the input for this project.

There is a class called MaxAmplitudeDetector based on an example that inherits/implements AudioListener this is taken from examples and is use to detect the sound recorded during each frame.



CODE EXAMPLE -

import ddf.minim.*;

float sensitivity=5; //any number greater than 0 and less than 10

Minim minim;
AudioInput in;
MaxAmplitudeDetector mad;
float lastAmplitude=10;
float amplutudeThreshold=20;
float driftBackFactor=32;
float driftBackFactorForNewShoe=8;
PImage bgShoe;
PImage fgShoe;
String[] Shoes;
int ShoeNum = 4;
int canChangeShoeCounter=24;
boolean listenMode=true;

void setup() {
size(1000, 600,P3D);
frameRate(24);

minim = new Minim(this);
minim.debugOn();

// get a line in from Minim, default bit depth is 16
in = minim.getLineIn(Minim.MONO);
mad= new MaxAmplitudeDetector();

in.addListener(mad);

bgShoe = loadImage("bg.jpg");
fgShoe = loadImage("shoe1.png");

Shoes = new String[10];

Shoes[0]="shoe1.png";
Shoes[1]="shoe2.png";
Shoes[2]="shoe3.png";
Shoes[3]="shoe4.png";
Shoes[4]="shoe5.png";
Shoes[5]="shoe6.png";
Shoes[6]="shoe7.png";
Shoes[7]="shoe8.png";
Shoes[8]="shoe9.png";
Shoes[9]="shoe10.png";

}


void draw()
{
println(listenMode);
if (listenMode)
{
listenMode();
}
else
{
newShoeMode();
}
}


void newShoeMode()
{
float newAmplitude =lastAmplitude ;
newAmplitude = lastAmplitude - (lastAmplitude / driftBackFactorForNewShoe);

if (canChangeShoeCounter>0)
{
canChangeShoeCounter--;
}

if (newAmplitude <=10)
{
listenMode=true;
}

background(0);
DrawShoes(newAmplitude);
lastAmplitude=newAmplitude;
}


void listenMode()
{
float peakAmplitude=mad.Amplitude();

peakAmplitude=map(peakAmplitude,0,sensitivity, 0,height);

float newAmplitude =lastAmplitude ;
if (peakAmplitude > amplutudeThreshold)
{
newAmplitude =lastAmplitude + peakAmplitude ;
if(newAmplitude>height)
{
ChangeShoe();
return;
}

}
else
{
//drift back
newAmplitude = lastAmplitude - (lastAmplitude / driftBackFactor);
if (canChangeShoeCounter>0)
{
canChangeShoeCounter--;
}
}

if(newAmplitude>(height *1.1))
{
newAmplitude=(height *1.1);

}

background(0);
DrawShoes(newAmplitude);
lastAmplitude=newAmplitude;
}

void DrawShoes(float yOffset)
{
image(bgShoe, 0, 0);
image(fgShoe, 0, yOffset * -1);
}


void ChangeShoe()
{
if (canChangeShoeCounter>0)
{
//Stops double hits can only change image again after drift back has started.
return;
}
canChangeShoeCounter=48;

if (ShoeNum < 0 ) {ShoeNum=9;}
fgShoe=loadImage(Shoes[ShoeNum]);
ShoeNum--;
listenMode=false;
}

void stop()
{
// always close Minim audio classes when you finish with them
minim.stop();
super.stop();
}





class MaxAmplitudeDetector implements AudioListener
{
private float[] left;
private float[] right;
float maximumApmlitude;

MaxAmplitudeDetector()
{
left = null;
right = null;
}

synchronized void samples(float[] samp)
{
left = samp;
}

synchronized void samples(float[] sampL, float[] sampR)
{
left = sampL;
right = sampR;
}

synchronized float Amplitude()
{
maximumApmlitude=0;
// we've got a stereo signal if right or left are not null
if ( left != null && right != null )
{
for ( int i = 0; i < left.length; i++ )
{
if (abs(left[i])>maximumApmlitude)
{
maximumApmlitude=abs(left[i]);
}
}
for ( int i = 0; i < right.length; i++ )
{
if (abs(right[i])>maximumApmlitude)
{
maximumApmlitude=abs(right[i]);
}
}

}
else if ( left != null )
{

for ( int i = 0; i < left.length; i++ )
{
if (abs(left[i])>maximumApmlitude)
{
maximumApmlitude=abs(left[i]);
}
}

}
return maximumApmlitude;
}
}

more shoes

These are some more shoes as i wanted 10 shoes for the final project.


NIKE MAGIC LOGO

exploding shoe

exploding shoe,

this is based on a sample that was found on processing.org that manipulates the image pixels z position according to its brightness. the sample was adapted to brake the shoe images down in to squares that represent pixels because the image are to large to do it at pixel level and the square size had to change according to how much we wanted to explode the image.

The idea was similar to the previous one but instead of a new image sliding in i wanted a new image to explode in, this didn't happen gust enough.

similar to the other experiments it creates a list of images, draw uses the mouse x position to work out the amount of movement we want, in this case its the explosion. the main difference with this one is that it introduces the idea of a class. a class allows you to capture all the properties and functions around the shoe.

each shoe has a draw function and explode function. draw just draws the image and explode draws the image as a series of squares that represent a range of pixels drawn as a square where the z position is a factor of the mouse position x.




experiment 03 - push and pull

experiment 03 - push and pull

same as the slide in slide out but as it slides left and right it drags a new shoe image in from the left or right depending on the direction of the sliding shoe.
The image changes as it slides out. the gap between the shoes changes as the main shoe slows down the trailing shoe catches up as if its connected by a piece of elastic.

MoveEnough is still present like the privies one.

there is a delay introduced so when things stop moving there is pause before it starts to drift back or move.



experiment 2 - slide in and out

The shoe follows the mouse left and right and when the mouse is moved all the way off the screen a different shoe image slides in. if the mouse is static then the shoe drifts to the centre until it stops.


function set up - sets up size frame rate, loads the bg image, and creates a list of the file names of the shoe images as png's with transparent bg.

function draw - first it checks if the mouse has moved enough. if it has moved enough, if it has it sets the new shoe position. if it hasn't moved enough it sets a new position to centralise the shoe. all new positions are moved to but the rate is slowed down by a drag factor.




AR spoof!

This made me lauf even tho its off topic but i guess its relevant to the previous post (kind of)

AR New Year Greeting Card

This is good simple interaction, the animation is very effective. i like how they have achieved depth with in the animation that happens. This was made as a new year greetings card.

" developed new year greeting site for my company.
It is using FLARToolKit ported last year.
If you have webcam, You can try at 09.aid-dcc.com ."

Hand from Above

This is so entertaining, really works well in terms of crowd interaction. it seemed as if people learnt very quickly what to do.

Hand from Above was commissioned by Abandon Normal Devices and Liverpool City Council for BBC Big Screen Liverpool and the Live Sites Network.
More info: chrisoshea.org/​projects/​hand-from-above/​

ENVISION : Step into the sensory box

Really cool video that i found that has some amazing mapping that works very well.

Experiments in processing

This started with an example found online that has since been modified,
The example basically rotated an image around. when the mouse went past the half way point the image was swapped.


void iterateParticle(float fkx) {
// iterate for a single force acting on the particle
pfx = fkx;

pa2 = pfx*pfx ;
if (pa2 < 0.0000001) {
return;
}
pax = pfx/pMass;

pvx += pax;

pv2 = pvx*pvx ;
if (pv2 < 0.0000001) {
return;
}
pvx *= (1.0 - pDrag);

px += pvx;

}

Above is the 'iterateParticle' bit that controls the speed of movement as the cursor is moved left to right over the image.




void drawShoe(float x)
{

float depth =width/4;
background(0);
translate(width / 2, height / 2);
//rotateY(x);
rotateY(map(x, 0, width,0, PI));
//rotateZ(PI/6);
beginShape();
texture(img);
vertex(-(width/2), -(height/2), 0, 0, 0);
vertex((width/2), -(height/2), 0, width, 0);
vertex((width/2), (height/2), 0, width, width);
vertex(-(width/2), (height/2), 0, 0, width);
endShape();
}

The drawShoe function draws the shoe and rotates it according to the x position which is actually the cursor position on the image.
In the main body of the program as the cursor moves over the centre point it changes to a different image of a shoe. This works well and although its very basic its given me ideas i want to try out. Its a long way off but it would be interesting to try web cam stuff even though Seb has said that its a long way off just swaping the mouse for motion detection. i think more exploring is needed.







Research - Nike Ball Man

For the FIFA World Cup, Nike set up the Nike Academy Soweto in Johannesburg, South Africa. The centre gave young footballers the opportunity to develop their football talent and use a series of digital interactive features. Nike asked Public to create one of the features for this centre.





"The "Nike Ball Man" feature placed a 3D model of a footballer constructed from footballs onto a multi-touch screen. Users could then, use the multi-touch screen to rotate, manipulate and zoom into a specific ball. Tapping the ball then delivered a football fact to the user."

"The key was that this feature needed to be interactive, engaging and innovative - the solution, built in Unity, achieved this through delivering a smooth and flexible navigation mechanic combined with slick animations that were all navigable through simple and intuitive finger and hand gestures on the screen."

OFFF Oeiras Bezier Grid

Installation of Joshua Davis and Float4 at the OFFF Festival 2009 in Oeiras






Bellow is a video of the piece working.

New brief - Building Interaction with Code

Im really excited with the new brief, at first glance it looks like i have a lot to learn! There definitely is now way of guessing the out come of this. I have a few ideas floating around but i guess i need to embark on research and experiments now...