qué es el coleccionismo

Hice una página interactiva que propone la siguiente reflexión:

Qué es el coleccionismo
por qué coleccionamos
existen muchas colecciones, colecciones como listas de música, imágenes, objetos... ni siquiera tienen que ser el mismo tipo de objeto o elemento, de igual manera se pueden coleccionar cosas intangibles se pueden coleccionar experiencias.
Amigos en la red social
Canciones
Libros
Experiencias


var boxes = [];



function setup() {
 
  frameRate(10);
  createCanvas(displayWidth, displayHeight);
       
   
   
    backLayer = createGraphics(displayWidth, displayHeight);
   
     frontLayer = createGraphics(displayWidth, displayHeight);
          firstLayer = createGraphics(displayWidth, displayHeight);

   
     for (var i = 0; i < 20; i++) {
        boxes.push(new Box(random(225), random(10, 60)));
    }

}


function draw(){

 var bg =color(0);
 var fillcolor =0;
  var colourincrement=1;


   frontLayer.background(0,0,0,115);
    frontLayer.noStroke();
    frontLayer.fill(random(255));

  firstLayer.ellipse(width/2, height/2,150, 150);
   firstLayer.fill(255);

  firstLayer.noStroke();

   
   
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].show();
    }
   
    if (millis() < 20000 && mouseIsPressed)
 
 
    {  backLayer.line(mouseX, mouseY, pmouseX, pmouseY);
   }  

image( backLayer, 0, 0,0 );
image( frontLayer, 0, 0,0 );
image( firstLayer, 0, 0,0 );




if (  millis() > 20000 && fillcolor>=0) {
  fillcolor+=colourincrement;
             bg= fillcolor;
 bg = color (255,255,255);
  background(bg);


 
  frontLayer.background(0,0,0,0);
  image( backLayer, 0, 0,0 )
}



}




function mousePressed() {
    for (var i = 0; i < boxes.length; i++) {
        //checking to see if the mouse is over the box and turning it white if it is
        if (boxes[i].boxover === true) {
            boxes[i].locked = true;
        } else {

            boxes[i].locked = false;
            print("mouse isn't pressed")
        }
        boxes[i].xoffset = mouseX - boxes[i].xpos;
        boxes[i].yoffset = mouseY - boxes[i].ypos
        print(boxes[i].locked);
    }
    return false;
}

function mouseDragged() {
   for (var i = 0; i < boxes.length; i++) {
       if (boxes[i].locked) {
          boxes[i].xpos = mouseX - boxes[i].xoffset;
            boxes[i].ypos = mouseY - boxes[i].yoffset;
           
        }
    }
}



 


function mouseReleased() {
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].locked = false;
         
    }}
       




function Box(tempColor, tempSize) {
 
    this.xpos = random(width);
    this.ypos = random(height);
    this.boxsize = tempSize;
    this.boxover = false;
    this.locked = false;
    this.c = tempColor
    this.xoffset = 0;
    this.yoffset = 0;
 this.IsIn =false;
   


 this.show = function() {
 

         
      if (mouseX > this.xpos - this.boxsize && mouseX < this.xpos + this.boxsize &&
            mouseY > this.ypos - this.boxsize && mouseY < this.ypos + this.boxsize) {
            this.boxover = true;
            frontLayer.fill(0);

            if (mouseIsPressed && this.boxover === true) {
                frontLayer.stroke(255);
                frontLayer.strokeWeight(3);
                 frontLayer.smooth(3);
            } else {
                frontLayer.noStroke();
            }

        } else {
            this.boxover = false;
            noStroke();
        }
   
     
     
      frontLayer.ellipse(this.xpos, this.ypos, this.boxsize, this.boxsize);
frontLayer.noStroke();
        }
       
       
}
       
       
       
       
       
 

processing coleccionismo

DragMe[] drags = new DragMe[20];

 PGraphics backLayer;
 color backgr;
 color fillcolor=0;
 float colourincrement=1;

