Animated buttons!

Metalady

Hi guys! I'm new here! I was desperately searching for some help. I'm making something with buttons in processing but the thing is…Something is wrong! the program didn't even run! it's supposed that the button turned into a different color when the mouse passes over them. I've made a class "Boton" (sorry, this thing is in spanglish), here's the code (some things are incomplete):

class Boton
{
  int circleX, circleY;
  int tamCir;
  color botColor;
  color botSel; //cambio de saturación cuando el mouse está encima del botón
  color current;
  boolean sobreBot;
  float speed;
  int direction;
  //PImage  

  public Boton(int x, int y, color c, color s) 
  {
      circleX= x;
      circleY= y;
      botColor=c;
      botSel=s;
      tamCir= 150;
      current=botColor;
      sobreBot=false; 
  }
 /* 
  void move()
  {

  }

  void options() //saca las 5 opciones
  {

  }
  */
  void dibujaBoton()
  {
    ellipseMode(CENTER);
    ellipse(circleX,circleY,tamCir,tamCir);
    noStroke();
    fill(current);

  }

  void isOver(int mx, int my)
  {
    int w = (int)tamCir(value);
    int h = 20;

    if((mx >= x && mx<= x+w) && (my>= y-h && my <= y))
      return true;
    else
      return false;
  }
}

and this is the main class:

Boton []buttons;
int activeButtons=-1;

void drawButtons()
{
  for(int i=0; i<buttons.length;i++)
  {
    if(i==activeButtons)
       buttons[i].current=buttons[i].botSel;
    else
       buttons[i].current=buttons[i].botColor;

     buttons[i].dibujaBoton();
  }
}

boolean sobreBot(int x, int y, int diameter)
{
 float disX = x-mouseX;
 float disY = y-mouseY;

  if(sqrt(sq(disX) + sq(disY)) < diameter/2)
    {
      return true;
    } 

    else
    {
      return false;
    }
}

  void update(int xx, int yy)
  {
    if(sobreBot(circleX, circleY, tamCir))
       sobreBot = true;
    else
       sobreBot = false;
  }

void setup()
{
  size(800,750);
  background(255);
  buttons = new Boton[3];
  buttons[0] = new Boton(width/2,350,color(240,128,7), color(200,32,60));
  buttons[1] = new Boton(width/3,500,color(123,221,240), color(13,78,190));
  buttons[2] = new Boton(2*width/3,500,color(135,234,36), color(11,200,23));
}

void draw()
{
  background(255);
  drawButtons();
}

• tamCir: circle(or button) size
• dibuja: draw
• sobre: over (like, over the button)
• botSel: selected button

PhiLho

There is a problem with your code: it doesn't even compile!

What is this int w = (int)tamCir(value); line? tamCir isn't a function, it is an int!

What are these x, w, etc. variables used in the isOver() function? They don't exist in the class. Beside, that's a method to see if mouse is on a rectangle, but your buttons are circles! Use dist() instead.

The functions sobreBot() and update() outside of the class are useless and never called, why do you include them?

Actually, the code in sobreBot() is closer of what you want in the isOver() method, but, again, dist() is already doing these maths with sqrt() and sq().

Metalady

Ok, i have to accept that I really suck at this. I changed some things, now the buttons display (but they don't do anything tho). Now, I'm trying to do an Image class, but I have no idea of how to do it, each button should have an assigned Image, for example, for the blue button, it shows a blue flower and so. I was thinking of making a class within a class, but I don't know if that's possible, can you (or someone else) help me? here's the other classes: Main Class(mouseClicked doesn't do anything yet)

    Boton []buttons;
    int activeButtons=-1;

void drawButtons()
{
  for(int i=0; i<buttons.length;i++)
  {
    if(i==activeButtons)
       buttons[i].current=buttons[i].botSel;
    else
       buttons[i].current=buttons[i].botColor;

     buttons[i].dibujaBoton();
  }
}

void setup()
{
  size(800,750);
  background(255);
  buttons = new Boton[3];
  buttons[0] = new Boton(width/2,700,color(240,128,7), color(200,32,60));
  buttons[1] = new Boton(width/3,700,color(123,221,240), color(13,78,190));
  buttons[2] = new Boton(2*width/3,700,color(135,234,36), color(11,200,23));
}

void draw()
{
  background(255);
  drawButtons();
}

void mouseClicked()
{
  int x=mouseX;
  int y=mouseY;


}

