> show canvas only <


/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://studio.sketchpad.cc/sp/pad/view/ro.n4Pvm1N1did/rev.1822
 * 
 * authors: 
 *   Ivar B

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





int grid = 16; 
int gridSize;
TouchButton[] buttons;
TouchButton[] colorSelector;

final int ORANGE = color(255,128,20);
final int SKYE = color(100,100,255);
final int CYAN = color(0,255,255);
final int LILA = color(255,0,255);
final int GREEN = color(50,255,50);
final int TRANSPARENT = color(0,0,0,0);

int activeColor = 3;

void setup() {  // this is run once.   
    
    // set the background color
    background(255);
    
    // canvas size (Variable aren't evaluated. Integers only, please.)
    size(400, 500); 
      
    gridSize = width;
    
    // smooth edges
    smooth();
    
    // limit the number of frames per second
    frameRate(30);
    
    // set the width of the line. 
    strokeWeight(1);
    
    buttons = new TouchButton[grid*grid];
    int count = 0;
    for(int i = 0; i < grid; i++){
        for(int j = 0; j < grid; j++){
            int x = (j*(gridSize/grid))+((gridSize/grid)/2);
            int y = (i*(gridSize/grid))+((gridSize/grid)/2);
            buttons[count] = new TouchButton(x,y,gridSize/grid,gridSize/grid,1); 
            count++;
        }   
    }
    colorSelector = new TouchButton[6];
    for(int i = 0; i < 6; i++){
        int x = (i*(gridSize/6))+((gridSize/6)/2);
        int y = height-((gridSize/6)/2);
        colorSelector[i] = new TouchButton(x, y, gridSize/6, gridSize/6, getColor(i));
    }
    rectMode(CENTER);
} 

void draw() {  // this is run repeatedly.  
    background(255);
    stroke(255);
    for(int i = 0; i < buttons.length; i++){
        fill(buttons[i].c);
        rect(buttons[i].x, buttons[i].y, buttons[i].w, buttons[i].h);
    }
    for(int i = 0; i < colorSelector.length; i++){
        if(colorSelector[i].active){
            strokeWeight(3);
            stroke(0);
        }else{
            strokeWeight(1);
            stroke(0);
        }
        fill(colorSelector[i].c);
        rect(colorSelector[i].x, colorSelector[i].y, colorSelector[i].w, colorSelector[i].h);
    }
}

void mouseDragged(){
    for(int i = 0; i < buttons.length; i++){
        if(buttons[i].isInside(mouseX, mouseY)){
            buttons[i].setColor(activeColor);
        }
        
        if(i < colorSelector.length){
            if(colorSelector[i].isInside(mouseX, mouseY)){
                colorSelector[i].active = true;
                activeColor = getColor(i);
            }else{
              colorSelector[i].active = false;
            }
        }
    }
}

void mouseClicked(){
  for(int i = 0; i < buttons.length; i++){
        if(buttons[i].isInside(mouseX, mouseY)){
            buttons[i].setColor(activeColor);
        }
        
        if(i < colorSelector.length){
            if(colorSelector[i].isInside(mouseX, mouseY)){
                colorSelector[i].active = true;
                activeColor = getColor(i);
            }else{
              colorSelector[i].active = false;
            }
        }
    }
}

int getColor(int c){
    switch(c){
        case 0:
            return TRANSPARENT;

        case 1:
            return ORANGE;
            
        case 2:
            return SKYE;
            
        case 3:
            return CYAN;
            
        case 4:
            return LILA;
            
        case 5:
            return GREEN;
            
    }
    return 0;
}


class TouchButton{
    int x, y;
    int w, h;
    int c;
    boolean active;
    
    TouchButton(int _x, int _y, int _w, int _h, int _c){
        this.x = _x;
        this.y = _y;
        this.w = _w;
        this.h = _h;
        this.c = _c;
    }
    
    void setColor(int c){
        this.c = c;
    }
    
    boolean isInside(int mX, int mY){
        if(mX > x-(w/2) && mX < x+(w/2) && mY > y-(h/2) && mY < y+(h/2)){
            return true;
        }
        return false;
    }
   
}