Create

p5js AI Cloud IDE User Guide

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

Introduction

p5js AI Cloud IDE is a specialized cloud 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.

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

p5js AI Cloud IDE offers several models optimized for different tasks:

  • GPT-5.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
  • Window resizing events

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