void setup(){
  size(320, 240);
  strokeWeight(2);
  stroke(255);
  noFill();    
}

// Control Point Data
int[][] control = new int[4][2];
int[] ctrlSz = new int[4];
int controlSize = 10;
int n, thisN = -1, pushN;
    
for (n = 0; n < control.length; n ++){
  control[n][0]=((width/2)/(control.length-1)*n)+(width/4);
  ctrlSz[n] = controlSize;
}

control[0][1]=height/2; control[1][1]=50;
control[2][1]=50; control[3][1]=height/2;
    
// Control Points Colors
int[][] cCol = new int[4][4];
cCol[0]=[255,0,0,200]; cCol[1]=[255,255,0,200];
cCol[2]=[0,255,0,200]; cCol[3]=[0,100,255,200];  

// Mouse Vars
int mouseDown = 0, dragging = -1, lastDragging = 0;

void draw(){
  background(100);
  
  noFill();
  curveTightness(0.2);
  beginShape();
    curveVertex(-50,height/2);
    curveVertex(0,height/2);        
    for (n = 0; n < control.length; n ++){ 
    curveVertex(control[n][0], control[n][1]) ;}          
    curveVertex(width,height/2);
    curveVertex(width+50,height/2);      
  endShape();          
  
  for (n = 0; n < control.length; n ++){
    fill(cCol[n][0], cCol[n][1], cCol[n][2], cCol[n][3]);    
    rect(control[n][0] - ctrlSz[n] /2, control[n][1] - ctrlSz[n] /2, 
      ctrlSz[n], ctrlSz[n]);
  }
}

void hoverDetect(){   
   pushN=-1;
   for (n = 0; n < control.length; n ++){
    if (mouseX > control[n][0] - controlSize *2
        && mouseY > control[n][1] - controlSize *2
        && mouseX < control[n][0] + controlSize *2
        && mouseY < control[n][1] + controlSize *2){
          pushN=n;
          ctrlSz[n]= controlSize *2;                           
    } else { ctrlSz[n]= controlSize; }
  }
  return pushN;
}

void mouseMoved(){ hoverDetect() }

void mousePressed(){       
  if (dragging==-1){
    thisN = hoverDetect();
    dragging=thisN;
  }
}

void mouseReleased() { dragging = -1 }

void mouseDragged(){  
  if (dragging>-1){
    control[dragging][0] = mouseX;
    control[dragging][1] = mouseY;
  }
}