Words and Buttons Online

This is the source code for Words and Buttons Online — a collection of interactive tutorials, guides, and quizzes about maths, algorithms, and programming.

All the code is licensed under The Unlicense.

Tags

#algorithms #demos #mathematics #programming #quizzes #tutorials

Pages

• Gauss–Seidel visually explained An interactive demo of the Gauss-Seidel method for solving linear equation systems. When and why does it work? And why, when you flip the equations, it suddenly stop working? You can now play and see. ^{#algorithms #mathematics #tutorials}

• Why learn about the golden-section search An interactive demo of bisection search and golden ratio search algorithms. There is also a motivation to learn them both. Spoiler alert! One converges better, and the other has a better computational cost. ^{#algorithms #mathematics #tutorials}

• A smooth and sharp image interpolation you probably haven't heard of An image interpolation that gives us a continuous and smooth image, where every interpolated value only depends on the four neighboring pixel values. The image becomes smooth, but sharp features remain sharp. ^{#algorithms #demos #mathematics}

• The Real C++ Killers (Not You, Rust) All the “C++ killers”, even these which I wholeheartedly love and respect like Rust, Julia, and D, help you write more features with fewer bugs, but they don't much help when you need to squeeze the very last FLOPS from the hardware you rent. As such, they don’t have a competitive advantage over C++. Or, for that matter, even over each other. Most of them, for instance, Rust, Julia, and Clang even share the same backend. You can’t win a car race if you all share the same car. So, which technologies do hold a competitive advantage over C++ or, speaking generally, all the traditional ahead-of-time compilers? ^#programming

• Rational interpolation Rational interpolation is a step forward from polynomial interpolation towards rational splines. With rational interpolation, you can build functions that run through a set of points and also have vertical asymptotes whenever you want. With this capability, you can now model functions like logarithms better. ^{#demos #mathematics}

• Either your estimates suck or your job does This page uses polynomial modeling to show why software engineering tasks are often impossible to estimate. ^{#mathematics #programming}

• Static typing isn’t free. Where do you think the C++ angry mob comes from? Type inference works like logic deduction so any program in a statically typed language is two programs. The first one is the thing you sell, and the second – is a model that undergoes some sort of verification every time you run a compiler. This second program, although, often being written unknowingly, is not a free bonus, it’s something you have to pay for in several ways. ^{#programming #tutorials}

• Check if your performance intuition still works with CUDA An interactive quiz about microoptimizations in CUDA. 10 rounds, two pieces of code per each, you get to guess which is the faster. ^{#programming #quizzes}

• A picture is worth a thousand tags This shows how a picture can be turned into an HTML table. With this, you can not only have nicer tables or uglier pictures, but you can have something that is both at the same time. ^#demos

• Redundant stories about redundancy Component redundancy is used heavily in safety-critical and mission-critical systems for reliability improvement. But outside this niche, it's surprisingly little known in the world of software. Which is a shame since it's a simple but economical idea. It costs nothing to keep in mind, and it saves you a lot on hotfixes and emergency repairs. ^#programming

• Challenge your performance intuition with C++ sine One more interactive quiz. This time, it's all about the sine function. Which one is faster and when? ^{#programming #quizzes}

• Complex numbers and conformal mapping This explains the geometry of complex numbers. Explains conformal transformations, introduces analytic functions, and shows that analytic complex functions are conformal. And using the connection between the geometry and the analysis explains it all in just some five minutes. ^{#mathematics #tutorials}

• Lagrange polynomial as a gateway drug to basis splines This explains Lagrange interpolation: what is the Lagrange polynomial, why does it run through all the points, what is the basis polynomial, and how come it's a polynomial in the first place. ^{#mathematics #tutorials}

• Trippy polynomials in arctangent scale This shows the global properties of polynomials, their derivatives, and explains how the Maclaurine and Taylor series work all with animated plots in arctangent scale. ^{#mathematics #tutorials}

• Partial order and non-Boolean logic Non-Boolean logics are rare but not extinct. Interval logic is one example. Sometimes, you can implement a logic you want within total order or partial order but sometimes even that isn't enough and you need an even more general relation. With operator overloading, you have the freedom to go there but you also have less assurance when working within the total order. ^{#mathematics #tutorials}

• Yet another alternative to floating-point numbers This shows how computable intervals written in rational bounds may not only account for the input error but keep computational error under control as well. ^{#mathematics #programming #quizzes}

• Why is it ok to divide by 0.0? This explains why dividing by zero in floating-point numbers is ok. ^{#mathematics #programming}

• Can we use lemniscates for ultra-cheap vector graphics? This depicts an old idea of using multifocal lemniscates to draw arbitrary shapes. In some applications, this may be indeed an economical alternative to splines. ^{#demos #mathematics}

• Bi-whatever transformations An interactive explanation of how polynomial transformations such as trilinear or biquadratic or even linear-cubic work, and how to craft your own. ^{#demos #mathematics}

• Arctangent scale. It's like the logarithmic scale but infinite An interactive demo of how, with arctangent used as a scale, we can show any function on a screen. And not just a fragment of it but the whole function. ^{#demos #mathematics}

• Image darning A simple image processing algorithm that cleans up dirt stains from old newspapers. I called it “darning” because of how it works. ^{#algorithms #demos #mathematics}

• Error codes are not numbers. But they are. Can we exploit that? An interactive explanation of how we can use floating-point NaNs as error code holders in C++. ^{#demos #mathematics #programming}

• Binary search An interactive demo of the binary search algorithm along with its one slightly more obscure but promising variant. ^{#algorithms #tutorials}

• Honeycomb texture generator This generates honeycomb textures of a special quasi-irrational form. Explanation included. ^{#demos #mathematics}

• Sine and cosine A pair of interactive mnemonics for sine and cosine. There are also examples of practical usage. Basically, the second half of a tutorial is about how the first half was made. ^{#mathematics #tutorials}

• Challenge your performance intuition with nanosecond sorting And yet another interactive quiz where you get to estimate the performance difference between several variants of the same code. ^{#programming #quizzes}

• SWInE: Simplicial Weight Interpolation and Extrapolation An alternative to splines nobody knows about. The localization of Shepard's method for a simplicial complex. ^{#demos #mathematics}

• Quadratic splines are useful too This explains simple quadratic splines, how to craft one yourself, and why. ^{#demos #mathematics}

• Circles and lines vs. polynomial splines An alternative to polynomial splines. Smooth parametric curves made from arcs and line segments. ^{#demos #mathematics}

• SymPy makes math fun again An introduction into symbolic computations in Python. Don't worry, it's much simpler than it sounds. It's about making Python do your math for you with very little investment in the technology. ^{#mathematics #programming #tutorials}

• Yet another floating-point tutorial Most of what you should know about floating-point numbers put together in an interactive tutorial with quests and puzzles. ^{#mathematics #programming #tutorials}

• Lexical differential highlighting instead of syntax highlighting This type of highlighting is ideal for assembly. With it, the things that shouldn't seem similar usually don't. ^{#demos #programming}

• Interactive mnemonics for dot and cross vector products Just a pair of mnemonics for dot and cross vector products. They present the functions, show how they work, and why one is dot and the other is cross. ^{#mathematics #tutorials}

• Simple image vectorization This is an example of an image vectorization algorithm. It shows the bilinear interpolation, polynomial approximation, differential analysis, and iterative algorithms working together to solve a practical problem ^{#algorithms #demos #mathematics}

• The simplest possible smooth contouring algorithm A 3-part smooth contouring algorithm that shows partial derivatives, gradients, and parametric polynomials working together. ^{#algorithms #demos #mathematics}

• Using logical operators for logical operations is good This is the follow-up for the “Challenge your intuition with C++ operators”. It shows that despite the occasional gains from a better compilation, using the proper operators is still beneficial in the long run. ^{#programming #quizzes}

• Challenge your performance intuition with C++ operators Another interactive quiz where you get to estimate the performance difference between several variants of the same code. ^{#programming #quizzes}

• Fortran is still a thing A short essay about Fortran in the modern world. ^#programming

• Why Erlang is among the few true computer languages Usually, a language is something that is used for bilateral communication. For programming languages, this is often untrue. Erlang shows how this can be achieved still. ^#programming

• If I were to invent a programming language for the 21st century A short essay about the evolution of programming languages. ^#programming

• A cheap trick to speed up recursion in C++ More often than not, recursion is not your performance problem, to begin with. But even if it is, you can often avoid recursion altogether. When for some reason you can't, this trick helps. ^{#demos #programming}

• Polynomial approximation and interpolation This explains approximation and interpolation, how to use polynomials for that, and how to make both concepts work together. ^{#mathematics #tutorials}

• Interactive explanation of marching cubes and dual contouring Marching cubes and dual contouring are often used for mesh generation. This explanation shows how they work, what are their differences, similarities, and limitations. ^{#algorithms #mathematics #tutorials}

• Logic programming in C++ This shows that there is an invisible Prolog in every C++ compiler. It's up to you what to do with it but it's there. ^{#programming #tutorials}

• Tries as the evolution of nothing Trie is a data structure. Like “tree” but different. This tutorial explains the concept behind the trie, what makes it efficient, and when. ^{#algorithms #programming #tutorials}

• Programmer's guide to linear equations This is an introduction to linear equation systems. It explains linear dependency, under- and over-specification, direct and iterative solvers. The guide should give you enough knowledge to find a proper solution for your task but not enough to implement one efficiently yourself. ^{#mathematics #tutorials}

• Estimating floating-point error the easy way An explanation of how to measure computational error while working with floating-point numbers, and why. ^{#demos #mathematics #programming}

• APL deserves its renaissance too APL tutorial explaining the meaning of life←{↑1 ⍵∨.∧3 4=+/,¯1 0 1∘.⊖¯1 0 1∘.⌽⊂⍵} ^{#programming #tutorials}

• NURBS is just an acronym NURBS stands for the non-uniform rational basis spline. There are three separate concepts. This guide walks you through these concepts one by one. ^{#mathematics #tutorials}

• Playing a game of chance with C++ inline keyword It's about one particular aspect of C++ compilation that makes programming with the “inline” into a game of chance. ^#programming

• How much math can you do in 10 lines of Python An interactive introduction into concise Python / basic linear algebra. ^{#mathematics #programming}

• Outperforming everything with anything A 100 lines of Python code that substitute the compiler front-end for a specific computation. This shows that you don't need a “fast” compiling language to write efficient code. In fact, a compilation is only one of the multiple ways to achieve speed. ^{#demos #programming}

• Programmer's guide to polynomials and splines This is a brief introduction into polynomials. From how to make a polynomial run through your set of points to how to make it into a spline. ^{#mathematics #tutorials}

• Vastly outperforming LAPACK with C++ metaprogramming Still not really about LAPACK. It's a second part of the “outperforming” series explaining how the C++ metaprogramming can appear useful for efficient code generation. ^{#demos #programming}

• Outperforming LAPACK with C metaprogramming Ok, it's not really about LAPACK. You can consider it clickbait if you wish. It's about how to tell a compiler to write the code you want with a limited arsenal of tools the C language provides. ^{#demos #programming}

• Can you tell an assembly language when you see one? An interactive quiz featuring several obscure high-level languages and assembly variants. ^{#programming #quizzes}

• Mathematical analysis explained with Python, blood, and TNT A brief introduction to mathematical analysis with a little SymPy on the side. The page explains how to disassemble a function, and how to assemble it back from the derivatives. ^{#mathematics #tutorials}

• Even if you can't write assembly like a poet, you can read disassembly like a hunter This is a very concise introduction to x86 disassembly. It shows that you probably have all the skills to start reading disassembly right now even if you thought it was too complicated for you. It really isn't, see it for yourself. ^{#programming #tutorials}

• An interactive introduction to iterative algorithms An interactive explanation of how iterative algorithms work. This explains convergence and the exit condition problem on an oversimplified linear system solver. ^{#algorithms #demos #mathematics}

• Challenge your performance intuition with C++ magic squares An interactive quiz where you get to estimate the performance difference between several variants of the same code. ^{#programming #quizzes}

• Interactive guide to homogeneous coordinates This interactive guide shows how homogeneous coordinates actually make programming geometry simpler and not more complicated. The page explains the extra coordinate, matrices, and generalized transformations. Most of what you need to know about projective geometry as a practicing programmer is here. ^{#mathematics #tutorials}

• So you think you know C? It's a C test. If you think you know C, take this test. It only has 5 questions. ^{#programming #quizzes}

• Learn you a Lisp in 0 minutes A short quiz to reveal your hidden knowledge of Lisp. ^{#programming #quizzes}

See also

• Interactive visual explanations of math and algorithms, with motivating examples from computer games. https://www.redblobgames.com/
• The world's first linear algebra book with fully interactive figures. http://immersivemath.com/ila/index.html
• The Textbook of the Future. Interactive. Personalised. Free. https://mathigon.org/
• Structure and Interpretation of Computer Programs. Interactive Version https://xuanji.appspot.com/isicp/
• An Interactive Introduction to Fourier Transforms http://www.jezzamon.com/fourier/index.html
• Clear, intuitive lessons about imaginary numbers, exponents, and more. https://betterexplained.com/
• An Interactive Introduction To Quantum Computing http://davidbkemp.github.io/QuantumComputingArticle/
• The website of Martin O'Leary artist, designer, teacher, researcher. http://mewo2.com/
• A Visual and Interactive Guide to the Basics of Neural Networks https://jalammar.github.io/visual-interactive-guide-basics-neural-networks/
• Interactive demos on network theory, game theory, trust etc. https://ncase.me/
• An interactive explanation of curves and surfaces https://ciechanow.ski/curves-and-surfaces/
• Introduction to geometric algebra — an invertible vector product and the implication of having one. https://mattferraro.dev/posts/geometric-algebra
• Interactive visualizations for different topics from physics and mathematics. Includes trigonometry, polynomial regression, and Bézier splines https://visualize-it.github.io/
• Assorted tutorials on computer graphics, size coding, and maths. Includes a mini-library of signed distance functions. https://www.iquilezles.org/www/index.htm
• A free, online book for when you really need to know how to do Bézier things. https://pomax.github.io/bezierinfo/#explanation
• A visual overview of commonly used creative coding related techniques and algorithms. https://www.notion.so/Creative-coding-algorithms-techniques-c5550ef2f7574126bdc77b09ed76651b
• A Visual and Interactive Introduction to Complex Analysis. https://complex-analysis.com/
• A collection of visualisation on linear algebra and geometry. https://intuitive-math.club/
• Sublucid Geometry — a place for uncommon knowledge. https://zalo.github.io/
• An interactive introduction to splines by Evgeny Demidov. https://www.ibiblio.org/e-notes/Splines/Intro.htm
• An Interactive Introduction to Rotors from Geometric Algebra by Marc ten Bosch. https://marctenbosch.com/quaternions/
• Interactive Linear Algebra by Dan Margalit and Joseph Rabinoff from Georgia Institute of Technology. https://textbooks.math.gatech.edu/ila/index.html
• An interactive explanation of half-edge data structures by Jerry Yin and Jeffrey Goh. https://jerryyin.info/geometry-processing-algorithms/half-edge/
• Hypermedia Image Processing Reference is a great free online resource if you want to learn more about image processing. https://homepages.inf.ed.ac.uk/rbf/HIPR2/hipr_top.htm
• A comprehensive interactive explanation of JPEG by Omar Shehata.  https://parametric.press/issue-01/unraveling-the-jpeg/
• Andrei Ciobanu explores some aspects of Fourier Mathematics in order to “approximate” real-world shapes using complex sinusoids.https://www.andreinc.net/2024/04/24/from-the-circle-to-epicycles