Skip to content

Particle Fields

Image Name

Figure caption.

Link to Demo

About this MicroSim

This MicroSim teaches us how to display particles and their interactions.

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
let canvasHeight = 400;
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');
  fill(245);
  rect(0,0, canvasWidth, canvasHeight);
  fill('green');
  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.