void setup() {
 size(500, 500);
  for (int i = 0; i < drags.length; i++) {
    drags[i]  = new DragMe();
  }
  backLayer = createGraphics(width, height, g.getClass().getName());

}

void draw()

{
frameRate(10);
background(backgr);


  {
    backLayer.beginDraw();
    backLayer.noFill();
   
    if (mousePressed ==true && t()) {
      backLayer.line( pmouseX, pmouseY, mouseX, mouseY );
      backLayer.stroke(0);
      backLayer.endDraw();  }
    image( backLayer, 0, 0 );
     }
 

  for (int i = 0; i < drags.length; i++)
  {
    drags[i].update(); }
 
{
ellipse(width/2.5, height/2.5,110, 110);
}

 }
 boolean t() {
  return millis()  < 20000;
}


void mousePressed() {
  for (int i = 0; i < drags.length; i++) {
    if (!drags[i].isOver())
      drags[i].dontMove = true;
    drags[i].offset_x = mouseX - drags[i].pos_x;
    drags[i].offset_y = mouseY - drags[i].pos_y;
  }
}

void mouseReleased() {
  for (int i = 0; i < drags.length; i++) {
    drags[i].locked = false;
    drags[i].dontMove = false;
  }

}


class DragMe {
 float pos_x, pos_y;
 float SIZE = random(10,45);
  float prev_x, prev_y;
  boolean locked;
  boolean dontMove;
  color c = color (255);
  float offset_x, offset_y;

  DragMe() {
    pos_x = random(width-SIZE);
    pos_y = random(height-SIZE);
 
  }

  void update() {
 
  ellipse(pos_x, pos_y, SIZE, SIZE);    

  fill(c);
  ellipseMode(CORNER);
  noStroke();
  { if (isOver() && !locked && !dontMove || locked && !dontMove )
      c = color (255);

    if (isClicked()) {
      locked = true;
    }
   
    if(isIn()){
      locked = false;
     
    }

    if (locked && !dontMove) {

      pos_x =  mouseX - offset_x;
      pos_y =  mouseY - offset_y;
    }
 
      if (time() && fillcolor>=0) {
          fillcolor+=colourincrement;

 backgr= fillcolor;
 c = color (255,255,255,0);}

   if (t2() ){
 backgr= 255;}


 
  }


}

  boolean isOver() {
    float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return mouseX >= pos_x && mouseX <= right_x &&
      mouseY >= pos_y && mouseY <= bottom_y;
  }

  boolean isClicked() {
    return isOver() && mousePressed && !dontMove;
  }
  boolean isIn() {
     float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return right_x >= width/2.5 + SIZE && right_x <= width/2.5 + 100 &&
    bottom_y >= height/2.5 + SIZE  && bottom_y <= height/2.5  + 100;
  }
    boolean time() {
  return millis()  > 20000;
}
 boolean t2() {
  return millis()  > 20500;
}
 
}

COLECCIONISMO.PDE

DragMe[] drags = new DragMe[20];

 PGraphics backLayer;
 color backgr;
 color fillcolor=0;
 float colourincrement=1;

void setup() {
 size(500, 500);
  for (int i = 0; i < drags.length; i++) {
    drags[i]  = new DragMe();
  }
  backLayer = createGraphics(width, height, g.getClass().getName());

}

void draw()

{
frameRate(10);
background(backgr);


  {  
    backLayer.beginDraw();
    backLayer.noFill();
    
    if (mousePressed ==true && t()) {
      backLayer.line( pmouseX, pmouseY, mouseX, mouseY );
      backLayer.stroke(0);
      backLayer.endDraw();  }
    image( backLayer, 0, 0 );
     }
  

  for (int i = 0; i < drags.length; i++)
  {
    drags[i].update(); }
   
{
ellipse(width/2.5, height/2.5,110, 110);
}

 }
 boolean t() {
  return millis()  < 20000;
}


