Tuesday

Reach for the Stars!!!

OK, it has got to the point of the project where I need to define what my range of trainers is going to be called and the name of the advertising campaign to support the promotion of them. I know this is not stated in the brief as a necessity, but it helps me to understand what exactly the company would be looking for when creating an advertising campaign and therefore helps me decide on my final,final piece.

Firstly, I know that I am going to base my range of trainers on the Michael Jordan Air trainers and follow the idea of creating a whole website, as a kinda sister website to the main Nike Site, for my female range of Nike Basketball trainers. Although they are essentially going to be designed for basketball players, the "Air" trainers are just as popular with people that do not play the sport but just like the brand and design.

Therefore I can't make my slogan and name basketball- orientated. I obviously have to have "Magic" in the title to fulfill the brief.

After  much deliberation, I have come up with a name for my range of trainers and a slogan for the fictional advertising campaign (I know its not necessary, but is quite exciting!):

Nike Air Magic

"Reach for the stars!"

The title of the fictional trainer range is quite self explanatory, but I will explain anyway. Basically, I want to base my range on the Nike Air range by Michael Jordan, but because I am creating a fictional range of women's trainers I needed a new slant than using the Jumpman range.

There I have simply called my range Nike Air Magic, rather than just Nike Magic. I have also looked into the idea of creating an advertising campaign that is endorsed by a famous female basketball player. Again, although I won't go that far in the project, its good to being able to explain why I have chosen to go down certain routes and why I have chosen the certain style/ colours/ range that I have done.

Girl Power!


The slogan, "Reach for the stars!" works in two ways. Firstly in works in the fact that I am using stars in my installation. Secondly, because Basketball players jump high, therefore they "Reach" as high as they can.

"Simples!"

Trainers!!!



This is my original design for the Magic trainer before the decision was made that I was going to focus on a range for Women. Therefore the trainer needs to be made to look slightly more feminine. I don't want to go overboard with floral and pink, but a slightly more feminine shape and colour.



 
After a change in saturation and very slight alteration of the shape, here is my final design for my Magic trainer:



Final Design



As you can see the colour matches the design of the installation, in a nice feminine but bold colour. I have also made the trainer look slightly less "Clumpy" and therefore look more like ladies footwear.

Swoosh it up!... The finished Nike Logo!

(N.B the logo has a transparent logo on the sketch. This version has a black background for demonstration purposes).

and this is how it appears on the sketch:


I wanted to include the name of the range of trainers on the advertisement. My installation is designed to be placed on a shopfront of a Nike store and therefore people need to know the name of the product in case they would like to purchase it in store. It is to be seen as a digital window display! 

I have used impact as my font with a crisp edge to give it well, impact! I read on a forum online that this is one of the closest fonts to the Nike custom made Font. I like it, its powerful, yet friendly (yes, a friendly font!).

Swwwwoooooosssshhhhhhhh!

OK, now it's time to play around with the Swoosh!!!
I need to edit the famous Nike tick to "fit in" with my current design.
Therefore I need to alter its colour e.t.c using gradients in Photoshop.

Here are a couple of examples I found online of the Nike Swoosh:



I will use this version with the white tick on the background as this will be easier to apply a gradient to in Photoshop.
I will use Pantone colours for my gradient.

1st Attempt:



The gradient is too dark. let's try again.

2nd Attempt:


Better, but too blue. I need it to look more feminine and this blue tone is too cold. Last try.

3rd Attempt:


Perfect! I needed it to be lighter than the first attempt and this works.
Next, I will need to add the text to it to finish it off before pasting onto my background for my sketch.

Sounds Like a Plan...Or maybe not?

Again, another failed idea when creating this project was to add sound to my piece. I went through a few ideas before deciding not to carry on with the idea. Instead I will just add sound/music to my film that will be made of people interacting with my final piece This will give a better effect of ambiance.

One of my ideas was to add a song to my piece. I wasn't sure if there would be copyright with this. Therefore I search for public domain songs or royalty free music, but decided (as already mentioned) that I would rather leave this to the film made afterwards rather than having a musically sketch.I just couldn't find anything that would be appropriate. I also had a look at look at sound effects and famous speeches to see if anything fitted, but again not much luck. Keep it simple I say!; I think I am over complicating it again!

