INTERACTIVITY

ITERATIVE DESIGN (II) ___#### FINAL PIECES & CODE ####___

INDEX

ABSTRACT OF THE CONCEPT: 

Recreation of a Kaleidoscope making a camera-Kaleidoscope. And with it representing both, the finiteness found in infinity and the infinity found in finiteness.

It takes values of our finite world such as SOUND, COLOUR, BRIGHTNESS, IMAGE, AND ALSO MOMENTS. Creating a fractal-like pattern, similar to a kaleidoscope. Trying, hence, to portrait the finiteness of the moment in which the picture/video is taken, and transport it to the infinity (represented by the fractal-like patterns) in which it is found (the universe).

SOME FINAL PIECES:

jo PERLES1 perles2 ultim10081 ultim10214CINCCUATREDEUDOSNOUSETSISTRESUNAVUIT

FINAL CODE:

VOID SETUP, VOID DRAW, AND CAMERA


import processing.video.*;
Capture cam;



void setup(){
  
  cam = new Capture(this, 320, 240, 50);
  cam.start();
  background(255);
  colorMode(HSB); 
  size(640, 480);
  frameRate(4);
  smooth();
  soundSetup();
  fondoSetup();
  
}




int N=0;

void draw() {   
  
   colours();
    centre();
    soundDraw();
    tint(255,120);
    float k = getAmplitude();
  
    if (k>0.01){
      pushMatrix();
      translate(width/2, height/2);
  
    
    
    
    pushMatrix();
    scale(1, -1);
    image(cam, 0, 0); //TL--capgirada 
    scale(1,-1);
    image(cam, 0,-240); //TL--normal
      
    popMatrix();  
     pushMatrix();
   
    image(cam, 0,0); //BL--normal
    scale(1, -1);
    image(cam, 0, -240); //BL -- capgirada 
      popMatrix(); 
    
  pushMatrix();
    scale(-1,1);    
        pushMatrix();
  
    image(cam, 0,0); //BR--normal
    scale(1, -1);
    image(cam, 0, -240); //BR-- capgirada
      popMatrix(); 
         pushMatrix();
   scale(1, -1);
   image(cam, 0, 0); //TR--capgirada 
   scale(1,-1);
   image(cam, 0,-240); //TR-- normal
  
  
     popMatrix();  
popMatrix();
   
   ////SEGONES::::
   
 

    pushMatrix();
    scale(-1, 1);
    
        pushMatrix();
     image(cam, -320,0); //BR--normal
    scale(1, -1);
    image(cam, -320, -240); //BR-- capgirada
      popMatrix(); 
         pushMatrix();
     scale(1, -1);
   image(cam, -320, 0);  //TR--capgirada 

     scale(1,-1);
   image(cam, -320,-240); //TR-- normal
   
   
     popMatrix();  
    popMatrix();
    
     
           pushMatrix();
     image(cam, -320,0); //BL--normal
    scale(1, -1);
    image(cam, -320, -240); //BL -- capgirada 
   
   popMatrix(); 
   
    pushMatrix();
       scale(1, -1);
    image(cam, -320, 0); //TL--capgirada
    scale(1, -1);
    image(cam, -320,-240); //TL--normal
 
  popMatrix();  
  popMatrix(); 
  }
  
    
  }
  
 
void captureEvent(Capture c){
  c.read();
}

CENTRAL SHAPE



 int d = 100;
 int n = 50;
 int m = 50; 
 int o = 50; 
 int p = 50;
 int rot=0;

void centre(){
  
  float k = getAmplitude();
  
  if (k>0.01){
    pushMatrix();
      translate(width/2, height/2);
      rotate(rot);
      rot = rot + 1;
      drawCircle(0,0);
    popMatrix(); 
  }  
}


void drawCircle(int x, int y){
  
  int max = width;

     d=(d+20)%max;

        fill(c2[4],60);
        noStroke();
        rectMode(CENTER);
        rect(x, y, d,d);
    
    if( d >= 100){
       drawCircle2();         
    }
}


