let x1 = 0; // the diagonal lines stats

let y1 = 0;

let x2 = 400;

let y2 = 400; 

let speed = 5 // the diagonal lines animation speed

function setup() { 

  createCanvas(400, 400);

​

} 

​

function draw() { 

  background(0);

  if (button1 == true) { // button pressed check

    fill(0);

    stroke(255);

  line(x1,y1,x2,y2);

 line(x1,y2,x2,y1);

  x1 = x1 + speed;

  y1 = y1 + speed;

  x2 = x2 - speed;

  y2 = y2 - speed;

  } else {

    fill(255);

  }

  if (x1>400 || x1<0) { // the diagonal lines' bounce back

    x1 = x1-speed;

    x2 = x2 +speed;

    y1 = y1 - speed ;

    y2 = y2 + speed;

  speed = - speed+1;

  } 

  // the colored triangles

  noStroke()

  if (button1 && frameCount % 10 == 0) {

        speed = speed + 2

    fill(random(255),0,255);

    triangle(0,0,200,200,400,0);

  }

  if (button1 && frameCount % 15 == 0) {

        speed = speed -3;

    fill(0,random(255),255);

    triangle(0,0,200,200,0,400);    

  }

  if (button1 && frameCount % 20 == 0) {

    speed= speed+4;

    fill(random(255),255,0);

    triangle(0,400,200,200,400,400);

  }

  if (button1 && frameCount % 30 == 0) {

    speed=speed-5;

    fill(random(255),0,255);

    triangle(400,0,200,200,400,400);

  }

  // the button!!!

  fill(255);

  ellipse(200, 200, 50, 50);

}

​

function mousePressed() { 

​

  let d = dist(200, 200, mouseX, mouseY);

  if (d < 25) {

    button1 = true;

  } else {

    button1 = false;

  }

​

}