Button class:

class Boton
{
  int circleX, circleY;
  int tamCir;
  color botColor;
  color botSel; //cambio de saturación cuando el mouse está encima del botón
  color current;
  boolean sobreBot;
  //PImage  

  public Boton(int x, int y, color c, color s) 
  {
      circleX= x;
      circleY= y;
      botColor=c;
      botSel=s;
      tamCir= 50;
      current=botColor;
      sobreBot=false; 
  }

  void options() //saca las 5 opciones
  {

  }

  void dibujaBoton()
  {
    ellipseMode(CENTER);
    ellipse(circleX,circleY,tamCir,tamCir);
    noStroke();
    fill(current);

  }

  void isClicked()
  {

  }
}

PhiLho

I suggest to try to make your buttons to work before using images. No need to a class to manage the images, PImage is already doing this, just add a PImage field to your class, and use it in the dibujaBoton() method.

Some remarks on the current code:

• mouseClicked() does nothing useful. It should loop on all buttons and call an update method that check if the click is within the button. Again, use dist() for that.
• In diburaBoton(), you have put the noStroke() and fill() calls after drawing the circle, move them before it.

Metalady

Aaaand what if I have to show like, 45 images. Like the idea is to click the button, and press 1 to 5 to choose a "generation"(so that will be like 15 images per button). I'm making like a program which will help you choose a pokemon starter, showing some information and stats. so that will be like, as I said before, 45 images (I'm trying to reduce the quantity). I still don't need an Image class?

GoToLoop

I still don't get how 3 buttons and 5 keys got 45 images. :-/
Anyways, I've come up w/ a initial sketch to get you started. Although it's 5 PImage objects divided by 3 Button objects. :bz
Try to modify it or use any parts for your particular needs. And ask for any further doubts! <):)

/** 
 * Pokémon Evo Selection (v2.03)
 * by  Metalady (2013/Oct)
 * mod GoToLoop
 * 
 * forum.processing.org/two/discussion/256/animated-buttons
 */

final static int BTN = 3; // # of Button objects.
final static Button[] btns = new Button[BTN];

// Qty for each Button object & total # of PImage objects:
final static int CHUNK = 5, IMG = CHUNK*BTN;
final static PImage[] imgs = new PImage[IMG];

PImage img; // current selected PImage.

final static String NAME = "img", EXT = ".jpg";

void setup() {
  size(800, 750);
  frameRate(10);
  noLoop();
  smooth();

  ellipseMode(CENTER);
  imageMode(CENTER);

  stroke(0);
  strokeWeight(4);
  background(-1);

  // Button instantiations:
  btns[0] = new Button(width/3, height-50, #80E0F0, #1050C0, CHUNK*0);
  btns[1] = new Button(width/2, height-50, #F08008, #D02040, CHUNK*1);
  btns[2] = new Button(width*2/3, height-50, #88F020, #0AC820, CHUNK*2);

  // Supposing image files are named "img0.jpg" up to "img14.jpg":
  for (int i = 0; i != IMG; imgs[i] = loadImage(NAME + i++ + EXT));

  // Initial selected image:
  img = imgs[0];
}

void draw() {
  for (Button b: btns)   b.display();
  image(img, width>>1, height>>1);
}

void keyPressed() {
  final char k = key;
  if (k < '1' | k > '0' + CHUNK)   return;

  // Finds out whether and which button is being hovered.
  // And finally decides which PImage index to display:
  for (Button b: btns)   if (b.isHovering) {
    final int idx = k - '1' + b.idx;
    img = imgs[idx];

    print(idx + " - ");
    redraw();
    return;
  }
}

void mouseMoved() {
  for (Button b: btns)   b.checkHovering();
  redraw();
}

class Button {
  final static int DIAM = 50, RAD = DIAM>>1; // diameter & radius.

  final short x, y; // location coordinates.
  final short idx;  // starting associated index.
  final color c, s; // default & hovering colors.

  boolean isHovering; // hovering current state.

  Button(int xx, int yy, color cc, color ss, int ind) {
    x = (short) xx;
    y = (short) yy;

    idx = (short) ind;

    c = cc;
    s = ss;
  }

  void display() {
    fill(isHovering? s : c);
    ellipse(x, y, DIAM, DIAM);
  }

  boolean checkHovering() {
    return isHovering = sq(mouseX - x) + sq(mouseY - y) < RAD*RAD;
  }
}