const MARGIN_SPHERE = 10;

let valueRot1 = 0.7;

let valueRot2 = 0.5;

let rotFirstLine = 0;

let rotSecondLine = 0;

let xThirdLine = 100;

​

function setup() {

  createCanvas(800, 800);

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

  line(100, 100, 700, 100);

​

  //FirstLine

  push();

  translate(100, 100);

  rotate(rotFirstLine);

  line(0, 0, 600, 0);

  pop();

​

  //SecondLine

  if (rotFirstLine === 90) {

    push();

    translate(100, 700);

    rotate(rotSecondLine);

    line(0, 0, 0, -600);

    pop();

  }

  //Third Line

  if(rotFirstLine === 90 && rotSecondLine === 90){

    line(100, 400, xThirdLine, 400);

  }

​

  if (rotFirstLine < 90 - valueRot1) {

    rotFirstLine += valueRot1;

  } else {

    rotFirstLine = 90;

  };

  if (rotFirstLine === 90 && rotSecondLine < 90 - valueRot2) {

    rotSecondLine += valueRot2

  } else if (

    rotFirstLine === 90 && valueRot2 + rotSecondLine >= 90) {

    rotSecondLine = 90;

  }

  if(rotFirstLine === 90 && rotSecondLine === 90 && xThirdLine < 350){

    xThirdLine += 1;

  }

}