IFD:PhysicalComp2011/Augusto Gandia

From Medien Wiki

Trip Book - digital and physical combination

First ideas

Despite the differences from this concept of the 80', "teleportation" is real nowadays. Last year I came from the other corner of the earth to Germany and after some hours the only perception which makes me understand the distance was the view through planes and trains windows. I arrived to Weimar and I could, like many other students, leave this place without seen more than the facilities of the University, the supermarkets and the down town streets. In the past, the communication between neighbor cities was through unclear paths across the outskirts. In the current way of living these are residual areas but it doesn't mean that are no interesting. I decide to take a map from Weimar and randomly visit different points of these undervalued zones and pick up an element which then reminds me that place. One leaf was the object that made that connection between my mind and the place and also a time connection due to the fact that leaves mutate when the times goes by.

Digital collected data

Digital let us made things simple. By creating an small program in Processing we can access information like names of streets, distances and paths to reach every leaf. Also digital data like pictures doesn't change throw time so that phenomenon gives us the chance to compare, for example physical leaves with digital ones and see how they have changed.

Physical collected data

Physical let us have a Book (object). An object is something ephemeral that show us how the time modifies it and let us compare digital data and physical data. It is the old school way of storing data but it's not fact to argue that it's not a contemporary wonderful tool.

Demo Video

<videoflash type=vimeo>36111919|450|250</videoflash>

Places photographs

Leaves photographs

Book photographs

Some Links

Code

boolean overPoint1 = false;
boolean overPoint2 = false;
boolean overPoint3 = false;
boolean overPoint4 = false;
boolean overPoint5 = false;
boolean overPoint6 = false;
boolean overPoint7 = false;
boolean overPoint8 = false;
boolean overPoint9 = false;
boolean overPoint10 = false;
boolean overPoint11 = false;
boolean overPoint12 = false;

