p5.js鼠标交互开发：如何编写代码实现椭圆尺寸动态变化

你当前使用的是p5.js框架，要实现和鼠标交互的椭圆尺寸动态变化效果，需要补充以下逻辑：

• 补充椭圆尺寸计算逻辑：直接调用p5.js内置的mouseX/mouseY全局变量获取当前鼠标坐标作为尺寸值，也可以用map()函数将鼠标坐标范围映射为你需要的尺寸区间，避免椭圆过大超出画布或过小不可见
• 补充椭圆绘制逻辑：调用ellipse()方法绘制椭圆，传入位置参数、计算好的宽度、高度参数，同时需要设置填充色和背景区分开，否则默认黑色填充会和黑色背景融合看不到
• 若你需要的是不绑定鼠标、自动随时间变化的尺寸效果，可直接使用你已定义的shape变量存储的初始化时间戳，用millis()计算当前时间和初始化时间的差值，再映射为尺寸参数即可

补全后的可运行代码如下：

let myY = 0;
let shape;

function setup() { 
  createCanvas(400, 400);
  shape = millis();
} 

function draw() { 
  background(0);
  // 鼠标交互效果：水平移动鼠标调整椭圆宽度，垂直移动调整高度
  let ellipseW = mouseX;
  let ellipseH = mouseY;
  fill(255); // 设置白色填充
  ellipse(200, 200, ellipseW, ellipseH); // 椭圆固定在画布中心

  /* 时间驱动自动变化效果：替换上面4行代码即可
  let passTime = millis() - shape;
  // 时间每3秒循环一次，尺寸在0到300之间循环变化
  let ellipseSize = map(passTime % 3000, 0, 3000, 0, 300);
  fill(255);
  ellipse(200, 200, ellipseSize, ellipseSize);
  */
}

如果需要椭圆同时跟随鼠标位置移动，把ellipse()的前两个坐标参数改为mouseX, mouseY即可。

内容的提问来源于stack exchange，提问作者user13571954