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.
// A MicroSim of drawing a polygon. Sliders controls the number of edges and the color.letcanvasSize=400;letpolygonRadius=150letcolorSlider;letpointSlider;letdrawHeight=350;letsliderLeftMargin=140;functionsetup(){constcanvas=createCanvas(canvasSize,canvasSize);canvas.parent('canvas-container');textSize(16);noStroke();strokeWeight(0);// Change the default color scheme from RGB to Hue, Saturation and BrightnesscolorMode(HSB,255);// number of points (or edges) in polygonpointSlider=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')}functiondraw(){fill(230);rect(0,0,width,drawHeight);fill(245);rect(0,drawHeight,width,canvasSize-drawHeight);letcolorValue=colorSlider.value();letpointValue=pointSlider.value();// Draw the polygon, HSBfill(colorValue,255,255);beginShape();for(leti=0;i<pointValue;i++){// walk around the 360 anglesletangle=map(i,0,pointValue,0,TWO_PI);letx=canvasSize/2+polygonRadius*cos(angle);lety=drawHeight/2+polygonRadius*sin(angle);vertex(x,y);}endShape(CLOSE);// Draw the slider valuesfill('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.