> show canvas only <


/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://codigodelaimagen.sketchpad.cc/sp/pad/view/ro.80O7Yn6YZhO/rev.247
 * 
 * authors: 
 *   emilio gonzález villegas

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




/* intento que el inicio del proceso sea mas suave pero 
no lo consigo. Cuelgo un ejemplo de lo que quiero en otro sketchpad*/

int myWidth=500;
int myHeight=100;
int posX=0;
int posY=0; 
PGraphics pg; 
void setup() {
  size(500,100);
  background(0);
  smooth();
  frameRate(10);
  loop();
  colorMode(RGB,100);
  pg = createGraphics(myWidth,myHeight,JAVA2D);
  pg.beginDraw();
  pg.fill(random(255),255,255,50);
  pg.noStroke();
  pg.rect(0,0,500,100);
  pg.endDraw();
}
void draw() {

  int colorA=color(random(00,10),random(0,100),random(90,255));
  int colorB=color(random(50,150),random(150,184),214,100);

  int posX=0;
  int posY=0; 

  //int coordenadaY=0;

  rect(posX,0,10,10);

  float a = 0.0;
  float inc = TWO_PI/60;

  posX=posX+frameCount*10;

  fill(255,15);
  noStroke();
  rect(0,0,10,10);
  pushMatrix();
  for(int i=0; i<100; i=i+4) {
    line(posX,posY, posX, 50+sin(a)*40.0);
    a = a + inc;
  }
  translate(posX,0);

  image(pg,0,0,20,100);
  popMatrix();

  stroke(colorB);
  fill(colorA);
  rect(posX,0,10,10);

  // background(0);
  //posY=posY+20;
  //salto de linea de x
  //int advX=posX-myWidth;

  int d=frameCount;

  boolean tope=(d>=50);
  if (tope) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth,posY,10,10);
  }
  boolean tope2=(d>=100);
  if (tope2) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*2,posY,10,10);
  }
  //int advX=posX-myWidth;
  boolean tope3=(d>=100);
  if (tope3) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*3,posY,10,10);
  }
  boolean tope4=(d>=100);
  if (tope4) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*4,posY,10,10);
  }
  boolean tope5=(d>=100);
  if (tope5) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*5,posY,10,10);
  }
  boolean tope6=(d>=100);
  if (tope6) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*6,posY,10,10);
  }
  boolean tope7=(d>=100);
  if (tope7) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*7,posY,10,10);
  }
  boolean tope8=(d>=100);
  if (tope8) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*8,posY,10,10);
  }
  boolean tope9=(d>=100);
  if (tope9) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*9,posY,10,10);
  }

  float posAnteriorY=0;
  for( posY=0; posY<100;posY=posY+10) {
    stroke(random(200,255), 50);
    strokeWeight(random(1));
    line (0, posY, posX, posY);
    line(0,myHeight,posX,posY);
    line(posX,0,posX,posY);
  }

  boolean tope10=(d>=100);
  if (tope10) {
    int movY=0;
    movY=posY+10;
    translate(0,movY);
    rect(posX-myWidth*10,posY,10,10);

    if (frameCount>500)noLoop();
  }


  /*
  stroke(colorA);
   fill(colorA);
   rect(0,0,10,10);
   stroke(colorB);
   rect(posX,posY,10,10);*/
  println (frameCount);
}

/*void mousePressed() {
 loop();
 frameRate(10);
 noFill();
 stroke(0);
 float posR=random(1,10);
 rect(posR,posR,10,10);
 }*/