如何在Google Colab中解决p5 Python库的图形显示异常问题

故障根因 #

• Colab 为无本地图形交互界面的云端容器，不存在 X11 显示服务
• p5.py 默认调用 GLFW 渲染后端，强依赖本地显示环境，因此触发 DISPLAY 环境变量缺失 初始化失败报错

操作步骤 #

• 安装系统级离屏渲染依赖（解决无头环境的渲染依赖问题）
  !apt-get install -y libosmesa6-dev libgl1-mesa-glx
• 安装并配置 p5 库，强制指定离屏渲染后端：

  !pip install -U p5
  import os
  # 指定 p5 底层渲染框架使用 osmesa 离屏后端，跳过 GLFW 调用
  os.environ['VISPY_APP_BACKEND'] = 'osmesa'
  import p5
  

• 适配 Colab 输出逻辑的测试代码：

  from IPython.display import display, Image
  
  def setup():
      p5.size(640, 360)
      p5.no_stroke()
      p5.background(204)
      # 初始化后触发单次渲染
      p5.redraw()
  
  def draw():
      if p5.mouse_is_pressed:
          p5.fill(p5.random_uniform(255), p5.random_uniform(127), p5.random_uniform(51), 127)
      else:
          p5.fill(255, 15)
  
      circle_size = p5.random_uniform(low=10, high=80)
      p5.circle((p5.mouse_x, p5.mouse_y), circle_size)
  
  def key_pressed(event):
      p5.background(204)
  
  # 以离屏模式运行，不尝试启动本地窗口
  p5.run(mode='offscreen')
  # 导出渲染完成的画布并在 Colab 输出区展示
  p5.get_surface().save('p5_output.png')
  display(Image('p5_output.png'))
  

注意事项 #

• Colab 为静态笔记本环境，不支持 p5 的实时鼠标、键盘交互逻辑，若需要调整画面效果可手动修改 draw() 函数中的参数后重新运行代码
• 若需要生成多帧内容，可在循环中调用 p5.redraw() 后逐帧导出展示

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