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