P5 Studio

Who am I & why did i develop this extension?

My name is Peter Dickx and I'm a coding teacher at EHB (Erasmushogeschool Brussel).
In the program Multimedia & Creative Technologies I teach the first course "Creative Coding I",
in which students learn the basic concepts of coding, in a fun and creative way!

To make it easier for students to start coding, without having any prior technical knowledge, I created this extension as a teaching tool. However it can be also be used as a prototyping tool for any creative coder!

Like this extension and want to support me? Buy me a coffee:

Introduction

P5 Studio is a Visual Studio Code extension that brings live coding and rapid prototyping to p5.js sketches. It provides an interactive webview panel for instant feedback, variable control, and error reporting, making it ideal for creative coding, teaching, and experimentation with p5.js in JavaScript or TypeScript.

Features

• Live Preview: Instantly see your p5.js sketch update as you type or save.
• Global Variable Controls: Automatically detects global variables and provides a UI to adjust them in real time.
• Error Overlay: Syntax and runtime errors are shown as overlays in the webview and logged in the Output panel.
• Reload Button: Manually reload your sketch
• Auto Reload: Optionally reload on typing or only on save (configurable).
• Workspace Imports: Automatically loads scripts from common/ and import/ folders in your workspace.
• Include: Automatically loads scripts and media from the include/ folder in the same folder as the sketch.
• P5 Reference Integration: Quick access to the p5.js reference and lookup for selected text.
• Project Bootstrap: Quick setup to create a folder structure for p5.js projects and a jsconfig.json for p5js types intellisense.
• Pause/Resume Draw Loop: A context-aware pause/play button in the editor title bar lets you toggle the sketch loop (noLoop() / loop()) without reloading when your code defines draw().
• Debugging and Stepping:
  • Step through your code line by line.
  • Continue to the next breakpoint.
  • Automatically run stepping with configurable intervals.
  • Stop debugging at any time.
  • Visualize local variable values in the variables panel.
• Capture: Record animations or graphics from the webview with a record button.
• Save images:¨ Right click on your canvas to copy or save the current image.
• Duplicate sketches: Right click on a file and duplicate it.
• OSC Bridge: Send and Receive OSC messages with sendOSC(address, args) and the receivedOSC(address, args) handler.
• p5js v2 support: Switch between v1.11 and 2.1

How to Use

1. Install the Extension:

   • Search for P5 Studio in the VS Code Extensions marketplace and install it.

2. Project Setup:

   • Automatic project setup notification.
   • OR Run P5 Studio: Setup new P5 Project to scaffold a p5.js project structure with common/, import/, media/, and sketches/ folders and a jsconfig to enable autocompletion for p5.
   • If no folder/workspace is open, select a folder or create a new one using the dialog window.

3. Open or Create a Sketch:

   • Open a .js or .ts file with your p5.js code.
   • Use P5 Live BUTTON (or the command palette (Ctrl+Shift+P or Cmd+Shift+P) and run P5 Studio: Open P5 Panel).

4. Live Coding:

   • Edit your code and see changes instantly in the webview panel.
   • Adjust global variables from the VARIABLES panel.
   • Errors will appear as overlays and in a dedicated output channel per sketch.

5. Reload Options:

   • Use the reload button in the webview to manually reload
   • Toggle auto-reload on typing or on save via in the settings.

6. Import Scripts:

   • Place shared code in common/ or import/ folders in your workspace. These scripts are loaded automatically in every sketch.
   • Place media in the media/ folder and reference them with the MEDIA_FOLDER variable ex: mySound = loadSound(MEDIA_FOLDER + '/doorbell');

7. P5 Reference:

   • Use the status bar button or command palette to quickly open the p5.js reference.
   • Select text in your code, right click and choose "Search in P5 reference" for a shortcut.

Configuration

All settings live under the P5 Studio namespace. Configure them from VS Code settings (search for "P5 Studio") or edit settings.json directly.

OSC (Open Sound Control)

P5 Studio supports sending and receiving OSC (Open Sound Control) messages between your p5.js sketch and other OSC-compatible software or devices.

Features

• Send OSC messages from your sketch to any remote OSC address/port.
• Receive OSC messages in your sketch from other OSC clients.
• Configure OSC remote/local address and ports in the extension settings.
• Start/Stop the OSC server with the "Start OSC" or "Stop OSC" statusbar button.

Usage

Sending OSC messages from your sketch

Use the global function sendOSC(address, args) in your p5.js code:

// Send a message to /myAddress with two arguments
sendOSC('/myAddress', [42, 'hello']);

• address: The OSC address string (e.g., /myAddress)
• args: An array of arguments (numbers, strings, booleans)

Receiving OSC messages in your sketch

Define a global function receivedOSC(address, args) in your sketch. This function will be called automatically when an OSC message is received:

function receivedOSC(address, args) {
   // Convert OSC metadata objects (from osc.js) into plain JS values
   const values = oscArgsToArray(args);
   output('Received OSC:', address, values[0]);
   // Handle incoming OSC messages here
}

• address: The OSC address string of the received message
• args: An array of arguments (often objects like { type, value } when sent with metadata)

Helper: oscArgsToArray(args)

OSC args can be delivered with type metadata objects. The helper oscArgsToArray(args) converts these into a plain array of JavaScript values.

Start/Stop the osc server from code

Use the global function startOSC(localAddress, localPort, remoteAddress, remotePort) in your p5.js code to start the OSC Server.

   startOSC("0.0.0.0", 57121, "192.168.0.1", 57120);

Use the global function stopOSC() in your p5.js code to stop the OSC Server.

   stopOSC();

Configuration

You can configure the OSC connection in your VS Code settings:

• P5Studio.oscRemoteAddress: The remote host to send OSC messages to (default: 127.0.0.1)
• P5Studio.oscLocalAddress: The local bind address to receive on (default: 127.0.0.1; set to 0.0.0.0 for LAN).
• P5Studio.oscRemotePort: The remote port to send OSC messages to (default: 57120)
• P5Studio.oscLocalPort: The local port to listen for incoming OSC messages (default: 57121)

This allows you to connect your p5.js sketches to other creative coding tools, DAWs, or hardware that support OSC.

Tips & self-test

• To self-test without an external server, set the P5Studio.oscRemoteAddress and P5Studio.oscLocalAddress both to 127.0.0.1 and set P5Studio.oscRemotePort to match P5Studio.oscLocalPort (default 57121) and call sendOSC('/test', [1,'a',true]) from your sketch.
• To receive from another device on your network, set P5Studio.oscLocalAddress to 0.0.0.0, keep P5Studio.oscLocalPort (e.g., 57121), and send to your computer’s LAN IP at that port.

Output / Input

• Log messages to the output channel with the output(msg) function

  output("Hello");
  

• Place a inputPrompt() function call at the top of your file to prompt for input:

  let a = inputPrompt();
  

Tips

• For autocompletion of functions in import/common files, use a jsconfig.json and/or JSDoc references.
• Prototype extensions (e.g., p5.prototype.myFunc) may require a .d.ts or JSDoc shim for IntelliSense.

License

MIT

✅ Free use (commercial and non-commercial)

✅ Attribution required: Peter Dickx

✅ No restriction on modification, redistribution, etc.

🚫 No warranty / no liability

Attributions

Shout out to: https://github.com/filipesabella/ with his extension vscode-live-p5 His project was the start for mine, initially i made a few UI Changes, but i had a different vision for this tool and went back to the drawing board. Not much of the original code is left in my project, but I still wanted to give credit to Filipe for his great work and inspiration!

AI

This extension was developed with the use of github copilot & chatgpt. Some code in this project was generated and/or refactored.