[아두이노 프로세싱] 3. GUI (Graphical User Interface)에서 버튼 만들기

데이빗 2016-01-29 (금) 14:00 3년전 3718  

소스 코드 


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(640, 360);
  rectColor = color(255,0,0);
  circleColor = color(0,255,0);
  baseColor = color(100);
  currentColor = baseColor;
  circleX = width/2+circleSize/2+10;
  circleY = height/2;
  rectX = width/2-rectSize-10;
  rectY = height/2-rectSize/2;
  ellipseMode(CENTER);
  textFont(createFont("Georgia", 36));
}

void draw() {
  update(mouseX, mouseY);
  background(currentColor);
  
  textSize(20);
  fill(0);
  text("www.mechasolution.com", 50,50);
  text("blog.naver.com/roboholic84", 50,90);
  text("button test", 50, 130);
  
  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;
  }
}


b4236b63267512261a94b06e9c9c4833_1454043


b4236b63267512261a94b06e9c9c4833_1454043
 

▶아래 플러스 친구 버튼을 통해 다양한 정보와 교제 자료 및 이벤트등의 소식을 받아보실 수 있습니다.




모바일 버전으로 보기