P5 AI Studio User Guide

Everything you need to know to create generative art with AI.

This documentation is provided by xelsed.ai, a research company focused on learning disabilities and AI.

Introduction

P5 AI Studio is a specialized development environment for creative coding with p5.js. Unlike standard text editors, it integrates powerful AI models directly into your workflow, allowing you to write code by describing what you want to see—a process we call "Vibe Coding." (See our Research to learn more about how we designed this).

Whether you're a seasoned creative technologist or a complete beginner, this tool is designed to accelerate your experimentation and help you visualize ideas instantly.

Quick Start

  1. Open the Editor: Go to p5js.ai. No account is needed to start.
  2. Ask the AI: In the right-hand panel, type a prompt like: "Create a particle system that reacts to music" or "Draw a recursive tree that sways in the wind."
  3. Run & Iterate: The AI will generate code. Click "Run" to see it in the Preview panel. If it's not quite right, tell the AI what to change: "Make the particles blue" or "Slow down the animation."

What is Vibe Coding?

Vibe Coding is a new way of programming where you focus on the feeling, behavior, and outcome of your software rather than the syntax.

Instead of worrying about semicolons or memorizing math formulas, you describe the "vibe"—the aesthetic and interactive qualities you want. The AI acts as your technical partner, translating your vision into working JavaScript.

Tip: Be descriptive! "Make it look cool" is vague. "Make it look like a 1980s retro synthwave grid with neon colors" gives the AI much more to work with.

Learn more about why p5js.ai is ideal for vibe coding in our dedicated article.

Using the AI Assistant

The AI panel is your copilot. It can:

  • Write Code: Generate full sketches from scratch.
  • Edit Code: "Change the background to black" or "Add mouse interaction."
  • Fix Bugs: If your code crashes, paste the error or ask "Why isn't this working?"
  • Explain: "Explain how the Perlin noise loop works."

Available Models

P5 AI Studio offers several models optimized for different tasks:

  • GPT-4.1 Mini (OpenAI): Fast, smart, and great for general logic. The default choice.
  • Claude 4.5 Sonnet (Anthropic): Excellent at creative writing and explaining complex concepts.
  • Gemini 2.5 Flash (Google): Extremely fast and handles large context well.
  • p5flash (Custom): Our own fine-tuned model trained specifically on p5.js examples. Best for p5-specific syntax.

Chat History

Every conversation is saved locally in your browser. Click the 🕒 History icon in the header to jump back to previous sessions. You can also view the specific AI prompts used to generate any sketch in the Gallery.

Code Editor

The central panel is a full-featured Monaco editor (same as VS Code). It supports:

  • Syntax Highlighting: For JavaScript, HTML, CSS, and JSON.
  • Autocomplete: Smart suggestions for p5.js functions.
  • Inline Errors: Red squiggles for syntax errors.
  • Command Palette: Press Ctrl+K (or Cmd+K) to access quick actions.

Live Preview

The Preview panel runs your code in real-time. It uses a secure sandbox that allows access to:

  • Webcam & Microphone (audio-reactive visuals)
  • Mouse & Keyboard input
  • Touch and device sensors
  • Window resizing events

Click the ↗ Pop-out button to open your sketch in a full standalone window—great for second monitors or projectors.

Debug Console

The console panel shows errors, warnings, and console.log() output from your sketch. Use it to debug issues or inspect values during runtime.

Downloading & Syncing

You can download your sketch as a standalone HTML file or ZIP package to run offline or host elsewhere. Your work is also automatically saved to browser local storage.

Ready to Start Creating?

Jump into the editor and let AI help you bring your ideas to life.

🚀 Open P5 AI Studio

p5.js Quick Reference

P5 AI Studio supports the full p5.js library. Here are some common functions:

Drawing

  • circle(x, y, diameter) - Draw a circle
  • rect(x, y, width, height) - Draw a rectangle
  • line(x1, y1, x2, y2) - Draw a line
  • ellipse(x, y, w, h) - Draw an ellipse
  • triangle(x1, y1, x2, y2, x3, y3) - Draw a triangle

Colors

  • background(r, g, b) - Set background color
  • fill(r, g, b) - Set fill color
  • stroke(r, g, b) - Set outline color
  • noFill() - Disable fill
  • noStroke() - Disable outline

Interaction

  • mouseX, mouseY - Current mouse position
  • mousePressed() - Called when mouse is clicked
  • keyPressed() - Called when a key is pressed
  • touchStarted() - Called on touch devices

Animation

  • frameCount - Number of frames since start
  • frameRate(fps) - Set animation speed
  • noise(x) - Smooth random values
  • random(min, max) - Random numbers

Additional Resources