title: p5.js mousePressed line animation
body: <p>In p5.js I'm trying to create an animation where the bottom point of the lines smoothly (5px per frame) move to the bottom left corner of the canvas when the mouse is pressed. I can get them to the point they need to get to with lines.align but they instantly move there instead of animating.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    let lines = []
  
      function setup() {
        createCanvas(600, 400);
        for(let i = 0; i &lt; 150; i++) {
            lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
          }
      }
  
      function draw() {
        background(32, 44, 57);
        for(let i = 0; i &lt; lines.length; i++){
          lines[i].show();
        }
      }
  
      function mousePressed() {
        for(let i = 0; i &lt; lines.length; i++){
          lines[i].align();
        }
      }
  
      class Line {
        constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
          this.xStart = xStart;
          this.yStart = yStart;
          this.xFinish = xFinish;
          this.yFinish = yFinish;
          this.g = g;
          this.b = b;
          this.w = w;
        }
  
        show() {
          stroke(242, this.g, this.b);
          strokeWeight(this.w);
          line(this.xStart, this.yStart, this.xFinish, this.yFinish);
        }
  
        align() {
          while (this.xFinish &gt; 0) {
            this.xFinish = this.xFinish - 5;
          }
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>