Selection Box!

BromanV

Hello Processing community, I'm relatively new to programming in general and I've finished one of my first "Projects" hehe and I was wondering what the more experienced people thinks about it ^^, I've probably made a lot of mistakes and probably written many many unneeded lines of code. But here it is, I tried going for the Nintendo box's aesthetics, didn't work out ^^

              // Declarations
                        float posx,posy;
                        float textt;
                        // PFont font;
                        float ay, ax, by, bx;
                        int BoxYesSizex = 90;
                        int BoxYesSizey = 45;
                        int BoxNoSizex = 90;
                        int BoxNoSizey = 45;
                        boolean overNoBox = false;
                        boolean overYesBox = false;
                        boolean locked = false;
                        int black = 0;
                        int black1 = 0;
                        int white = 255;
                        int white1 = 255;
                        int white2 = 255;
                        int white3 = 255;
                        int white4 = 255;
                        int black2 = 0;
                        int gray = 51;
                        float background;
                        //

                        void setup() {
                          // font = loadFont("ComicSansMS-Bold-20.vlw");
                          background(gray);
                          size(600, 600);
                          ax = 170;
                          textt = 170;
                          ay = 330;
                          bx = 350;
                          by = 330;

                        }

                        void draw () {
                          // POPUP BOX
                           if (mouseX > ax-BoxYesSizex && mouseX < ax+BoxYesSizex && 
                              mouseY > ay-BoxYesSizey && mouseY < ay+BoxYesSizey) {
                            overYesBox = true; 
                            white1 = black1;
                            } 
                           else {
                            overYesBox = false;
                            white1 = white2;
                          }
                             if (mouseX > bx-BoxNoSizex && mouseX < bx+BoxNoSizex && 
                              mouseY > by-BoxNoSizey && mouseY < by+BoxNoSizey) {
                            overNoBox = true; 
                            white4 = black2;
                            } 
                           else {
                            overNoBox = false;
                            white4 = white3;
                          }
                          stroke(black);
                          fill(0, 126, 255, 102);
                            rect(100, 100, 400, 300, 20);
                            // YES
                            fill(white1);
                                rect(ax, ay, BoxYesSizex, BoxYesSizey, 10);
                                // NO
                                fill(white4);
                                rect(bx, by, BoxNoSizex, BoxNoSizey, 10);
                                fill(0, 75, 20);
                                // textFont(font); disabling these cause you probably don't have the font downloaded :p
                                text("Yes", 200, 360);
                                fill(255, 0, 0);
                                text("No", 380, 360);
                                fill(white);
                                text("Do you wan't to change the \n background color to black?", textt, 250);
                                text("V 1.0", 520, 580);
                        }

                        void mousePressed() {
                          if (overYesBox) {
                            background(black);
                            fill(white4);
                            text("Black Selected", 40, 50); 
                          }
                          if (overNoBox) {
                            background(gray);
                                text("Gray Selected", 40, 50); 
                          }
                        if(textt > 172);
                         }

The mouseY, MouseX code was kinda stolen from https://processing.org/examples/mousefunctions.html keep in mind that i've disabled the fonts because you perhaps don't have the one I used, so it might look at a bit weird. Here is how it should look btw. Inspiration but that's it :p tell me what you think! Thanks Edvin

colouredmirrorball

Hit ctrl+t in the IDE to make the code look nicer.

Also you are redrawing the GUI element in each draw() but only draw the background once (when starting up or when clicked on a button). This means the GUI element will be drawn upon itself many times, which can result in ugliness (especially when rendering fonts). Click a button and watch the rounded corners of the blue rectangle or the text in the lower right corner, and you'll see artifacts appear. It's not very apparent for this simple piece of code, but it is something you need to avoid. Perhaps change the logic of your program so that it calls background() as the first statement in draw() instead of in setup() and mousePressed() with a variable that you can change with the GUI buttons.

BromanV

Interesting, Thank you for your input! Will be sure to experiement with this!