p5js -为具有3个不同位置的线设置动画

function setup() {
  createCanvas(400, 400); // 创建一个宽度和高度为400的画布
}

function draw() {
  background(220); // 设置背景颜色

  // 设置线条1的位置和动画效果
  let x1 = mouseX; // 设置线条1的起点x坐标为鼠标的x坐标
  let y1 = 100; // 设置线条1的起点y坐标为100
  let x2 = mouseX; // 设置线条1的终点x坐标为鼠标的x坐标
  let y2 = 200; // 设置线条1的终点y坐标为200
  line(x1, y1, x2, y2); // 绘制线条1

  // 设置线条2的位置和动画效果
  let x3 = 100; // 设置线条2的起点x坐标为100
  let y3 = mouseY; // 设置线条2的起点y坐标为鼠标的y坐标
  let x4 = 200; // 设置线条2的终点x坐标为200
  let y4 = mouseY; // 设置线条2的终点y坐标为鼠标的y坐标
  line(x3, y3, x4, y4); // 绘制线条2

  // 设置线条3的位置和动画效果
  let x5 = 300; // 设置线条3的起点x坐标为300
  let y5 = 100 + sin(frameCount * 0.05) * 50; // 设置线条3的起点y坐标为100加上正弦函数的值乘以50，产生动画效果
  let x6 = 400; // 设置线条3的终点x坐标为400
  let y6 = 200 + cos(frameCount * 0.05) * 50; // 设置线条3的终点y坐标为200加上余弦函数的值乘以50，产生动画效果
  line(x5, y5, x6, y6); // 绘制线条3
}