GENERATIVE_ART

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 5 (EVALUATION)

INDEX

STAGE 5 (EVALUATION)

The goal set at the beginning of the project has been achieved. I have created an interactive piece which takes colours and brightness values from the image taken by the webcam, and then, makes a new kinetic image using all these values, and transforming some of them (such as brightness).

I have applied a Geometrical Art based style. The outcome is interesting and well organised. And the mixture of the randomly taken colours, moves from harmony to contrast constantly creating feelings that range from strain to easiness in matter of seconds. 

Contrasting images:
brightness037brightness035

provaColors0135

Harmonious images:

provaColors0073 provaColors0054 provaColors0018

 

In the next iteration, I will change the style to explore different possibilities and experiment with the quickly changeable feelings that a kinetic image can create in the viewer.

INDEX

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

PROCESSING__ practicing with images (studio VI – pixels)

PIXELS I::

IMAGES::

img006 img022 img034 img055

VIDEO::

CODE::

PImage img1;
PImage img2;

void setup(){
img1 = loadImage(“primera.jpg”);
img2 = loadImage(“segona.JPG”);
size(img1.width,img1.height);
background(255);
}

int n=10;
int loc;
void draw(){

img1.loadPixels();
for(int y=0; y<height; y=y+n){
for(int x=0; x<width;x=x+n ){
loc= x+(y*width);
noStroke();
color c= img1.pixels[loc];
float r= red(c);
float g= green(c);
float b= blue(c);
fill(r,g,b,20);
rect(x+random(-10,10),y+random(-10,10),n,n*0.75);
}
}
imageChanger();

}

void imageChanger(){
if (mousePressed && mouseButton==LEFT || keyPressed){
img1 = loadImage(“segona.JPG”);
}

else{
img1 = loadImage(“primera.jpg”);
}
}

PIXELS II::

IMAGES::

pixels006 pixels035 pixels061 pixels120

VIDEO::

CODE::


PImage img1;
PImage img2;

void setup(){
img1 = loadImage(“primera.jpg”);
img2 = loadImage(“segona.JPG”);
size(img1.width,img1.height);
background(255);
}

int n=50;
int loc;
void draw(){

img1.loadPixels();
for(int y=0; y<height; y=y+n){
for(int x=0; x<width;x=x+n ){
loc= x+(y*width);
noStroke();
color c= img1.pixels[loc];
float r= red(c);
float g= green(c);
float b= blue(c);
fill(r,g,b,20);
rect(x+random(-10,10),y+random(-10,10),n,n*0.75);
}
}
imageChanger();

}

void imageChanger(){
if (mousePressed && mouseButton==LEFT || keyPressed){
img1 = loadImage(“segona.JPG”);
}

else{
img1 = loadImage(“primera.jpg”);
}
}

PROCESSING__ practicing integers, transactions, arrays, for loops and if statements (studio V – mill of time)

MILL OF TIME I::

IMAGES::

senyera001 senyera019 senyera033 senyera055 senyera314

VIDEO::

CODE::

color[] P={ #c42a2a, #091ff0,#f0ed09,#ffffff };
void setup(){
size(800,400);
background(255);

}
int r=32;
int q=2;

void draw(){

translate(width/2, height/2);
rotate(r);
fill(255,30);
rect(0,0,width,height);
noStroke();
for(int d=10;d<height; d=d+1){

house(d,d,P[int(random(P.length))]);
}

r=r+10;

rotate(q);
busca();

q=q+1;

}
void busca(){

for(int y=0; y<height/2; y=y+4){
triangleA(0,y);

}

}

void house(float x, int y, color c){
fill(c);
rect(x+10,y+35,30,30);

}

void triangleA(int x, int y){
fill(0);
noStroke();
triangle(x, y, x+20, y, x+10, y+20);

}


MILL OF TIME II::

IMAGES::

rellotge003 rellotge021 rellotge036 rellotge053 rellotge068 rellotge185 rellotge200 rellotge241 rellotge320 rellotge342

VIDEO::

CODE::


color[] P={ #c42a2a, #091ff0,#f0ed09,#ffffff };
void setup(){
size(800,400);
background(255);

}
int r=32;
int q=2;

void draw(){

calendar();

translate(width/2, height/2);
rotate(r);
fill(255,30);
rect(0,0,width,height);
noStroke();
for(int d=10;d<height; d=d+1){

house(d,d,P[int(random(P.length))]);
}

r=r+10;

rotate(q);
busca();

q=q+1;

}
void busca(){

for(int y=0; y<height/2; y=y+4){
triangleA(0,y);

}

}

void house(float x, int y, color c){
fill(c);
rect(x+10,y+35,30,30);

}

void triangleA(int x, int y){
fill(0);
noStroke();
triangle(x, y, x+20, y, x+10, y+20);

}

void calendar(){
String ye= str(year());
String mo= str(month());
String d= str(day());
String h= str(hour());
String m= str(minute());
String s= str(second());
String time = ye +”/”+ mo + “/” + d + ” ” + h +”:” + m + “:” + s;

if(mouseX<width/2){
fill(P[int(random(P.length))]);

}
else{
fill(0);
}
textSize(30);
text(time,mouseX,mouseY);
}