マウスクリックで線が伸びるスケッチ

/**
 * expanding lines by mouse click
 *
 * @author aadebdeb
 * @date 2017/03/12
 */
 
var eventManager;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(30);
  eventManager = new EventManager();
}

function draw() {
  eventManager.render();
  eventManager.update();
}

function EventManager() {
  this.isLocked = false;
  this.radius = 100;
  this.maxCount = 10;
  this.counter = 0;
  this.increment = 1;
  this.noiseScale = 0.01;
  this.noiseW = random(10000);
  this.noiseH = random(10000);
}

EventManager.prototype = {
  
  render: function() {
    background(0);
    if (this.counter != 0) {
      var w = 0; 
      var h = 0;
      var scaleSize = map(this.counter, 0, this.maxCount, 0, 1);
      strokeWeight(12);
      while (w <= width || h <= height) {
        
        stroke(255, 255, 0);
        if (h <= height) {
          line(0, h, map(noise(h * this.noiseScale + this.noiseH), 0, 1, width / 3, width) * scaleSize, h);
          h += 25;
        }
        
        stroke(255);
        if (w <= width) {
          line(w, 0, w, map(noise(w * this.noiseScale + this.noiseW), 0, 1, 0, height) * scaleSize);
          w += 25;  
        }
      }
    }
    noStroke();
    fill(255);
    ellipse(width / 2, height / 2, this.radius * 2, this.radius * 2);
  },
  
  update: function() {
    var d = sqrt(sq(mouseX - width / 2) + sq(mouseY - height / 2));
    if (!this.isLocked && mouseIsPressed && d < this.radius) {
      this.isLocked = true;
      if (this.counter == 0) {
        this.increment = 1;
      } else {
        this.increment = -1;
      }
    } else if (this.isLocked) {
      this.counter += this.increment;
      if (this.counter == 0 || this.counter == this.maxCount) {
        this.isLocked = false;
      }
    }
  }
  
}