SketchWave Polygon Creation

The SWPolygon class represents a closed polygon defined by an ordered list of SWPoint vertices. Any number of vertices from 3 to 25 may be used. The polygon automatically computes its perimeter, area (shoelace formula), centroid, and convexity. It draws itself through a SWGrid coordinate system and supports dynamic fill/stroke styling and scale-from-centroid.

How to Use This Demo

• Adding Points: Click anywhere on the canvas to place up to 25 vertices in order. Once 3 or more points exist, the "Create Polygon" button becomes available.
• Drag Mode: Press D to switch to DRAG mode. Click and drag any vertex to reshape the polygon; the attributes update in real time.
• Add Mode: Press A to return to ADD mode (only while fewer than 25 points exist).
• Create Polygon: Click "Create Polygon" to build and display the closed shape from the current points.
• Scale: Use the Scale slider (0.2× to 3.0×) to proportionally expand or contract the polygon from its centroid.
• Fill Color & Opacity: Choose a fill color and adjust its transparency independently of the border.
• Border Color & Weight: Set the stroke color and thickness directly with the pickers and slider.
• Snap to Grid: Click "Snap Points to Grid" to align all vertices to the nearest grid intersection.
• Environment Controls: Toggle the grid on/off, change the background color, and adjust background opacity in the Environment section.
• Save Image: Download the current canvas as a PNG file.
• Clear Points: Remove all points and the polygon to start fresh.

Key Properties

• perimeter — sum of all edge lengths (including the closing edge)
• area — interior area via the shoelace (Gauss) formula
• vertexCount — number of vertices
• centroid — mean position of all vertices (drawn as a point when enabled)
• isConvex — true if no interior angle exceeds 180°
• isSimple — true if no two non-adjacent edges cross each other (i.e., the polygon is simple, not complex)

Key Methods

• drawOnGrid(grid) — render the polygon through a SWGrid
• scaleAboutCentroid(factor) — scale vertices proportionally from the centroid
• updateCentroid(grid) — refresh centroid position after vertex changes
• rebuildOriginalsAtScale(scale) — re-anchor scaling after dragging
• reset() — restore vertices to their original positions

SketchWaveJS classes used by this demo

• SWPolygon Reference
• SWPoint Reference
• SWColor Reference
• SWGrid Reference