int[] line1xa = {
  (800+2), (800-7), (800-40), (800-90), (800-130), (800-155), (800-185), (800-213), (800-245), (800-282), (800-285)
    , (800-380), (800-380), (800-490)
    };
  int[] line1ya = {
    (450-2), (450+17),(450+9), (450+98), (450+95), (450+68), (450+47), (450+34), (450+25), (450+25), (450+30)
      , (450+24), (450-2), (450+30)
      };

    int[] line1x = {
      (800+2), (800-7), (800+46), (800+38), (800-62)
      };
    int[] line1y = {
      (450-2), (450+17), (450+33), (450+65), (450+140)
      };

    int[] line1xb = {
      (800+2), (800-75), (800-105), (800-138), (800-149), (800-230), (800-390)
      };
    int[] line1yb = {
      (450-2), (450-28),(450-128), (450-129), (450-122), (450-118), (450-86)
      };

    int[] line1xc = {
      (800+2), (800-75), (800-105), (800-131), (800-175), (800-239), (800-259), (800-257), (800-240)
      };
    int[] line1yc = {
      (450-2), (450-28),(450-128), (450-218), (450-226), (450-210), (450-250), (450-262), (450-290)
      };

    int[] line1xd = {
      (800+2), (800-75), (800-105), (800-131), (800-175), (800-239), (800-259), (800-257), (800-332), (800-375), (800-424)
      };
    int[] line1yd = {
      (450-2), (450-28),(450-128), (450-218), (450-226), (450-210),  (450-250), (450-262), (450-257), (450-272), (450-271)
      };


    int[] line1xe = {
      (800+2), (800+18), (800+144), (800+163), (800+182), (800+202), (800+214), (800+209), (800+241), (800+263), (800+301), (800+301), (800+510)
      };
    int[] line1ye = {
      (450-2), (450-34), (450-4),  (450-33),  (450-31), (450-55), (450-90),  (450-109), (450-121), (450-151), (450-143), (450-128), (450-95)
      };
      
    int[] line1xf = {
      (800+2), (800+18), (800+33), (800+6), (800+12), (800+60), (800+68), (800+29), (800+8), (800+3), (800-49)
      };
    int[] line1yf = {
      (450-2), (450-34), (450-64),  (450-73), (450-82), (450-95),  (450-102), (450-188), (450-195), (450-250), (450-255) 
      };
      
    int[] line1xg = {
      (800+2), (800+18), (800+33), (800+6), (800+12), (800+60), (800+68), (800+98), (800+110), (800+123), (800+123), (800+101)
      };
    int[] line1yg = {
      (450-2), (450-34), (450-64),  (450-73), (450-82), (450-95),  (450-102), (450-127), (450-173), (450-230), (450-270), (450-345) 
      };
      
     int[] line1xh = {
      (800+2), (800+18), (800+33), (800+6), (800+12), (800+60), (800+68), (800+98), (800+110), (800+169), (800+205), (800+189), (800+184), (800+240), (800+352)
      };
    int[] line1yh = {
      (450-2), (450-34), (450-64),  (450-73), (450-82), (450-95),  (450-102), (450-127), (450-173), (450-176), (450-189), (450-202), (450-236), (450-253), (450-339) 
      };
      
      int[] line1xi = {
      (800+2), (800+90), (800+115), (800+166), (800+120), (800+95)
      };
    int[] line1yi = {
      (450-2), (450+20), (450+32),  (450+38), (450+220), (450+255)
      };
      
      int[] line1xj = {
      (800+2), (800+90), (800+115), (800+166), (800+171), (800+227), (800+400)
      };
    int[] line1yj = {
      (450-2), (450+20), (450+32),  (450+38), (450+44), (450+27), (450+207)
      };
      
      int[] line1xk = {
      (800+2), (800+90), (800+115), (800+166), (800+171), (800+227), (800+250), (800+278), (800+315), (800+348), (800+350), (800+390), (800+457)
      };
    int[] line1yk = {
      (450-2), (450+20), (450+32),  (450+38), (450+44), (450+27), (450+25), (450+27), (450+45), (450+62), (450+67), (450+60), (450+63), (450+62)
      };

    float pos =0;
    float pos2 =0;
    float pos3 =0;
    float pos4 =0;
    float pos5 =0;
    float pos6 =0;
    float pos7 =0;
    float pos8 =0;
    float pos9 =0;
    float pos10 =0;
    float pos11 =0;
    float pos12 =0;

    void setup() {
      size(1600,900);
      background(255);
      imageMode(CENTER);
    }

    void draw() {
           
      noStroke();
      background(255);
      //a=(width/2)+11;
      //b=(height/2)-45;
      smooth();
      // myImage=loadImage("mapa.jpg");
      // image(myImage,a,b,1000,600);


      //1 Drawing the points:
      
      for(int i=0; i<line1xa.length; i++) {
        
        int rad = 7;
        if(i==line1xa.length -1 ) {
          rad=12;
          fill(222,255,126);
          if(overPoint1 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xa[i],line1ya[i], rad,rad);
      }

      //1 check if mouse is over the last (red) point:
      if( mouseX<line1xa[line1xa.length-1]+50 && mouseX>line1xa[line1xa.length-1]-50 && mouseY<line1ya[line1ya.length-1]+50 && mouseY>line1ya[line1ya.length-1] -50 ) {
        overPoint1 = true;
        if(pos < line1xa.length-1) {
          pos += 0.1;
        }
      }
      else {
        overPoint1 = false;
        if(pos > 0) {
          pos -= 0.1;
        }
      }
      //1 connect the points:
      stroke(0);
      connect_line(line1xa, line1ya, pos);

      //2 Drawing the points:
      noStroke();
      for(int i=0; i<line1x.length; i++) {
        int rad = 7;
        if(i==line1x.length -1 ) {
          rad=12;
          fill(222,255,126);
          if(overPoint2 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1x[i],line1y[i], rad,rad);
      }

      //2 check if mouse is over the last (red) point:
      if( mouseX<line1x[line1x.length-1]+50 && mouseX>line1x[line1x.length-1]-50 && mouseY<line1y[line1y.length-1]+50 && mouseY>line1y[line1y.length-1] -50 ) {
        overPoint2 = true;
        if(pos2 < line1x.length-1) {
          pos2 += 0.1;
        }
      }
      else {
        overPoint2 = false;
        if(pos2 > 0) {
          pos2 -= 0.1;
        }
      }
      //2 connect the points:
      stroke(0);
      
      connect_line2(line1x, line1y, pos2);


      //3 Drawing the points:
       noStroke();
      for(int i=0; i<line1xb.length; i++) {
        int rad = 7;
        if(i==line1xb.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint3 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xb[i],line1yb[i], rad,rad);
      }

      //3 check if mouse is over the last (red) point:
      if( mouseX<line1xb[line1xb.length-1]+50 && mouseX>line1xb[line1xb.length-1]-50 && mouseY<line1yb[line1yb.length-1]+50 && mouseY>line1yb[line1yb.length-1] -50 ) {
        overPoint3 = true;
        if(pos3 < line1xb.length-1) {
          pos3 += 0.1;
        }
      }
      else {
        overPoint3 = false;
        if(pos3 > 0) {
          pos3 -= 0.1;
        }
      }
      //3 connect the points:
      stroke(0);
      connect_line3(line1xb, line1yb, pos3);

      //4 Drawing the points:
       noStroke();
      for(int i=0; i<line1xc.length; i++) {
        int rad = 7;
        if(i==line1xc.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint4 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xc[i],line1yc[i], rad,rad);
      }

      //4 check if mouse is over the last (red) point:
      if( mouseX<line1xc[line1xc.length-1]+50 && mouseX>line1xc[line1xc.length-1]-50 && mouseY<line1yc[line1yc.length-1]+50 && mouseY>line1yc[line1yc.length-1] -50 ) {
        overPoint4 = true;
        if(pos4 < line1xc.length-1) {
          pos4 += 0.1;
        }
      }
      else {
        overPoint4 = false;
        if(pos4 > 0) {
          pos4 -= 0.1;
        }
      }
      //4 connect the points:
      stroke(0);
      connect_line4(line1xc, line1yc, pos4);

      //5 Drawing the points:
       noStroke();
      for(int i=0; i<line1xd.length; i++) {
        int rad = 7;
        if(i==line1xd.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint5 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xd[i],line1yd[i], rad,rad);
      }

      //5 check if mouse is over the last (red) point:
      if( mouseX<line1xd[line1xd.length-1]+50 && mouseX>line1xd[line1xd.length-1]-50 && mouseY<line1yd[line1yd.length-1]+50 && mouseY>line1yd[line1yd.length-1] -50 ) {
        overPoint5 = true;
        if(pos5 < line1xd.length-1) {
          pos5 += 0.1;
        }
      }
      else {
        overPoint5 = false;
        if(pos5 > 0) {
          pos5 -= 0.1;
        }
      }
      //5 connect the points:
      stroke(0);
      connect_line5(line1xd, line1yd, pos5);

      //6 Drawing the points:
       noStroke();
      for(int i=0; i<line1xe.length; i++) {
        int rad = 7;
        if(i==line1xe.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint6 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xe[i],line1ye[i], rad,rad);
      }

      //6 check if mouse is over the last (red) point:
      if( mouseX<line1xe[line1xe.length-1]+50 && mouseX>line1xe[line1xe.length-1]-50 && mouseY<line1ye[line1ye.length-1]+50 && mouseY>line1ye[line1ye.length-1] -50 ) {
        overPoint6 = true;
        if(pos6 < line1xe.length-1) {
          pos6 += 0.1;
        }
      }
      else {
        overPoint6 = false;
        if(pos6 > 0) {
          pos6 -= 0.1;
        }
      }
      //6 connect the points:
      stroke(0);
      connect_line6(line1xe, line1ye, pos6);
      
       //7 Drawing the points:
        noStroke();
      for(int i=0; i<line1xf.length; i++) {
        int rad = 7;
        if(i==line1xf.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint7 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xf[i],line1yf[i], rad,rad);
      }

      //7 check if mouse is over the last (red) point:
      if( mouseX<line1xf[line1xf.length-1]+50 && mouseX>line1xf[line1xf.length-1]-50 && mouseY<line1yf[line1yf.length-1]+50 && mouseY>line1yf[line1yf.length-1] -50 ) {
        overPoint7 = true;
        if(pos7 < line1xf.length-1) {
          pos7 += 0.1;
        }
      }
      else {
        overPoint7 = false;
        if(pos7 > 0) {
          pos7 -= 0.1;
        }
      }
      //7 connect the points:
      stroke(0);
      connect_line7(line1xf, line1yf, pos7);
      
      //8 Drawing the points:
       noStroke();
      for(int i=0; i<line1xg.length; i++) {
        int rad = 7;
        if(i==line1xg.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint8 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xg[i],line1yg[i], rad,rad);
      }

      //8 check if mouse is over the last (red) point:
      if( mouseX<line1xg[line1xg.length-1]+50 && mouseX>line1xg[line1xg.length-1]-50 && mouseY<line1yg[line1yg.length-1]+50 && mouseY>line1yg[line1yg.length-1] -50 ) {
        overPoint8 = true;
        if(pos8 < line1xg.length-1) {
          pos8 += 0.1;
        }
      }
      else {
        overPoint8 = false;
        if(pos8 > 0) {
          pos8 -= 0.1;
        }
      }
      //8 connect the points:
      stroke(0);
      connect_line8(line1xg, line1yg, pos8);
      
      //9 Drawing the points:
       noStroke();
      for(int i=0; i<line1xh.length; i++) {
        int rad = 7;
        if(i==line1xh.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint9 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xh[i],line1yh[i], rad,rad);
      }

      //9 check if mouse is over the last (red) point:
      if( mouseX<line1xh[line1xh.length-1]+50 && mouseX>line1xh[line1xh.length-1]-50 && mouseY<line1yh[line1yh.length-1]+50 && mouseY>line1yh[line1yh.length-1] -50 ) {
        overPoint9 = true;
        if(pos9 < line1xh.length-1) {
          pos9 += 0.1;
        }
      }
      else {
        overPoint9 = false;
        if(pos9 > 0) {
          pos9 -= 0.1;
        }
      }
      //9 connect the points:
      stroke(0);
      connect_line9(line1xh, line1yh, pos9);
      
      //10 Drawing the points:
       noStroke();
      for(int i=0; i<line1xi.length; i++) {
        int rad = 7;
        if(i==line1xi.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint10 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xi[i],line1yi[i], rad,rad);
      }

      //10 check if mouse is over the last (red) point:
      if( mouseX<line1xi[line1xi.length-1]+50 && mouseX>line1xi[line1xi.length-1]-50 && mouseY<line1yi[line1yi.length-1]+50 && mouseY>line1yi[line1yi.length-1] -50 ) {
        overPoint10 = true;
        if(pos10 < line1xi.length-1) {
          pos10 += 0.1;
        }
      }
      else {
        overPoint10 = false;
        if(pos10 > 0) {
          pos10 -= 0.1;
        }
      }
      //10 connect the points:
      stroke(0);
      connect_line10(line1xi, line1yi, pos10);
      
       //11 Drawing the points:
        noStroke();
      for(int i=0; i<line1xj.length; i++) {
        int rad = 7;
        if(i==line1xj.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint11 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xj[i],line1yj[i], rad,rad);
      }

      //11 check if mouse is over the last (red) point:
      if( mouseX<line1xj[line1xj.length-1]+50 && mouseX>line1xj[line1xj.length-1]-50 && mouseY<line1yj[line1yj.length-1]+50 && mouseY>line1yj[line1yj.length-1] -50 ) {
        overPoint11 = true;
        if(pos11 < line1xj.length-1) {
          pos11 += 0.1;
        }
      }
      else {
        overPoint11 = false;
        if(pos11 > 0) {
          pos11 -= 0.1;
        }
      }
      //11 connect the points:
      stroke(0);
      connect_line11(line1xj, line1yj, pos11);
    
    
     //12 Drawing the points:
      noStroke();
      for(int i=0; i<line1xk.length; i++) {
        int rad = 7;
        if(i==line1xk.length -1 ) {
          fill(222,255,126);
          rad=12;
          if(overPoint12 == true) {
            rad = 40;
          }
        }
        else {
          fill(0);
        }
        ellipse(line1xk[i],line1yk[i], rad,rad);
      }
      //12 check if mouse is over the last (red) point:
      if( mouseX<line1xk[line1xk.length-1]+50 && mouseX>line1xk[line1xk.length-1]-50 && mouseY<line1yk[line1yk.length-1]+50 && mouseY>line1yk[line1yk.length-1] -50 ) {
        overPoint12 = true;
        if(pos12 < line1xk.length-1) {
          pos12 += 0.1;
        }
      }
      else {
        overPoint12 = false;
        if(pos12 > 0) {
          pos12 -= 0.1;
        }
      }
      //12 connect the points:
      stroke(0);
      connect_line12(line1xk, line1yk, pos12);
    }
    void connect_line(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    void connect_line2(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }

    void connect_line3(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }

    void connect_line4(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    void connect_line5(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }

    void connect_line6(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
     void connect_line7(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    void connect_line8(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    void connect_line9(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    
     void connect_line10(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    
    void connect_line11(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }
    
        void connect_line12(int[] xArray, int[] yArray, float position) {

      int num_points = xArray.length;
      int full_pos = int(position);
      float rest_pos = position - full_pos;

      for (int i=0; i < full_pos; i++) {
        if(i < num_points) {
          line(xArray[i], yArray[i], xArray[i+1], yArray[i+1]);
        }
      }

      if (full_pos < num_points-1) {
        float betweenX = lerp(xArray[full_pos], xArray[full_pos+1], rest_pos);
        float betweenY = lerp(yArray[full_pos], yArray[full_pos+1], rest_pos);
        line(xArray[full_pos], yArray[full_pos], betweenX, betweenY);
      }
    }