Ooh Flashy!

I found this exciting sketch on OpenProcessing!:

http://www.openprocessing.org/visuals/?visualID=12179 
STREETLIGHTS by Benjamin Poynter




It contains code that creates this funky flashing text effect.
I thought it would be worth a try!

Here is my code incorporated into my stars sketch (including sample sound):

import hypermedia.video.*;

import processing.opengl.*;
import processing.video.*;
PImage bg;
OpenCV opencv;                    //  Creates a new OpenCV Object

// add image to sketch
PImage particleImg;
int x = 255; //variable to make appear/make disppear different animation loops
int y = 255; //variable to make disappear the main menu text
int z = 0; //variable for a random alpha/gamma flicker effect
int blip = 0; //will turn on/into a transparent tint upon ->R
//PImage[] image = new PImage [numFrames]; //varible for the set of animation loops
PFont font; //calls the variable to use for text typed.
int title = 255; //variable to make disappear the title rectangle bg.

import ddf.minim.*;
AudioPlayer player;
Minim minim; //these three lines call the minim audio program to be used.


Particle[] particles;

final int MAX_PARTICLES = 150;

void setup()
{

  size(1000,250);
  frameRate(30);
  font = loadFont("Clubland-20.vlw");
  bg= loadImage ("sky5.jpg"); 
  opencv = new OpenCV( this );    //  Initialises the OpenCV object
  opencv.capture( 250,250);     //  Opens a video capture stream

  particles = new Particle[0]; 
  particleImg = loadImage("shining star.png");

 minim = new Minim(this);
player = minim.loadFile("80s & Early 90s--REM - Losing My Religion.mp3");
player.play();
player.loop();
player.setGain(3);

  //
}


void draw()
{


  noStroke();
  noTint(); 
  imageMode(CORNER);

  opencv.read();                  //  Grabs a frame from the camera


  /* pushMatrix();
   //scale(2,2);
   translate(width,0); 
   scale(-2,2); */
  //image( opencv.image(), 0, 0 );  //  Display the difference image

  background (bg);
  // popMatrix();

  opencv.absDiff();               //  Calculates the absolute difference
  // opencv.flip(OpenCV.FLIP_HORIZONTAL);
 rectMode (CENTER);
    //fill(255, title); //'title' will be turned to '0' if -> is pressed.
   //rect (320, 180, 640, 360); //This rectangle is title screen. Will go away.
    float z = random(200, 255); //Gives flicker to variables z and y.
    fill(z, y); //Flickers the opening font.
    textFont(font, 25); //(loaded font, font size)
    text("Reach for the stars", 400, 220);
    textFont(font, 15);
    text("Nike Jump-Magic", 400, 230); 
 

  imageMode(CENTER);

  updateParticles();

  makeParticles(opencv.image());

  if(particles.length>MAX_PARTICLES)  
    particles = (Particle[]) subset(particles, particles.length-MAX_PARTICLES);

  opencv.remember();              //  Remembers the current frame
}

void updateParticles()
{

  for(int i =0; i<particles.length; i++)
  {

    Particle p = particles[i];

    p.update();
    p.draw();
  }
}


void makeParticles(PImage img)
{

  Particle p;
  for(int i= 0; i<200; i++)
  {
    int xpos = (int) random(img.width);
    int ypos = (int) random(img.height);
    if(brightness(img.get(xpos,ypos))>50)
    {
      p = new Particle(width - (xpos*4), ypos);
      p.draw();
      particles = (Particle[]) append(particles, p);
    }
  }
}


class Particle
{

  float xPos;
  float yPos;
  float xVel;
  float yVel;

  float rotation = 0;
  float spin;

  float currentAlpha = 255;
  float currentScale = 0.5;

  float drag = 0.2;
  float fadeSpeed = -5;
  float shrink = 0.9;
  float gravity  = -0.1;

  Particle(float xpos, float ypos)
  {
    this.xPos = xpos;
    this.yPos = ypos;
    this.xVel = random(-20,20);
    this.yVel = random(-20,20);
    this.currentScale = random(0.01,0.10);
    this.currentAlpha = random (0,255);   
    this.rotation = random(0,360);  
    this.spin =  random(-2,-5);
  }


