├── README.md └── images ├── colah.png ├── emergent_mind.png ├── encinographic.png ├── game_mechanic_explorer.png ├── khan_academy.png ├── mathigon.png ├── melkman.png ├── pixel_shaders.png ├── probabilistic_models_of_computation.png ├── red_blob_games.png ├── setosa.png ├── steve_witten.png ├── the_nature_of_code.png └── visualgo.png /README.md: -------------------------------------------------------------------------------- 1 | algovis [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | ======= 3 | 4 | This is collection of projects and links about algorithm visualization. 5 | 6 | # Projects 7 | 8 | * [Setosa](http://setosa.io) blog (example: [Gridlock vs. Bottlenecks](http://setosa.io/blog/2014/09/02/gridlock/index.html)) 9 | [](http://setosa.io/blog/2014/09/02/gridlock/index.html) 10 | * [Mathigon](http://world.mathigon.org/) (example: [Sieve of Eratosthenes](http://world.mathigon.org/Prime_Numbers)) and [beta site](http://beta.mathigon.org/) 11 | [](http://world.mathigon.org/Prime_Numbers) 12 | * [Encinographic](http://encinographic.blogspot.com/) blog (example: [2D Wave Equation](http://encinographic.blogspot.com/2014/05/sim-class-wave-equation-in-2d.html)) 13 | [](http://encinographic.blogspot.com/2014/05/sim-class-wave-equation-in-2d.html) 14 | * [Emergent Mind](http://www.emergentmind.com/) blog (example: [Perceptrons](http://www.emergentmind.com/the-perceptron)) 15 | [](http://www.emergentmind.com/the-perceptron) 16 | * [The Nature of Code](http://natureofcode.com/book/) book (example: [Oscillation](http://natureofcode.com/book/chapter-3-oscillation/)) 17 | [](http://natureofcode.com/book/chapter-3-oscillation/) 18 | * [Game Mechanic Explorer](http://gamemechanicexplorer.com/) (example: [Homing Missiles](http://gamemechanicexplorer.com/#homingmissiles-1)) 19 | [](http://gamemechanicexplorer.com/#homingmissiles-1) 20 | * [Pixel Shaders](http://pixelshaders.com/proposal/) book proposal 21 | [](http://pixelshaders.com/proposal/) 22 | * [Probabilistic Models of Computation](https://probmods.org/) book (example: [Generative Models](https://probmods.org/chapters/generative-models.html)) 23 | [](https://probmods.org/chapters/02-generative-models.html) 24 | * [Steven Wittens](http://acko.net/) (example: [How to fold a Julia Fractal](http://acko.net/blog/how-to-fold-a-julia-fractal/) - click arrows on slideshows) 25 | [](http://acko.net/blog/how-to-fold-a-julia-fractal/) 26 | * [Red Blob Games](http://www.redblobgames.com/) (example: [2D Visibility](http://www.redblobgames.com/articles/visibility/)) 27 | [](http://www.redblobgames.com/articles/visibility/) 28 | * [Khan Academy algorithms course](https://www.khanacademy.org/computing/computer-science/algorithms) (example: [Breadth First Search](https://www.khanacademy.org/computing/computer-science/algorithms/breadth-first-search/a/the-breadth-first-search-algorithm)) 29 | [](https://www.khanacademy.org/computing/computer-science/algorithms/breadth-first-search/a/the-breadth-first-search-algorithm) 30 | * [Christopher Olah](https://colah.github.io/) (example: [Neural Networks, Manifolds, and Topology](https://colah.github.io/posts/2014-03-NN-Manifolds-Topology/)) 31 | [](https://colah.github.io/posts/2014-03-NN-Manifolds-Topology/) 32 | * [Visualgo](https://visualgo.net/en) 33 | [](https://visualgo.net/en) 34 | * [Melkman's Algorithm interactively explained](http://maxgoldste.in/melkman/) 35 | [](http://maxgoldste.in/melkman/) 36 | 37 | # Libraries & tools 38 | 39 | * [Tailspin](http://will.thimbleby.net/algorithms/doku.php): JS interpreter in JS that runs an algorithm and lets the visualization inspect the local variables. Records history to allow stepping backwards too. 40 | * [Vamonos](http://rosulek.github.io/vamonos/): algorithm visualizations with pseudocode shown to reader and JS version underneath, plus some useful widgets to show pseudocode, call stack, data structures 41 | * [Algomation](http://www.algomation.com/): algorithm visualization that uses JS generators to pass control between algorithm execution and browser event loop 42 | * [Algorithm Visualizations](http://www.cs.usfca.edu/~galles/visualization/Algorithms.html) 43 | * [LaTeX2HTML5](http://latex2html5.com/): annotate LaTeX diagrams with interactivity when exporting to HTML 44 | * [Tangle](http://worrydream.com/Tangle/) 45 | 46 | 47 | # References 48 | 49 | * [Visualizing Algorithms](http://bost.ocks.org/mike/algorithms/) 50 | * [Active Essays on the Web](http://tinlizzie.org/chalkboard/#ActiveEssaysOnTheWeb) 51 | * [Visualizing sorting algorithms](https://corte.si/posts/code/visualisingsorting/index.html) - arguing that static visualizations are better than algorithm animation 52 | 53 | 54 | # Examples 55 | 56 | * [Garbage Collection](http://spin.atomicobject.com/2014/09/03/visualizing-garbage-collection-algorithms/) 57 | * [Spatial Hashing](http://zufallsgenerator.github.io/2014/01/26/visually-comparing-algorithms/) 58 | * [Fourier Image Filtering](http://david.li/filtering/) 59 | * [Fourier Series Visualization](http://bl.ocks.org/jinroh/7524988) 60 | * [The Skyline Problem](https://briangordon.github.io/2014/08/the-skyline-problem.html) 61 | * [Animated Bézier Curves](http://www.jasondavies.com/animated-bezier/) 62 | * [A Primer on Bezier Curves](http://pomax.github.io/bezierinfo/) 63 | * [Sight And Light](http://ncase.me/sight-and-light/) 64 | * [Newton-Raphson Optimization (1D)](http://bl.ocks.org/dannyko/ffe9653768cb80dfc0da) 65 | * [Newton-Raphson Optimization (2D)](http://bl.ocks.org/dannyko/0956c361a6ce22362867) 66 | * [Fisher-Yates Shuffle](http://bost.ocks.org/mike/shuffle/) 67 | * [Tetris in Clojure](http://shaunlebron.github.io/t3tr0s-slides/#0) 68 | * [HyperLogLog for big data distinct values](http://research.neustar.biz/2012/10/25/sketch-of-the-day-hyperloglog-cornerstone-of-a-big-data-infrastructure/) 69 | * [Cave Culling Algorithm in Minecraft](http://tomcc.github.io/2014/08/31/visibility-1.html) 70 | * [Explanation of X11 Servers](http://magcius.github.io/xplain/article/) has an X11 server running in the browser! 71 | * [Manual for rot.js, a roguelike game library](http://ondras.github.io/rot.js/manual/#intro) makes all the examples editable and viewable in the browser 72 | * [ConvNetJS](http://cs.stanford.edu/people/karpathy/convnetjs/) neural network examples in browser (example: [2-layer neural network](http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html)) 73 | -------------------------------------------------------------------------------- /images/colah.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/colah.png -------------------------------------------------------------------------------- /images/emergent_mind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/emergent_mind.png -------------------------------------------------------------------------------- /images/encinographic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/encinographic.png -------------------------------------------------------------------------------- /images/game_mechanic_explorer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/game_mechanic_explorer.png -------------------------------------------------------------------------------- /images/khan_academy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/khan_academy.png -------------------------------------------------------------------------------- /images/mathigon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/mathigon.png -------------------------------------------------------------------------------- /images/melkman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/melkman.png -------------------------------------------------------------------------------- /images/pixel_shaders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/pixel_shaders.png -------------------------------------------------------------------------------- /images/probabilistic_models_of_computation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/probabilistic_models_of_computation.png -------------------------------------------------------------------------------- /images/red_blob_games.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/red_blob_games.png -------------------------------------------------------------------------------- /images/setosa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/setosa.png -------------------------------------------------------------------------------- /images/steve_witten.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/steve_witten.png -------------------------------------------------------------------------------- /images/the_nature_of_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/the_nature_of_code.png -------------------------------------------------------------------------------- /images/visualgo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enjalot/algovis/623d9989f429c1bc926ba9a3ca83428ceebefd55/images/visualgo.png --------------------------------------------------------------------------------