Skip to content

Getting Started MicroSim Template

Template Image

Run the Template MicroSim Edit tne MicroSim Template

About this MicroSim

This MicroSim teaches us ...

Use an iFrame

1
<iframe src="template.html" height="400px"></iframe>

Sample Prompt

Create a p5.js sketch.
Draw a blue circle in the center.
Have a slider change the radius of the circle.
Use the attached template.js file.

Sample template.js file

 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
// MicroSim Template
// canvas regions setup
// let canvasWidth = 750;
let drawHeight = 335;
let controlHeight = 50;
let canvasHeight = drawHeight + controlHeight;
let aspectRatio = 1.91; // Open Graph standard
let canvasWidth = canvasHeight * aspectRatio;
let margin = 50;

function setup() {
  const canvas = createCanvas(canvasWidth, canvasHeight);
  var mainElement = document.querySelector('main');
  canvas.parent(mainElement);
  textSize(16);

  // create a new slider at th bottom of the canvas
  mySlider = createSlider(0, 300, 150, 1);
  mySlider.position(120, drawHeight + 15);
  mySlider.size(canvasWidth - 3*margin); 
}

function draw() {
  // background of drawing region
  fill('aliceblue');
  rect(0, 0, canvasWidth, drawHeight);

  // background of controls
  fill('whitegray');
  rect(0, drawHeight, canvasWidth, controlHeight);

  // get the updated slider value
  radius = mySlider.value();

  // custom drawing here
  fill('blue');
  circle(canvasWidth/2, canvasHeight/2, radius);

  // add the slider label and value in control area
  fill('black');
  text("Radius:"+radius, 15, drawHeight + 30)
}

Explanation Of Code

Drawing Regions

Setup

Draw