But we want to change the background?

Background Image.

This example presents the fastest way to load a background image into Processing. To load an image as the background, it must be the same width and height as the program.

PImage bg;
int a; 

void setup() 
{
  size(200,200);
  frameRate(30);
  // The background image must be the same size as the parameters
  // into the size() method. In this program, the size of "milan_rubbish.jpg"
  // is 200 x 200 pixels.
  bg = loadImage("milan_rubbish.jpg");
}

void draw() 
{
  background(bg);

  a = (a + 1)%(width+32);
  stroke(226, 204, 0);
  line(0, a, width, a-26);
  line(0, a-6, width, a-32)}

Sourced from:


http://processing.org/learning/basics/backgroundimage.html

Looking closer into the Jumpman styling...

Jordan - Jumpman (Air Jordan Shoe Story)

Uploaded by Ofca. - Full seasons and entire episodes online.

Jumpman Styling...

Here's the Jump Man:

and here is his logo:

And another image:

And as shown before here is his website:

And a selection of trainers:

Very trendy!!
All I need to do now in connect this style to my installation. I want to capture the essence of the Jumpman range, but make my own fictional range called Jumpman "Magic". I will design my own Jumpman "Magic" trainer from the existing designs to use within my advertisement. I will then combine my design with the particle idea in processing.
I will then have a last look at Monster Media to see exactly what makes their advertisements so successful (i.e layout, use of images and fonts, etc).
I will then combine all of this elements to create a hopefully successful shopfront interactive advertisement installation!

Sebs the man for particles!!

After much experimentation with movies and frame differencing and blob detection, I was starting to tear my hair out. I just couldn't work out how to place the codes together to make my idea work. I wanted to detect motion or change of light which then activated a video clip: Sounds easy!

I then thought I would start from the beginning and recap again about what Seb had taught us in class about particles. Why not keep my idea simple?

So after further idea generations and several thought processes, I decided to go back to basics with the code and make my installation more exciting, by thinking more about the style and layout of it rather trying to use complicated code.

I want to experiment further with the D_Particles code and when using my background (51); trick it will black out my ugly mug and leave us with pretty particles reacting to my movement:




My code looks like this:

import hypermedia.video.*;

import processing.opengl.*;
import processing.video.*;

OpenCV opencv; // Creates a new OpenCV Object

// add image to sketch
PImage particleImg;


Particle[] particles;

final int MAX_PARTICLES = 50;

void setup()
{

size(640,480);
frameRate(20);

opencv = new OpenCV( this ); // Initialises the OpenCV object
opencv.capture( 320, 240 ); // Opens a video capture stream

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


//





}


void draw()
{
background(0);

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(51);
popMatrix();

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<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*2), ypos*2);
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.98;
float fadeSpeed = 1;
float shrink = 0.8;
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.05);
this.currentAlpha = 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();

}

}

So all I have to do now is a little bit more design and some styling and I think I'm getting there!

Just need one more final check on the Jumpman website for styling and colour tips!

Movie Magic!!!

For a little while I concentrated on the Movie example in OpenCv:

Name	movie()
Examples	import hypermedia.video.*; OpenCV opencv; void setup() { size( 640, 480 ); opencv = new OpenCV( this ); opencv.movie( "bunny.avi", width, height ); // load movie file } void draw() { opencv.read(); // read a new frame image( opencv.image(), 0, 0 ); // and display image } void mousePressed() { float time = mouseX/float(width); opencv.jump( time ); // jump to a specified frame }

This was interesting to me especially after seeing some of the installations from the monster media website, such as the following:

 

A lot of them follow the idea of detecting motion, which then activates a video clip or animation to play. I though this could be very exciting.

A busily researched online, and especially on Processing fourms, as to an idea of how to achieve this. I only wanted my installation to play a simply movie, created in After effects, when movement was detected.
I looked into practical ideas such as when movement was detected in a certain coordinate of the stage, it would activate the movie clip.I also looked into when movement was detected in terms of changes of light it would do the same thing. Could I find any help? NOOOOOOOOOOOOOO!!!

 I tried to place parts of code from various sources together to achieve the effect I wanted.

I firstly started by placing the code from the Movie example and the Blob detection.

Code:

import hypermedia.video.*;
import java.awt.*;
OpenCV opencv;

int w = 320;
int h = 240;
int threshold = 80;

boolean find=true;
PFont font;

void setup() {

  size( 640, 480 );

  opencv = new OpenCV( this );
    opencv.capture(w,h);
  opencv.movie( "bunny.avi", width, height );
 
    font = loadFont( "AndaleMono.vlw" );
    textFont( font );

  println( "Click inside sketch window to change movie timecode" );
  println( "Press space bar to record background image" );
 
}

void draw() {
background(0);
  opencv.read();
  //if ( remember ) opencv.absDiff();
  //sopencv.threshold( 200 );

  image( opencv.image(), 0, 0 );
   image( opencv.image(OpenCV.GRAY), 20+w, 10 );   // GRAY image
    image( opencv.image(OpenCV.MEMORY), 10, 20+h ); // image in memory

 opencv.absDiff();
    opencv.threshold(threshold);
    image( opencv.image(OpenCV.GRAY), 20+w, 20+h ); // absolute difference image

}

/*void keyPressed() {
  opencv.remember();
  remember = true;
}
*/
void mousePressed() {
  float time = mouseX/float(width);
  opencv.jump( time );

}

and result:

Pants! It detects the movies blobs rather than my webcam!!! I'm not sure how to get around this.

I will keep experimenting, although I want to look at other effects too and something might outshine!!!

I will also keep looking at my two main inspirations for this project: Nike Jumpman and Monster media. They will help me!

The Shrimp!

To help me decide what technique I wanted to use to create my interactive advertisement, I decided to go through Many of the openCv and JMyron examples within the processing programme.
I believed that If I tried all the techniques and had a play with each to see what effects could be changed and what was possible, It would help me decide o a route to take for my final piece.

Jumbo Shrimp 

After all my initial research and experiments that I have already talked about on this blog, I decided to have a look at the openCv example: "Jumbo_Shrimp" (What a name!)

The effect looks like this (Please excuse the crummy quality!):



I am not that expressed by this effect. I know my webcam is shockingly bad, but it still isn't very exciting. The one thing i do like about the effect is the bold use of colour, which is exactly what I am looking forward to coincide with the Nike Jumpman theme. The bold use of red and black sure make the effect stand out, but I am not sure it is right for the effect I want to achieve.

Getting there!

After much deliberation and idea generation, I am getting there. I am in the progress on working on my final idea.
Simply but wicked!
Through the next few posts, I will take you through the highs (and the lows) of my progress over the last week or so and the forthcoming future!
Enjoy!!! (Some if it might be quite entertaining!