> show canvas only <


/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://designuniandes.sketchpad.cc/sp/pad/view/ro.$1x$Bbajdw6/rev.1
 * 
 * authors: 
 *   Natalia Garcia

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



// This sketch builds on a prior work, "Assignment 4: Interaction", created by Hernando Barragan
// http://designuniandes.sketchpad.cc/sp/pad/view/ro.B4VbtZTzKDqjC4/rev.3

// variables de los botones 
// boton 1 = herramienta 5 (borrar)
// boton 2 = color 1
// boton 3 = color 2
// boton 4 = herramienta 1 (lineas)
// boton 5 = herramienta 2 (elipses)
// boton 6 = herramienta 3 (mas)
// boton 7 = herramienta 4 (menos)
// boton 8 = herramienta 6 (panel colores)

int boton1x=20, boton1y=20, boton1w=20;
int boton2x=60, boton2y=220, boton2w=20;
int boton3x=100, boton3y=220, boton3w=20;
int colorcito = 0;


int boton4x=20, boton4y=60, boton4w=20;
int boton5x=20, boton5y=100, boton5w=20;
int herramientica = 0;

int boton6x=20, boton6y=140, boton6w=20;
int boton7x=20, boton7y=180, boton7w=20;
int tamanoe = 4;
int tamanol = 40;
int boton8x=22, boton8y=220, boton8w=20;
int pintar = 0;
int paletax=50, paletay=210, paletaw=120,paletah=80;
int borrar=0;

int boton9x=140, boton9y=220, boton9w=20;
int boton10x=60, boton10y=260, boton10w=20;
int boton11x=100, boton11y=260, boton11w=20;
int boton12x=140, boton12y=260, boton12w=20;


void setup() {
  size(400, 400);
        background(255);

}


