import processing.serial.*;

Serial myPort;  // Create object from Serial class

int rect1X, rect1Y;      // Position of square 1 button
int rect2X, rect2Y;  // Position of square 2 button
int rect3X, rect3Y;      // Position of square 3 button
int rect4X, rect4Y;  // Position of square 4 button
int rectSize = 90;     // Diameter of square
color rect1Color, rect2Color, rect3Color, rect4Color, baseColor;
color rect1Highlight, rect2Highlight, rect3Highlight, rect4Highlight;
color currentColor;
boolean rect1Over = false;
boolean rect2Over = false;
boolean rect3Over = false;
boolean rect4Over = false;

void setup() {
  size(360, 360);
  rect1Color = color(0,0,100);
  rect1Highlight = color(0,0,200);
  rect2Color = color(255);
  rect2Highlight = color(204);
  rect3Color = color(100,0,0);
  rect3Highlight = color(200,0,0);
  rect4Color = color(0,100,0);
  rect4Highlight = color(0,200,0);
  baseColor = color(102);
  currentColor = baseColor;
  rect1X = rectSize/2+40;
  rect1Y = rectSize/2+40;
  rect2X = rect1X+100;
  rect2Y = rect1Y;
  rect3X = rect1X;
  rect3Y = rect1Y+100;
  rect4X = rect1X+100;
  rect4Y = rect1Y+100;
  
  String portName = Serial.list()[2]; //change the 0 to a 1 or 2 etc. to match your port
  myPort = new Serial(this, portName, 115200);
}

void draw() {
  update(mouseX, mouseY);
  background(currentColor);
  
  if (rect1Over) {
    fill(rect1Highlight);
  } else {
    fill(rect1Color);
  }
  stroke(255);
  rect(rect1X, rect1Y, rectSize, rectSize);
  textSize(10);
  fill(255);
  textAlign(CENTER, CENTER);
  text("Frequency 294", rect1X+rectSize/2, rect1Y+rectSize/2); 
  
  if (rect2Over) {
    fill(rect2Highlight);
  } else {
    fill(rect2Color);
  }
  stroke(0);
  rect(rect2X, rect2Y, rectSize, rectSize);
  textSize(10);
  fill(0);
  textAlign(CENTER, CENTER);
  text("Frequency 349", rect2X+rectSize/2, rect2Y+rectSize/2); 
  
  if (rect3Over) {
    fill(rect3Highlight);
  } else {
    fill(rect3Color);
  }
  stroke(255);
  rect(rect3X, rect3Y, rectSize, rectSize);
  textSize(10);
  fill(255);
  textAlign(CENTER, CENTER);
  text("Frequency 370", rect3X+rectSize/2, rect3Y+rectSize/2); 
  
  if (rect4Over) {
    fill(rect4Highlight);
  } else {
    fill(rect4Color);
  }
  stroke(0);
  rect(rect4X, rect4Y, rectSize, rectSize);
  textSize(10);
  fill(0);
  textAlign(CENTER, CENTER);
  text("Frequency 440", rect4X+rectSize/2, rect4Y+rectSize/2); 
  
}

void update(int x, int y) {
  if ( overRect(rect1X, rect1Y, rectSize, rectSize) ) {
    rect1Over = true;
    rect2Over = false;
    rect3Over = false;
    rect4Over = false;
  } else if ( overRect(rect2X, rect2Y, rectSize, rectSize) ) {
    rect1Over = false;
    rect2Over = true;
    rect3Over = false;
    rect4Over = false;
  } else if ( overRect(rect3X, rect3Y, rectSize, rectSize) ) {
    rect1Over = false;
    rect2Over = false;
    rect3Over = true;
    rect4Over = false;
  } else if ( overRect(rect4X, rect4Y, rectSize, rectSize) ) {
    rect1Over = false;
    rect2Over = false;
    rect3Over = false;
    rect4Over = true;
  } else {
    rect1Over = rect2Over = rect3Over = rect4Over = false;
  }
}

void mousePressed() {
  if (rect1Over) {
    currentColor = rect1Color;
     println("1");
     myPort.write('1');
  }
  if (rect2Over) {
    currentColor = rect2Color;
     println("2");
     myPort.write('2');
  }
  if (rect3Over) {
    currentColor = rect3Color;
     println("3");
     myPort.write('3');
  }
  if (rect4Over) {
    currentColor = rect4Color;
     println("4");
     myPort.write('4');
  }
}

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;
  }
}