Skip to content

MicroSim Layout Architecture

Run the MicroSim Layout Fullscreen
Edit the MicroSim on the P5.js editor

About This Diagram

This interactive diagram illustrates the standard two-region architecture used by all MicroSims in this collection. Understanding this layout pattern is essential for creating consistent, professional educational simulations.

Key Concepts

Canvas Structure

Every MicroSim canvas is divided into two distinct regions:

  1. Drawing Region (top) - Where the visualization/simulation appears
  2. Control Region (bottom) - Where user interface controls are placed

Standard Dimensions

1
2
3
4
5
let canvasWidth = 400;              // Initial width (responsive)
let drawHeight = 400;               // Drawing/simulation area height
let controlHeight = 50;             // Controls area height
let canvasHeight = drawHeight + controlHeight;  // Total: 450px
let margin = 25;                    // Margin for visual elements

Color Scheme

Region Background Color Purpose
Drawing Region Alice Blue (#F0F8FF) Provides a soft, non-distracting background for visualizations
Control Region White (#FFFFFF) Clean background for UI controls
Borders Silver Subtle separation between regions

Design Principles

  • Separation of Concerns: Visualization and controls are always in separate regions
  • Consistent Margins: 25px margins keep content away from edges
  • Responsive Width: Canvas adapts horizontally while maintaining fixed height
  • Non-Scrolling: MicroSims fit within their iframe without scrollbars

Embedding This MicroSim

You can include this MicroSim on your website using the following iframe:

1
<iframe src="https://dmccreary.github.io/microsims/sims/microsim-layout/main.html" height="452px" scrolling="no"></iframe>

Learning Objectives

After studying this diagram, students will be able to:

  1. Remember the standard canvas dimension variables used in MicroSims
  2. Understand the purpose of separating drawing and control regions
  3. Apply this layout pattern when creating new MicroSims

References