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

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



// a través de los métodos textWidth(), textAscent() y textDescent() pintaremos el cuadro donde se inscribe cada letra de un mensaje

String mensaje="Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who  use Processing for learning, prototyping, and production.";
PFont fontA;
void setup(){
    colorMode(HSB, 255, 255, 255);
size(400, 400);
smooth();
fontA = loadFont("Times");
frameRate(10);
noLoop();

}

void draw(){
background(255);
textFont(fontA, 36);
textAlign(LEFT);

int longitudMensaje=mensaje.length;

int posicionX=0;
    int posicionY=0;

int gap=26;

for(int posicion=0; posicion<longitudMensaje; posicion++){

    char caracterActual=mensaje.charAt(posicion);
    
    float alturaMaximaExacta=textAscent();
    float alturaMinimaExacta=textDescent();


    float anchoCaracter=textWidth(caracterActual);
    noStroke();
    fill(random(255), 140,255);

    if(posicionX+anchoCaracter>=width){
        posicionX=0;
        posicionY+=alturaMaximaExacta;
        }
    rect(posicionX, posicionY, anchoCaracter, alturaMaximaExacta);
    
    fill(0);
    text(caracterActual, posicionX, posicionY+gap);

    posicionX=posicionX+anchoCaracter;

}

}