void drawCircle2(){

   int max = width; 

        n=(n+20)%max;

     if (brightness(c1[2])<=100){
        fill(c2[1],40);
        noStroke();
        ellipse(0, 0, n,n); 
    }else{
        fill(c2[2],60);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, n,n); 
    }
    
     if( n >= 100){     
      drawCircle3();   
      }
  }
 
 
  
  void drawCircle3(){

   int max = width; 

        m=(m+20)%max;

 
     if (brightness(c1[3])<=100){
        fill(c2[4],60);
        noStroke();
        ellipse(0, 0, m,m); 
    }else{
        fill(c2[0],40);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, m,m); 
    }
    
    
      if( m >= 100){     
      drawCircle4();    
    }

  }
  
  
    void drawCircle4(){

     int max = width; 
      o=(o+20)%max;

 
     if (brightness(c1[0])<=100){
        fill(c2[1],60);
        noStroke();
        ellipse(0, 0, o,o); 
    }else{
        fill(c2[3],40);
        noStroke();
       rectMode(CENTER);
        rect(0, 0, o,o); 
    }
    
    
      if( m >= 100){
      
        drawCircle5();
    
    }

  }
  
  
  
  
      void drawCircle5(){

   int max = width; 

        p=(p+20)%max;

 
     if (brightness(c1[2])<=100){
        fill(c2[0],40);
        noStroke();
        ellipse(0, 0, p,p); 
    }else{
        fill(c2[2],60);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, p,p); 
    }
    

  }

COLOUR


 color[] c1 = new color[5];
 color[] c2 = new color[5];


void colours(){
   
   c1[0] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[1] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[2] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[3] = cam.get(int(random(width/2)),int(random(height/2)));
   c1[4] = #FFFFFF;
   
  
    c2[0] = cam.get(10,15);
    c2[1] = cam.get(250,100);
    c2[2] = cam.get(60,200);
    c2[3] = cam.get(300,160);
    c2[4] = cam.get(160,120);



}


SOUND LINES, CIRCLE AND SET UP

import ddf.minim.*;

Minim minim;
AudioPlayer player;


void soundSetup(){
    minim = new Minim(this);
    player = minim.loadFile("infinity.mp3");
    player.play();
}




void soundDraw(){
  float k = getAmplitude();

    
 
  for(int i = 0; i < in.bufferSize() - 1; i++){  
    
    float x1 = map( i, 0, in.bufferSize(), 0, width );
    float x2 = map( i+1, 0, in.bufferSize(), 0, width );

if(k>0.08){
    fill(c1[4]);
    noStroke();
    ellipseMode(CENTER);
    ellipse(width/2, height/2, 150 + in.right.get(i)*50,150 + in.right.get(i+1)*1000);
    fill(c2[4]); //(map(c,0,255,0,1),50,50,100)
    strokeWeight(2);
    noStroke();
    ellipse(width/2, height/2, 50 + in.right.get(i)*1000,50 + in.right.get(i+1)*1000);
}
if(k>0.01){
    noFill();

    stroke(c2[4]);
    strokeWeight(1);

    line( x1, 450 + in.left.get(i)*1000, x2, 450 + in.left.get(i+1)*1000 );
}


  }

}

    float getAmplitude(){
  
  float n = 0;                                    
  for(int i=0; i < in.bufferSize() - 1; i+=10){   
    //println(in.mix.get(i));  
    n += abs(in.mix.get(i));                      
  }
    println(n/10,"val");

  return n/10;                                  
}


INDEX

Advertisements

ITERATIVE DESIGN (II)_##1st Round##___ STAGE 4 (TEST IT)

INDEX

This post shows how a geometrical image is painted with colours taken from random pixels of the webcam image.

I am still not sure about the style I want to use for my piece, but I will start with a technical and geometrical aesthetic. Inspired by geometric art.

“Geometric abstraction is a form of abstract art based on the use of geometric forms sometimes, though not always, placed in non-illusionistic space and combined into non-objective (non-representational) compositions.” (Wikipedia, 2015)

IMAGES::

provaColors0009 provaColors0018 provaColors0054 provaColors0073 provaColors0135

VIDEO::

CODE::

import processing.video.*;
Capture cam;
int w = 50;
int s = 0;
color c;
void setup(){

cam = new Capture(this, 640, 480, 20);
cam.start();

size(640, 480);
background(255);
frameRate(4);
smooth();

}
void draw() {
color[] c1 = new color[5];

c1[0] = cam.get(int(random(width)),int(random(height)));
c1[1] = cam.get(int(random(width)),int(random(height)));
c1[2] = cam.get(int(random(width)),int(random(height)));
c1[3] = cam.get(int(random(width)),int(random(height)));
c1[4] = #FFFFFF;

c = cam.get(width/2,height/2);

for(int y=0; y<height; y=y+w){
for(int x=0; x<width; x=x+w){
noStroke();
fill(c1[int(random(1,5))]);
rect(x, y, w, w);
}
}

int d = 400;
while(d > 0){

for(int n=0; n<80; n=n+1){
fill(c1[int(random(1,5))]);
noStroke();
ellipseMode(CENTER);
s=(s+1)%d;
ellipse(width/2,height/2, s,s);
}
d= d-50;
}

}
void captureEvent(Capture c){
c.read();
}

______________

