INTERACTIVE DESIGN MODULE: OVERVIEW

Processing is an open source programming language and environment used to create images, animations, and interactions.

Having been given a brief for the Interactive Design Module to create an Installation for a new Nike trainer called NIKE MAGIC we were taken through an intensive 10 week course on how Processing works by the renowned Creative code consultant and trainer, Seb Lee-Delisle and supported by the Course Leader, Sue Bamford and Course Lecturer Andrew Williamson.

We were shown various examples of code from the simple to the more complex

and allowed to go and experiment with it in order to gain confidence and some understanding of the Process’s involved.

As Processing is such a specialist field we were advised to work on existing code created by Seb and from the Open CV library rather than from scratch.

We were also advised not to try and create anything too complex and unachievable.

I created an illustration in Photoshop and adapted it to the code. Certain changes were made within the code to create the desired effect.

Here is the code that was used to create the final project: NIKE MAGIC: MONOLITH

//  Code (Particles) created by Seb Lee-Delisle (Thank you Seb) and the Light Trails from  the Open CV Library

//import processing.opengl.*;

// add image to sketch

PImage particleImg;

import hypermedia.video.*;        //  Imports the OpenCV library

OpenCV opencv;                    //  Creates a new OpenCV Object

PImage trailsImg;                 //  Image to hold the trails

PImage img;

int hCycle;//  A variable to hold the hue of the image tint

 Particle[] particles;

final int MAX_PARTICLES = 25;

void setup()

{

 

  size (600, 340);

  noStroke();

  smooth();

   background(255);

  frameRate(25);

  //img = loadImage("nikemagic.jpg"); //background image.

  particles = new Particle[0];

  particleImg = loadImage("logo.png");

 

 

   //img = loadImage("nikemagic.jpg"); //background image.

  opencv = new OpenCV( this );    //  Initialises the OpenCV object

 

  opencv.capture( 300, 170 );     //  Opens a video capture stream

  trailsImg = new PImage( 300, 170 );  //  Initialises trailsImg

  img = loadImage("monolith.png");

  hCycle = 0;                     //  Initialise hCycle

}

        

void draw()

{

   //translate(width, 0);

   //scale(-1, 1);

 

  background(0);

//  fill(0, 20);

//  rect(0,0,width, height);

 

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

  //PImage camImage;                //  Creates an image and

  //camImage = opencv.image();      //  stores the unprocessed camera frame in it

  opencv.absDiff();               //  Calculates the absolute difference

  opencv.flip(OpenCV.FLIP_HORIZONTAL);

  opencv.convert( OpenCV.GRAY );  //  Converts the difference image to greyscale

 

  

  opencv.blur( OpenCV.BLUR, 10 );  //  I like to blur before taking the difference image to reduce camera noise

  opencv.threshold(50);

 

 

 

  opencv.blur( OpenCV.BLUR, 4 );  //  I like to blur before taking the difference image to reduce camera noise

  trailsImg.blend( opencv.image(), 120, 80, 320, 170, 0, 0, 320, 170, SCREEN );  //  Blends the movement image with the trails image

 

  colorMode(HSB);                 //  Changes the colour mode to HSB so that we can change the hue

  tint(color(hCycle, 255, 255));  //  Sets the tint so that the hue is equal to hcycle and the saturation and brightness are at 100%

  pushMatrix();

  scale(2);

  image( trailsImg, 0, 0 );       //  Display the blended difference image

 

  popMatrix();

 

  image(img,0,0);

 

  noTint();                       //  Turns tint off

  colorMode(RGB);                 //  Changes the colour mode back to the default

  opencv.copy( trailsImg );       //  Copies trailsImg into OpenCV buffer so we can put some effects on it

  opencv.blur( OpenCV.BLUR, 16 );  //  Blurs the trails image

  opencv.brightness( -10 );       //  Sets the brightness of the trails image to -20 so it will fade out

  trailsImg = opencv.image();     //  Puts the modified image from the buffer back into trailsImg

 

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

  hCycle++;                       //  Increments the hCycle variable by 1 so that the hue changes each frame

  if (hCycle > 255) hCycle = 0;   //  If hCycle is greater than 255 (the maximum value for a hue) then make it equal to 0

   

   

  makeParticles(opencv.image());

  updateParticles();

 

 

   

  if(particles.length>MAX_PARTICLES)  

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

  

  //opencv.remember();              //  Remembers the current fram 

}

 void updateParticles()

{

   imageMode(CENTER);

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

  {

   

   Particle p = particles[i];

   

   

  

    p.update();

    p.draw();

   

  }

 

   imageMode(CORNER);

 

 }

 

 void makeParticles(PImage img)

{

 

  Particle p;

  for(int i= 0; i<10; i++)

  {

    int xpos = (int) random(img.width);

    int ypos = (int) random(img.height);

    if(brightness(img.get(xpos,ypos))>100)

    {

      p = new Particle(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.65;

 

  float drag = 0.93;

  float fadeSpeed = 0;

  float shrink = 0.93;

  float gravity = 0.95;

  //float easing = 0.95;

 

 

  Particle(float xpos, float ypos)

  {

    this.xPos = xpos;

    this.yPos = ypos;

    this.xVel = random(-12,12);

    this.yVel = random(-12,12);

    this.currentScale = random(0.10, 0.35);

      

  }

 

  void update()

  {

    xVel*=drag;

    yVel*=drag;

   

    yVel+=gravity;

   

    xPos += xVel;

    yPos += yVel;

    currentAlpha -=fadeSpeed;

    currentScale*=shrink;

    rotation+=spin;

  }

 

  void draw()

  {

  

    //translate(width, 0);

    //scale(-1, 1);

    if(currentAlpha<=0) return;

    if(currentScale<=0.01) return;

   

    pushMatrix();

   

    tint(255,currentAlpha);

    translate(xPos, yPos);

    scale(currentScale);

    rotate(radians(rotation));

    image(particleImg, 0, 0);

   

    popMatrix();

  

 

 

  }

   

 

 

 

  

 

}