Sharing a simple multiple button Mouseover sketch
in
Share your Work
•
1 year ago
Hi all,
This is a pretty basic sketch, and could probably be written a lot more efficiently. BUT, I've gotten so much help here from the community that I wanted to give something back. Perhaps someone doing a project in the future might find this useful.
It's a simple mouseover detection sketch, but written as a class with the possibility for multiple buttons.
Anyway, that's all. This sketch uses a lot of info that I've gained here directly from users. So back out into the world it goes!
/*
Please forgive my ignorance. I only know what I've already learned, and this world is a lot bigger than that.
*/
- PImage b1;
- PImage b2;
- PImage b3;
- int buttonCount = 3;
- int offset = 10;
- String bString[];
- PVector locations;
- PVector sizes;
- Button button[];
- void setup(){////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
- size(400, 400);
- background(0);
- button = new Button[buttonCount];
- bString = new String[buttonCount];
- PVector locations = new PVector(30, 30);
- PVector bSizes = new PVector(80, 40);
- button[0] = new Button(locations, bSizes, b1);
- button[1] = new Button(new PVector(locations.x, 130), bSizes, b2);
- button[2] = new Button(new PVector(locations.x, 230), bSizes, b3);
- bString[0] = new String("assets/buttons/button1.jpg");
- bString[1] = new String("assets/buttons/button2.jpg");
- bString[2] = new String("assets/buttons/button3.jpg");
- for (int i = 0; i < buttonCount; i ++){
- button[i].setPic(i, bString[i]);
- button[i].buttonDraw();
- }
- }
- void draw(){////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
- for (int i = 0; i < buttonCount; i ++){
- //button[i].buttonDraw();
- button[i].detectOver();
- }
- }
- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
- //class button
- class Button{
- PVector buttonLoc, buttonSize;
- //float xLoc, yLoc, xSize, ySize;
- PImage buttonPic;
- String buttonString;
- //constructor with pvector
- Button(PVector _buttonLoc, PVector _buttonSize, PImage _buttonPic){
- buttonLoc = _buttonLoc;
- buttonSize = _buttonSize;
- buttonPic = _buttonPic;
- }//end Button Constructor
- void buttonDraw(){
- image(buttonPic, buttonLoc.x, buttonLoc.y, buttonSize.x, buttonSize.y);
- }//end buttonDraw
- void setPic(int i, String _buttonString){
- //buttonPic = _buttonPic;
- buttonString = _buttonString;
- buttonPic = loadImage(buttonString);
- }//end setPic
- void detectOver(){
- image(buttonPic, buttonLoc.x, buttonLoc.y);
- if (overButton(buttonLoc, buttonSize, mouseX, mouseY)){
- //tint(0, 150);
- //image(buttonPic, buttonLoc.x, buttonLoc.y);
- fill(0, 150);
- rect(buttonLoc.x, buttonLoc.y, buttonSize.x, buttonSize.y);
- }//end detectOver
- //end else
- }//end method detectOver
- } //end class Button
- boolean overButton(PVector _loc, PVector _size, float mX, float mY){
- float xBound = _loc.x + _size.x;
- float yBound = _loc.y + _size.y;
- if(mX > _loc.x && mX < xBound && mY > _loc.y && mY < yBound){ // if mouse is within bounds
- return true; //returns true and executes whatever info is below this function call
- }else{
- return false; //does not execute code below function call
- }
- } //overButton
- //============================//============================//============================//============================
- /* this is for circle detection
- // x and y are the coords for your circle
- // tx and ty are the coords for your cursor
- boolean overCircle(float x, float y, float r_x_r, float cx, float cy){
- float dx = x-cx;
- float dy = y-cy;
- return (dx*dx + dy*dy) <= r_x_r;
- } //overcircle
- */
- //============================//============================//============================//============================
/*
Please forgive my ignorance. I only know what I've already learned, and this world is a lot bigger than that.
*/
