🌲 SketchWave Polygon Modification

This demo opens with a pre-built 15-vertex Christmas tree polygon, symmetric about the y-axis and filled in dark evergreen. Unlike SWPolygon Creation, there is no point-adding mode — you jump straight into reshaping the existing shape.

How to Use This Demo

• Drag Vertices: Click and drag any labeled vertex (P1–P15) to reshape the tree. Geometric properties update in real time.
• Drag Centroid: Click and drag the G point to translate the entire polygon without changing its shape.
• Scale: Use the Scale slider (0.2× to 3.0×) to proportionally expand or contract the polygon from its centroid.
• Fill Color & Opacity: Change the evergreen fill to any color and adjust its transparency independently.
• Border Color & Weight: Customize the outline with the color picker and weight slider.
• Snap to Grid: Click "Snap Points to Grid" to align all vertices to the nearest grid intersection.
• Spin: Toggle rotation about the centroid and control speed with the slider (negative = clockwise).
• Environment Controls: Toggle the grid on/off, change background color, and adjust background opacity.
• Save Image: Download the current canvas as a PNG.
• Reset Tree: Restore the original 15-vertex evergreen Christmas tree.

About the Christmas Tree Shape

• 15 vertices total — 1 apex at (0, 9), then 7 vertices each side going clockwise
• Three branch tiers created by alternating outward tips and inward steps
• Flat base spanning x = −5 to x = 5 at y = −1
• Perfectly symmetric about the y-axis in the default state
• Classified as Concave and Simple by SWPolygon

Key SWPolygon Properties

• perimeter — sum of all edge lengths (including closing edge)
• area — interior area via the shoelace (Gauss) formula
• centroid — mean position of all vertices (the G point)
• isConvex — false for the tree (interior angles exceed 180°)
• isSimple — true as long as no edges cross each other

SketchWaveJS classes used by this demo

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