Comienza con un cuadrado en el centro y vas incrementando sus dimensiones. Ahi abajo encontraras una demostracion que he hecho para ti. Ahora tu tarea es manejar mas cuadrados siguiendo el concepto de un tren de cuadrados, excatmanete lo que quieres hacer. Comienza mostrando dos cuadrados, despues tres y mira que modelo surge que puedas seguir.
Nota que el color cambia de acuerdo con la dimension del cuadro. Comienza azul y cuando se have tan grande como el ancho de la pantalla, se vuelve mas rojo. Hay otras strategias para este efecto como utlizar una mascara. Prefiero que te concentres en la generacion de los cuadrados primero y talvez el efecto que he mostrado ahora con los colores te será suficiente.
Kf
//===========================================================================
// FINAL FIELDS:
final color COLD_COL=color(10,10,250);
final color WARM_COL=color(250,10,10);
//===========================================================================
// GLOBAL VARIABLES:
float cw; //current width
float ch; //current height
color c;
//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:
void settings(){
size(400,600);
}
void setup(){
textAlign(CENTER,CENTER);
rectMode(CENTER);
noFill();
strokeWeight(2); //This controls the width of the square
cw=20; //Init values
ch=20;
c=getColor();
}
color getColor(){
return lerpColor(COLD_COL, WARM_COL,2*cw/width);
}
void draw(){
background(10);
translate(width/2,height/2);
stroke(getColor());
rect(0,0,cw,ch);
cw+=2;
ch+=2;
//Check if edge is reached. If so, reset
if(cw>width){
cw=20; //Reset to init values
ch=20;
}
}
