In this example, we will use a more detailed prompt to control the placement of the sliders and their values.
Prompt
Generate a p5.js sketch file that draws filled polygons on a 400x400 canvas.
Create one range control slider that allows the number of points on
the polygon to vary from 3 to 10 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 170 (blue).
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
name and current values of the sliders in the bottom left of the screen.
Sample Response
This sample code has been manually edited to improve the placement and formatting of the controls.
// 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.