/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://studio.sketchpad.cc/sp/pad/view/ro.dalWbwghYA9/rev.485
 * 
 * authors: 
 *   juanantonioruz
 *   jaruz
 *   juanantonioruz

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



http://processing.org/reference/map_.html
/* Convierte o traslada un número de un rango a otro. Como parametros recibe: (1)el numero a convertir, (2,3) limites de rango inicial, (4,5) limites de rango final. */

// vamos a dibujar una serie de filas de rectangulos aplicando una escala de color según procentaje y numero de rectangulos en cada fila basándonos en http://studio.sketchpad.cc/sp/pad/view/EMOQvY46tS/rev.886


void setup(){
    colorMode(HSB, 255, 255, 255, 255);
    size(500, 300);
    background(0);
    frameRate(5);
    //noLoop();
}

int numeroFilas=10;
int numeroMaximo=30;
int numeroMinimo=3;

//  la función map() nos ayuda a encontrar el procentaje de una escala en relación a otra... en nuestro caso calcular el valor de saturacion en función de posicion (numero) de ladrillo en fila y numero de ladrillos en fila

void draw(){

    int altoFila=height/numeroFilas;

    for(int i=0; i<numeroFilas;i++){
        
        int numeroLadrillos=random(numeroMinimo, numeroMaximo);
        int anchoLadrillo=width/numeroLadrillos;
        int posicionYFila=i*altoFila;


        for(int j=0;j<numeroLadrillos; j++ ){

        // el valor a transformar es "j" que representa al numero de ladrillo dentro de la escala 0 a numeroLadrillos. Y la escala definitiva sería la de 0 a 255 definida en el colorMode(HSB, 255,255, 255, 255);
        int saturacionLadrillo=map(j, 0, numeroLadrillos-1, 0, 255);

            int posicionXLadrillo=j*anchoLadrillo;

            // sustituimos de HSB la s por "saturacionLadrillo"
            // colocamos el Hue en un valor fijo para toda la "pared de ladrillos"
            stroke(random(30, 70), saturacionLadrillo, 150);
            //noStroke();
            fill(50, saturacionLadrillo, 150,5);
            rect(posicionXLadrillo, posicionYFila, posicionXLadrillo+anchoLadrillo, posicionYFila+altoFila);
            }    
    }

}