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.



Button
by REAS <http://reas.com>

Click on one of the colored squares in the center of the image to change the color of the background

Updated 09 February 2003
Created 21 August 2002

   
// Button 
// by REAS <http://reas.com> 

int rectX, rectY;      // Position of square button 
int circleX, circleY;  // Position of circle button 
int rectSize = 50;     // Diameter of rect 
int circleSize = 53;   // Diameter of circle 
color rectColor, circleColor, baseColor; 
color rectHighlight, circleHighlight; 
color currentColor; 
boolean rectOver = false; 
boolean circleOver = false; 
 
void setup() 
{ 
  size(200, 200); 
  rectColor = color(0); 
  rectHighlight = color(51); 
  circleColor = color(255); 
  circleHighlight = color(204); 
  baseColor = color(102); 
  currentColor = baseColor; 
  circleX = width/2+circleSize/2+10; 
  circleY = height/2; 
  rectX = width/2-rectSize-10; 
  rectY = height/2-rectSize/2; 
  ellipseMode(CENTER); 
} 
 
void draw() 
{ 
  update(mouseX, mouseY); 
  background(currentColor); 
  
  if(rectOver) { 
    fill(rectHighlight); 
  } else { 
    fill(rectColor); 
  } 
  stroke(255); 
  rect(rectX, rectY, rectSize, rectSize); 
  
  if(circleOver) { 
    fill(circleHighlight); 
  } else { 
    fill(circleColor); 
  } 
  stroke(0); 
  ellipse(circleX, circleY, circleSize, circleSize); 
} 
 
void update(int x, int y) 
{ 
  if( overCircle(circleX, circleY, circleSize) ) { 
    circleOver = true; 
    rectOver = false; 
  } else if ( overRect(rectX, rectY, rectSize, rectSize) ) { 
    rectOver = true; 
    circleOver = false; 
  } else { 
    circleOver = rectOver = false; 
  } 
} 
 
void mousePressed() 
{ 
  if(circleOver) { 
    currentColor = circleColor; 
  } 
  if(rectOver) { 
    currentColor = rectColor; 
  } 
} 
 
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; 
  } 
} 
 
boolean overCircle(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; 
  } 
} 
 







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