Below, I have added the value of brightness which is also used to create the final image. When brightness is less or equal than 100, the central figure is an square, and the background is made by ellipses in squares. Whereas, when brightness is more than 100, the central figure is an ellipse and the background ones are squares.

IMAGES::

brightness013 brightness024 brightness030 brightness035 brightness037 brightness057 brightness060 brightness066 brightness076 brightness096 brightness105 brightness107

VIDEO::

CODE::

import processing.video.*;
Capture cam;
int w = 50;
int s = 0;
color c;
void setup(){

cam = new Capture(this, 640, 480, 20);
cam.start();

size(640, 480);
background(255);
frameRate(4);
smooth();

}
void draw() {
// image(cam, 0, 0);
color[] c1 = new color[5];

c1[0] = cam.get(int(random(width)),int(random(height)));
c1[1] = cam.get(int(random(width)),int(random(height)));
c1[2] = cam.get(int(random(width)),int(random(height)));
c1[3] = cam.get(int(random(width)),int(random(height)));
c1[4] = #FFFFFF;

color[] c2 = new color[5];

c2[0] = cam.get(2,3);
c2[1] = cam.get(4,6);
c2[2] = cam.get(200,44);
c2[3] = cam.get(300,80);
c2[4] = cam.get(40,50);

c = cam.get(width/2,height/2);

if (brightness(c1[2])<=100){
 for(int y=0; y<height; y=y+w){
   for(int x=0; x<width; x=x+w){
     noStroke();
      fill(c1[int(random(1,5))]);
      rect(x, y, w, w);   
   }
 }
}
else{
 for(int y=0; y<height; y=y+w){
   for(int x=0; x<width; x=x+w){
     noStroke();
      fill(c1[int(random(1,5))]);
      ellipse(x, y, w, w);   
   }
 }

}
 
 int d = 400;
 

s=(s+1)%d;

while(d > 0){

 if (brightness(c1[2])<=100){
  for(int n=0; n<80; n=n+1){
    fill(c1[int(random(1,5))]);
    noStroke();
    ellipseMode(CENTER);
      
    ellipse(width/2,height/2, s,s); 
  }
  }else{
   for(int n=0; n<80; n=n+1){
    fill(c1[int(random(1,5))]);
    noStroke();
    rectMode(CENTER);
    rect(width/2,height/2, s,s); 
  }
 
  }
    d= d-50;
}




}
void captureEvent(Capture c){
c.read();
}

REFERENCES::

Wikipedia, 2015. Geometric abstraction. [online] Wikipedia. Available on: http://en.wikipedia.org/wiki/Geometric_abstraction

INDEX

ITERATIVE DESIGN (II)_ ##1st Round##___STAGE 3 (CONSTRUCTION)

INDEX

To start,  I am taking a pixel (the one where the mouse is) from an image and painting a rectangle with the colour of this pixel. To create contrast, I have divided the value of that colour by 2, this is why the colours in the rectangle are a bit different than the ones in the image.

To set the width of the rectangle I have used the brightness value.

IMAGES::

tardor0026 tardor0066 tardor0089 tardor0091 tardor0169 tardor0170

VIDEO::

CODE::

PImage myImage;
void setup(){
myImage = loadImage(“Tardor1.jpg”);
size(myImage.width,myImage.height);
}
void draw(){
image(myImage,0,0);
color c = get(mouseX,mouseY);
fill(c/2);
noStroke();
rectMode(CENTER);
rect(width/2,height/2, brightness(c),50);
}

_________________________________________________________________

A similar exercise using the webcam image:

IMAGES::

penscolour0018 penscolour0130 penscolour0430 penscolour0435 penscolour0522 penscolour0637 penscolour0702 penscolour0775 penscolour0947 penscolour1078 penscolour1183 penscolour1346 penscolour1357

VIDEO::

CODE::

import processing.video.*;
Capture cam;

void setup(){
cam = new Capture(this, 640, 480, 20);
size(640, 480);
cam.start();
}

void draw() {
image(cam, 0, 0);
color c = get(width/2,height/2);
fill(c);
noStroke();
rectMode(CENTER);
rect(width/2,100, width,brightness(c));
}

void captureEvent(Capture m){
m.read();
}

__________________________________

Underneath, the same exercise but without the webcam image.

IMAGES:

whiteBack0172 whiteBack0271 whiteBack0428 whiteBack0457 whiteBack0581

VIDEO:

CODE:

import processing.video.*;
Capture cam;

void setup(){
cam = new Capture(this, 640, 480, 20);
size(640, 480);
cam.start();
}

void draw() {
image(cam, 0, 0);
color c = get(width/2,height/2);

background(255);
fill(c);
noStroke();
rectMode(CENTER);
rect(width/2,100, width,brightness(c));
}

void captureEvent(Capture N){
N.read();
}

INDEX