Tuesday
Wednesday
Last Post! Final Piece Sketch code!!
(With many thanks to Seb!)
And without formatting (can copy and paste!):
import hypermedia.video.*;
import processing.opengl.*;
import processing.video.*;
PImage bg;
OpenCV opencv; // Creates a new OpenCV Object
// add image to sketch
PImage particleImg;
Particle[] particles;
final int MAX_PARTICLES = 150;
void setup()
{
size(1000,250);
frameRate(30);
bg= loadImage ("sky7.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");
}
void draw()
{
noStroke();
noTint();
imageMode(CORNER);
opencv.read(); // Grabs a frame from the camera
background (bg);
opencv.absDiff(); // Calculates the absolute difference
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();
}
}
I'm now signing off...GoodBye and Goodnight!!
Tuesday
Acknowledgements
With great acknowledge to Seb lee-Delisle for the permission to use your code and for your hours of patience!
One Big Round-Up!
We have come to the end of the project. It's been a very difficult, but exciting project. There have been highs and also many lows (i.e not being able to get OpenCv working on windows boo!- works now yay!). Learning processing has been like learning a new language, but as they say "Practice makes perfect!" (Well, perhaps not perfect but given it a very good go!
I have documented my process throughout this project in this blog and in a sketchbook. I find the blog particularly helpful, as I can quickly create entries regarding research I have found and ideas I have come up with from home or in College. Therefore Ideas are not forgotten; It's a great tool for idea development.
I used my sketchbook to brainstorm and to sketch initial ideas. This was a great starting point before being unleashed on the computer to make some "Magic!"""".
When I started this project, I found Processing very hard going. If I am to be honest, I still do! The hardest thing with the programme is knowing what it feasible with limited knowledge on coding. During the last ten weeks, I would come up with many ideas, but my level of Processing knowledge would mean that many of this ideas were not feasible.
After carrying out much research and many, many, many experiments, I started to understand what was feasible and what would be near impossible to create without a vast knowledge of the programme. I realised that the best idea was to keep to a simple idea and use simple code, but experiment with the variables to create different and very exciting effects.
I went through a phrase of the project, where I was trying to create sketches with imported movie clips that triggered when movement was detected. After many trials and hours of reading forums online regarding the matter, I realised that this wasn't as easy it sounded. That was when I decided to keep it simple and focus on particles to create a "funky" effect. This was so much more exciting, I actually able to experiment and get some really cool results rather than spending hours with no such luck.
I experimented with changing variables in my code and changing the backgrounds, flipping my background so that it mirrored by actions e.t.c e.t.c Hours of amusement! This also meant that I could spend more time experimenting with my background image and layout, all of which has been documented on this blog.
As already discussed on the blog, my inspiration was Michael Jordan and his Jumpman website. I originally wanted to create the same style and feel as the material on his website for my advertisement, so that people could relate the two. Funny enough, only today did I look back again at the Jumpman website and find this page which I have already shown on this blog:
Note the style of the Jordan Holiday section with the snowflakes. I could find some correlation there with my stars. Besides, I feel I have captured the overall feeling of the Jumpman website in my installation with a slight feminine edge. I obviously didn't want to copy any element exactly, but to capture the "feeling" of the site using colour, font style e.t.c
If we had to develop the project further, there would be a couple of tasks I would carry out. Firstly I would actual try and get my digital advertisement installed with a public place and find out peoples reactions and level of interactivity. Secondly, I would create the website that I have already discussed in past blog posts. This would be a website to advertise the fictional range of trainers, in the same style as Michael Jordan has with his Jumpman site: Jumpman
I would obviously include all the elements I have devised, including the altered "Jumpman" Logo and the colour coded swoosh and trainer range. I would also include endorsements by Swin Cash (as researched), the pro WNBA Basketball player in much the same way as Michael Jordan.
All in all, a very rewarding project with its huge level of commitment needed to get your head around the code!
I have documented my process throughout this project in this blog and in a sketchbook. I find the blog particularly helpful, as I can quickly create entries regarding research I have found and ideas I have come up with from home or in College. Therefore Ideas are not forgotten; It's a great tool for idea development.
I used my sketchbook to brainstorm and to sketch initial ideas. This was a great starting point before being unleashed on the computer to make some "Magic!"""".
When I started this project, I found Processing very hard going. If I am to be honest, I still do! The hardest thing with the programme is knowing what it feasible with limited knowledge on coding. During the last ten weeks, I would come up with many ideas, but my level of Processing knowledge would mean that many of this ideas were not feasible.
After carrying out much research and many, many, many experiments, I started to understand what was feasible and what would be near impossible to create without a vast knowledge of the programme. I realised that the best idea was to keep to a simple idea and use simple code, but experiment with the variables to create different and very exciting effects.
I went through a phrase of the project, where I was trying to create sketches with imported movie clips that triggered when movement was detected. After many trials and hours of reading forums online regarding the matter, I realised that this wasn't as easy it sounded. That was when I decided to keep it simple and focus on particles to create a "funky" effect. This was so much more exciting, I actually able to experiment and get some really cool results rather than spending hours with no such luck.
I experimented with changing variables in my code and changing the backgrounds, flipping my background so that it mirrored by actions e.t.c e.t.c Hours of amusement! This also meant that I could spend more time experimenting with my background image and layout, all of which has been documented on this blog.
As already discussed on the blog, my inspiration was Michael Jordan and his Jumpman website. I originally wanted to create the same style and feel as the material on his website for my advertisement, so that people could relate the two. Funny enough, only today did I look back again at the Jumpman website and find this page which I have already shown on this blog:
Note the style of the Jordan Holiday section with the snowflakes. I could find some correlation there with my stars. Besides, I feel I have captured the overall feeling of the Jumpman website in my installation with a slight feminine edge. I obviously didn't want to copy any element exactly, but to capture the "feeling" of the site using colour, font style e.t.c
If we had to develop the project further, there would be a couple of tasks I would carry out. Firstly I would actual try and get my digital advertisement installed with a public place and find out peoples reactions and level of interactivity. Secondly, I would create the website that I have already discussed in past blog posts. This would be a website to advertise the fictional range of trainers, in the same style as Michael Jordan has with his Jumpman site: Jumpman
I would obviously include all the elements I have devised, including the altered "Jumpman" Logo and the colour coded swoosh and trainer range. I would also include endorsements by Swin Cash (as researched), the pro WNBA Basketball player in much the same way as Michael Jordan.
All in all, a very rewarding project with its huge level of commitment needed to get your head around the code!
Ta da!!! ... It's the final Showdown!!!
I know I still have a crit session to attend regarding my final piece, but here goes for now!!!:
(Sorry the extremely bad video quality! You will get a much better when the film of my installation at work is complete!).
(Sorry the extremely bad video quality! You will get a much better when the film of my installation at work is complete!).
I've got my eye on you!: Update on my target audience...
I know way back in my project I set my target audience to be 16- 30 years old; I didn't specify gender. Obviously, since that post I have developed my idea and aimed my product at one gender.
The good thing about my advertisement (hopefully) is that although it is aimed at Women. it will also appeal to men, because it isn't overly feminine and the interactive element with appeal to both genders and people of all age categories. Just because my product is aimed at the female audience, i didn't want to alienate the rest of the population. If people were to walk down the road where this was displayed and the stars starting interacting with their movement I would hope they would have a play, regardless of their gender or age.
The good thing about my advertisement (hopefully) is that although it is aimed at Women. it will also appeal to men, because it isn't overly feminine and the interactive element with appeal to both genders and people of all age categories. Just because my product is aimed at the female audience, i didn't want to alienate the rest of the population. If people were to walk down the road where this was displayed and the stars starting interacting with their movement I would hope they would have a play, regardless of their gender or age.
Who's up for a three-way?!
All the way through this project, I have thought about where my installation would be displayed and therefore created elements accordingly.
As soon as I viewed the website Monster Media, I knew that I wanted to create a shopfront installation. It would (if put into production)be placed as a digital window display. Therefore I decided to create an installation that could be projected along a whole shop front.
On a shopfront such as this Nike one!:
I set my sketch size to 1000 x 250 to create this elongated effect. Therefore my background had to be of equal size.
If in reality, my advert was to be installed, it would go along three shop windows and therefore would be on three separate projects using a three way projector.
This would also ensure that the quality for the projection was also at its best; no loss of quality.
It is hard to envisage this on a computer screen or even projected ( the real installation would be about three times the size!), but We will have to try to!
Ta da! This is how I would envisage it:
As soon as I viewed the website Monster Media, I knew that I wanted to create a shopfront installation. It would (if put into production)be placed as a digital window display. Therefore I decided to create an installation that could be projected along a whole shop front.
On a shopfront such as this Nike one!:
I set my sketch size to 1000 x 250 to create this elongated effect. Therefore my background had to be of equal size.
If in reality, my advert was to be installed, it would go along three shop windows and therefore would be on three separate projects using a three way projector.
This would also ensure that the quality for the projection was also at its best; no loss of quality.
It is hard to envisage this on a computer screen or even projected ( the real installation would be about three times the size!), but We will have to try to!
Ta da! This is how I would envisage it:
...And there you go!
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!):
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!"
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
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:
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!
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!...
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.
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.
From Jumpman to Jumpwoman: The new Logo!
This was a big issue!!! I wanted to promote a range of female trainers using a logo of Michael Jordan!!
This needed to be fixed!
Ah, what could I do???!!!
I know,
Liquify Michael in Photoshop, giving him a smaller waist, less muscular legs and Breasts!
I quite like the new logo: From Michael Jordan to Swin Cash.
This needed to be fixed!
Ah, what could I do???!!!
I know,
Liquify Michael in Photoshop, giving him a smaller waist, less muscular legs and Breasts!
I quite like the new logo: From Michael Jordan to Swin Cash.
The Original Logo: Jumpman
The New Logo: JumpWoman
Brill!
Obviously, I won't use the name Jumpwoman for the range or for the website as Michael Jordan has (Jumpwoman has I have already said sounds too patronising!).
I will just simply use the name Nike Magic Air, but I will discuss this later when I talk about how I would develop the project further.
Different Skies
OK, back to a bit of the design work...
Today, I am going to experiment with the background image for my installation. If we recap, my most recent attempt looked like this:
This was designed initially with the idea of promoting either a men's range of trainers or unisex. Since my idea has now updated, I need to update my design. Has i have said in a previous post, the star element of my processing code makes my design look quite feminine in itself; it is soft and "comfortable". Other elements in the design however made it look "clumpy" and "not very elegant!".
Firstly, I wanted to experiment with different Skies. So here goes:
Firstly, I decided I wanted to make more use of the Jumpman logo, as that is a main part of the reason I have decided to focus on Nike Air trainers. I also thought as my idea involves the use of a night sky and the theme of basketball, I use the idea of "Reaching for the stars", but I will go into depth a bit later about that.
I definitely prefer this idea if the centralised logo, rather than having the logo in the bottom right hand corner with the Nike Swoosh.
Today, I am going to experiment with the background image for my installation. If we recap, my most recent attempt looked like this:
Firstly, I wanted to experiment with different Skies. So here goes:
Firstly, I decided I wanted to make more use of the Jumpman logo, as that is a main part of the reason I have decided to focus on Nike Air trainers. I also thought as my idea involves the use of a night sky and the theme of basketball, I use the idea of "Reaching for the stars", but I will go into depth a bit later about that.
I definitely prefer this idea if the centralised logo, rather than having the logo in the bottom right hand corner with the Nike Swoosh.
In this attempt, I was experimenting with Lens flares and lighting effects in Photoshop. I wanted to create a more dynamic feel with the light glaring off the Jumpman logo. Pretty good!
With this attempt, the lighting was a little bit more subtle. I am not sure which attempt I preferred!! Further experiments would help me out!
Bigger Logo. Liking it!!! If you also notice, I have altered the Jumpman logo to fit in with my project: The logo is now a Woman! (I will discuss this further in following posts!).
I am now going to explain to you how I created each element of the background individually.
Recap on exisiting Nike Advertisements aimed at Women.
At the beginning of this project I looked at the Nike Advertisement campaign:
“Make yourself”.
This campaign was aimed to empower Women in the world of sport and to encourage their confidence in their abilities.
Obviously, this is what I am aiming to achieve in my project. It seemed like a good idea to recap. I think with finding a famous WNBA player to promote and endorse my fictional brand of "Magic" trainers is a great way to link the new range with the sport they were designed for. It also creates trust in the brand to customers (If a WNBA player wears the trainers, they must be the best you can buy). Women need strong role models in the world of sport to encourage them to go out and try, therefore I beleive this is the best way to go.
The Famous Females.
OK, my next step I believed was to research into famous Female Basketball players. I decided to focus my research on female stars from the WNBA (Women's national basketball association) of America. These are just a few:
Swin Cash
(From Wikipedia)
Swintayla Marie Cash (born on September 22, 1979), better known as Swin Cash, is an American WNBA player who plays for the Seattle Storm.[1] A prolific scorer and rebounder, as well as a capable ball handler and defender, she helped lead the University of Connecticut women's basketball team to national titles in 2000 and 2002. In her second WNBA season, she led the Detroit Shock to their first ever WNBA title.
Cheryl Miller
Cheryl D. Miller (born on January 3, 1962 in Riverside, California) is a former college basketball player, coach and sportscaster for TNT. She is currently a sideline reporter for NBA games on TNT Sports and also works for NBA TV as a reporter and analyst having worked previously as a sportscaster for ABC Sports, TBS Sports and ESPN. She was also head coach and General Manager of the WNBA's Phoenix Mercury.
In 1995, Miller was enshrined in the Basketball Hall of Fame in Springfield, Massachusetts. In 1999, she was inducted into the inaugural class of the Women's Basketball Hall of Fame, located in Knoxville, Tennessee.[1] On August 20, 2010, Miller was also inducted into the FIBA Hall of Fame for her success in international play.[2]
Lisa Leslie
Lisa Deshaun Leslie-Lockwood (born July 7, 1972, in Gardena, California) is a retired American professional women's basketball player in the WNBA. She is a three-time WNBA MVP and a four-time Olympic gold medal winner. The number seven pick in the 1997 inaugural WNBA draft, she followed a superb career at the University of Southern California with seven WNBA All-Star appearances and two WNBA championships over the course of eleven seasons with the Los Angeles Sparks, before retiring in 2009.[1] Leslie, a 6'5" center, is the first player to dunk in a WNBA game. She was considered a pioneer and cornerstone of the league during her WNBA career.
After my brief research, I have decided to focus my imaginary range of Women's Nike trainers on the basketball star, Win Cash. I have chosen Swin Cash, as she the most current of the three and is still playing professional Basketball to this day. She also seems "Young" and "Trendy" and therefore will appeal to my target audience.
I know all of this seems pointless at the moment, but this research and deciding on this factor has helped me with my decisions regarding what route to take regarding my advertisement. Now I have chosen my range to be "Sponsored" by a real female basketball star, I can treat my advertisement in much the same way as the Jumpman series. In other words, If I was to extend this project, I could expand it by creating a "fictional" website promoting the female version for the Michale Jordan Jump air trainers.I could do it in the much the same way as Michael Jordan with his own website away from Nike, that as well as advertising the new ranges, it discusses important issues regarding the sport.
With my firm decision to continue with my project down the route of advertising a solely female range of trainers, I can continue my designs o respect of this. I will however display some older designs first, to show my progress from my old ideas to the new.
Swin Cash
(From Wikipedia)
Swintayla Marie Cash (born on September 22, 1979), better known as Swin Cash, is an American WNBA player who plays for the Seattle Storm.[1] A prolific scorer and rebounder, as well as a capable ball handler and defender, she helped lead the University of Connecticut women's basketball team to national titles in 2000 and 2002. In her second WNBA season, she led the Detroit Shock to their first ever WNBA title.
Cheryl Miller
Cheryl D. Miller (born on January 3, 1962 in Riverside, California) is a former college basketball player, coach and sportscaster for TNT. She is currently a sideline reporter for NBA games on TNT Sports and also works for NBA TV as a reporter and analyst having worked previously as a sportscaster for ABC Sports, TBS Sports and ESPN. She was also head coach and General Manager of the WNBA's Phoenix Mercury.
In 1995, Miller was enshrined in the Basketball Hall of Fame in Springfield, Massachusetts. In 1999, she was inducted into the inaugural class of the Women's Basketball Hall of Fame, located in Knoxville, Tennessee.[1] On August 20, 2010, Miller was also inducted into the FIBA Hall of Fame for her success in international play.[2]
Lisa Leslie
Lisa Deshaun Leslie-Lockwood (born July 7, 1972, in Gardena, California) is a retired American professional women's basketball player in the WNBA. She is a three-time WNBA MVP and a four-time Olympic gold medal winner. The number seven pick in the 1997 inaugural WNBA draft, she followed a superb career at the University of Southern California with seven WNBA All-Star appearances and two WNBA championships over the course of eleven seasons with the Los Angeles Sparks, before retiring in 2009.[1] Leslie, a 6'5" center, is the first player to dunk in a WNBA game. She was considered a pioneer and cornerstone of the league during her WNBA career.
After my brief research, I have decided to focus my imaginary range of Women's Nike trainers on the basketball star, Win Cash. I have chosen Swin Cash, as she the most current of the three and is still playing professional Basketball to this day. She also seems "Young" and "Trendy" and therefore will appeal to my target audience.
I know all of this seems pointless at the moment, but this research and deciding on this factor has helped me with my decisions regarding what route to take regarding my advertisement. Now I have chosen my range to be "Sponsored" by a real female basketball star, I can treat my advertisement in much the same way as the Jumpman series. In other words, If I was to extend this project, I could expand it by creating a "fictional" website promoting the female version for the Michale Jordan Jump air trainers.I could do it in the much the same way as Michael Jordan with his own website away from Nike, that as well as advertising the new ranges, it discusses important issues regarding the sport.
With my firm decision to continue with my project down the route of advertising a solely female range of trainers, I can continue my designs o respect of this. I will however display some older designs first, to show my progress from my old ideas to the new.
Thursday
Jump Woman!!!
A new brainwave!!!
After much experiment with my current idea, I have come across the brainwave of perhaps focusing on a certain genre for my range and advertisement.
I have noticed that the development of my sketch looks quite "Feminine". This can always be changed, but It might be worth having a look at the world of Woman's basketball. I know There is the WNBA which is the American national woman's basketball association.
I will look into this and other interesting websites that I have come across regarding Woman's basketball. I will also look at the current range of woman's Basketball sports hear. I think Nike already have a range of female trainers specialised for Basketball. I just need to see where there seems to be a gap in the market and more importantly a gap in the advertising of womans basketball products.
Although there are several woman's basketball teams in the U.K, it isn't such a big deal as in America and therefore I am not sure of the extent of publicity and interest there is in the sport.
Again, after some research I will know if this is a feasible idea. It might be quite nice to focus on just the one gender. Men have such websites and advertising of their favourite sports and brands, such as Jumpman, so perhaps it is time to give the fairer sex a chance.
If this is the road that I would like to go down, I would also have to think of a name for the brand that correlates to the Jumpman website. I.e a partner website and range to the Jumpman range, but focused on women. Obviously, I wouldn't be able to call the brand Nike JumpWoman... It sounds too patronising!!!
After much experiment with my current idea, I have come across the brainwave of perhaps focusing on a certain genre for my range and advertisement.
I have noticed that the development of my sketch looks quite "Feminine". This can always be changed, but It might be worth having a look at the world of Woman's basketball. I know There is the WNBA which is the American national woman's basketball association.
I will look into this and other interesting websites that I have come across regarding Woman's basketball. I will also look at the current range of woman's Basketball sports hear. I think Nike already have a range of female trainers specialised for Basketball. I just need to see where there seems to be a gap in the market and more importantly a gap in the advertising of womans basketball products.
Although there are several woman's basketball teams in the U.K, it isn't such a big deal as in America and therefore I am not sure of the extent of publicity and interest there is in the sport.
Again, after some research I will know if this is a feasible idea. It might be quite nice to focus on just the one gender. Men have such websites and advertising of their favourite sports and brands, such as Jumpman, so perhaps it is time to give the fairer sex a chance.
If this is the road that I would like to go down, I would also have to think of a name for the brand that correlates to the Jumpman website. I.e a partner website and range to the Jumpman range, but focused on women. Obviously, I wouldn't be able to call the brand Nike JumpWoman... It sounds too patronising!!!
Wednesday
Today's progress...
Today I have been focusing on the design. From my last post there have been a few developments, but still not sure on my final design. This is what it looks like at the moment:
Time consuming as it was, I have managed to crop the trainers from their original background using photoshop. I also need to focus on the design idea and the different elements that make this up.
Here are the individual design elements and their progress:
The blue "Swoosh" to match the colour scheme.
The above and below images are the originals that I sourced ready to edit for my make-believe "Magic" trainers.
The star for the processing code- perhaps?
My "cropped" trainers. Edited in Photoshop.
And colours edited to fit in with the style of my advertisement- maybe?
I am hopefully going to get to speak to Seb today to get his opinion on my progress so far and perhaps get some help regarding putting movie and movement together in Processing.
Tuesday
Look what I just found!!!
My practice sketches!!! (Always handy to add to help further development!):
No.1- Changing Background Colour
I like the white, crisp background, but I don't think it is very appropriate for this branding. Let's try again.!
No.2- Changing particle size
Oh dear, a white background again! Didn't I learn from the previous sketch? Obviously not! Anyway this one demonstrates a different particle size, but this seemed to slow down the reaction and movement of the particles.
No.3- Change particle quantity
Lots of little particles. PLEASE GET RID OF THE WHITE BACKGROUND!!!
No.4- Change background colour
Ahhhh that's better a dark- coloured background! It creates a much more dramatic effect. Loving the blue particles but they don't really look like stars.
No.5- Change background to an image
Ok, now I appear to have changed the background to an image. The biggest tip I can give you from doing this was to make sure the image used for the background was the exact same size as the sketch.
No.6- Change particle quantity
Picture as background and more particles!
No.7- Change Background Image
A different background image, but where have the stars gone? They blend too much into the background; this example didn't work!
Subscribe to:
Posts (Atom)