FAQ
 
 
Cover  \ Exhibition  \ Learning  \ Reference  \ Download  \ Discourse   
    Examples \ Tutorials \ Courses & Workshops
 
   
 
 
Examples for Processing (BETA) version 91+. If you have a previous version, use the examples included with your software. If you see any errors or have comments, please let us know.



Image button
by REAS <http://reas.com>

Loading images and using them to create a button

Created 10 February 2003

   
// Image button 
// by REAS <http://reas.com> 

ImageButtons button; 
 
void setup() 
{ 
  size(200, 200); 
  background(102, 102, 102); 
  
  // Define and create image button 
  PImage b = loadImage("base.gif"); 
  PImage r = loadImage("roll.gif"); 
  PImage d = loadImage("down.gif"); 
  int x = width/2 - b.width/2; 
  int y = height/2 - b.height/2; 
  int w = b.width; 
  int h = b.height; 
  button = new ImageButtons(x, y, w, h, b, r, d); 
} 
 
void draw() 
{ 
  button.update(); 
  button.display(); 
} 
 
class Button 
{ 
  int x, y; 
  int w, h; 
  color basecolor, highlightcolor; 
  color currentcolor; 
  boolean over = false; 
  boolean pressed = false;   
  
  void pressed() { 
    if(over && mousePressed) { 
      pressed = true; 
    } else { 
      pressed = false; 
    }    
  } 
  
  boolean overRect(int x, int y, int width, int height) { 
  if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) { 
    return true; 
  } else { 
    return false; 
  } 
} 
} 
 
class ImageButtons extends Button 
{ 
  PImage base; 
  PImage roll; 
  PImage down; 
  PImage currentimage; 
 
  ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage iroll, PImage idown) 
  { 
    x = ix; 
    y = iy; 
    w = iw; 
    h = ih; 
    base = ibase; 
    roll = iroll; 
    down = idown; 
    currentimage = base; 
  } 
  
  void update() 
  { 
    over(); 
    pressed(); 
    if(pressed) { 
      currentimage = down; 
    } else if (over){ 
      currentimage = roll; 
    } else { 
      currentimage = base; 
    } 
  } 
  
  void over() 
  { 
    if( overRect(x, y, w, h) ) { 
      over = true; 
    } else { 
      over = false; 
    } 
  } 
  
  void display() 
  { 
    image(currentimage, x, y); 
  } 
} 
 
 
 
 
 







   
  Processing is an open project initiated by Ben Fry and Casey Reas  
  © Info