  void update()
  {
    xVel*=drag;
    yVel*=drag;

    yVel+=gravity;

    xPos += xVel;
    yPos += yVel;
    currentAlpha -=fadeSpeed;
    currentScale*=shrink;
    rotation+=spin;
  }

  void draw()
  {
    if(currentAlpha<=0) return;

    pushMatrix();

    tint(255,currentAlpha);
    translate(xPos, yPos);
    scale(currentScale);
    rotate(radians(rotation));
    image(particleImg, 0, 0);
    popMatrix();
  }
}

and the effect looks like this (before any pretty design elements are put into place!):


After a few different experiments, I decided, like the Animated Gif, that the flashing text takes away the attention from the star particles, which should be what catches peoples attention. Therefore in the same way I discarded the Gif, I will dscard the flashing text!

Onwards and upwards!...

Are you taking the Gif?!

I did have a brief look at including Animated Gifs into my project. My simple idea was to animate the trainer onto the screen. In other words make it look like it is sliding across the bottom of the screen. If I was feeling very adventurous I was going to create a series of animations and play them in a loop.



 This idea looked silly!


I looked on Processing.org, which takes you to this link for the Animated Gif library:



http://www.extrapixel.ch/processing/gifAnimation/

You download this and it includes examples, including this following code:

/*
* Demonstrates the use of the GifAnimation library.
* the left animation is looping, the one in the middle
* plays once on mouse click and the one in the right
* is a PImage array.
* the first two pause if you hit the spacebar.
*/

import gifAnimation.*;

PImage[] animation;
Gif loopingGif;
Gif nonLoopingGif;
boolean pause = false;

public void setup() {
  size(400, 200);
  frameRate(100);
 
  println("gifAnimation " + Gif.version());
  // create the GifAnimation object for playback
  loopingGif = new Gif(this, "lavalamp.gif");
  loopingGif.loop();
  nonLoopingGif = new Gif(this, "lavalamp.gif");
  nonLoopingGif.play();
  nonLoopingGif.ignoreRepeat();
  // create the PImage array for the interactive display
  animation = Gif.getPImages(this, "lavalamp.gif");
}

void draw() {
  background(255 / (float)height * mouseY);
  image(loopingGif, 10, height / 2 - loopingGif.height / 2);
  image(nonLoopingGif, width/2 - nonLoopingGif.width/2, height / 2 - nonLoopingGif.height / 2);
  image(animation[(int) (animation.length / (float) (width) * mouseX)], width - 10 - animation[0].width, height / 2 - animation[0].height / 2);
}

void mousePressed() {
  nonLoopingGif.play();
}

void keyPressed() {
  if (key == ' ') {
    if (pause) {
      nonLoopingGif.play();
      loopingGif.play();
      pause = false;
    }
    else {
      nonLoopingGif.pause();
      loopingGif.pause();
      pause = true;
    }
  }
}


I tried to alter the code to suit my needs. I firstly tried to create a simple ifG animation in Photoshop of the trainer moving along the bottom left hand corner of the sketch. I did two versions: On of just the trainer moving with a transparent background and one with the sky background added.

When it came to adding it my processing sketch, I hit a few problems. Firstly, I found it quite difficult to arrange the layers (particles, background, Gif animation e.t.c) so they all worked perfectly. I did managed to get the gift working but it was just flickering and not working properly and even managed to get a capture of y webcam playing, but flickering. Not really the result I was after.
The other problem that I had with the Gif animation was that it tended to take the attention of the rest of the installation. With its constant movement, you tended to watch the animation rather than play with the stars and this is not what I wanted the public to do with my animation.
For all of this reasons, I have decided to scrap the animated Gif idea. Instead I am going to focus entirely on the layout of the still features of my background to add impact but not to take attention from my pretty twinkling stars!


GifAnimation is a Processing library to play and export GIF
animations. It is under a GPL license. The GIFEncoder & GIFDecoder
classes were written by Kevin Weiner. Please see the separate copyright notice in
the headers of the GifDecoder & GifEncoder classes.