SketchWave Cloud Demo

SWCloud is a SketchWaveJS shape object that builds a cumulus-style cloud from N overlapping SWEllipse puffs. Each puff is a horizontally-elongated ellipse; together they form the soft, lumpy silhouette of a real cloud.

Puffs are placed using random offsets around the cloud center. Each puff gets a random dx and dy plus a random size scale (70–100 % of the base puff size). The Spread H slider scales how far puffs scatter horizontally; Spread V scales the vertical scatter. Because the layout is random, every cloud looks different — and clicking Randomize generates a completely new arrangement without changing any other parameter.

SWCloud parameters

• Puff Count — total number of ellipse puffs (1–9). Changing the count generates new random offsets for all puffs.
• Puff Width (radiusX) — base horizontal radius of each puff. Because radiusX > radiusY by default, puffs are horizontally elongated like real clouds.
• Puff Height (radiusY) — base vertical radius. Increase for a tall, towering cloud; decrease for a flat stratus layer.
• Spread H — scales how far puffs scatter horizontally from the center. Higher values stretch the cloud wider and let you see the individual ellipses. 0 = all puffs stacked at the center.
• Spread V — scales how far puffs scatter vertically from the center. Increasing it gives the cloud more vertical depth; decreasing it flattens it to a horizontal band.

Breathe (Billowing)

Breathe oscillates every puff’s size using an SWSinusoid. The scale factor swings between Min Scale and Max Scale.

• Stagger — sets the phase offset (in seconds) between adjacent puffs. At 0, all puffs pulse together. With stagger > 0, each puff breathes slightly after its neighbour, producing a rolling, organic billowing motion across the cloud.
• Try Breathe + Background trails (lower Background alpha) for a soft, animated cloud effect.

Drift & Noise Morph

The Drift & Noise Morph accordion adds two independent animation modes. Drift moves the cloud horizontally at a configurable speed (user units/second). When the cloud fully exits one side of the canvas it reappears on the opposite side, shifted slightly up or down from where it exited — so each pass takes a subtly different path across the sky. Noise Morph applies independent Perlin-noise offsets to each puff's position every frame — each puff wanders slightly on its own, so the overall cloud shape shifts in a slow, organic way that never repeats.

• Drift Speed — user units per second. Positive values drift right; negative values drift left. Each time the cloud wraps, it reappears at a slightly different height (clamped so it always stays visible).
• Wrap Gap — how far (user units) past the canvas edge the cloud travels before reappearing on the other side. 0 means the cloud re-enters immediately; higher values create a longer pause while the cloud is off-canvas.
• Noise Amplitude — maximum displacement of each puff from its base position (in user units). Small values produce a subtle shimmer; large values make puffs roam widely.
• Noise Speed — how fast the Perlin-noise pattern evolves. Low values give slow, cloud-like breathing; high values give rapid, turbulent morphing.

What you can explore in this demo

• Enable Drift and watch the cloud travel across the sky. Each time it wraps, it reappears at a slightly different altitude — enabling long runs with interesting drift paths. Combine with a low Sky Opacity for a ghost-trail effect.
• Enable Noise Morph alone (without drift) to see the cloud breathe and shift in place. Raise Noise Amplitude to see puffs wander far from their base positions.
• Enable both Drift + Noise Morph + Breathe simultaneously for a fully animated sky scene.
• Click Randomize Layout (or press z) to get a completely new cloud shape without changing any sliders.
• Vary Puff Count from 1 to 9. Each change regenerates the random layout for the new count.
• Set Spread H and Spread V to 0 to stack all puffs at the center — then slowly raise them to watch the cloud spread out.
• Set Fill Saturation to 0 for a white cloud against the blue sky. Raise it for exotic colorful clouds.
• Toggle Show Centers to reveal each puff’s SWPoint center dot and the cloud’s center cross-hair — useful for understanding the random puff layout.
• Drag the center cross-hair on the canvas to reposition the entire cloud.
• Enable Breathe and experiment with Period, Min/Max Scale, and Stagger for different billowing effects.
• Lower the Sky Opacity to create ghost trails during animation.

Quick controls

• Drag the center cross-hair to move the cloud.
• Keyboard: b (breathe), c (centers), d (drift), g (grid), m (noise morph), r (factory reset), z (randomize layout), q (stop animations).

SketchWaveJS classes used by this demo

• SWCloud Reference — full property, method, and usage guide
• SWEllipse Reference — the building block used inside SWCloud
• SWGrid Reference
• SWPoint Reference
• SWColor Reference
• SWSinusoid Reference