void mousePressed() {
  for (int i = 0; i < drags.length; i++) {
    if (!drags[i].isOver())
      drags[i].dontMove = true;
    drags[i].offset_x = mouseX - drags[i].pos_x;
    drags[i].offset_y = mouseY - drags[i].pos_y;
  }
}

void mouseReleased() {
  for (int i = 0; i < drags.length; i++) {
    drags[i].locked = false;
    drags[i].dontMove = false;
  }

}


class DragMe {
 float pos_x, pos_y;
 float SIZE = random(10,45);
  float prev_x, prev_y;
  boolean locked;
  boolean dontMove;
  color c = color (255);
  float offset_x, offset_y;

  DragMe() {
    pos_x = random(width-SIZE);
    pos_y = random(height-SIZE);
   
  }

  void update() {
  
  ellipse(pos_x, pos_y, SIZE, SIZE);     

  fill(c);
  ellipseMode(CORNER);
  noStroke();
  { if (isOver() && !locked && !dontMove || locked && !dontMove )
      c = color (255);

    if (isClicked()) {
      locked = true;
    }
    
    if(isIn()){ 
      locked = false;
       
    }

    if (locked && !dontMove) {

      pos_x =  mouseX - offset_x;
      pos_y =  mouseY - offset_y;
    }
  
      if (time() && fillcolor>=0) {  
          fillcolor+=colourincrement;

 backgr= fillcolor;
 c = color (255,255,255,0);}

   if (t2() ){ 
 backgr= 255;}


  
  }


}

  boolean isOver() {
    float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return mouseX >= pos_x && mouseX <= right_x &&
      mouseY >= pos_y && mouseY <= bottom_y;
  }

  boolean isClicked() {
    return isOver() && mousePressed && !dontMove;
  }
  boolean isIn() {
     float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return right_x >= width/2.5 + SIZE && right_x <= width/2.5 + 100 &&
    bottom_y >= height/2.5 + SIZE  && bottom_y <= height/2.5  + 100; 
  }
    boolean time() {
  return millis()  > 20000;
}
 boolean t2() {
  return millis()  > 20500;
}
  
}

p5js

La parte más menos conveniente de usar processing era el cómo compartir una pieza generada con éste, se puede hacer un archivo ejecutable para descargar o un applet para incrustrar en una página web el cual podría o no cargar dependiendo de las actualizaciones de java en la computadora del usuario. Estas características le quitan muchísima utilidad a processing, sin embargo ahora tenemos p5js!! una librería para utilizar HTML5 en vez de java. Esto significa que el sketch que hagamos en processing puede correr dentro de una hoja de html e interactuar con sus etiquetas haciendo muchísimo más amigable y probable el encuentro con una pieza creada a partir de processing.

He estado trabajando en una pieza sobre coleccionismo y en vez de terminarla en processing 3.0 voy a intentar portarla a p5.js.

coleccionismo

La idea de este proyecto es realizar un programa intuitivo mediante el cual genere en el usuario una reflexión sobre el movimiento en su recorrido en el espacio y con los elementos otorgados para explorar.
Este trabajo es para una publicación sobre coleccionismo y es probable que sea publicada por Operación Hormiga
Estoy realizando este programita por medio de processing 3.0. La aplicación  debe funcionar de la siguiente manera: se otorgan varios elementos y la posibilidad de arratrarlos en la pantalla hasta llegar a un punto en el espacio donde los elementos se convierte en inmóviles y los elementos desaparecen para mostrar solo el recorrido marcado por el movimiento del puntero.
La programación es bastante sencilla pero forma parte de la pieza de alguna manera


DragMe[] drags = new DragMe[15];

 PGraphics topLayer;
 PGraphics toperLayer;

 color backgr;

