/microsim-utils

MicroSim Add Icons

Overview

Add clickable Creative Commons license and fullscreen navigation icons to the control region of an existing p5.js MicroSim. The icons appear in the lower right corner and use distance-based click detection. This adds approximately 40 lines of code to the simulation.

When to Use This Skill

Use this skill when:

• Adding license information access to a MicroSim
• Enabling fullscreen mode via an icon
• Enhancing a MicroSim with clickable UI elements
• Following the icons demo pattern from the MicroSims repository

Workflow

Step 1: Identify the Target MicroSim

Ask the user which MicroSim JavaScript file to modify, or identify it from context. The file should be a p5.js MicroSim following the standard pattern with:

• Global variables section
• setup() function
• draw() function
• windowResized() function

Step 2: Read the Existing File

Read the entire JavaScript file to understand its structure and identify where to add the icon code.

Step 3: Add Icon Variables

Add the following variables to the global variables section, after the existing slider variables:

// Icon variables
let iconSize = 24;
let iconMargin = 5;
let ccIconX, ccIconY;  // Creative Commons icon position
let fsIconX, fsIconY;  // Fullscreen icon position

Also add or update the sliderRightMargin variable:

let sliderRightMargin = 70;

This reserves space on the right side of sliders for the icons.

Step 4: Add drawIcons() Function

Add the complete drawIcons() function after the draw() function:

function drawIcons() {
  // Calculate icon positions (right to left)
  fsIconX = canvasWidth - iconMargin - iconSize/2;
  fsIconY = drawHeight + controlHeight/2;

  ccIconX = fsIconX - iconSize - iconMargin;
  ccIconY = fsIconY;

  // Draw Creative Commons icon
  fill('black');
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(20);
  text('ⓒ', ccIconX, ccIconY);
  // Draw Fullscreen icon
  text('⛶', fsIconX, fsIconY);
}

Step 5: Call drawIcons() in draw()

Add the following code at the end of the draw() function, just before the closing brace:

  // Draw icons in lower right corner of control region
  drawIcons();
}

Step 6: Add mousePressed() Function

Add the complete mousePressed() function after the drawIcons() function:

function mousePressed() {
  // Check if Creative Commons icon was clicked
  let distCC = dist(mouseX, mouseY, ccIconX, ccIconY);
  if (distCC < iconSize/2) {
    // Get the base URL (remove '/sims/icons/main.html' from current URL)
    let baseUrl = window.location.href.split('/sims/')[0];
    window.open(baseUrl + '/license/', '_blank');
    return;
  }

  // Check if Fullscreen icon was clicked
  let distFS = dist(mouseX, mouseY, fsIconX, fsIconY);
  if (distFS < iconSize/2) {
    // Open main.html in a new window/tab (same behavior as the fullscreen button)
    window.open('main.html', '_blank');
    return;
  }
}

Step 7: Update windowResized() Function

Update the windowResized() function to use sliderRightMargin when resizing sliders:

function windowResized() {
  // Update canvas size when the container resizes
  updateCanvasSize();
  resizeCanvas(containerWidth, containerHeight);
  // resize the speed slider and any other sliders here
  speedSlider.size(canvasWidth - sliderLeftMargin - sliderRightMargin);
  redraw();
}

If there are multiple sliders, update all slider size calculations to use sliderRightMargin.

Step 8: Update setup() Function

If the slider size is set in setup(), update it to use sliderRightMargin:

speedSlider.size(canvasWidth - sliderLeftMargin - sliderRightMargin);

Step 9: Verify and Test

After making all changes:

1. Verify that all edits were successful
2. Inform the user that the icons have been added
3. Note that approximately 40 lines of code were added
4. Suggest testing the icons by opening the MicroSim

Code Size Impact

Adding icons increases the JavaScript file size by approximately 40 lines:

• 6 lines for icon variables
• 1 line to call drawIcons()
• 18 lines for the drawIcons() function
• 19 lines for the mousePressed() function
• Additional spacing and comments

The icons can be omitted from minimal MicroSims to reduce file size.

Icon Functionality

Creative Commons Icon (ⓒ):

• Positioned second from the right in the control region
• Clicking opens /license/ page in a new tab
• Uses relative URL calculation to work in any deployment

Fullscreen Icon (⛶):

• Positioned at the far right of the control region
• Clicking opens main.html in a new window/tab
• Provides full-page viewing experience

Both icons use distance-based click detection with dist() function, creating circular clickable regions with a radius of iconSize/2 (12 pixels).

Common Variations

Different Icon Symbols: Replace the Unicode characters ⓒ and ⛶ with other symbols as needed:

• License: ⓒ, ©, 🅭
• Fullscreen: ⛶, ⤢, ⛶
• Help: ?, ⓘ, ❓
• Settings: ⚙, ⚙️

Additional Icons: To add more icons, follow the same pattern:

1. Add position variables (e.g., helpIconX, helpIconY)
2. Calculate position in drawIcons() (move left by iconSize + iconMargin)
3. Draw the icon in drawIcons()
4. Add click detection in mousePressed()
5. Increase sliderRightMargin by 30 pixels per additional icon

Custom Actions: Modify the mousePressed() function to perform different actions:

• Open different URLs
• Toggle simulation features
• Display help overlays
• Share via social media