let m = 40;

var bgcolor;

​

function setup() {

  createCanvas(400, 400);

  bgcolor = color(0);

}

​

function draw() {

  background(bgcolor);

​

  let x, y;

  for (x = m; x <= width - m; x += m) {

    for (y = m; y <= height - m; y += m) {

      noStroke();

      rect(x - 1, y - 1, 3, 3);

      stroke(255, 100);

​

      // Symmetrical lines with animation

      line(x, y, width / 2 + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);

      line(x, y, width / 2 + sin(frameCount / 20) * 20, 0 + cos(frameCount / 20) * 20);

      line(x, y, 0 + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);

      line(x, y, width / 2 + sin(frameCount / 20) * 20, height + cos(frameCount / 20) * 20);

      line(x, y, width + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);

    }

  }

}

//background change by clicking the mouse

function mousePressed() {

  bgcolor = color(random(0, 170), random(0, 170), random(0, 170));

}

​