void setup() {
  size(500, 500);
  for (int i = 0; i < drags.length; i++) {
    drags[i]  = new DragMe();
  }
  topLayer = createGraphics(width, height, g.getClass().getName());

}
void draw() {
  
  background(backgr);

  {  
    topLayer.beginDraw();
    topLayer.noFill();
    topLayer.stroke(0 ); 
    if (mousePressed ==true) {
      topLayer.line( pmouseX, pmouseY, mouseX, mouseY );
      topLayer.endDraw();  }
    image( topLayer, 0, 0 );
  }

  for (int i = 0; i < drags.length; i++) {
    drags[i].display();
    drags[i].update();}
  
  for (int i = 0; i < drags.length; i++) {
    drags[i].fondo();}

{
ellipse(width/2.5, height/2.5,110, 110);
fill(255);}
}

void mousePressed() {
  for (int i = 0; i < drags.length; i++) {
    if (!drags[i].isOver())
      drags[i].dontMove = true;
    drags[i].offset_x = mouseX - drags[i].pos_x;
    drags[i].offset_y = mouseY - drags[i].pos_y;
  }
}

void mouseReleased() {
  for (int i = 0; i < drags.length; i++) {
    drags[i].locked = false;
    drags[i].dontMove = false;
  }
}

class DragMe {
  float pos_x, pos_y, SIZE = 25;
  float prev_x, prev_y;
  boolean locked;
  boolean dontMove;
  boolean todo;
  color c = color (255);
  float offset_x, offset_y;

  DragMe() {
    pos_x = random(width-SIZE);
    pos_y = random(height-SIZE);
   
  }

  void update() {
    if (isOver() && !locked && !dontMove || locked && !dontMove )
      c = color (255);
    else
      c = color (255);

    if (isClicked()) {
      locked = true;
    }
    
    if(isIn()){ 
      locked = false;
      todo = true;
    }
      
    if (locked && !dontMove) {

      pos_x =  mouseX - offset_x;
      pos_y =  mouseY - offset_y;
    }
  

}



  void display() {
    fill(c);
    ellipse(pos_x, pos_y, SIZE, SIZE);
    ellipseMode(CORNER);
    noStroke();

  }

  boolean isOver() {
    float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return mouseX >= pos_x && mouseX <= right_x &&
      mouseY >= pos_y && mouseY <= bottom_y;
  }

  boolean isClicked() {
    return isOver() && mousePressed && !dontMove;
  }
  boolean isIn() {
     float right_x = pos_x + SIZE;
    float bottom_y = pos_y + SIZE;
    return right_x >= width/2.5 + SIZE && right_x <= width/2.5 + 100 &&
    bottom_y >= height/2.5 + SIZE  && bottom_y <= height/2.5  + 100; 
  }

void fondo(){
if (todo == true)
backgr= 255;}
}

Segunda prueba de programación

Para programar este tablero existen métodos que combinan Processing, que funciona como interfaz gráfica y Arduino, que permite cargar la programación en el microcontrolador. Varios desarrolladores han creado librerías para controlar este dispositivo. Todos estos recursos son abiertos y modificables.

En la segunda prueba utilicé una librería llamada PeggyDraw2. Ésta es una aplicación de Processing que permite hacer animaciones sencillas dibujando sobre una cuadrícula de 25 x 25 puntos. La animación se guarda automáticamente como programa de Arduino listo para cargar en el tablero. Esta herramienta me permitió experimentar con formas simples en movimiento.

 -------------------------------------------------------------------------------------------------------------

Processing es un software libre creado por Casey Reas y Ben Fry que utiliza un lenguaje de programación orientado a creadores audiovisuales basado en Java.

PeggyDraw 2. Es una librería construida en Processing, open source y adaptabe creada por Windell H Oskay de Evil Mad Scientist Laboratories, y Matt Mets, de http://cibomahto.com.

Todos las librerías para controlar Peggy2 se encuentran en el depositorio de los creadores: https://code.google.com/p/peggy/downloads/list

