Skip to content

Commit 900b8e9

Browse files
committed
docs: add Alpha Blending Demo section to EXAMPLES.md with animated GIF
Adds a new Showcase section documenting the Alpha Blending Demo window, including the animated GIF, a five-zone feature table, and the APIs demonstrated. Updates the Feature Matrix and Controls table accordingly.
1 parent 5e44702 commit 900b8e9

2 files changed

Lines changed: 32 additions & 1 deletion

File tree

docs/EXAMPLES.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,36 @@ dotnet run --project Examples/CanvasDemo
181181

182182
---
183183

184+
### Alpha Blending Demo
185+
Real-time Porter-Duff alpha compositing showcase with a live cycling gradient background.
186+
187+
![Alpha Blending Demo](images/examples/alpha-blending.gif)
188+
189+
```bash
190+
dotnet run --project Examples/DemoApp
191+
# Navigate to Rendering → Alpha Blending
192+
```
193+
194+
Five zones demonstrate every level of the alpha pipeline against a continuously cycling full-spectrum gradient (three hues 120° apart rotating through the colour wheel every ~12 s):
195+
196+
| Zone | What it shows |
197+
|------|--------------|
198+
| **Alpha Ladder** | Eight panels, same orange hue, alpha 0 → 255. Each panel background composites over the live gradient — fully transparent at α=0, fully opaque at α=255. |
199+
| **Fade to Transparent** | 60 `` block characters with foreground alpha stepping 255 → 0. Foreground blends against the resolved background, so the blocks dissolve into the gradient rather than fading to white. |
200+
| **Glass Panels** | Four bordered panels at 25 / 50 / 75 / 100 % opacity. The gradient shows through each panel proportionally. |
201+
| **Live Compositor** | Interactive `Color.Blend(src, dst)` visualiser — drag the slider to change source alpha and watch the blended swatch update in real time. |
202+
| **Pulse Panel** | Background alpha animated 0 → 255 → 0 via a sine wave in an async window thread. |
203+
204+
**APIs Demonstrated:**
205+
- `Color.Blend()` — Porter-Duff "over" compositing
206+
- `ColorGradient.FromColors()` with time-varying hues for a smooth colour-wheel cycle
207+
- `ScrollablePanel` with semi-transparent `BackgroundColor` (glass effect)
208+
- `SliderControl` wired to a live `MarkupControl` preview
209+
- Markup inline alpha: `[#RRGGBBAA]text[/]`
210+
- `WithAsyncWindowThread` driving animation at 20 fps
211+
212+
---
213+
184214
### ConsoleTopExample
185215
ntop/btop-inspired live system monitoring dashboard.
186216

@@ -413,6 +443,7 @@ These examples demonstrate specific features without full screenshots.
413443
| DemoApp || ||| | |
414444
| NavigationViewDemo | | || | | |
415445
| CanvasDemo |||| | | |
446+
| Alpha Blending Demo || || | | |
416447
| ConsoleTopExample || | | | | |
417448
| HighFreqDemo || || | | |
418449
| CompositorEffectsExample ||| || | |
@@ -458,7 +489,7 @@ These examples demonstrate specific features without full screenshots.
458489
| `ImageControl` | DemoApp (Image Rendering, Image Viewer) |
459490
| `CanvasControl` | CanvasDemo, DemoApp |
460491
| `HorizontalGridControl` | Most examples |
461-
| `SliderControl` | DemoApp |
492+
| `SliderControl` | DemoApp, Alpha Blending Demo |
462493
| `RangeSliderControl` | DemoApp |
463494
| `SpectreRenderableControl` | SpectreMouseExample |
464495

8.53 MB
Loading

0 commit comments

Comments
 (0)