如何避免多个p5.js草图同时运行 实现鼠标悬停时激活对应草图

p5.js的绘制循环可以通过内置方法手动控制，结合鼠标事件即可实现仅悬停对应画布时运行草图的需求，具体实现逻辑如下：

• 初始化阶段默认暂停所有草图的绘制循环
• 给每个草图的canvas元素绑定鼠标事件，悬停时启动循环，离开时暂停循环

基础实现代码 #

单个草图实例的配置示例（实例模式） #

const yourSketch = (p) => {
  p.setup = function() {
    p.createCanvas(300, 300);
    // 此处保留你原本的初始化逻辑

    // 给当前草图的canvas绑定启停事件
    p.canvas.addEventListener('mouseenter', () => p.loop());
    p.canvas.addEventListener('mouseleave', () => p.noLoop());
    
    // 初始化完成后默认暂停绘制
    p.noLoop();
  };

  p.draw = function() {
    // 此处保留你原本的绘制逻辑，无需修改
  };
};
// 挂载草图到对应DOM容器
new p5(yourSketch, 'target-container-id');

可选优化方案 #

• 离开画布时如果需要释放更多资源，可以在mouseleave回调中添加p.clear()清屏，或者重置草图内部的动画状态变量
• 对于仅需要单次渲染的静态草图，可以去掉loop()调用，改为mouseenter时仅执行一次p.redraw()即可
• 适配触摸设备时，可以额外绑定touchstart触发p.loop()，touchend触发p.noLoop()

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