Skip to content

p5.js MicroSim Architecture

This interactive diagram illustrates the standard structure of a p5.js MicroSim, showing how educational simulations are organized with distinct regions for visualization and user controls.

About This MicroSim

The diagram displays the key architectural components of a p5.js MicroSim:

  1. Browser Window - The HTML page container that hosts the simulation
  2. Container Element - The main or div element that the canvas attaches to for responsive sizing
  3. Draw Region - The top area with an aliceblue background where visualizations and animations are rendered
  4. Control Region - The bottom area with a white background containing sliders, buttons, and labels

Hover over any component to see detailed information about its purpose and implementation.

Fullscreen

Key Concepts

  • Fixed Heights, Variable Width - The draw region and control region have fixed heights (drawHeight and controlHeight), while the canvas width adapts to the container width for responsive design
  • updateCanvasSize() - This function must be called as the first line in setup() to read the container width and establish proper canvas dimensions
  • Canvas Attachment - The canvas is attached to document.querySelector('main') to integrate with the MkDocs Material page layout
  • Separation of Concerns - Visual content stays in the draw region while interactive controls are organized in the control region

p5.js Editor Template

You can experiment with this code in the p5.js web editor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// p5.js MicroSim Architecture Template
// Standard structure for educational simulations

let canvasWidth = 400;
let drawHeight = 400;
let controlHeight = 50;
let canvasHeight = drawHeight + controlHeight;

// Slider reference
let speedSlider;

function updateCanvasSize() {
  const container = document.querySelector('main');
  if (container) {
    canvasWidth = Math.min(container.offsetWidth - 40, 500);
  } else {
    canvasWidth = Math.min(windowWidth - 40, 500);
  }
  canvasHeight = drawHeight + controlHeight;
}

function setup() {
  updateCanvasSize();
  let canvas = createCanvas(canvasWidth, canvasHeight);

  // Attach to main element if available
  const mainElement = document.querySelector('main');
  if (mainElement) {
    canvas.parent(mainElement);
  }

  // Create slider in control region
  speedSlider = createSlider(1, 10, 5, 1);
  speedSlider.position(120, drawHeight + 15);
  speedSlider.style('width', '150px');

  textFont('Arial');
}

function draw() {
  // Draw region (aliceblue background)
  fill(240, 248, 255);
  noStroke();
  rect(0, 0, canvasWidth, drawHeight);

  // Control region (white background)
  fill(255);
  rect(0, drawHeight, canvasWidth, controlHeight);

  // Separator line
  stroke(200);
  strokeWeight(1);
  line(0, drawHeight, canvasWidth, drawHeight);

  // Draw region content
  fill(30, 41, 59);
  noStroke();
  textSize(16);
  textAlign(CENTER, CENTER);
  text("Draw Region", canvasWidth / 2, drawHeight / 2 - 20);
  text("Your visualization goes here", canvasWidth / 2, drawHeight / 2 + 10);

  // Control region label
  textSize(12);
  textAlign(LEFT, CENTER);
  text("Speed:", 20, drawHeight + 25);

  // Display slider value
  let speed = speedSlider.value();
  textAlign(RIGHT, CENTER);
  text(speed, canvasWidth - 20, drawHeight + 25);
}

function windowResized() {
  updateCanvasSize();
  resizeCanvas(canvasWidth, canvasHeight);
  speedSlider.position(120, drawHeight + 15);
}

Lesson Plan

Learning Objectives

By the end of this lesson, students will be able to:

  1. Identify the key structural components of a p5.js MicroSim
  2. Explain the purpose of separating draw and control regions
  3. Implement responsive canvas sizing using updateCanvasSize()
  4. Create a basic MicroSim following the standard architecture pattern

Activities

  1. Exploration (5 min) - Interact with the diagram, hovering over each component to understand its role
  2. Code Review (10 min) - Copy the template code to the p5.js editor and identify each architectural element
  3. Modification (15 min) - Modify the template to add a second slider and display its value
  4. Creation (20 min) - Build a simple animation MicroSim using the architectural pattern

Discussion Questions

  1. Why is it important to call updateCanvasSize() as the first line in setup()?
  2. What are the benefits of using fixed heights for regions while allowing variable width?
  3. How does attaching the canvas to the main element help with MkDocs Material integration?

References