Qu’est-ce que p5.js ?

Avant de commencer, permettez-moi de présenter brièvement p5.js. Si vous êtes un développeur front-end ou intéressé par la programmation créative, vous devez en avoir entendu parler.

p5.js est une bibliothèque JavaScript qui nous permet de créer divers graphiques, animations et effets interactifs avec un code très simple et intuitif. L’objectif de p5.js est de rendre la programmation plus accessible et expressive, en particulier pour les artistes, les concepteurs, les éducateurs et les débutants.

Pourquoi combiner de grands modèles avec p5.js ?

Vous vous demandez peut-être pourquoi p5.js (https://github.com/processing/p5.js) devrait être associé à de grands modèles ?

En fait, il y a deux raisons à cela :

1. 1.  Abaissez le seuil de la programmation créative : bien que p5.js soit très simple, il présente toujours un certain coût d’apprentissage pour les personnes qui n’ont aucune base de programmation. Si nous pouvons utiliser le langage naturel pour décrire les effets visuels que nous souhaitons et laisser le grand modèle générer automatiquement le code p5.js, alors tout le monde ne pourrait-il pas devenir un artiste ?
2. 2.  Explorez de nouvelles façons d’interagir : les grands modèles peuvent non seulement comprendre le langage naturel, mais également générer divers contenus créatifs. Si nous pouvons combiner « l’imagination » des grands modèles avec l’expressivité de p5.js, nous pouvons créer des expériences interactives sans précédent !

Mon idée : MCP + WebSocket

Inspiré par le package Unity MCP, j’ai trouvé une solution pour connecter de grands modèles avec p5.js : MCP + WebSocket .

Architecture globale

1. 1.  LLM/Client : il peut s’agir de n’importe quelle source capable d’envoyer des commandes texte, telles que Claude, Cursor ou une simple interface de ligne de commande.
2. 2.  Serveur Python MCP :
   • • Agit comme un serveur WebSocket, recevant des commandes de LLM/Client.
   • • Analyser les instructions et extraire les paramètres clés (tels que la couleur, la forme, la position, etc.).
   • • Envoyer des paramètres au Sketch p5.js via un message WebSocket.
3. 3.  Croquis p5.js :
   • • Contient un client WebSocket qui se connecte au serveur Python MCP.
   • • Recevez des messages du serveur et mettez à jour le dessin en fonction du contenu du message.
   • • Afficher les résultats du dessin dans le navigateur.
4. 4.  Affichage : Le navigateur de l’utilisateur, utilisé pour afficher la sortie du Sketch p5.js.

Pourquoi WebSocket ?

• •  Temps réel : WebSocket offre des capacités de communication bidirectionnelles en temps réel, ce qui est très adapté aux scénarios nécessitant des interactions fréquentes.
• •  Multiplateforme : WebSocket est une norme Web et peut être utilisé sur différentes plateformes et dans différents langages.
• •  Facile à utiliser : Python et JavaScript disposent tous deux de bibliothèques WebSocket matures, ce qui rend le développement très facile.

 Preuve de concept : implémentation du code

Pour vérifier la faisabilité de cette idée, j’ai réalisé un prototype très simple.

Serveur Python MCP (version simplifiée)

# 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())

Ce code implémente un serveur WebSocket simple qui écoute sur le port 6500 sur l’ordinateur local. Lors de la réception d’un message d’un client, il essaie d’analyser les données au format JSON et, si elles contiennent  "command": "draw", transmet l’intégralité des données au client p5.js connecté.

Croquis p5.js (version simplifiée)

// 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() {
// 可以根据需要添加动画或其他交互
}

Ce code p5.js crée un client WebSocket et se connecte au port local 6500 (qui est notre serveur Python). Lors de la réception d’un message du serveur, il analysera les données JSON et, si  command elles sont correctes  draw, il appellera  drawShape la fonction pour dessiner les graphiques correspondants.

Comment ça marche

1. 1.  Démarrez le serveur Python : Exécutez dans la ligne de commande  python server.py.
2. 2.  Ouvrez le croquis p5.js : placez  sketch.js le code dans un fichier HTML, puis ouvrez le fichier HTML dans un navigateur.
3. 3.  Envoyer des instructions : Vous pouvez désormais utiliser n’importe quel outil capable d’envoyer des messages WebSocket (même un simple script Python) pour  ws://localhost:6500 envoyer des instructions au format JSON au client, par exemple :

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

Vous devriez voir un cercle rouge sur le canevas p5.js !

Perspectives d’avenir

Il s’agit simplement d’un prototype très basique, mais il prouve qu’il est possible de connecter de grands modèles avec p5.js en utilisant le protocole MCP !

Ensuite, nous pouvons :

• •  Améliorer le jeu d’instructions : prendre en charge davantage de graphiques, de propriétés, d’effets d’animation, etc.
• •  Intégrer LLM : Connectez ce prototype avec des LLM tels que Claude pour obtenir un véritable contrôle du langage naturel.
• •  Gestion des erreurs : ajout d’un mécanisme de gestion des erreurs plus robuste.
• •  Communication bidirectionnelle : permet également à p5.js d’envoyer des messages au serveur (par exemple, signaler l’état actuel, déclencher des événements, etc.).
• •  Interface utilisateur : Développer une interface utilisateur plus conviviale pour faciliter la configuration et l’utilisation par l’utilisateur.
• •  Packaging : empaquetez le serveur Python et le code p5.js dans une bibliothèque ou un outil plus facile à utiliser.

Si vous êtes intéressé par cette direction, n’hésitez pas à communiquer et à explorer ensemble ! Peut-être que dans un avenir proche, nous pourrons réellement utiliser le langage naturel pour créer toutes sortes d’œuvres d’art visuelles étonnantes !