<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#46681' allowfullscreen></iframe>

PImage myImage;
boolean load = true;
class Button {
    int x;
    int y;
    int width;
    int height; //usually 65
    int stroke;
    PImage img;
    int code; //0 for pencil, 1 for eraser, etc. 
    boolean isPressed; //if selected 


    Button(int x, int y, int width, int height, int stroke, PImage img, int code) {
        this.x = x; //this for constructor 
        this.y = y;
        this.width = width;
        this.height = height;
        this.stroke = stroke;
        this.img = img;
        this.code = code;

    }

    void drawbutton() {
        img.width = width;
        img.height = height;
        image(img, x, y);
    }


    boolean isButtonPressed() {
        if (mousePressed && mouseX > x && mouseX < (x + width) && mouseY > y && mouseY < (y + height)) {
            return true;
        }
        return false;
    }


    void drawLines() {
        stroke(R, G, B);
        strokeWeight(this.stroke);
        if (code == 1) { //eraser
            stroke(255, 255, 255);
            strokeWeight(25);
        }
        if (code == 2) { //paintbrush
            strokeWeight(10);
        }
        line(pmouseX, pmouseY, mouseX, mouseY);
    }

    void drawEffects() {
        img.height = 35;
        img.width = 35;
        image(img, mouseX, mouseY);
        fill(0);
    }

    void alpha_f() {

        float r_ = red(myImage.get(mouseX, mouseY));

        float g_ = green(myImage.get(mouseX, mouseY));
        float b_ = blue(myImage.get(mouseX, mouseY));
        // println(r_);
        //println("in h ere");
        color c = color(255, 255, 255);

        for (int i = 0; i < myImage.width; i++) {
            for (int j = 0; j < myImage.height; j++) {
                float r = red(myImage.get(i, j));
                float g = green(myImage.get(i, j));
                float b = blue(myImage.get(i, j));
                if ((abs(r - r_) > 15 && abs(g - g_) > 15 && abs(b - b_) > 15)) {
                    myImage.set(i, j, c);
                }
            }
        }
    }
     void shapes() {
        ellipse(mouseX,mouseY, 50, 50);
     }
}

int R, G, B;
ArrayList < Button > buttons = new ArrayList < Button > ();
String[] urls = new String[] {
    "https://image.ibb.co/hpUTQy/pencil.png",
    "https://image.ibb.co/hZfwCd/eraser.png",
    "https://image.ibb.co/k45Vso/paint.png",
    "https://image.ibb.co/dopbvy/circle.png",
    "https://image.ibb.co/eMdaoJ/line.png",
    "https://image.ibb.co/cOwsUd/alpha.gif"
};
PImage colors;

PImage alpha;

void setup() {
    size(800, 600);
    background(255, 255, 255);

    for (int i = 0; i < 6; i++) {
        //x, y, width, height, stroke, img, url, code
        Button tmp = new Button(725, 5 + 70 * i, 65, 65, 1, loadImage(urls[i]), i);
        //load image returns the url 
        //i is the code or index of array 

        buttons.add(tmp);
    }

    PImage effect_img = loadImage("https://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png");
    PImage star_img = loadImage("https://image.ibb.co/jkpFTT/images.jpg");
    colors = loadImage("https://image.ibb.co/cqmjk8/do.jpg");

    Button effect = new Button(400, 520, 65, 65, 1, effect_img, 10);
    Button star = new Button(475, 520, 65, 65, 1, star_img, 11);
    // Button colors = new Button(0,520,300,80,1,colors_img,7);

    buttons.add(effect);
    buttons.add(star);

    // buttons.add(colors);

    //you may need to hardcode these ones like the ones above
    alpha = loadImage("https://image.ibb.co/cOwsUd/alpha.gif");
    PImage airbrush = loadImage("https://image.ibb.co/mWAzFy/airbrush.png");

    myImage = loadImage("https://image.ibb.co/mPeMny/pool.jpg");

}



void draw() {

    //insert colorpicker


    colors.height = 80;
    colors.width = 300;
    image(colors, 0, 520);
    // image(alpha, 700, 500, 65, 65);
    for (int i = 0; i < buttons.size(); i++) {
        buttons.get(i).drawbutton();
    }
    //calls drawbutton() function
    // println(mouseX,mouseY);
    for (int i = 0; i < buttons.size(); i++) {
        if (buttons.get(i).isPressed && mousePressed && mouseX < 670 && mouseY < 455) { // a button has been pressed 
            //this means it's eraser or pencil
            // println(buttons.get(i).code);
            if (buttons.get(i).code == 1 || buttons.get(i).code == 0 || buttons.get(i).code == 2) {
                load = false;
                buttons.get(i).drawLines();

            }
            if (buttons.get(i).code == 10 || buttons.get(i).code == 11) {
                load = false;
                buttons.get(i).drawEffects();

            }
            if (buttons.get(i).code == 5) {
                load = true;
                buttons.get(i).alpha_f();
            }

        }
    }

    //reset lines 
    stroke(0);
    strokeWeight(1);
    line(0, 480, 700, 480);
    line(700, 0, 700, 600);


    fill(100, 100, 100);

    textAlign(LEFT, LEFT);
    textSize(25);
    text("Special Marker Effects:", 350, 515);
    text("Choose Color ", 72, 515);

    if (load) {
        image(myImage, 140, 20, 450, 450);
    }
    
}


int[] r_arr = new int[] {
    255,
    255,
    255,
    0,
    0,
    153,
    102,
    255
};
int[] g_arr = new int[] {
    0,
    153,
    255,
    204,
    0,
    0,
    51,
    20
};
int[] b_arr = new int[] {
    0,
    0,
    0,
    0,
    255,
    204,
    0,
    147
};

void mousePressed() {
    // println(buttons.size());
    //flags for pencil, eraser, paintbrush
    for (int i = 0; i < buttons.size(); i++) {
        if (buttons.get(i).isButtonPressed()) {
            for (int j = 0; j < buttons.size(); j++) {
                buttons.get(j).isPressed = false;
            }
            buttons.get(i).isPressed = true;
            // println(buttons.get(i).isPressed);
        }
    }

    //choosing colors 
    if (mouseX > 25 && mouseX < 273 && mouseY > 525 && mouseY < 590) {
        int index = int(mouseX - 30) / 30;
        R = r_arr[index];
        G = g_arr[index];
        B = b_arr[index];
    }




}