This directory contains a growing number (currently 175) 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 |  |
ascii-raymarch | ASCII art raymarching with thi.ng/shader-ast & thi.ng/text-canvas |
| 003 | async-effect | Minimal demo using interceptors with an async side effect | |
| 004 |  |
big-font | Large ASCII font text generator using @thi.ng/rdom |
| 005 |  |
bitmap-font | Figlet-style bitmap font creation with transducers |
| 006 |  |
blurhash | Interactive & reactive image blurhash generator |
| 007 |  |
boid-basics | Basic 2D boid simulation and spatial indexing neighbor lookups |
| 008 |  |
canvas-dial | Canvas based dial widget |
| 009 |  |
canvas-recorder | Self-modifying, animated typographic grid with emergent complex patterns |
| 010 |  |
cellular-automata | 2D transducer based cellular automata |
| 011 |  |
color-themes | Probabilistic color theme generator |
| 012 |  |
commit-heatmap | Heatmap visualization of this mono-repo's commits |
| 013 |  |
commit-table-ssr | Filterable commit log UI w/ minimal server to provide commit history |
| 014 |  |
crypto-chart | Basic crypto-currency candle chart with multiple moving averages plots |
| 015 |  |
csp-bus | CSP channel-based event handling, async transducers & reactive UI components |
| 016 | devcards | BMI calculator in a devcards format | |
| 017 |  |
dominant-colors | Color palette generation via dominant color extraction from uploaded images |
| 018 |  |
ellipse-proximity | Interactive visualization of closest points on ellipses |
| 019 |  |
fft-synth | Interactive inverse FFT toy synth |
| 020 |  |
fiber-basics | Fiber-based cooperative multitasking basics |
| 021 |  |
geom-classify-point | Polygon point classification (inside/boundary/outside) |
| 022 |  |
geom-complex-poly | Shape conversions & operations using polygons with holes |
| 023 |  |
geom-convex-hull | Convex hull & shape clipping of 2D polygons |
| 024 |  |
geom-csv-piechart | Piechart visualization of CSV data |
| 025 |  |
geom-extra-hiccup | Embedding thi.ng/hiccup data/elements in thi.ng/geom shape hierarchies |
| 026 |  |
geom-fuzz-basics | geom-fuzz basic shape & fill examples |
| 027 |  |
geom-hexgrid | Hex grid generation & tessellations |
| 028 |  |
geom-knn | Doodle w/ K-nearest neighbor search result visualization |
| 029 |  |
geom-knn-hash | K-nearest neighbor search in an hash grid |
| 030 |  |
geom-sdf-logo | (Re)Constructing the thi.ng logo using a 2D signed-distance field |
| 031 |  |
geom-sdf-path | SVG path to SDF, applying deformation and converting back to SVG |
| 032 |  |
geom-terrain-viz | 2.5D hidden line visualization of digital elevation files (DEM) |
| 033 |  |
geom-tessel | Animated, recursive polygon tessellations |
| 034 |  |
geom-unique-edges | Iterating the unique edges of a tessellation |
| 035 |  |
geom-voronoi-mst | Poisson-disk shape-aware sampling, Voronoi & Minimum Spanning Tree visualization |
| 036 |  |
geom-webgl-attrib-pool | Augmenting thi.ng/geom shapes for WebGL, using instancing & attribute buffers |
| 037 |  |
geom-webgl-basics | Converting thi.ng/geom shape types for WebGL |
| 038 |  |
gesture-analysis | Mouse gesture / stroke analysis, simplification, corner detection |
| 039 | gpgpu-reduce | GPU-based data reduction using thi.ng/shader-ast & WebGL multi-pass pipeline | |
| 040 |  |
grid-iterators | Visualization of different grid iterator strategies |
| 041 | hdom-basics | Minimal hdom usage example | |
| 042 |  |
hdom-benchmark | hdom update performance benchmark (old version) |
| 043 |  |
hdom-benchmark2 | hdom update performance benchmark w/ config options |
| 044 |  |
hdom-canvas-clock | Realtime analog clock demo |
| 045 |  |
hdom-canvas-draw | Interactive pattern drawing demo using transducers |
| 046 |  |
hdom-canvas-particles | 2D Bezier curve-guided particle system |
| 047 |  |
hdom-canvas-shapes | Various hdom-canvas shape drawing examples & SVG conversion / export |
| 048 | hdom-dropdown | Custom dropdown UI component for hdom | |
| 049 | hdom-dropdown-fuzzy | Custom dropdown UI component w/ fuzzy search | |
| 050 | hdom-dyn-context | Using custom hdom context for dynamic UI theming | |
| 051 | hdom-elm | Using hdom in an Elm-like manner | |
| 052 | hdom-inner-html | Higher-order component for rendering HTML strings | |
| 053 | hdom-local-render | Isolated, component-local DOM updates | |
| 054 | hdom-localstate | UI component w/ local state stored in hdom context | |
| 055 | hdom-skip | Skipping UI updates for selected component(s) | |
| 056 | hdom-skip-nested | Skipping UI updates for nested component(s) | |
| 057 | hdom-theme | Example for themed components proposal | |
| 058 |  |
hdom-toggle | Customizable slide toggle component demo |
| 059 | hdom-vscroller | Virtual scroller component for large tables / lists | |
| 060 |  |
hiccup-canvas-arcs | Animated arcs & drawing using hiccup-canvas |
| 061 |  |
hiccup-canvas-basics | Basic hiccup-based canvas drawing |
| 062 |  |
hiccup-css-image-transition | Generating pure CSS image transitions |
| 063 | hydrate-basics | Hiccup / hdom DOM hydration example | |
| 064 |  |
ifs-fractal | Barnsley fern IFS fractal renderer |
| 065 |  |
imgui | Canvas based Immediate Mode GUI components |
| 066 |  |
imgui-basics | Minimal IMGUI usage example |
| 067 | interceptor-basics | Event handling w/ interceptors and side effects | |
| 068 | interceptor-basics2 | Event handling w/ interceptors and side effects | |
| 069 |  |
iso-plasma | Animated sine plasma effect visualized using contour lines |
| 070 |  |
json-components | Transforming JSON into UI components |
| 071 |  |
kmeans-viz | k-means clustering visualization |
| 072 |  |
layout-gridgen | Randomized space-filling, nested grid layout generator |
| 073 |  |
lispy-repl | Browser REPL for a Lispy S-expression based mini language |
| 074 | login-form | Basic SPA example with atom-based UI router | |
| 075 |  |
mandelbrot | Worker based, interactive Mandelbrot visualization |
| 076 |  |
markdown | Markdown to Hiccup to HTML parser / transformer |
| 077 |  |
mastodon-feed | Mastodon API feed reader with support for different media types, fullscreen media modal, HTML rewriting |
| 078 |  |
meta-css-basics | Basic thi.ng/meta-css usage & testbed |
| 079 | multitouch | Basic rstream-gestures multi-touch demo | |
| 080 |  |
package-stats | CLI util to visualize umbrella pkg stats |
| 081 |  |
parse-playground | Parser grammar livecoding editor/playground & codegen |
| 082 |  |
pixel-basics | Pixel buffer manipulations |
| 083 |  |
pixel-colormatrix | Matrix-based image color adjustments |
| 084 |  |
pixel-dither | Showcase of various dithering algorithms |
| 085 |  |
pixel-gradients | Randomized 4-point 2D color gradient image generator |
| 086 |  |
pixel-indexed | Image dithering and remapping using indexed palettes |
| 087 |  |
pixel-normal-map | Normal map creation/conversion basics |
| 088 |  |
pixel-sorting | Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel |
| 089 |  |
pixel-waveform | RGB waveform image analysis |
| 090 |  |
pointfree-geom | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang |
| 091 |  |
pointfree-svg | Generate SVG using pointfree DSL |
| 092 |  |
poisson-circles | 2D Poisson-disc sampler with procedural gradient map |
| 093 |  |
poisson-image | Image-based Poisson-disk sampling |
| 094 |  |
poly-spline | Polygon to cubic curve conversion & visualization |
| 095 |  |
poly-subdiv | Animated, iterative polygon subdivisions & visualization |
| 096 |  |
porter-duff | Port-Duff image compositing / alpha blending |
| 097 |  |
procedural-text | Procedural stochastic text generation via custom DSL, parse grammar & AST transformation |
| 098 |  |
quasi-lattice | Quasi-random lattice generator |
| 099 |  |
ramp-scroll-anim | Scroll-based, reactive, multi-param CSS animation basics |
| 100 |  |
ramp-synth | Unison wavetable synth with waveform editor |
| 101 |  |
rasterize-blend | Steering behavior drawing with alpha-blended shapes |
| 102 | rdom-async | Basic & barebones usage of async iterables in thi.ng/rdom | |
| 103 | rdom-basics | Demonstates various rdom usage patterns | |
| 104 |  |
rdom-canvas-basics | Minimal rdom-canvas animation |
| 105 |  |
rdom-delayed-update | Dynamically loaded images w/ preloader state |
| 106 |  |
rdom-dnd | rdom drag & drop example |
| 107 |  |
rdom-formgen | Basic usage of the declarative rdom-forms generator |
| 108 |  |
rdom-key-sequences | rstream & transducer-based FSM for converting key event sequences into high-level commands |
| 109 |  |
rdom-klist | Basic usage of thi.ng/rdom keyed list component wrapper |
| 110 |  |
rdom-lazy-load | Lazy loading components via @thi.ng/rdom |
| 111 |  |
rdom-lissajous | rdom & hiccup-canvas interop test |
| 112 |  |
rdom-reactive-svg | Animated SVG elements with reactive attributes |
| 113 |  |
rdom-router | Basic thi.ng/router usage with thi.ng/rdom components |
| 114 | rdom-search-docs | Full umbrella repo doc string search w/ paginated results | |
| 115 |  |
rdom-svg-nodes | rdom powered SVG graph with draggable nodes |
| 116 |  |
rdom-web-components | Defining & using basic Web Components (with shadow DOM) via @thi.ng/rdom & @thi.ng/meta-css |
| 117 |  |
related-images | Responsive image gallery with tag-based Jaccard similarity ranking |
| 118 |  |
render-audio | Generative audio synth offline renderer and WAV file export |
| 119 |  |
rotating-voronoi | Animated Voronoi diagram, cubic splines & SVG download |
| 120 |  |
router-basics | Complete mini SPA app w/ router & async content loading |
| 121 | rstream-dataflow | Minimal rstream dataflow graph | |
| 122 |  |
rstream-event-loop | Minimal demo of using rstream constructs to form an interceptor-style event loop |
| 123 |  |
rstream-grid | Interactive grid generator, SVG generation & export, undo/redo support |
| 124 | rstream-hdom | rstream based UI updates & state handling | |
| 125 |  |
rstream-spreadsheet | rstream based spreadsheet w/ S-expression formula DSL |
| 126 |  |
rstream-sync | Minimal rstream sync() example using rdom |
| 127 |  |
rstream-system-bus | Declarative component-based system with central rstream-based pubsub event bus |
| 128 |  |
scenegraph | 2D scenegraph & shape picking |
| 129 |  |
scenegraph-image | 2D scenegraph & image map based geometry manipulation |
| 130 |  |
shader-ast-canvas2d | 2D canvas shader emulation |
| 131 |  |
shader-ast-easings | Shader-AST meta-programming techniques for animated function plots |
| 132 |  |
shader-ast-evo | Evolutionary shader generation using genetic programming |
| 133 |  |
shader-ast-noise | HOF shader procedural noise function composition |
| 134 |  |
shader-ast-raymarch | WebGL & JS canvas2D raymarch shader cross-compilation |
| 135 |  |
shader-ast-sdf2d | WebGL & JS canvas 2D SDF |
| 136 |  |
shader-ast-tunnel | WebGL & Canvas2D textured tunnel shader |
| 137 |  |
shader-ast-workers | Fork-join worker-based raymarch renderer (JS/CPU only) |
| 138 |  |
shader-graph | Minimal shader graph developed during livestream #2 |
| 139 |  |
simd-plot | Fitting, transforming & plotting 10k data points per frame using SIMD |
| 140 |  |
soa-ecs | Entity Component System w/ 100k 3D particles |
| 141 |  |
spline-tangent | Compute cubic spline position & tangent using Dual Numbers |
| 142 |  |
stacked-layout | Responsive & reactively computed stacked column layout |
| 143 |  |
stratified-grid | 2D Stratified grid sampling example |
| 144 |  |
svg-barchart | Simplistic SVG bar chart component |
| 145 | svg-particles | Basic 2D particle system w/ SVG shapes | |
| 146 |  |
svg-resample | SVG path parsing & dynamic resampling |
| 147 |  |
svg-waveform | Additive waveform synthesis & SVG visualization with undo/redo |
| 148 |  |
talk-slides | hdom based slide deck viewer & slides from my ClojureX 2018 keynote |
| 149 |  |
text-canvas | 3D wireframe textmode demo |
| 150 |  |
text-canvas-image | Textmode image warping w/ 16bit color output |
| 151 |  |
thing-packages-quiz | thi.ng/rdom & thi.ng/rstream based quiz to guess thi.ng package names |
| 152 |  |
todo-list | Obligatory to-do list example with undo/redo |
| 153 |  |
trace-bitmap | Multi-layer vectorization & dithering of bitmap images |
| 154 | transducers-hdom | Transducer & rstream based hdom UI updates | |
| 155 |  |
triple-query | Triple store query results & sortable table |
| 156 |  |
unbiased-normals | Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere |
| 157 |  |
viz-ridge-lines | Interactive ridge-line plot |
| 158 |  |
viz-scatter-plot | Interactive scatter & line plot of low-discrepancy samples |
| 159 |  |
webgl-channel-mixer | rdom & WebGL-based image channel editor |
| 160 |  |
webgl-cube | WebGL multi-colored cube mesh |
| 161 |  |
webgl-cubemap | WebGL cube maps with async texture loading |
| 162 |  |
webgl-float-fbo | Drawing to floating point offscreen / multi-pass shader pipeline |
| 163 |  |
webgl-game-of-life | Game of Life implemented as WebGL2 multi-pass shader pipeline |
| 164 |  |
webgl-grid | WebGL instancing, animated grid |
| 165 |  |
webgl-msdf | WebGL MSDF text rendering & particle system |
| 166 | webgl-multipass | Minimal multi-pass / GPGPU example | |
| 167 |  |
webgl-shadertoy | Shadertoy-like WebGL setup |
| 168 |  |
webgl-ssao | WebGL screenspace ambient occlusion |
| 169 |  |
webgl-texture-paint | Interactively drawing to & reading from a WebGL offscreen render texture |
| 170 |  |
wolfram | 1D Wolfram automata with OBJ point cloud export |
| 171 |  |
xml-converter | XML/HTML/SVG to hiccup/JS conversion |
| 172 |  |
zig-canvas | Zig-based DOM creation & canvas drawing app |
| 173 |  |
zig-cellular | Zig-based 2D multi-behavior cellular automata |
| 174 |  |
zig-counter | Simple Zig/WASM click counter DOM component |
| 175 |  |
zig-todo-list | Zig-based To-Do list, DOM creation, local storage task persistence |