SketchWave Trapezoid Demo

What is a Trapezoid?

A trapezoid (or trapezium) is a quadrilateral with exactly one pair of parallel sides called the bases. The top base a is typically the shorter side; the bottom base b is the longer side. The legs are the two non-parallel sides connecting the bases, and h is the perpendicular height between them.

Regular (Isosceles) vs. General Trapezoid

• Regular / Isosceles (regular = true): The top base is centred directly above the bottom base; both legs have equal length. A line of symmetry runs vertically through the centre.
• General (regular = false): An offset value shifts the top base left or right, breaking symmetry. The left and right legs then have different lengths.

Key Formulas

Area      = (a + b) / 2 × h

Left leg  = √((b/2 − a/2 + offset)² + h²)
Right leg = √((b/2 − a/2 − offset)² + h²)
           [both legs equal when offset = 0]

Perimeter = a + b + left leg + right leg

Shape Parameters

Parameter	Effect	Default
topBase (a)	Length of the top (shorter) base in pixels. Clamped ≥ 1.	15% of canvas width
bottomBase (b)	Length of the bottom (longer) base. Clamped ≥ topBase.	25% of canvas width
height (h)	Perpendicular distance between the two parallel bases.	18% of canvas width
regular	When true: isosceles — top base is centred; offset forced to 0.	true
offset	Horizontal shift of top base (pixels); only used when regular = false.	0

Breathing Modes

SWTrapezoid supports three independent breathing modes via SWSinusoid:

• Both Bases: breathe(sin, t) — scales the top base, bottom base, and height proportionally, preserving the overall shape.
• Top Base Only: breatheTop(sin, t) — the top base oscillates while the bottom base and height remain fixed. As the top base shrinks toward zero, the shape approaches a triangle; as it grows toward the bottom base, the shape approaches a rectangle.
• Bottom Base Only: breatheBottom(sin, t) — the bottom base oscillates while the top base and height remain fixed.

Using the Controls

• Top Base / Bottom Base / Height: Sliders always visible above the accordion set each dimension as a percentage of canvas width.
• Regular checkbox: Uncheck to reveal the Offset slider and create a skewed trapezoid.
• Shape Facts: Displays live-computed area, perimeter, leg lengths, and symmetry status.
• Appearance: Toggle fill and stroke independently; pick colours; set stroke weight and background colour.
• Breathing: Click Breathing: Off or press B to start. Choose which base(s) to animate. Animations pause and resume cleanly.
• Spinning: Click Rotation: Off or press S to start. The shape rotates about its bounding-box centre. Negative rate = counter-clockwise.
• Drag: Click and drag the trapezoid to any position on the canvas.
• Reset / Quit: Reset restores all factory defaults. Quit stops animations without resetting values.

Keyboard Shortcuts

• B — toggle breathing
• S — toggle spin
• R — factory reset
• Q — quit all animations

Key SWTrapezoid Methods

• draw() — draw in screen (pixel) coordinates
• drawOnGrid(grid) — draw mapped through a SWGrid
• breathe(sinusoid, t) — scale all dimensions proportionally
• breatheTop(sinusoid, t) — scale top base only
• breatheBottom(sinusoid, t) — scale bottom base only
• rotate(degPerSec, t) — spin about bounding-box centre
• transform({sinusoid, sinusoidTop, sinusoidBottom, t, degPerSec}) — combined call
• reset() — restore animation state to initial values

Constructor

new SWTrapezoid(cx, cy, topBase, bottomBase, height, fillColor, options)

Option	Type	Default	Description
strokeColor	SWColor | null	null	Outline colour; null = no stroke
strokeWeight	number	2	Stroke width in pixels
regular	boolean	true	Isosceles (top centred); forces offset = 0
offset	number	0	Horizontal shift of top base (px); only when regular = false