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