let num_of_line = 4;
let curr_frame = 0;
let speed = 1;

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    console.log("left_arrow");
    speed = speed - 1;
    if (speed <= 0) speed = 1;
  } else if (keyCode === RIGHT_ARROW) {
    console.log("right_arrow");
    speed = speed + 1;
    if (speed >= 3600) speed = 3600;
  }
}

function setup() {
  createCanvas(400, 400);
  background(220);
  frameRate(30);
}

function draw() {
  background(220);

  if (curr_frame < 3600) {
    curr_frame += speed;
  } else {
    curr_frame = 0;
  }

  var boundary = 100 * abs(sin(curr_frame / 10));
  console.log(speed);

  var top_left = -20 + boundary;
  var bottom_right = 420 - boundary;
  var top_right = 420 - boundary;
  var bottom_left = -20 + boundary;

  var line_xys = [
    [top_left, 0, bottom_right, 400],
    [top_right, 0, bottom_left, 400],
  ];

  if (num_of_line > 0) line(...line_xys[0]);
  if (num_of_line > 1) line(...line_xys[1]);

  if (num_of_line > 2) {
    var need_to_draw = num_of_line - 2;
    for (var i = 1; i <= need_to_draw; i++) {
      var top_width = top_right - top_left;
      var step = top_width / (need_to_draw + 1);
      var top_x = top_left + step * i;
      var bottom_x = bottom_right - step * i;

      line(top_x, 0, bottom_x, 400);
    }
  }
}