Interactive Illustration

Having discussed the project further with the Course Leader I realised I needed to look at the brief in more depth. I think I got carried away a little with the project, that fact that it was Illustration and the chance to do some painting and drawing on paper.

As the brief states; to demonstrate how illustration can reinvent itself as a powerful tool for promotion and expression with the world of music.

I've decided to use the 'Nike Magic' Installation (http://www.youtube.com/watch?v=L3WLWWNbW0U) I created for the 'Interactive Design' module, created in 'Processing' and Photoshop as the inspiration for the diesel brief. Whilst my knowledge is very limited in Processing the fact you can use existing code, adapt it for your own needs gives you huge potential for 'Interactive Illustration', even more so, using Illustrators to work along Processing experts to create magical interactive illustrations that could feature in concerts, high street music stores for promoting albums.

You could even get fans of the bands to create their own artwork, submit them and see their art work brought to life by the Processing experts.

Regarding on-line interaction, I'm not sure whether you would have to have the necessary application to make it work or whether it's coded in such away that all you need is a webcam.

D&AD 2011_Illustration

CLIENT: DIESEL

BRIEF:

Create an Illustrated interpretation of 2 musical tracks that are experienced by the viewer in an Unconventional and Pioneering way.

BAND: THE SMASHING PUMPKINS

The Smashing Pumpkins have a diverse, densely layered, and guitar-heavy sound, containing elements of gothic rock, new wave, heavy metal, grunge, dream pop, psychedelic rock, arena rock, shoegazer-style production and, in later recordings, electronica. Frontman Billy Corgan is the group's primary songwriter, his grand musical ambitions and cathartic lyrics have shaped the band's albums and songs, which have been described as "anguished, bruised reports from Billy Corgan's nightmare-land".

[http://en.wikipedia.org/wiki/The_Smashing_Pumpkins]

From the soft layered ballads such as ‘Cupid de Locke’ (Mellon Collie and the Infinite Sadness) to the dark loud abrasive track, ‘Bodies’, (Mellon Collie and the Infinite Sadness) The Smashing Pumpkins became one of the most commercially successful and critically acclaimed bands of the 1990s.

The group's videos so often avoid the literal interpretation of the song lyrics and this will be carried into the illustrations.

CONCEPT.1_ CONTRASTS (Quiet and Loud)

As The Smashing Pumpkins have such a distinctive contrast of styles they can often create different emotions.

The object is to try and tap into those feelings by using textures to convey the emotions and layer them up, bringing the songs alive.

For the quiet and loud song’s, using light and dark paint in an abstract way as the music bed, building up with mixed media, collage of abstract images, pencil, acrylic paint, really working into it, almost giving the illustration a tactile feel.

CONCEPT.2_ 3D AUDIO WAVES

Using the Audio waves of the tracks as the canvas by making them a physical 3D platform to work on, (material still needs to be thought out more but initial feeling was a plastic mould)

Following the journey of the track and highlighting changes within the song with use of abstract imagery.

Again the aim is to bring the songs alive by giving it an almost 3D feel to it.

TRACKS

Still to be sorted out

MEDIUM?

Wood . Paper . Collage . Paint . Pencil . Digital

These Images had a certain resonance and were chosen whilst listening to the Smashing Pumpkins.

sound waves

attracted to light_Moth timeline

textures

Nike Magic Installation

I see the Nike Magic Installation featured in a big Nike store window. It can be played all through the day but it would be at its most effective at night especially as it's a night scene with the Northern Lights and the glowing Nike ticks really standing out as people participate or just walk by and create Magic on the streets.

Video link to Nike Magic Installation: http://www.youtube.com/watch?v=L3WLWWNbW0U

Nike Magic Store Installation

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

  

 

 

  }

   

 

 

 

  

 

}