# 468 Index Ca90c619

> Interactive p5.js visualization showing p5.js architecture and execution model

- Skill: `tools-only/468-index-ca90c619` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/468-index-ca90c619`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/468-index-ca90c619/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/468-index-ca90c619

---



# p5.js Architecture and Execution Model


<iframe src="main.html" width="100%" height="600px"></iframe>


**Copy this iframe to your website:**

```html
<iframe src="https://dmccreary.github.io/claude-skills/sims/p5js-architecture/main.html" width="100%" height="600px"></iframe>
```


[Run p5.js Architecture and Execution Model in Fullscreen](main.html){ .md-button .md-button--primary }


This Mermaid diagram illustrates the p5.js architecture showing the setup(), draw() loop, and event handlers.

## Interactive Diagram



## Overview

Shows the circular execution model with setup() running once, followed by draw() looping at 60 FPS, with event handlers responding to user interactions.