Skip to content

Latest commit

 

History

History

examples

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@thi.ng/umbrella examples

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