P5.js在网格上创建淡入淡出曲线

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  // 绘制网格
  for (let x = 0; x < width; x += 50) {
    for (let y = 0; y < height; y += 50) {
      rect(x, y, 50, 50);
    }
  }
}

function mousePressed() {
  // 获取鼠标点击的位置
  let x = mouseX;
  let y = mouseY;
  
  // 淡入淡出效果
  let alpha = 0; // 初始透明度为0
  let fadeSpeed = 5; // 淡入淡出速度
  
  // 使用P5.js的draw()函数来实现动画效果
  function draw() {
    background(220);
    
    // 绘制网格
    for (let x = 0; x < width; x += 50) {
      for (let y = 0; y < height; y += 50) {
        // 判断当前网格是否被点击
        if (x === mouseX && y === mouseY) {
          // 设置填充颜色和透明度
          fill(255, 0, 0, alpha);
        } else {
          fill(255);
        }
        
        rect(x, y, 50, 50);
      }
    }
    
    // 更新透明度
    if (alpha < 255) {
      alpha += fadeSpeed;
    }
  }
  
  // 设置动画帧率
  frameRate(30);
}