float [] x1 = {
    200,100,100,200,200}; //parent1
  float [] y1 = {
    200,200,300,300,200};
  float [] x2 = {
    350,300,400,350}; //parent2
  float [] y2 = {
    200,300,300,200};
  float [] xc, yc; //child
  float ratio=0.5; //percentage of interpolation
  int k1, k2, maxpoints; //number of points for the arrays
  void setup(){
    size(500,400);
    smooth(); //for visual effect
    maxpoints = max(x1.length, x2.length); //the max number of either array
    xc = new float[maxpoints]; //create a child with points as the largest parent
    yc = new float[maxpoints];
  }
  void draw(){
    background(255);
    stroke(0);
    for(int i=1; i<xc.length; i++) //draw the child’s lines
      line(xc[i],yc[i],xc[i-1],yc[i-1]);
    for(int i=0; i<xc.length; i++) //draw the child’s vertices
      rect(xc[i]-1,yc[i]-1,3,3);
    stroke(255,0,0);
    for(int i=1; i<x1.length; i++) //draw parent 1
      line(x1[i],y1[i],x1[i-1],y1[i-1]);
    for(int i=1; i<x2.length; i++) //draw parent 2
      line(x2[i],y2[i],x2[i-1],y2[i-1]);
  }
  void mouseDragged(){
    for(int k=0; k<maxpoints; k++){
      if(x1.length>=x2.length){ //if p1 is greater than p2
        k1 = k; //counter 1 remains as is
        k2 = int(k/((x1.length*1.)/(x2.length*1.)));
      } //counter 2 must be adjusted
      else{ //if p2 is greater than p1
        k1 = int(k/((x2.length*1.)/(x1.length*1.)));
        k2 = k;
      }
      xc[k] = x1[k1] + (mouseX*1./width*1.) * (x2[k2] - x1[k1]);
      yc[k] = y1[k1] + (mouseX*1./width*1.) * (y2[k2] - y1[k1]);
    }
  }