Skip to content

MicroSim Template

Image Name

Run the MicroSim Template Edit this MicroSim

About this MicroSim

This MicroSim teaches us how to specify the drawing of a static filled circle.

Sample Prompt

Create a single file p5.js sketch.
Draw a green circle on a 600x400 canvas with a radius of 200.

Sample Response

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// canvas regions setup
// let canvasWidth = 750;
let drawHeight = 400;
let controlHeight = 50;
let canvasHeight = drawHeight + controlHeight;
let aspectRatio = 1.91; // Open Graph standard
let canvasWidth = canvasHeight * aspectRatio;
let radius = 200;
function setup() {
  const canvas = createCanvas(canvasWidth, canvasHeight);
  canvas.parent('canvas-container');

}

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

  // background of controls
  fill('whitegray');
  rect(0, drawHeight, canvasWidth, controlHeight);
  circle(canvasWidth/2, canvasHeight/2, radius);
}

Lesson Plan

Grade Level, Subject and Topic

9th grade geometry. Circle and radius.

Activities

Fill Color

Change the color in the prompt. You can specify any one of the 140 named colors.

Border Weight

Change the prompt to include a black border of width 10.

Border Color

Change the prompt to make the border purple.

Change the Radius

Change the prompt to make the circle smaller or larger by changing the radius from 10 to 200.

Change the Location

Change the prompt to move the circle to the left or right.