Masking on processing

SKETCH RESUELTO


//


import processing.video.*;

color black = color(255);
color white = color(0);
int numPixels;
Capture cam;


void setup() {




  size(320, 240);
  strokeWeight(5);
  cam = new Capture(this, width, height, 24);
  numPixels = cam.width * cam.height;
  noCursor();
  smooth();

  cam.frameRate(12);
}


void draw() {
  if (cam.available()) {
    cam.read();
    int threshold= 70;
    float pixelBrightness;
    loadPixels();
    for (int i = 0;i < numPixels; i++) {
      pixelBrightness = brightness(cam.pixels[i]);
      if (pixelBrightness > threshold) {
        pixels[i] = white;
      }
      else {
        pixels[i] = black;
      }
    }

    updatePixels();
    int testValue = get(mouseX, mouseY);
    float testBrightness = brightness(testValue);
    if (testBrightness > threshold) {
      fill(black);
    }
    else {
      fill(white);
    };


    PImage Img = loadImage(

    "t.png");
    PImage Img2 = loadImage("r.png");

    cam.mask(Img);
    image(cam, 0, 0);
    image(Img2, 0, 0);
  }
}

La recursion en el arte

Dejando atrás la idea de usar datamoshing, intento hacer que un video sea recursivo utilizando processing 1.5.1 y la library de video de processing.

En processing, una función recursiva o recurrente es una función que expresa la solución de un problema en términos de la llamada a sí misma. Este tipo de algoritmos aparecen en la naturaleza, en este caso me interesa en las secuencias del número de Fibonacci y la función fractal.

El arte emplea una función recursiva todo el tiempo, pues es un sistema que se va definiendo a través de  si mismo. El arte no acepta definiciones pero habla de sí todo el tiempo. Art is art everything else is everything else.- Ad Reindhart

Cero y uno

