脑洞大开！用 MCP 玩转 p5.js，动动嘴就能搞定创意编程？！

今天，我要给大家带来一个更疯狂的想法：能不能用大模型来控制 p5.js，实现动动嘴就能搞定创意编程？

什么是 p5.js？

在开始之前，先简单介绍一下 p5.js。如果你是一位前端开发者，或者对创意编程感兴趣，那你一定听说过它。

p5.js 是一个 JavaScript 库，它让我们可以用非常简单、直观的代码来创建各种图形、动画、交互效果。p5.js 的目标是让编程变得更易于上手，更具表现力，特别适合艺术家、设计师、教育工作者和初学者。

为什么要把大模型和 p5.js 结合起来？

你可能会问，好好的 p5.js(https://github.com/processing/p5.js)，为什么要跟大模型扯上关系呢？

其实，这背后有两个原因：

1. 降低创意编程的门槛：虽然 p5.js 已经很简单了，但对于完全没有编程基础的人来说，还是有一定学习成本的。如果能用自然语言来描述我们想要的视觉效果，让大模型自动生成 p5.js 代码，那岂不是人人都能成为艺术家？
2. 探索新的交互方式：大模型不仅能理解自然语言，还能生成各种创意内容。如果我们能将大模型的“想象力”与 p5.js 的表现力结合起来，就能创造出前所未有的交互体验！

我的思路：MCP + WebSocket

受到 Unity MCP Package 的启发，我想到了一种将大模型与 p5.js 连接起来的方案：MCP + WebSocket。

整体架构

1. LLM/Client: 可以是任何能够发送文本指令的来源，比如 Claude、Cursor，或者一个简单的命令行界面。
2. Python MCP Server:
- • 作为一个 WebSocket 服务器，接收来自 LLM/Client 的指令。
- • 解析指令，提取出关键参数（比如颜色、形状、位置等）。
- • 将参数通过 WebSocket 消息发送给 p5.js Sketch。
3. p5.js Sketch:
- • 包含一个 WebSocket 客户端，连接到 Python MCP Server。
- • 接收来自服务器的消息，根据消息内容更新绘图。
- • 将绘图结果显示在浏览器中。
4. Display: 用户的浏览器，用于展示 p5.js Sketch 的输出。

为什么选择 WebSocket？

• 实时性：WebSocket 提供了双向、实时的通信能力，非常适合这种需要频繁交互的场景。
• 跨平台：WebSocket 是 Web 标准，可以在各种平台、各种语言中使用。
• 简单易用：Python 和 JavaScript 都有成熟的 WebSocket 库，开发起来很方便。

概念验证：代码实现

为了验证这个想法的可行性，我做了一个非常简单的原型。

Python MCP Server (简易版)

# server.py
import asyncio
import websockets
import json

asyncdefhandler(websocket, path):
    print(f"New connection from {websocket.remote_address}")
    try:
        asyncfor message in websocket:
            print(f"Received: {message}")
            try:
                data = json.loads(message)
                # 假设指令格式: {"command": "draw", "shape": "circle", "x": 100, "y": 100, "color": "red"}
                if data.get("command") == "draw":
                    # 简单起见，直接将收到的数据转发给 p5.js
                    await websocket.send(json.dumps(data))
            except json.JSONDecodeError:
                print("Invalid JSON format")
    except websockets.exceptions.ConnectionClosedError:
        print("Connection closed")

asyncdefstart_server():
    server = await websockets.serve(handler, "localhost", 6500)
    print("WebSocket server started on ws://localhost:6500")
    await server.wait_closed()

if __name__ == "__main__":
    asyncio.run(start_server())

这段代码实现了一个简单的 WebSocket 服务器，它会监听本地的 6500 端口。当收到客户端的消息时，它会尝试解析 JSON 格式的数据，如果数据中包含 "command": "draw"，就将整个数据转发给连接的 p5.js 客户端。

p5.js Sketch (简易版)

// sketch.js
let socket;

functionsetup() {
createCanvas(400, 400);
  socket = newWebSocket("ws://localhost:6500");

  socket.onopen = function(event) {
    console.log("Connected to server");
  };

  socket.onmessage = function(event) {
    let data = JSON.parse(event.data);
    console.log("Received from server:", data);
    if (data.command === "draw") {
      drawShape(data.shape, data.x, data.y, data.color);
    }
  };

  socket.onclose = function(event) {
    console.log("Disconnected from server");
  };
}

functiondrawShape(shape, x, y, color) {
fill(color);
if (shape === "circle") {
    circle(x, y, 50);
  } elseif (shape === "square") {
    rect(x, y, 50, 50);
  }
}

functiondraw() {
// 可以根据需要添加动画或其他交互
}

这段 p5.js 代码创建了一个 WebSocket 客户端，连接到本地的 6500 端口（也就是我们的 Python 服务器）。当收到服务器的消息时，它会解析 JSON 数据，如果 command 是 draw，就调用 drawShape 函数绘制相应的图形。

如何运行

1. 启动 Python 服务器：在命令行中运行 python server.py。
2. 打开 p5.js sketch：将 sketch.js 的代码放入一个 HTML 文件中，然后在浏览器中打开这个 HTML 文件。
3. 发送指令：现在，你可以通过任何能够发送 WebSocket 消息的工具（甚至可以写一个简单的 Python 脚本），向 ws://localhost:6500 发送 JSON 格式的指令，例如：

{"command": "draw", "shape": "circle", "x": 100, "y": 100, "color": "red"}

你应该就能在 p5.js 的画布上看到一个红色的圆圈！

未来展望

这只是一个非常基础的原型，但它证明了用 MCP 协议连接大模型和 p5.js 是完全可行的！

接下来，我们可以：

• 完善指令集：支持更多图形、属性、动画效果等。
• 集成 LLM：将这个原型与 Claude 等 LLM 对接，实现真正的自然语言控制。
• 错误处理：添加更健壮的错误处理机制。
• 双向通信：让 p5.js 也能向服务器发送消息（例如，报告当前状态、触发事件等）。
• 用户界面：开发一个更友好的用户界面，方便用户配置和使用。
• 封装：将 Python 服务器和 p5.js 代码封装成更易于使用的库或工具。

如果你对这个方向感兴趣，欢迎一起交流、一起探索！或许，在不久的将来，我们真的能用自然语言来创造出各种令人惊叹的视觉艺术！

智蜂食谱