akalenuk/wordsandbuttons

A growing collection of interactive tutorials, demos, and quizzes about maths, algorithms, and programming.

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

• 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

wordsandbuttons's Issues

IPv6 support

The wordsandbuttons.online website is inaccessible over IPv6.

Question 4 on "So you think you know C"

The explanation for why 4 is undefined is technically correct (it's undefined behavior therefore undefined results), but even with UB I can't think of any implementation where the value wouldn't be 1. Even if int is 16 bits and there's some particularly weird implementation detail of how overshifting is handled on the architecture, any 16-bit integer shifted right by 16 bits will be either 0 or -1, and in both cases those would make the final result 1. What am I missing? Does C's specification allow for an implementation to have a NaN-type integer value that compares to NaN with other integers?

Numeric input box

http://wordsandbuttons.online/interactive_guide_to_homogeneous_coordinates.html is cool!

Minor suggestion for the “Please enter w_h” input box:

• take the box out of so that pressing enter doesn't cause the page to reload
• or even better, make pressing Enter update the value
• or it might even be feasible to update the value on each keystroke
• or maybe set type=number so that the browser will provide up/down arrows to change it
• or maybe use something like Tangle (I have my own implementation using d3 here)

some comments on "How much math can you do in 10 lines of Python"

I have realized that your code examples use in fact some Python 2.x functions:
xrange() and print (without parentheses).
.
Also, I suspect that python doesn't have a tuple comprehension.
It seems to me that the code that produces a tuple in your example:
tuple(2*v for v in (1.0, 4.0, 3.0))
uses in fact a generator comprehension.
Which can be also used here: sum(i for i in range(5)) # returns: 10
Because both functions accept iterables as arguments, and since generator is iterable, it goes through it.
.
Anyway, I like the website!
Thank you.

interactive_guide_to_homogeneous_coordinates.html - matrix is transposed

I think your transformation matrix is transposed:

What's happening when we multiply a square matrix to a point in homogeneous coordinates?

[

A D a B E b C F c

][

x y w

]

=

[

Ax + By + Cw Dx + Ey + Fw ax + by + cw

]

Should be:
What's happening when we multiply a square matrix to a point in homogeneous coordinates?

[

A B C D E F a b c

][

x y w

]

=

[

Ax + By + Cw Dx + Ey + Fw ax + by + cw

]

Really like what you have done BTW.

Unreadable font colours

The inline stylesheet sets background-color for certain elements but not the color for the text overlaid on them leading to poor contrast and other unreadability.

replace <a/> with </a>

this invalid html would be detected by a linter

$ tidy the_real_cpp_killers.html >/dev/null
line 113 column 200 - Warning: missing </a> before <a>
line 478 column 389 - Warning: missing </a> before <a>

wordsandbuttons/pages/the_real_cpp_killers.html

Line 478 in 2f0a8c5

But the most interesting piece of code is the third one. It’s ForwardCom – an assembler Agner Fog, a renowned author of C++ and assembly optimization manuals, proposes. Just as with Web Assembly, the proposition covers not so much an assembler as the universal set of instructions designed to enable not only backward but forward compatibility. Hence the name. ForwardCom’s full name is “<a href="https://www.forwardcom.info">an open forward-compatible instruction set architecture.<a/>” In other words, it’s not so much a proposition of assembly, as a peace treaty proposal.

"main()" should be "int main(void)" and other quibbles

For all five examples in so_you_think_you_know_c.html, main() should be int main(void).

In C90 (which is 19 years old and has been replaced by two later editions), a function definition with empty parentheses is an obsolescent feature.

In C99 and later, the "implicit int" rule was dropped, and omitting an explicit return type from a function definition is invalid (I think it's a syntax error, or it might be a constraint violation).

On to other quibbles:

In the second example, the relative sizes of short int and int are not guaranteed, only that the range of int includes at least the range of short int. In the presence of padding bits, a conforming implementation could have sizeof (short int) > sizeof (int). The implementation-defined signedness of plain char is also relevant; it's possible to have sizeof (int) == 1 and CHAR_MAX > INT_MAX (if plain char is unsigned and CHAR_BIT is at least 16).

In the third example, the numeric value of ' ' is implementation-defined (and you used LEFT SINGLE QUOTATION MARK characters rather than apostrophes for the character constant).

In the fifth example, the operator precedence of the ++ operator is well defined. Only the order of evaluation is unspecified. The description could imply that the possible results are limited to the possible orders of evaluation, but in fact the behavior is completely undefined; in principle, evaluating i++ + ++i could make demons fly out of your nose. (Of course that can't happen, but if it did it would not violate the C standard.)

Point being dragged swaps when passing over another point.

I was playing with the interactive plots from "Bi-whatever transformations", trying to add a twist by dragging points. One odd behavior I noticed occurred when dragging one point directly over another: the point being dragged would switch to the other point! I could go back and forth this way, never able to get the points to go past each other, unless I went around and avoided the collision.

I suspect the drag logic lacks enough statefulness to "cling" to the point initially grabbed, but looking at biwhatever_transformations.html I wasn't able to quickly identify where it was missing, or where it should go.

Could it be a feature-not-a-bug? ;^)

Edit: We've chatted before (about languages), where I went by BobC.

Don't block Tor

Going to https://wordsandbuttons.online/ using Tor gives me this error: "Access denied. Your IP address is blacklisted. If you feel this is in error please contact your hosting provider's abuse department." It would be good to whitelist Tor

RSS invalid mimetype

The RSS from the website doesn't work.
https://wordsandbuttons.online/rss

My RSS app can't detect it.

Not parsing document with invalid RSS/Atom mimetype: null/null

But, the file from this repository works instead.
https://raw.githubusercontent.com/akalenuk/wordsandbuttons/master/pages/rss

[Question] How did you build your website? Pure html?

Your pages have

tags that are one-liners so I don't think a page editor was used, and I don't think this shows signs of a JAM stack like Hugo.

Asking because I like how it was written - it looks simple to maintain. And effective, so I wanted to model yours for my blog.

Thanks in advance.

Support touch events

In the past if you wanted to support touch events for tablet/phone/windows10 you would have to implement a separate set of events, sometimes different per browser. But now we have pointer events, and it looks like it's relatively easy to support and widely supported.

I take https://wordsandbuttons.online/lagrange_polynomial_as_a_gateway_drug_to_basis_splines.html as an example page.

1. Change mousemove to pointermove, mousedown to pointerdown, mouseleave to pointerleave. The pointer events support both mouse and touch so it will continue working with mouse.
2. Add CSS canvas { touch-action: none; } to disable the browser's default touch-drag handlers (like dragging an image, or scrolling the page). This will not affect mouse users.
3. Add either i_canvas.setPointerCapture(e.pointerId) or i_canvas.releasePointerCapture(e.pointerId) inside the pointerdown event handler. This tells the browser to either hold on to the drag until you let go, or to release it when you leave the canvas. It looks like for this page you want to release it.

With these three changes, your page will work with touch events.