the code

Here is a download link for my code, and the images with it: http://www.sendspace.com/file/dtvrw5

visualisation

Here's a little visualization I knocked up depicting what the sketch would look like in real life.

deciphering the code

As my code is very much finished I thought I'd post some of it up and explain what certain bits do.

void setup()
{
frameRate (30);
shoe = loadImage("shoe.png");
size(640, 480, OPENGL);
int counter =0;

hint(ENABLE_OPENGL_4X_SMOOTH);
hint(DISABLE_DEPTH_TEST); //These two bits help with making the sketch run faster

for(float x=0; x<8; x++)
{
for(float y=0; y<6; y++)
{
Nike particle = new Nike();

particle.target.set(x*random(70,95), y*random(70,95), 0); //Sets out a grid for the particles, which then fill that grid when drawn
particle.pos.set(x*random(70,95), y*random(70,95), 0);

particles[counter] = particle;
counter ++;
}

}

opencv = new OpenCV( this ); // Initialises the OpenCV object
opencv.capture( 160, 120 ); // Opens a video capture stream
}

That's the setup.

for(int i=0; i {
Nike particle = particles[i];
if(brightness(img.get((int)particle.pos.x/4, (int)particle.pos.y/4))>15)
{
particle.vel.add(random(-2.7, 2.7),random(-2.7, 2.7), 0);
particle.alph-=50;
}

if(brightness(img.get((int)particle.pos.x/4, (int)particle.pos.y/4))<15)
{
particle.vel.add(random(-0.2, 0.2),random(-0.2, 0.2), 0);
particle.alph+=0;
}

This bit of code, placed in the draw setup, tells the sketch to look for areas in the difference image where the brightness is more than 15, if it is more than 15 then it adds a random value from -2.7 to 2.7 in velocity to any particles that are in the area of brightness. It also takes away 50 from the alpha value of that particle.

As well as that, if the brightness is less than 15 then it adds only a slight velocity value, but then adds 0 to 'alph' ('alph' is set to 1) so that the particle slowly fades back in.

alph+=1;

if(alph>255)
{
alph=255;
}

if(alph<0)
{
alph=0;
}

This bit of code in the Nike class sets the 'alph' parameters so that the values never get so high/low that the particles wont disappear/reappear when their required actions are performed.

the particles...

As my frustration grew ever so much during this period of development I thought I'd showcase some of the terrible results.

Mouldy Wotsits



Pollution



Melting Simpson

further progress

After deciding on the final background image I started work on the particles again. I have now made them look more 'misty' and have therefore removed the use of gold in them, as the background image now features that colour. It took A LOT of tweaking to get an image I was happy with, and I think it looks very effective.

the background image

This is probably the most important part of the sketch - the background image. It is important that I get this to be iconographic to Nike, as it is part of the brief. I have made several variations of it to make sure I get a good one.

#1



On this one I added a semi-opatic gold fill over the top, with a screen blend mode. It gives the shoe more prominence, but wasn't quite there yet

#2



For this one I asked a few people if the font used for magic was appropriate and they said no, so I went online to dafont and found this nice font called Lobster, which I think works really well.

#3




In this version I changed the white gradient behind the shoe to a golden one, using a colour from the shoe as the base colour. I think that using gold as the gradient looks better than in version 1, and it also highlights the shoe's golden element. I also removed the 'NIKE' part as it is pretty obvious that it is a Nike product because of the ticks and it was proving to be excess graphics to look at.

#4



There isn't much different in this version apart from that I have added an inner shadow to the shoe. It gives it more depth and makes it look like the shadow is cast from the gradient behind it.

more progress

After spending some more time on the sketch, I decided to spice things up a bit. After thinking about making mist particles I have now adapted that into my previous motion particles. When detecting movement the particles now both move and fade away (with a little bit of help from Seb, mind!) I have also improved on the background image: