SketchWave TearDrop Demo

What is a TearDrop?

A teardrop (or water-drop) is a smooth, closed parametric curve with a pointed tip at the top and a rounded bulge at the bottom. SWTearDrop produces this shape using two parametric equations:

x(t) = b · sin(t) · sinm(t / 2)
y(t) = −a · cos(t)          t ∈ [0, 2π]

At t = 0 the tip sits at the top (0, −a). At t = π the bottom of the bulge is at (0, +a). The widest point occurs near t ≈ 109°, about one-third of the way down from the bounding-box centre.

Shape Parameters

Parameter	Effect	Default
a	Half-height — distance from the bounding-box centre to the tip and to the bottom of the bulge; controls the overall height of the shape	25% of canvas width
b	Width parameter — max half-width ≈ 0.77 × b (for m = 1); scales the horizontal extent of the bulge	18% of canvas width
m	Curve-power exponent: 0 = perfect ellipse, 1 = classic teardrop, 2+ = elongated with a sharper tip	3.0
numPoints	Number of polygon vertices for the outline; higher = smoother curve, lower = faceted; 3 gives a triangle	120

Effect of the m (Curve Power) Parameter

• m = 0: Pure ellipse — sin⁰(t/2) = 1 everywhere, so x = b · sin(t) and y = −a · cos(t), tracing a plain ellipse.
• m = 1: Classic teardrop — a smooth point at the tip with a full rounded bulge.
• m = 2: More elongated drop with a noticeably sharper tip.
• m ≥ 3: Increasingly needle-like tip; the widest part of the bulge becomes relatively narrower as m increases.

Rotation Pivot

SWTearDrop supports two pivot modes when spinning:

• Centre: The entire shape spins in place — the tip traces a full circle around the bounding-box centre. Think of a spinning drop of water.
• Tip: The tip stays fixed at its current position and the bulge swings around it like a pendulum — or like a key hanging from a hook.

Using the Controls

• Height (a) & Width (b): The two sliders always visible above the accordion set each parameter as a percentage of the canvas width.
• Shape Details: Set the Curve Power (m) to change tip sharpness; set Smoothness to control the vertex count.
• Appearance: Toggle fill and stroke independently; choose colours with the pickers; set stroke weight and background colour.
• Breathing: Click Breathing: Off or press B to start. Both a and b scale proportionally between Min and Max over the given period, preserving the shape’s proportions. Animations pause and resume cleanly.
• Spinning: Click Rotation: Off or press S to start. Set speed in degrees per second (negative = counter-clockwise). Use the Rotation Pivot radio buttons to choose Centre or Tip.
• Drag: Click and drag the teardrop to any position on the canvas.
• Reset / Quit: Reset restores all factory defaults. Quit stops all animations without resetting values.
• Save Image: Click the Save Image button for a timestamped PNG of the canvas.

Keyboard Shortcuts

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

Key SWTearDrop Methods

• draw() — draw in screen (pixel) coordinates
• drawOnGrid(grid) — draw mapped through a SWGrid
• breathe(sinusoid, t) — scale proportionally via SWSinusoid
• rotate(degPerSec, t) — spin about centre or tip
• transform({sinusoid, t, degPerSec}) — breathe and/or rotate in one call
• reset() — restore animation state to initial values
• setRotOrigin(o) — switch pivot: 'center' or 'tip'

Constructor

new SWTearDrop(cx, cy, a, b, fillColor, options)

Option	Type	Default	Description
strokeColor	SWColor | null	null	Outline colour; null = no stroke
strokeWeight	number	2	Stroke width in pixels
m	number (≥ 0)	1.0	Curve-power exponent
numPoints	number (≥ 3)	120	Vertex count for the outline
rotOrigin	'center' | 'tip'	'center'	Rotation pivot point