void draw() {
  
    // permite cerrar la paleta de color o mantenerla abierta
 if(mousePressed == true){
   if((mouseX<20)||(mouseY<paletay)||(mouseX>paletax+paletaw)||(mouseY>paletay+paletah)){
   pintar=0;
   }else if((mouseX<50)&&(mouseY>170)){
      pintar=0;
 }else{
   pintar=pintar;
 }
 }
 
 
 //paleta de colores
 if(pintar ==1){
   fill(50,200,220);
  stroke(50,200,220);
  rect(paletax,paletay,paletaw,paletah);
  
    //btn2
    
     for (int i = 1; i < 18; i = i+1) {

  stroke(10*i,40*i,10*i);
    line(boton2x+1, boton2y+1, boton2x+18-i, boton2y+18);
  line(boton2x+1, boton2y+1, boton2x+18, boton2y+19-i);
     }
  noFill();
  stroke(0);
  rect(boton2x, boton2y, boton2w, boton2w);
  
 
  //btn3
  fill(0, 0, 255);
  stroke(0);
  rect(boton3x, boton3y, boton3w, boton3w);


  //bton9
   fill(255, 0, 0);
  stroke(0);
  rect(boton9x, boton9y, boton9w, boton9w);
  
  //btn10
    for (int i = 1; i < 18; i = i+1) {

  stroke(40*i,10*i,50*i);
    line(boton10x+1, boton10y+1, boton10x+18-i, boton10y+18);
  line(boton10x+1, boton10y+1, boton10x+18, boton10y+19-i);
     }
  noFill();
  stroke(0);
  rect(boton10x, boton10y, boton10w, boton10w);
  
  //bton11
   fill(0, 255, 0);
  stroke(0);
  rect(boton11x, boton11y, boton11w, boton11w);
  
   //bton12
   fill(255, 255, 0);
  stroke(0);
  rect(boton12x, boton12y, boton12w, boton12w);
  
  
 }else{
  
     pintar=2;
 
 }
 
 /*if(borrar ==1){
 fill(255);
  stroke(255);
     rect(paletax,paletay,paletaw,paletah);
 }
 */
  
 
  // verifica el boton 1 y borra y resetea color y herramienta
  if (mousePressed == true) {
    if ((mouseX>boton1x)&&(mouseX<boton1x+boton1w)&&
      (mouseY>boton1y)&&(mouseY<boton1y+boton1w)) {
      background(255);
      colorcito = 0;
      herramientica = 0;
      tamanol = 40;
      tamanoe = 4;
      pintar = 0;
      int pcolor1=0;
int pcolor2=0;
    }
  }
  // verifica el boton 2 y escoje el color 1
  if ((mousePressed == true)&&(pintar==1)) {
    if ((mouseX>boton2x)&&(mouseX<boton2x+boton2w)&&
      (mouseY>boton2y)&&(mouseY<boton2y+boton2w)) {
      colorcito = 1;
    }
  }
  // verifica el boton 3 y escoje el color 2
  if ((mousePressed == true)&&(pintar==1)) {
    if ((mouseX>boton3x)&&(mouseX<boton3x+boton3w)&&
      (mouseY>boton3y)&&(mouseY<boton3y+boton3w)) {
      colorcito = 2;
    }
  }
  
  // verifica el boton 4 y escoje la herramienta 1
  if (mousePressed == true) {
    if ((mouseX>boton4x)&&(mouseX<boton4x+boton4w)&&
      (mouseY>boton4y)&&(mouseY<boton4y+boton4w)) {
      herramientica = 1;
    }
  }
  // verifica el boton 5 y escoje la herramienta 2
  if (mousePressed == true) {
    if ((mouseX>boton5x)&&(mouseX<boton5x+boton5w)&&
      (mouseY>boton5y)&&(mouseY<boton5y+boton5w)) {
      herramientica = 2;
    }
  }
  
  // verifica el boton 6 y escoje la herramienta 3
  if (mousePressed == true) {
    if ((mouseX>boton6x)&&(mouseX<boton6x+boton6w)&&
      (mouseY>boton6y)&&(mouseY<boton6y+boton6w)) {
      tamanol = tamanol+1;
      tamanoe = tamanoe+1;
    }
  }
  
   // verifica el boton 7 y escoje la herramienta 4
  if (mousePressed == true) {
    if ((mouseX>boton7x)&&(mouseX<boton7x+boton7w)&&
      (mouseY>boton7y)&&(mouseY<boton7y+boton7w)) {
      tamanoe = tamanoe-1;
      tamanol = tamanol-1;
    }
  }
  
   // verifica el boton 8 y escoje la herramienta pintar
  if (mousePressed == true) {
    if ((mouseX>boton8x)&&(mouseX<boton8x+boton8w)&&
      (mouseY>boton8y)&&(mouseY<boton8y+boton8w)) {
      pintar = 1;
    }
    }
 
  // verifica el boton 9 y escoje el color 3
  if ((mousePressed == true)&&(pintar==1)) {
    if ((mouseX>boton9x)&&(mouseX<boton9x+boton9w)&&
      (mouseY>boton9y)&&(mouseY<boton9y+boton9w)) {
      colorcito = 3;
    }
  }
  
   // verifica el boton 10 y escoje el color 4
  if ((mousePressed == true)&&(pintar==1)) {
    if ((mouseX>boton10x)&&(mouseX<boton10x+boton10w)&&
      (mouseY>boton10y)&&(mouseY<boton10y+boton10w)) {
      colorcito = 4;
    }
  }
  
   // verifica el boton 11 y escoje el color 5
  if ((mousePressed == true)&&(pintar==1)) {
    if ((mouseX>boton11x)&&(mouseX<boton11x+boton11w)&&
      (mouseY>boton11y)&&(mouseY<boton11y+boton11w)) {
      colorcito = 5;
    }
  }
  
   // verifica el boton 12 y escoje el color 6
  if ((mousePressed == true)&&(pintar==1)) {
    if ((mouseX>boton12x)&&(mouseX<boton12x+boton12w)&&
      (mouseY>boton12y)&&(mouseY<boton12y+boton12w)) {
      colorcito = 6;
    }
  }

  // escoje color para pintar
  if(colorcito==1) {
    stroke(mouseX, mouseY, 100);
    fill(mouseX, mouseY, 100);
  } else if (colorcito==2) {
    stroke(0,0,255);
    fill(0,0,255);
  }  else if (colorcito==3) {
    stroke(255,0,0);
    fill(255,0,0);
  } else  if(colorcito==4) {
    stroke(100, mouseY+50, mouseX);
    fill(70, mouseY+50, mouseX);
  }else  if(colorcito==5) {
    stroke(0);
    fill(0,255,0);
  }else  if(colorcito==6) {
    stroke(0);
    fill(255,255,0);
  }
  
  
  // escoje herramienta para pintar
  if(herramientica==1) {
        if(mousePressed == true){
          if(tamanol>0){
    line(mouseX, mouseY, mouseX+tamanol, mouseY-tamanol);
          }else{
           line(mouseX, mouseY, mouseX+1, mouseY-1);
          }
        }  
   } else if(herramientica==2) {
    noStroke();
    if(mousePressed == true){
      if(tamanoe>0){
    ellipse(mouseX, mouseY, tamanoe, tamanoe);
      }else{
    ellipse(mouseX, mouseY, 1, 1);
      }
    } 
  }
  

  
  //fondo botones
  
    fill(200,0,100,254);
  stroke(255);
  rect(10,10,40,240);
  
  //pinta los botones
  //btn1
  fill(255);
  stroke(0);
  rect(boton1x, boton1y, boton1w, boton1w);
  

 
  //btn4 
  fill(100);
  stroke(0);
  rect(boton4x, boton4y, boton4w, boton4w);
  stroke(255);
  line(21,79,39,61);
  line(21,70,30,61);
  line(30,79,39,70);

  

  //btn5
  fill(100);
  stroke(0);
  rect(boton5x, boton5y, boton5w, boton5w);
  stroke(255);
  fill(255);
  ellipse(30,110,15,15);
  

  //btn6
 
  fill(100);
  stroke(0);
  rect(boton6x, boton6y, boton6w, boton6w);
  stroke(255);
  fill(255);
  rect(22,148,16,4);
  rect(28,142,4,16);
  
  //btn7
  fill(100);
  stroke(0);
  rect(boton7x, boton7y, boton7w, boton7w);
   stroke(255);
  fill(255);
  rect(22,188,16,4);
 
  //btn8
  
  stroke(0);
  noFill();
  rect(boton8x, boton8y, boton8w, boton8w);
  
  for (int i = 1; i < 18; i = i+1) {

  stroke(10*i,40*i,10*i);
  line(boton8x+1, boton8y+1, boton8x+18-i, boton8y+18);
  line(boton8x+1, boton8y+1, boton8x+18, boton8y+19-i);

  
}
  

 

}