Skip to content

p5.js Architecture and Execution Model

Copy this iframe to your website:

1
<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

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.