Aquí un sketch de processing que aún no logro exportar :(. Será un archivo ejectuable para mac y pc que despliegue un espacio gris en el que nuestro cursor tendrá un doble que se mueva en dirección contraria a éste. Si los dos cursores se llegan a tocar desaparecen.



PImage a;
int x;
int y;

void setup() {
  size(800, 600);


  a = loadImage("pointer.jpg");

}

void draw()
{


  background(102);

  image(a, x, y);
  x= width -mouseX;
  y= height -mouseY;

  if (x == mouseX && y == mouseY) {
    //||
    tint (0, 0, 0, 0);
    noCursor();
  }
  else {
    tint (255, 255, 255, 255);

    cursor(ARROW);
  }
}

Pienso en decisiones programadas, el si, el no, prendido, apagado, los caminos y el todo.

var a;
var x;
var y;

function setup() {
  createCanvas(displayWidth, displayHeight);


  a = loadImage("pointer.jpg");

}

function draw()
{


  background(102);

  image(a, x, y);
  x= width -mouseX;
  y= height -mouseY;

  if (x == mouseX && y == mouseY) {
    //||
    tint (0, 0, 0, 0);
    noCursor();
  }
  else {
    tint (255, 255, 255, 255);

    cursor(ARROW);
  }
}

Masking in processing

Estoy intentando hacer una captura de video con una máscara que sólo deje ver la imagen capturada através de una tipografía. La idea es que el texto aparezca cuando la cámara capte la sombra de las personas, a ausencia de público, ausencia de palabras. El problema que tengo que es que la mask sólo le hace corte al efecto de captura de video. Estoy utilizando capas en .png para lograr la transparencia, pero al parecer processing toma al blanco como transparencia
Lo más cercano que he logrado a lo que quiero se ve así:

Aquí el código:

import processing.video.*;
color black = color(0);
color white = color(255);
int numPixels;
Capture cam;

void setup() {


size(320, 240);
strokeWeight(5);
cam = new Capture(this, width, height, 24);
numPixels = cam.width * cam.height;
noCursor();
smooth();

cam.frameRate(12);
}
void draw(){
if(cam.available()){
cam.read();
int threshold= 127;
float pixelBrightness;
loadPixels();
for(int i = 0;i < numPixels; i++){
pixelBrightness = brightness(cam.pixels[i]);
if (pixelBrightness > threshold){
pixels[i] = white;
}
else {
pixels[i] = black;
}
}
updatePixels();
int testValue = get(mouseX, mouseY);
float testBrightness = brightness(testValue);
if (testBrightness > threshold) {
fill(black);
} else {
fill(white);
};


PImage Img = loadImage(

"true.png");
cam.mask(Img);
image(cam,0,0);



}
}

Sketch circulo

Sketch circulo

void setup ()
{
size(500,350);
background (0);
noStroke();
smooth();
frameRate(24);
}
float x1, y1, rad1;
int deg=0;
int r=255;
int g=255;
int b=255;


void draw ()
{
deg=deg+5;
rad1= (PI/180)*deg;
x1=sin(rad1)*100+(width/2);
y1=cos(rad1)*100+(height/2);
point(x1,y1);
background(0);
fill(r,b,g);
ellipse(x1, y1,50,50);
if (deg>=360)
{
r= int (random(255));
g= int (random(255));
b= int (random(255));
deg=0;
}
else if (deg==180)
{
r= int (random(255));
g= int (random(255));
b= int (random(255));

}

}

probando...

He estado practicando con processing y aunque no he hecho algo que realmente me guste, creo que ya estoy comprendiendolo más y quise hacer probar si podía subirlo a internet, pero por lo que vi blogger no me deja utilizar servidores ftp; así que hice un sitio en www.0catch.com y utilice el cuteftp para entrar al servidor y subir los archivos, y aunque el resultado no es del todo satisfactorio, aquí y aquí las primeras pruebas.

El primer ejercicio es un desastre en el que estuve probando con los comandos y el segundo trate de hacer una especie de círculo cromáticos, aqui los códigos:

void setup()
{


size(400, 400);
}


void draw2() {

if (mouseX <>
background(255);
}
else if (mouseX <>
background(127);
}
else {
background(0);
}
}
void draw() {
background(255);


fill(0, 230, 100, 20);
noStroke();
rect(58, 50, 250, 150);

fill(22, 200, 50, 30);
noStroke();
rect(50, 50, 245, 150);

fill(120, 250, 25, 20);
noStroke();
rect(20, 65, 400, 140);

fill(134, 240, 214, 20);
noStroke();
rect(40, 70, 250, 300);

fill(10, 200, 10, 20);
noStroke();
rect(75, 35, 80, 150);

fill(34, 217, 240, 20);
noStroke();
rect(15, 35, 100, 270);

noFill();
stroke(34, 217, 240, 50);

bezier(30, 300, 80, 0, 320, 180, 370, 40);

stroke(34, 217, 240, 30);
bezier(23, 310, 80, 10, 320, 190, 370, 50);

stroke(34, 217, 240, 15);

bezier(13, 320, 80, 20, 320, 200, 370, 66);
}



void setup() {
size(400, 400);
background(255);
}

void draw() {



if (mouseX > 0 && mouseX <>
background (195, 6, 198);
}


if (mouseX > 101 && mouseX <200>
background (242, 0, 134);
}

if (mouseX > 201 && mouseX <300>
background (255, 0, 0);
}


if (mouseX > 301 && mouseX <400>
background (255, 111, 21);
}

if (mouseY > 200 && mouseX > 0 && mouseX <>
background (0, 0, 255);
}
if (mouseY > 200 && mouseX > 101 && mouseX <>
background (0, 255, 172);
}

if (mouseY > 200 && mouseX > 201 && mouseX <300>
background (0, 255, 0);
}

if (mouseY > 200 && mouseX > 301 && mouseX <>
background (255, 255, 0);
}
}