@thi.ng/umbrella examples
This directory contains a growing number (currently 119) of standalone example projects, including live online versions, build instructions and commented source code.
If you want to contribute an example, please get in touch via PR, issue tracker, email or twitter!
| # | Screenshot | Name | Description |
|---|---|---|---|
| 001 |  |
adaptive-threshold | Interactive image processing (adaptive threshold) |
| 002 | async-effect | Minimal demo using interceptors with an async side effect | |
| 003 |  |
big-font | Large ASCII font text generator using @thi.ng/rdom |
| 004 |  |
bitmap-font | Figlet-style bitmap font creation with transducers |
| 005 |  |
canvas-dial | Canvas based dial widget |
| 006 |  |
cellular-automata | 2D transducer based cellular automata |
| 007 |  |
color-themes | Probabilistic color theme generator |
| 008 |  |
commit-heatmap | Heatmap visualization of this mono-repo's commits |
| 009 |  |
commit-table-ssr | Filterable commit log UI w/ minimal server to provide commit history |
| 010 |  |
crypto-chart | Basic crypto-currency candle chart with multiple moving averages plots |
| 011 | devcards | BMI calculator in a devcards format | |
| 012 |  |
dominant-colors | Color palette generation via dominant color extraction from uploaded images |
| 013 |  |
ellipse-proximity | Interactive visualization of closest points on ellipses |
| 014 |  |
fft-synth | Interactive inverse FFT toy synth |
| 015 |  |
geom-convex-hull | Convex hull & shape clipping of 2D polygons |
| 016 |  |
geom-fuzz-basics | geom-fuzz basic shape & fill examples |
| 017 |  |
geom-knn | Doodle w/ K-nearest neighbor search result visualization |
| 018 |  |
geom-knn-hash | K-nearest neighbor search in an hash grid |
| 019 |  |
geom-tessel | Animated, recursive polygon tessellations |
| 020 |  |
geom-voronoi-mst | Poisson-disk shape-aware sampling, Voronoi & Minimum Spanning Tree visualization |
| 021 |  |
gesture-analysis | Mouse gesture / stroke analysis, simplification, corner detection |
| 022 |  |
grid-iterators | Visualization of different grid iterator strategies |
| 023 | hdom-basics | Minimal hdom usage example | |
| 024 |  |
hdom-benchmark | hdom update performance benchmark (old version) |
| 025 |  |
hdom-benchmark2 | hdom update performance benchmark w/ config options |
| 026 |  |
hdom-canvas-clock | Realtime analog clock demo |
| 027 |  |
hdom-canvas-draw | Interactive pattern drawing demo using transducers |
| 028 |  |
hdom-canvas-particles | 2D Bezier curve-guided particle system |
| 029 |  |
hdom-canvas-shapes | Various hdom-canvas shape drawing examples & SVG conversion / export |
| 030 | hdom-dropdown | Custom dropdown UI component for hdom | |
| 031 | hdom-dropdown-fuzzy | Custom dropdown UI component w/ fuzzy search | |
| 032 | hdom-dyn-context | Using custom hdom context for dynamic UI theming | |
| 033 | hdom-elm | Using hdom in an Elm-like manner | |
| 034 | hdom-inner-html | Higher-order component for rendering HTML strings | |
| 035 | hdom-local-render | Isolated, component-local DOM updates | |
| 036 | hdom-localstate | UI component w/ local state stored in hdom context | |
| 037 | hdom-skip | Skipping UI updates for selected component(s) | |
| 038 | hdom-skip-nested | Skipping UI updates for nested component(s) | |
| 039 | hdom-theme | Example for themed components proposal | |
| 040 |  |
hdom-toggle | Customizable slide toggle component demo |
| 041 | hdom-vscroller | Virtual scroller component for large tables / lists | |
| 042 |  |
hiccup-canvas-arcs | Animated arcs & drawing using hiccup-canvas |
| 043 | hydrate-basics | Hiccup / hdom DOM hydration example | |
| 044 |  |
imgui | Canvas based Immediate Mode GUI components |
| 045 |  |
imgui-basics | Minimal IMGUI usage example |
| 046 | interceptor-basics | Event handling w/ interceptors and side effects | |
| 047 | interceptor-basics2 | Event handling w/ interceptors and side effects | |
| 048 |  |
iso-plasma | Animated sine plasma effect visualized using contour lines |
| 049 |  |
json-components | Transforming JSON into UI components |
| 050 |  |
kmeans-viz | k-means clustering visualization |
| 051 | login-form | Basic SPA example with atom-based UI router | |
| 052 |  |
mandelbrot | Worker based, interactive Mandelbrot visualization |
| 053 |  |
markdown | Markdown to Hiccup to HTML parser / transformer |
| 054 | multitouch | Basic rstream-gestures multi-touch demo | |
| 055 |  |
package-stats | CLI util to visualize umbrella pkg stats |
| 056 |  |
parse-playground | Parser grammar livecoding editor/playground & codegen |
| 057 |  |
pixel-basics | Pixel buffer manipulations |
| 058 |  |
pixel-dither | Showcase of various dithering algorithms |
| 059 |  |
pixel-indexed | Image dithering and remapping using indexed palettes |
| 060 |  |
pixel-normal-map | Normal map creation/conversion basics |
| 061 |  |
pixel-sorting | Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel |
| 062 |  |
pointfree-svg | Generate SVG using pointfree DSL |
| 063 |  |
poisson-circles | 2D Poisson-disc sampler with procedural gradient map |
| 064 |  |
poly-spline | Polygon to cubic curve conversion & visualization |
| 065 |  |
porter-duff | Port-Duff image compositing / alpha blending |
| 066 |  |
ramp-synth | Unison wavetable synth with waveform editor |
| 067 |  |
rasterize-blend | Steering behavior drawing with alpha-blended shapes |
| 068 | rdom-basics | Demonstates various rdom usage patterns | |
| 069 |  |
rdom-delayed-update | Dynamically loaded images w/ preloader state |
| 070 |  |
rdom-dnd | rdom drag & drop example |
| 071 |  |
rdom-lissajous | rdom & hiccup-canvas interop test |
| 072 | rdom-search-docs | Full umbrella repo doc string search w/ paginated results | |
| 073 |  |
rdom-svg-nodes | rdom powered SVG graph with draggable nodes |
| 074 |  |
rotating-voronoi | Animated Voronoi diagram, cubic splines & SVG download |
| 075 |  |
router-basics | Complete mini SPA app w/ router & async content loading |
| 076 | rstream-dataflow | Minimal rstream dataflow graph | |
| 077 |  |
rstream-event-loop | Minimal demo of using rstream constructs to form an interceptor-style event loop |
| 078 |  |
rstream-grid | Interactive grid generator, SVG generation & export, undo/redo support |
| 079 | rstream-hdom | rstream based UI updates & state handling | |
| 080 |  |
rstream-spreadsheet | rstream based spreadsheet w/ S-expression formula DSL |
| 081 |  |
scenegraph | 2D scenegraph & shape picking |
| 082 |  |
scenegraph-image | 2D scenegraph & image map based geometry manipulation |
| 083 |  |
shader-ast-canvas2d | 2D canvas shader emulation |
| 084 |  |
shader-ast-evo | Evolutionary shader generation using genetic programming |
| 085 |  |
shader-ast-noise | HOF shader procedural noise function composition |
| 086 |  |
shader-ast-raymarch | WebGL & JS canvas2D raymarch shader cross-compilation |
| 087 |  |
shader-ast-sdf2d | WebGL & JS canvas 2D SDF |
| 088 |  |
shader-ast-tunnel | WebGL & Canvas2D textured tunnel shader |
| 089 |  |
shader-ast-workers | Fork-join worker-based raymarch renderer (JS/CPU only) |
| 090 |  |
shader-graph | Minimal shader graph developed during livestream #2 |
| 091 |  |
soa-ecs | Entity Component System w/ 100k 3D particles |
| 092 |  |
spline-tangent | Compute cubic spline position & tangent using Dual Numbers |
| 093 |  |
stratified-grid | 2D Stratified grid sampling example |
| 094 |  |
svg-barchart | Simplistic SVG bar chart component |
| 095 | svg-particles | Basic 2D particle system w/ SVG shapes | |
| 096 |  |
svg-resample | SVG path parsing & dynamic resampling |
| 097 |  |
svg-waveform | Additive waveform synthesis & SVG visualization with undo/redo |
| 098 |  |
talk-slides | hdom based slide deck viewer & slides from my ClojureX 2018 keynote |
| 099 |  |
text-canvas | 3D wireframe textmode demo |
| 100 |  |
text-canvas-image | Textmode image warping w/ 16bit color output |
| 101 |  |
todo-list | Obligatory to-do list example with undo/redo |
| 102 | transducers-hdom | Transducer & rstream based hdom UI updates | |
| 103 |  |
triple-query | Triple store query results & sortable table |
| 104 |  |
unbiased-normals | Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere |
| 105 |  |
webgl-channel-mixer | rdom & WebGL-based image channel editor |
| 106 |  |
webgl-cube | WebGL multi-colored cube mesh |
| 107 |  |
webgl-cubemap | WebGL cube maps with async texture loading |
| 108 |  |
webgl-float-fbo | Drawing to floating point offscreen / multi-pass shader pipeline |
| 109 |  |
webgl-grid | WebGL instancing, animated grid |
| 110 |  |
webgl-msdf | WebGL MSDF text rendering & particle system |
| 111 | webgl-multipass | Minimal multi-pass / GPGPU example | |
| 112 |  |
webgl-shadertoy | Shadertoy-like WebGL setup |
| 113 |  |
webgl-ssao | WebGL screenspace ambient occlusion |
| 114 |  |
wolfram | 1D Wolfram automata with OBJ point cloud export |
| 115 |  |
xml-converter | XML/HTML/SVG to hiccup/JS conversion |
| 116 |  |
zig-canvas | Zig-based DOM creation & canvas drawing app |
| 117 |  |
zig-cellular | Zig-based 2D multi-behavior cellular automata |
| 118 |  |
zig-counter | Simple Zig/WASM click counter DOM component |
| 119 |  |
zig-todo-list | Zig-based To-Do list, DOM creation, local storage task persistence |