class Component {
  float x,y; // for circles
  float r; // for radius
  float type; // type of component (OSC, LFO, EVN, ect...)
  boolean dragging = false; // Is the object being dragged?
  boolean rollover = false; // Is the mouse over the ellipse?
  float dx,dy;

  int size = 40;       // Width of the shape

  float xspeed = 2.8;  // Speed of the shape
  float yspeed = 2.2;  // Speed of the shape

  int xdirection = 1;  // Left or Right
  int ydirection = 1;  // Top to Bottom

  String shape;

  float knobSize=30; // knob circle size

  color c = color(random(50,200),random(2,200),random(2,200));
  color d = color(random(50,200),random(2,200),random(2,200));
  float knob_r = 20; // for dial
  float theta = 0; //for dial

  Component(float x_, float y_, float r_,String s) {
    x = x_;
    y = y_;
    r = r_;
    shape = s;


  }
  void highlight() {
    c=color(x,y,x);
  }

  // Method to display
  void render() {
    ellipseMode(CENTER);
    rectMode(CENTER);
    strokeWeight(3);


    // all the other circles
    if (dragging) fill (x,y,x);
    else if (rollover) fill(x,y,x);
    else fill(c);

    if (shape.equals("circle"))  {
      ellipse(x,y,30,30);
      noFill();
      stroke(d);
      ellipse(x,y,knobSize,knobSize);
    }


    else if (shape.equals("square")) {
      rect(x,y,20,20);
      noFill();
      stroke(d);
      rect(x,y,knobSize,knobSize);      
    }

    else if (shape.equals("triangle")) {
      triangle(x-13,y+13,x+13,y+13,x,y-11);
      noFill();
      stroke(255);
      triangle(x-24,y+24,x+24,y+24,x,y-24);
    }
    else if (shape.equals("ellipse")) {


      //red background - ellipse patterns
      noFill();
      ellipse(x,y,45,24); 
      fill(d);
      ellipse(x,y,35,12);
    }



    knobSize=knobSize+0.1;

    if(knobSize>=55) {
      knobSize=40; 
    }


  }


  void move(){
    // Update the position of the shape
    x = x + ( xspeed * xdirection );
    y = y + ( yspeed * ydirection );

    // Test to see if the shape exceeds the boundaries of the screen
    // If it does, reverse its direction by multiplying by -1
    if (x > width-size || x < 0) {
      xdirection *= -1;
    }
    if (y > height-size || y < 0) {
      ydirection *= -1;
    } 

  }

  // The methods below are for mouse interaction
  void clicked(int mx, int my) {
    float d = dist(mx,my,x,y);
    if (d < r) {
      dragging = true;
      dx = x-mx;
      dy = y-my;
      //shape = "circle";
    }
  }

  void rollover(int mx, int my) {
    float d = dist(mx,my,x,y);
    if (d < r) {
      rollover = true;
    } 
    else {
      rollover = false;
    }
  }

  void stopDragging() {
    dragging = false;
  }

  void drag() {
    if (dragging) {
      x = mouseX + dx;
      y = mouseY + dy;
    }
  }

  boolean intersect(Component b) {
    float distance = dist(x,y,b.x,b.y);
    if (distance < 150){
      
      return true;
    }  
    else {
      return false;
    }
  }




  void dial() {
    float k = knob_r * cos(theta);
    float p = knob_r * sin(theta);

    fill(255);
    stroke(255);
    ellipse(x+k,y+p,5,5);
    line(x+k,y+p,x,y);

  }


  // for moving the dial
  void move_dial() {
    if (key == '0') {
      theta += 0.05;
    } 
    else {
      theta=theta; 
    }
    if (key == '1') {
      theta -= 0.05;
    }
    else {
      theta=theta; 
    }
  }






}