microsim-p5_skill

Overview

This skill creates lightweight, accessible educational MicroSims using the p5.js library. It generates the complete folder and file structure required for embedding a simulation in a website or textbook (iframe-ready main.html, p5 JS file, index.md, and metadata.json). The focus is on responsive canvas layout with distinct drawing and control regions so simulations are reusable and pedagogically sound.

How this skill works

It scaffolds a MicroSim folder inside /docs/sims with a kebab-case name and produces index.md, main.html, a p5.js script, and a Dublin Core metadata.json. The generated p5 code enforces a two-region canvas (draw area + controls area), responsive resizing, and consistent control placement (sliders, buttons) so the simulation runs inside a non-scrolling iframe. The files are testable directly in the p5.js web editor or by loading main.html in a browser.

When to use it

• You need a compact interactive simulation for an online textbook or course site.
• You want a standards-compliant iframeable p5.js simulation with accessible metadata.
• You require separate drawing and control areas for clear pedagogy and screen-layout constraints.
• You need simulations that can emit structured interaction events for analytics or xAPI.
• You want code that runs in the p5.js editor for quick testing.

Best practices

• Define subject, grade level, learning objectives, duration, prerequisites, and assessment opportunities before generating code.
• Use kebab-case folder names and place each MicroSim under /docs/sims; warn if the folder is missing.
• Follow the required drawing order: background, grid, axes, title, main visualization, annotations, then control labels.
• Keep text sizes readable (minimum 16px), title at 24px, and use colorblind-safe palettes and high contrast.
• Recompute slider sizes and control positions inside updateCanvasSize() and call resizeCanvas() in windowResized().
• Place UI controls only in the control region below drawHeight and avoid placing interactive elements in the drawing area.

Example use cases

• A high-school physics simulation showing projectile motion with adjustable angle and speed sliders.
• An introductory complex-numbers visualization with separate real/imaginary axes and annotation panels.
• A biology growth model where students change growth rate and environmental factors via sliders and see real-time plots.
• Embedding interactive checkpoints inside an online chapter with index.md referencing main.html in an iframe.
• Generating MicroSims that log interactions to an LRS via xAPI JSON events for learning analytics.