microsim-add-icons

Add clickable Creative Commons license and fullscreen icons to your p5.js sketch by implementing icon variables, a drawIcons() function called from draw(), and a mousePressed() handler that detects clicks using distance-based collision. Position icons in the lower-right control area and adjust sliderRightMargin in windowResized() to reserve space.

Yes, this approach works with any p5.js sketch following the standard pattern—global variables, setup(), draw(), and windowResized(). It integrates into existing MicroSims without restructuring core logic, adding approximately 40 lines of UI code to the control region.

Distance-based click detection measures the Euclidean distance from the mouse position to an icon's center point. When distance falls below a threshold radius, a click registers as a hit, enabling precise interaction without rectangular collision boxes and supporting circular or irregular icon shapes.

Reserve dedicated space in your control region by updating layout margins—such as sliderRightMargin—during setup() and windowResized(). This ensures icons remain visible and clickable without competing with sliders, buttons, or other interactive components.

No additional libraries are required. This Skill uses only p5.js core functions: ellipse() for icon shapes, mousePressed() for interaction detection, and link() to open license pages. All rendering and event handling operate within p5.js's built-in API.