Skip to content

Regular Polygons

Run Polygon MicroSim

In this example, we will use a more detailed prompt to control the placement of the sliders and their values.

1
<iframe src="https://dmccreary.github.io/microsims/sims/polygon/main.html" height="400"  scrolling="no"></iframe>

Prompt

Generate a p5.js sketch file that draws regular polygons on a 400 pixel high canvas.

Create one range control slider that allows the number of points on the polygon to vary from 3 to 40 in steps of 1. Make the default be 10.

Create a second range control slider that allows the color inside the polygon to be changed to any color. Make the default value be blue (170).

Make the sliders be the width of the canvas less the width of the labels and values. Place the sliders at the bottom of the canvas 100 points in from the left.

Use the text() function at the end of the draw() function to display the label and current values of the sliders in the bottom left of the screen.

Use the responsive-template.js as a starting point.

Sample Response

This sample code has been manually edited to improve the placement and formatting of the controls.

 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
// A MicroSim of drawing a polygon.  Sliders controls the number of edges and the color.
let canvasSize = 400;
let polygonRadius = 150
let colorSlider;
let pointSlider;
let drawHeight = 350;
let sliderLeftMargin = 140;

function setup() { 
    const canvas = createCanvas(canvasSize, canvasSize);
    canvas.parent('canvas-container');
    textSize(16);
    noStroke();
    strokeWeight(0);
    // Change the default color scheme from RGB to Hue, Saturation and Brightness
    colorMode(HSB, 255);

    // number of points (or edges) in polygon
    pointSlider = createSlider(3, 20, 10);
    pointSlider.position(sliderLeftMargin, canvasSize - 35);
    pointSlider.style('width', width - sliderLeftMargin + 'px')

    colorSlider = createSlider(0, 255, 170);
    colorSlider.position(sliderLeftMargin, canvasSize - 15);
    colorSlider.style('width', width - sliderLeftMargin + 'px')
}

function draw() {
    fill(230);
    rect(0, 0, width, drawHeight);
    fill(245);
    rect(0, drawHeight, width, canvasSize-drawHeight);
    let colorValue = colorSlider.value();
    let pointValue = pointSlider.value();

    // Draw the polygon, HSB
    fill(colorValue, 255, 255);
    beginShape();
    for (let i = 0; i < pointValue; i++) {
        // walk around the 360 angles
        let angle = map(i, 0, pointValue, 0, TWO_PI);
        let x = canvasSize/2 + polygonRadius * cos(angle);
        let y = drawHeight/2 + polygonRadius * sin(angle);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw the slider values
    fill('black');
    noStroke(); 
    strokeWeight(0);
    text("Point Value: " + pointValue, 5, canvasSize - 25);
    text("Color Value: " + colorValue, 5, canvasSize - 5);  
}

Lesson Plan

Activities

Add Slider

Add a new slider to control the radius of the polygon.