1<!doctype html> 2<html lang="en"> 3 4<head>
4<script>(function(w,i,g){w[g]=w[g]||[];if(typeof w[g].push=='function')w[g].push(i)}) 5(window,'G-BQDSSCDXCD','google_tags_first_party');</script>
5<script async src="/gtag/"></script>
5 6
6<script> 7 window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 gtag('set', 'developer_id.dYzg1YT', true); 11 gtag('config', 'G-BQDSSCDXCD'); 12 </script>
12 13 14 <meta charset="UTF-8" /> 15 <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> 16 <link rel="icon" type="image/png" sizes="32x32" href="/brand/p5-favicon-1024.png" /> 17 <link rel="icon" type="image/png" sizes="16x16" href="/brand/p5-favicon-1024.png" /> 18 <link rel="apple-touch-icon" sizes="180x180" href="/brand/p5-favicon-1024.png" /> 19 <link rel="manifest" href="/manifest.json" /> 20 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 21 22 <!-- Preconnect for Performance --> 23 <link rel="preconnect" href="https://fonts.googleapis.com" /> 24 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 25 <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin /> 26 <link rel="dns-prefetch" href="https://api.openai.com" /> 27 <link rel="dns-prefetch" href="https://api.anthropic.com" /> 28 <link rel="dns-prefetch" href="https://sketches.p5js.ai" /> 29 30 <!-- RSS/Atom Feed --> 31 <link rel="alternate" type="application/atom+xml" title="p5js.ai Updates" href="/api/feed" /> 32 33 <!-- Note: gallery/ and tutorials are SPA routes, no prefetch needed --> 34 35 <!-- Primary Meta Tags - Optimized for CTR --> 36 <title>p5js.ai | Free AI IDE Optimized for Vibecoding with p5.js</title> 37 <meta name="description" 38 content="Free p5js AI IDE with GPT-5.1, Claude 4.5, Gemini & xelsed-alpha6. Complete JavaScript editor with p5.js library support. Vibe code generative art today." /> 39 40 <!-- Open Graph / Facebook - Optimized --> 41 <meta property="og:type" content="website" /> 42 <meta property="og:url" content="https://p5js.ai/" /> 43 <meta property="og:title" content="p5js.ai - Free IDE Optimized for Vibecoding" /> 44 <meta property="og:description" 45 content="Free p5js IDE with integrated AI. Access GPT-5.1, Claude 4.5, Gemini & xelsed-alpha6. Research platform studying how people learn creative coding." /> 46 <meta property="og:image" content="https://p5js.ai/brand/p5-og-main.png" /> 47 <meta property="og:image:width" content="1200" /> 48 <meta property="og:image:height" content="630" /> 49 <meta property="og:image:alt" content="p5js.ai - JavaScript IDE optimized for vibecoding" /> 50 <meta property="og:site_name" content="p5js.ai" /> 51 <meta property="og:locale" content="en_US" /> 52 53 <!-- Twitter Card - Optimized --> 54 <meta name="twitter:card" content="summary_large_image" /> 55 <meta name="twitter:site" content="@p5jsai" /> 56 <meta name="twitter:creator" content="@p5jsai" /> 57 <meta name="twitter:url" content="https://p5js.ai/" /> 58 <meta name="twitter:title" content="p5js.ai - Free IDE for Vibecoding" /> 59 <meta name="twitter:description" 60 content="Free p5js IDE with GPT-5.1, Claude 4.5, Gemini & xelsed-alpha6. Vibe code generative art with full p5.js library support." /> 61 <meta name="twitter:image" content="https://p5js.ai/brand/p5-og-main.png" /> 62 <meta name="twitter:image:alt" content="p5js.ai - JavaScript IDE for vibecoding" /> 63 64 <!-- Robots --> 65 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" /> 66 <meta name="googlebot" content="index, follow" /> 67 <meta name="bingbot" content="index, follow" /> 68 <meta name="rating" content="General" /> 69 <link rel="canonical" href="https://p5js.ai/" /> 70 71 <!-- Language Alternatives --> 72 <link rel="alternate" hreflang="en" href="https://p5js.ai/" /> 73 <link rel="alternate" hreflang="x-default" href="https://p5js.ai/" /> 74 75 <!-- Mobile & PWA --> 76 <meta name="mobile-web-app-capable" content="yes" /> 77 <meta name="apple-mobile-web-app-capable" content="yes" /> 78 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 79 <meta name="apple-mobile-web-app-title" content="p5js.ai" /> 80 <meta name="application-name" content="p5js.ai" /> 81 <meta name="theme-color" content="#ED225D" /> 82 <meta name="msapplication-TileColor" content="#ED225D" /> 83 <meta name="msapplication-config" content="/browserconfig.xml" /> 84 85 <!-- Security --> 86 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 87 <meta name="format-detection" content="telephone=no" /> 88
89 <!-- Schema.org: WebApplication - Enhanced for AI Search --> 90
90<script data-cfasync="false" type="application/ld+json"> 91 { 92 "@context": "https://schema.org", 93 "@type": "WebApplication", 94 "name": "p5js.ai", 95 "alternateName": ["p5js AI Cloud IDE", "p5js AI", "p5jsai", "p5.js AI Editor", "Vibe Coding IDE", "p5js AI Studio"], 96 "url": "https://p5js.ai", 97 "image": "https://p5js.ai/brand/p5-og-main.png", 98 "applicationCategory": "DeveloperApplication", 99 "applicationSubCategory": ["IDE", "Creative Coding Tool", "Generative Art Platform"], 100 "operatingSystem": "Any (Web Browser)", 101 "browserRequirements": "Modern web browser with JavaScript enabled. Optimized for Chrome, Firefox, Safari, and Edge. Works on desktop and mobile devices.", 102 "softwareVersion": "2.0", 103 "releaseNotes": "https://p5js.ai/changelog", 104 "downloadUrl": "https://p5js.ai", 105 "installUrl": "https://p5js.ai", 106 "permissions": "No special permissions required. Optional: clipboard access for code copying.", 107 "storageRequirements": "Minimal - sketches stored in browser localStorage", 108 "memoryRequirements": "512MB RAM recommended", 109 "offers": { 110 "@type": "Offer", 111 "price": "0", 112 "priceCurrency": "USD", 113 "availability": "https://schema.org/InStock", 114 "priceValidUntil": "2027-12-31", 115 "description": "Free forever with optional API key upgrades for power users" 116 }, 117 118 "description": "p5js.ai is a free browser-based IDE optimized for vibecoding and creative coding with p5.js. Features AI assistants including GPT-5.1 Mini, Claude 4.5 Sonnet with web search, Gemini 2.5 Flash, and custom p5flash models fine-tuned for generative art. Create interactive visualizations, algorithmic art, and animations by describing what you want in natural language. No installation or API keys required.", 119 "abstract": "The fastest way to create generative art with AI. Describe your vision, get working p5.js code instantly.", 120 "keywords": "vibe coding, p5.js, creative coding, generative art, AI coding assistant, free GPT, free Claude, browser IDE, JavaScript IDE, visual programming, algorithmic art, interactive animations, Processing, NFT art, fxhash, creative technology, learn to code, beginner coding, AI pair programming", 121 "featureList": [ 122 "Vibe Coding - describe what you want, AI writes the code", 123 "FREE AI Models: GPT-5.1 Mini, Claude 4.5 Sonnet, Gemini 2.5 Flash", 124 "Custom p5flash model fine-tuned for p5.js creative coding", 125 "Claude with real-time web search and citations", 126 "Extended thinking mode with o3-mini reasoning", 127 "Instant live preview with hot reload", 128 "Multi-file project support (sketch.js, style.css, data files)", 129 "Publish to gallery with shareable URLs", 130 "AI chat history sharing - show how you built it", 131 "Sync directly to editor.p5js.org", 132 "Download sketches as ZIP files", 133 "Starter templates for common patterns", 134 "Syntax highlighting and error detection", 135 "Code explanations for beginners", 136 "Dyslexia-friendly UI options and accessibility features", 137 "Progressive Web App - install on any device", 138 "Works offline after first load", 139 "No account required to start coding", 140 "p5.js version selector (1.9.0 to 1.11.11)", 141 "Console output and error display" 142 ], 143 "screenshot": [ 144 { 145 "@type": "ImageObject", 146 "url": "https://p5js.ai/brand/p5-og-main.png", 147 "caption": "p5js.ai - JavaScript IDE optimized for vibecoding", 148 "width": 1200, 149 "height": 630 150 } 151 ], 152 "author": { 153 "@type": "Organization", 154 "name": "Xelsed.AI", 155 "url": "https://xelsed.ai" 156 }, 157 "maintainer": { 158 "@type": "Organization", 159 "name": "Xelsed.AI", 160 "url": "https://xelsed.ai", 161 "email": "[email protected]" 162 }, 163 "publisher": { 164 "@type": "Organization", 165 "name": "Xelsed.AI", 166 "url": "https://xelsed.ai", 167 "logo": { 168 "@type": "ImageObject", 169 "url": "https://p5js.ai/brand/p5-header-logo.png" 170 } 171 }, 172 "audience": { 173 "@type": "Audience", 174 "audienceType": ["Artists", "Designers", "Students", "Educators", "Creative
174Coders", "Beginners", "Hobbyists"] 175 }, 176 "educationalUse": ["Creative Expression", "Learning to Code", "Visual Programming", "Art Education", "STEM Education"], 177 "learningResourceType": "Interactive Tool", 178 "interactivityType": "active", 179 "datePublished": "2024-01-15", 180 "dateModified": "2026-04-15", 181 "inLanguage": "en", 182 "isAccessibleForFree": true, 183 "isFamilyFriendly": true, 184 "accessibilityFeature": ["highContrastDisplay", "largePrint", "readingOrder", "structuralNavigation", "tableOfContents"], 185 "accessibilityHazard": "none", 186 "accessMode": ["textual", "visual"], 187 "accessModeSufficient": [{"@type": "ItemList", "itemListElement": ["textual", "visual"]}], 188 "potentialAction": { 189 "@type": "UseAction", 190 "target": "https://p5js.ai", 191 "name": "Start Coding", 192 "description": "Open p5js.ai and start vibecoding" 193 }, 194 "sameAs": [] 195 } 196 </script>
196 197 198 <!-- Schema.org: Organization --> 199
199<script data-cfasync="false" type="application/ld+json"> 200 { 201 "@context": "https://schema.org", 202 "@type": "Organization", 203 "name": "p5js.ai", 204 "alternateName": ["p5js AI Cloud IDE"], 205 "url": "https://p5js.ai", 206 "logo": "https://p5js.ai/brand/p5-header-logo.png", 207 "description": "Building AI-powered tools for creative coders and artists", 208 "foundingDate": "2024", 209 "sameAs": [], 210 "contactPoint": { 211 "@type": "ContactPoint", 212 "contactType": "customer support", 213 "availableLanguage": "English" 214 } 215 } 216 </script>
216 217 218 <!-- Schema.org: ResearchProject - Accessibility Mission --> 219
219<script data-cfasync="false" type="application/ld+json"> 220 { 221 "@context": "https://schema.org", 222 "@type": "ResearchProject", 223 "name": "p5js.ai Accessibility Research", 224 "description": "Research platform studying how AI systems can better serve users with dyslexia and learning differences. Dyslexia affects 5-17% of the population, yet AI systems exhibit significantly higher error rates when processing dyslexic writing. Translation accuracy drops 17-20% on dyslexic text.", 225 "url": "https://p5js.ai/research", 226 "keywords": ["dyslexia", "AI accessibility", "NLP", "creative coding", "inclusive design"], 227 "parentOrganization": { 228 "@type": "Organization", 229 "name": "Xelsed.AI" 230 }, 231 "member": { 232 "@type": "Person", 233 "name": "Jeremy Duetsch", 234 "affiliation": "NYU" 235 }, 236 "about": [ 237 { 238 "@type": "Thing", 239 "name": "Dyslexia and AI Accessibility" 240 }, 241 { 242 "@type": "Thing", 243 "name": "Natural Language Processing for Diverse Users" 244 } 245 ] 246 } 247 </script>
247 248 249 <!-- Schema.org: FAQPage - Optimized for AI Search & Rich Snippets --> 250
250<script data-cfasync="false" type="application/ld+json"> 251 { 252 "@context": "https://schema.org", 253 "@type": "FAQPage", 254 "mainEntity": [ 255 { 256 "@type": "Question", 257 "name": "What is vibe coding and how does p5js.ai support it?", 258 "acceptedAnswer": { 259 "@type": "Answer", 260 "text": "Vibe coding is a programming approach where you describe what you want in natural language and AI generates the code. Coined by AI researcher Andrej Karpathy in 2025, it emphasizes creativity over syntax. p5js.ai is built for vibecoding - just describe your vision like 'create a particle system that follows the mouse' and the AI writes working p5.js code instantly. It's the fastest way to create generative art and interactive visualizations." 261 } 262 }, 263 { 264 "@type": "Question", 265 "name": "Is p5js.ai free? What AI models can I use without paying?", 266 "acceptedAnswer": { 267 "@type": "Answer", 268 "text": "Yes, p5js.ai is completely free to use! You get free access to premium AI models including OpenAI GPT-5.1 Mini, Anthropic Claude 4.5 Sonnet with web search, Google Gemini 2.5 Flash, and our custom p5flash model fine-tuned specifically for p5.js. No credit card or API keys required. Power users can optionally add their own API keys for higher rate limits." 269 } 270 }, 271 { 272 "@type": "Question", 273 "name": "What is p5.js and why use it for creative coding?", 274 "acceptedAnswer": { 275 "@type": "Answer", 276 "text": "p5.js is a free, open-source JavaScript library created by the Processing Foundation for creative coding. It makes programming accessible for artists, designers, and beginners by simplifying graphics, animation, and interactivity. With p5.js you can create generative art, data visualizations, interactive games, audio visualizers, and more. p5js.ai combines p5.js with AI assistance to make creative coding even easier." 277 } 278 }, 279 { 280 "@type": "Question", 281 "name": "How is p5js.ai different from Cursor, Windsurf, or Replit?", 282 "acceptedAnswer": { 283 "@type": "Answer", 284 "text": "p5js.ai is purpose-built for creative coding and generative art with p5.js. Unlike general-purpose AI IDEs like Cursor or Windsurf, we offer: instant visual preview of your code, AI models fine-tuned for p5.js, a built-in gallery to share creations, no installation (runs in browser), and accessibility features including dyslexia-friendly options. It's the specialized tool for visual programming that general IDEs can't match." 285 } 286 }, 287 { 288 "@type": "Question", 289 "name": "What AI models does p5js.ai support?", 290 "acceptedAnswer": { 291 "@type": "Answer", 292 "text": "p5js.ai supports multiple AI providers: OpenAI (GPT-5.1 Mini, GPT-4o, o3-mini with extended thinking), Anthropic (Claude 4.5 Sonnet with real-time web search, Claude 3 Opus), Google (Gemini 2.5 Flash, Gemini 2.5 Pro), and our custom Xelsed models (p5flash-alpha02) fine-tuned specifically for p5.js creative coding. Free tier includes all models with reasonable rate limits." 293 } 294 }, 295 { 296 "@type": "Question", 297 "name": "Do I need to install anything to use p5js.ai?", 298 "acceptedAnswer": { 299 "@type": "Answer", 300 "text": "No installation required. p5js.ai runs entirely in your web browser as a Progressive Web App (PWA). Visit p5js.ai and start coding immediately. Works on Chrome, Firefox, Safari, and Edge. You can also install it as an app on your device for offline access to the editor." 301 } 302 }, 303 { 304 "@type": "Question", 305 "name": "Is p5js.ai good for beginners learning to code?", 306 "acceptedAnswer": { 307 "@type": "Answer", 308 "text": "p5js.ai is ideal for beginners. The AI explains code line-by-line, fixes errors automatically, and teaches p5.js concepts as you build. You can start with simple prompts like 'draw a bouncing ball' and progressively learn more complex techniques. We also offer dyslexia-friendly UI options, adju
308stable font sizes, and accessibility features to support diverse learners." 309 } 310 }, 311 { 312 "@type": "Question", 313 "name": "Can I create generative art and NFTs with p5js.ai?", 314 "acceptedAnswer": { 315 "@type": "Answer", 316 "text": "Absolutely! p5js.ai excels at generative art creation. Describe your artistic vision and the AI generates algorithmic art code using noise functions, particle systems, fractals, and more. Many artists use p5.js for NFT art on platforms like fxhash and Art Blocks. You can export your creations, publish to our gallery, or download the code to mint as NFTs." 317 } 318 }, 319 { 320 "@type": "Question", 321 "name": "Can I save and share my p5.js sketches?", 322 "acceptedAnswer": { 323 "@type": "Answer", 324 "text": "Yes! p5js.ai offers multiple ways to save and share: publish to our public gallery with a shareable URL, sync directly to editor.p5js.org (official p5.js editor), download as a ZIP file, or save locally in your browser. Published sketches can include your AI chat history so others can learn from your creative process." 325 } 326 }, 327 { 328 "@type": "Question", 329 "name": "Is my code private on p5js.ai?", 330 "acceptedAnswer": { 331 "@type": "Answer", 332 "text": "Your code stays private by default. Sketches are stored locally in your browser until you choose to publish or sync. When you publish to the gallery, you control whether it's public or private. We don't train AI models on your code. If you use your own API keys, requests go directly to the AI provider." 333 } 334 }, 335 { 336 "@type": "Question", 337 "name": "Does p5js.ai work on mobile devices and tablets?", 338 "acceptedAnswer": { 339 "@type": "Answer", 340 "text": "p5js.ai works on mobile devices and tablets with a responsive interface. While the full coding experience is optimized for desktop, you can browse the gallery, view sketches, and make simple edits on mobile. The PWA can be installed on iOS and Android for quick access." 341 } 342 }, 343 { 344 "@type": "Question", 345 "name": "What is creative coding and how do I get started?", 346 "acceptedAnswer": { 347 "@type": "Answer", 348 "text": "Creative coding is using programming as a medium for artistic expression rather than purely functional software. It encompasses generative art, data visualization, interactive installations, audio-visual experiences, and more. To get started with p5js.ai: visit p5js.ai, type a description of what you want to create (like 'colorful spiral pattern' or 'music visualizer'), and the AI generates working code you can run instantly and modify." 349 } 350 } 351 ] 352 } 353 </script>
353 354 355 <!-- Schema.org: WebSite - Helps with Sitelinks --> 356
356<script data-cfasync="false" type="application/ld+json"> 357 { 358 "@context": "https://schema.org", 359 "@type": "WebSite", 360 "name": "p5js.ai", 361 "alternateName": ["p5js AI Cloud IDE", "P5 AI", "P5.js AI Editor", "p5js AI Studio"], 362 "url": "https://p5js.ai", 363 "description": "Free AI-powered cloud IDE optimized for vibecoding with p5.js, GPT-5.1, Claude, and Gemini", 364 "potentialAction": { 365 "@type": "SearchAction", 366 "target": { 367 "@type": "EntryPoint", 368 "urlTemplate": "https://p5js.ai/gallery/?q={search_term_string}" 369 }, 370 "query-input": "required name=search_term_string" 371 }, 372 "publisher": { 373 "@type": "Organization", 374 "name": "Xelsed.AI", 375 "url": "https://xelsed.ai" 376 } 377 } 378 </script>
378 379 380 <!-- Schema.org: SiteNavigationElement - Helps Google understand site structure --> 381
381<script data-cfasync="false" type="application/ld+json"> 382 { 383 "@context": "https://schema.org", 384 "@graph": [ 385 { 386 "@type": "SiteNavigationElement", 387 "name": "Editor", 388 "description": "AI-powered p5.js code editor with live preview", 389 "url": "https://p5js.ai/" 390 }, 391 { 392 "@type": "SiteNavigationElement", 393 "name": "Gallery", 394 "description": "Browse creative coding examples and generative art", 395 "url": "https://p5js.ai/gallery/" 396 }, 397 { 398 "@type": "SiteNavigationElement", 399 "name": "Generative Art", 400 "description": "Generative art sketches made with p5.js and AI", 401 "url": "https://p5js.ai/gallery/t/generative" 402 }, 403 { 404 "@type": "SiteNavigationElement", 405 "name": "Particle Systems", 406 "description": "Interactive particle system sketches", 407 "url": "https://p5js.ai/gallery/t/particles" 408 }, 409 { 410 "@type": "SiteNavigationElement", 411 "name": "Tutorials", 412 "description": "Learn p5.js functions with AI coding help", 413 "url": "https://p5js.ai/tutorials" 414 }, 415 { 416 "@type": "SiteNavigationElement", 417 "name": "noise() Tutorial", 418 "description": "Learn to use Perlin noise for organic movement", 419 "url": "https://p5js.ai/tutorials/noise" 420 }, 421 { 422 "@type": "SiteNavigationElement", 423 "name": "ellipse() Tutorial", 424 "description": "Draw ellipses and circles in p5.js", 425 "url": "https://p5js.ai/tutorials/ellipse" 426 }, 427 { 428 "@type": "SiteNavigationElement", 429 "name": "Docs", 430 "description": "User guide and documentation for p5js.ai", 431 "url": "https://p5js.ai/docs" 432 }, 433 { 434 "@type": "SiteNavigationElement", 435 "name": "About", 436 "description": "Learn about p5js.ai and its features", 437 "url": "https://p5js.ai/about" 438 }, 439 { 440 "@type": "SiteNavigationElement", 441 "name": "Research", 442 "description": "Research on AI accessibility and dyslexia", 443 "url": "https://p5js.ai/research" 444 } 445 ] 446 } 447 </script>
447 448 449 <!-- Schema.org: HowTo - For Tutorial Rich Snippets --> 450
450<script data-cfasync="false" type="application/ld+json"> 451 { 452 "@context": "https://schema.org", 453 "@type": "HowTo", 454 "name": "How to Use p5js.ai", 455 "description": "Learn how to use AI to generate p5.js creative coding sketches in minutes", 456 "totalTime": "PT5M", 457 "estimatedCost": { 458 "@type": "MonetaryAmount", 459 "currency": "USD", 460 "value": "0" 461 }, 462 "step": [ 463 { 464 "@type": "HowToStep", 465 "position": 1, 466 "name": "Open p5js.ai", 467 "text": "Visit p5js.ai in your browser. No account or installation needed." 468 }, 469 { 470 "@type": "HowToStep", 471 "position": 2, 472 "name": "Describe Your Vision", 473 "text": "Type what you want to create in the AI chat. For example: 'Create a colorful particle system that follows the mouse'" 474 }, 475 { 476 "@type": "HowToStep", 477 "position": 3, 478 "name": "Run and Iterate", 479 "text": "Click Run to see your creation. Ask the AI to modify, improve, or explain the code." 480 } 481 ] 482 } 483 </script>
483 484 <link rel="stylesheet" href="/static-splash.css" /> 485 486 <!-- Anti-FOUC: Apply saved theme before first paint --> 487
487<script data-cfasync="false"> 488 (function () { 489 var t = localStorage.getItem('p5-theme'); 490 if (t && t !== 'system') { 491 document.documentElement.dataset.theme = t; 492 } 493 })(); 494 </script>
494 495
495<script data-cfasync="false" type="module" crossorigin src="/assets/index-C0f3njKd.js"></script>
495 496 <link rel="modulepreload" crossorigin href="/assets/react-vendor-3a3SXJxo.js"> 497 <link rel="modulepreload" crossorigin href="/assets/ui-components-BtUj-H_s.js"> 498 <link rel="modulepreload" crossorigin href="/assets/utils-ChGh4OsY.js"> 499 <link rel="stylesheet" crossorigin href="/assets/index-CgoqiNww.css">
500<script data-cfasync="false" nonce="dfaaa689-1277-4b97-8acd-d669b605066f">try{(function(w,d){!function(kP,kQ,kR,kS){if(kP.zaraz)console.error("zaraz is loaded twice");else{kP[kR]=kP[kR]||{};kP[kR].executed=[];kP.zaraz={deferred:[],listeners:[]};kP.zaraz._v="20";kP.zaraz._n="dfaaa689-1277-4b97-8acd-d669b605066f";kP.zaraz.q=[];kP.zaraz._f=function(kT){return async function(){var kU=Array.prototype.slice.call(arguments);kP.zaraz.q.push({m:kT,a:kU})}};for(const kV of["track","set","ecommerce","debug"])kP.zaraz[kV]=kP.zaraz._f(kV);kP.zaraz.init=()=>{var kW=kQ.getElementsByTagName(kS)[0],kX=kQ.createElement(kS),kY=kQ.getElementsByTagName("title")[0];kY&&(kP[kR].t=kQ.getElementsByTagName("title")[0].text);kP[kR].x=Math.random();kP[kR].w=kP.screen.width;kP[kR].h=kP.screen.height;kP[kR].j=kP.innerHeight;kP[kR].e=kP.innerWidth;kP[kR].l=kP.location.href;kP[kR].r=kQ.referrer;kP[kR].k=kP.screen.colorDepth;kP[kR].n=kQ.characterSet;kP[kR].o=(new Date).getTimezoneOffset();if(kP.dataLayer)for(const kZ of Object.entries(Object.entries(dataLayer).reduce((k$,la)=>({...k$[1],...la[1]}),{})))zaraz.set(kZ[0],kZ[1],{scope:"page"});kP[kR].q=[];for(;kP.zaraz.q.length;){const lb=kP.zaraz.q.shift();kP[kR].q.push(lb)}kX.defer=!0;for(const lc of[localStorage,sessionStorage])Object.keys(lc||{}).filter(le=>le.startsWith("_zaraz_")).forEach(ld=>{try{kP[kR]["z_"+ld.slice(7)]=JSON.parse(lc.getItem(ld))}catch{kP[kR]["z_"+ld.slice(7)]=lc.getItem(ld)}});kX.referrerPolicy="origin";kX.src="/cdn-cgi/zaraz/s.js?z="+btoa(encodeURIComponent(JSON.stringify(kP[kR])));kW.parentNode.insertBefore(kX,kW)};["complete","interactive"].includes(kQ.readyState)?zaraz.init():kP.addEventListener("DOMContentLoaded",zaraz.init)}}(w,d,"zarazData","script");window.zaraz._p=async kH=>new Promise(kI=>{if(kH){kH.e&&kH.e.forEach(kJ=>{try{const kK=d.querySelector("script[nonce]"),kL=kK?.nonce||kK?.getAttribute("nonce"),kM=d.createElement("script");kL&&(kM.nonce=kL);kM.innerHTML=kJ;kM.onload=()=>{d.head.removeChild(kM)};d.head.appendChild(kM)}catch(kN){console.error(`Error executing script: ${kJ}\n`,kN)}});Promise.allSettled((kH.f||[]).map(kO=>fetch(kO[0],kO[1])))}kI()});zaraz._p({"e":["(function(w,d){})(window,document)"]});})(window,document)}catch(e){throw fetch("/cdn-cgi/zaraz/t"),e;};</script>
500</head> 501 502<body> 503 <div id="root"> 504 <!-- Static content for SEO and faster perceived loading --> 505 <div class="static-splash"> 506 <h1>p5js.ai</h1> 507 <p> 508 Full-featured p5.js cloud IDE optimized for vibecoding. 509 Free access to GPT-5.1, Claude 4.5, Gemini, and xelsed-alpha6 â our p5.js-optimized model. 510 </p> 511 <div class="static-links"> 512 <a href="/editor" class="static-btn-primary">Open Editor</a> 513 <a href="/gallery/" class="static-btn-secondary">Gallery</a> 514 <a href="/tutorials" class="static-btn-secondary">Tutorials</a> 515 <a href="/docs" class="static-btn-secondary">Docs</a> 516 <a href="/about" class="static-btn-secondary">About</a> 517 </div> 518 <noscript> 519 <p class="static-no-js">JavaScript is required to use the full IDE.</p> 520 </noscript> 521 522 <!-- Explore Section - Deep links for SEO sitelinks --> 523 <nav class="static-explore" aria-label="Explore p5js.ai"> 524 <h2>Explore</h2> 525 <div class="static-explore-grid"> 526 <div class="static-explore-section"> 527 <h3>Gallery</h3> 528 <a href="/gallery/">All Sketches</a> 529 <a href="/gallery/t/generative">Generative</a> 530 <a href="/gallery/t/particles">Particles</a> 531 <a href="/gallery/t/fractal">Fractals</a> 532 <a href="/gallery/t/game">Games</a> 533 <a href="/gallery/t/physics">Physics</a> 534 </div> 535 <div class="static-explore-section"> 536 <h3>Tutorials</h3> 537 <a href="/tutorials">All Functions</a> 538 <a href="/tutorials/ellipse">ellipse()</a> 539 <a href="/tutorials/circle">circle()</a> 540 <a href="/tutorials/noise">noise()</a> 541 <a href="/tutorials/random">random()</a> 542 <a href="/tutorials/fill">fill()</a> 543 <a href="/tutorials/translate">translate()</a> 544 <a href="/tutorials/rotate">rotate()</a> 545 </div> 546 <div class="static-explore-section"> 547 <h3>Learn More</h3> 548 <a href="/docs">Documentation</a> 549 <a href="/about">About</a> 550 <a href="/research">Research</a> 551 <a href="/changelog">Changelog</a> 552 </div> 553 </div> 554 </nav> 555 556 <!-- Mission Section for SEO crawlers --> 557 <section class="static-mission"> 558 <h2>Why It's Free</h2> 559 <p> 560 We provide free access to premium AI models to power our research on 561 <span class="stat">dyslexia and creative coding</span>. 562 </p> 563 <p> 564 Your use helps us study how people learn to code with AI â 565 building tools that work for everyone, including those with learning differences. 566 </p> 567 <p> 568 <a href="/research">Read our research â</a> 569 </p> 570 </section> 571 </div> 572 </div> 573� 574<!-- Cloudflare Pages Analytics -->
vendor: 99 bytes, line 574
574<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "
5741aa33e6e7f8a421185a1279b4f8ffe44
vendor: 61 bytes, line 574
574"}' type="1ac1c379cff7b66e72225a6b-text/javascript"></script>
574<!-- Cloudflare Pages Analytics -->
vendor: 142 bytes, line 574
574<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="1ac1c379cff7b66e72225a6b-|49" defer></script>
574<script>window.__CF$cv$params={r:'a45d4a6b78ff9f90',t:'MTc5MTIxMjM3MQ==',u:'01a10c93bf9874dea04a49a22f004783',ut:'K7HfQvUF1jZVNYj1ajZIKb_iZwkYTVPNNKzHQJ5_gAc-1791212371-1.2.1.1-pJFQnNuWdX1O9U7eTID4jk30gltlPNn3ozz.W5YtEUTE3GxX0tWNypL930QoaSn5Ji4yXxtq3Pq.BiQb.MA8tTuiKMpCsefS7itlxiflc_0',i:60};(function(){if(!document.body)return;var s=document.createElement('script');s.src='/cdn-cgi/challenge-platform/scripts/precursor/main.js';document.head.appendChild(s);})();</script>
574</body> 575 576</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.