Jack Schaedler
jackschaedler.github.io · Personal blog · on HN since 2014
Jack Schaedler builds interactive essays and small web projects on signal processing, music, and handwriting recognition.
What HN saysCommenters recommend his interactive 'Circles, Sines and Signals' primer as a wonderful, visual way to build intuition for DSP, and one uses it in a course.
48HN people shared it
30linked it in comments
23stories submitted
793story points
3 months agolast shared
2014people per year2026
Most-shared posts
- 1Show HN: Interactive Essay on Signals, Sampling and the Fourier Transform20 people · 404 points · first shared 2015 · 43 comments on HN
- 2Seeing Circles, Sines and Signals10 people · 16 points · first shared 2015 · discussion on HN
- 3Back to the Future of Handwriting Recognition8 people · 298 points · first shared 2016 · 37 comments on HN
- 4Show HN: Pixel Art Editor built with ClojureScript/Om4 people · 21 points · first shared 2014 · 7 comments on HN
- 5Dft introduction3 people · first shared 2015
- 6Seeing Circles, Sines and Signals2 people · 3 points · first shared 2015 · 1 comments on HN
- 7Show HN: JAZZARI: A programmable band in your browser1 people · 49 points · first shared 2017 · 4 comments on HN
- 8Circles, Sines and Signals1 people · 2 points · first shared 2024 · discussion on HN
- 9Dft leakage1 people · first shared 2022
- 10Karplus stress tester1 people · first shared 2023
- 11Homepage1 people · first shared 2017
- 12Dft walkthrough1 people · first shared 2015
What HN people wrote when they linked it
chaosprint · 2025-03-15
Great demo.
I used to do some web audio and tonejs works, but later switched to rust and glicol for sound synthesis.
For example, this handwritten dattorro reverb:
https://glicol.org/demo#handmadedattorroreverb
This karplus-stress-tester may also be interesting to you.
https://jackschaedler.github.io/karplus-stress-tester/
In short, I think to study more powerful physics synthesis, you need to consider the technology stack of
- rust -> wasm - audioworklet - sharedarraybuffer
Visual can rely on wgpu. Of course, webgl is enough in this case imho.
If it is purely desktop, you can consider using the physics library in bevy.
sterasody · 2024-06-05
https://jackschaedler.github.io/circles-sines-signals/
There is also this wonderful primer on signal processing for people who love visualizations.
johndoe0815 · 2022-11-17
Nice! I used this website by Jack Schaedler as an intro in my signal processing course, also highly recommended:
https://jackschaedler.github.io/circles-sines-signals/index.html
sxp · 2021-06-23
> you can add your own symbols (that can optionaly expand to words)
> it can display graphics such as graphs, plots, diagrams, images or even interactive ball-and-stick model of a chemical compound
> it is programmable, i.e. you can write your own functions with recursion, conditionals and loops
This sounds similar to Ken Perlin's Chalk Talk. See the demo at https://youtu.be/xuzrF_82z7U?t=2679 but the whole video is worth watching.
> RAND Tablet had handwriting recognition that was based on _clever heuristic+, i.e. no machine learning, and it required person to write slightly different than it would normally write with a pen and paper.
The linked page on handwriting recognition is as interesting as this article: https://jackschaedler.github.io/handwriting-recognition/
miccah · 2020-11-15
This interactive intro to DSP is also great for gaining an intuition.
https://jackschaedler.github.io/circles-sines-signals/index.html
civilian · 2018-01-22
If you need a coder-friendly & graphical refresher on Fourier transforms, I highly recommend this: https://jackschaedler.github.io/circles-sines-signals/
nburdy · 2017-05-09
I found the Circles, Sines and Signals to be amazing too. An awesome introduction. https://jackschaedler.github.io/circles-sines-signals/
jarmitage · 2017-05-09
Check out Jack Schaedler who works in this at Ableton https://jackschaedler.github.io/
He even made an interactive essay about the GRAIL text recognizer from the 1960s https://jackschaedler.github.io/handwriting-recognition/
lovelearning · 2015-06-16
This online book on basics of signal processing[1] was recently on HN. I found it an excellent resource to understand and develop an intuition for the basic math involved.
[1]: http://jackschaedler.github.io/circles-sines-signals/
SandB0x · 2015-03-02
This is one of the best pieces of expository writing I've ever seen. I particularly love the interactive phasor visualisation here: http://jackschaedler.github.io/circles-sines-signals/dft_introduction.…
jfoutz · 2015-03-02
It seems like the equation processing gets messed late in section 4 - $$ \mathrm{DFT}[k] = \sum_{n=0}^{N-1} \mathrm{x}[n] \cdot (cos(\varphi) - sin(\varphi)i) \\ where \quad \varphi = k \frac{n}{N} 2\pi $$
https://jackschaedler.github.io/circles-sines-signals/dft_walkthrough.…
there are a few other examples in section 5
Aside from that, this is really great.
user1713952 · 2016-11-25
Mr Staltz, please allow me to elaborate. I did not mean to be mean at all, nor to reduce the value of your work, excuse me if I made you feel like that. I am actually grateful that you made this animation as it allows one to reflect on the concept.
If your kid proudly brings home a drawing, you are most probably going to greet him with warm encouragements no matter the quality of the art. The kid is in a process of developing his creative sense, learning, and forming his/her sense of reality. Comparing the drawing to what mature artists produce would certainly have a negative effect on the kid. The point is to provide a feedback relevant to the recipient of the critic.
The same goes here with this animation. I respect your work but obviously disagree with the usefulness of it. You made an animation to explain the matrix product, which is a really good idea. Alas, I think the realization of it gives a confused picture of what it is. I doubt that a student with no prior understanding of matrix products will get much enlightment. Too many operations are going on at the same time. This means that it misses its intended audience: students in need of building an intuitive understanding of the matrix product. That's what all those javascript (among others) animations (ex: http://jackschaedler.github.io/circles-sines-signals/dft_introduction.… are all about: make it simpler to grasp a concept. Unfortunately, though beautiful, the animation is not clear. At best it provides a…
koblenski · 2015-10-07
Thanks, for another good introduction to DSP, there's this excellent website: http://jackschaedler.github.io/circles-sines-signals/index.html. It also has good animations, and some are more interactive than mine. It takes a bit of a different path through DSP concepts, and focuses on the relationship between circles, trigonometric functions, and signal analysis.
For a more in depth study of DSP, I would recommend this book: http://www.amazon.com/Understanding-Digital-Signal-Processing-Richard-… It's quite readable for a textbook, and from my experience with linear algebra and signals and systems texts (they're all related), it's more understandable.
It would be nice to have a full online, animated DSP book, as that's a natural fit for DSP, but I'm not aware of something like that, yet. Maybe these posts could be the beginning of something like that.
(edit: Amazon link)
sva_ · 2021-09-23
I'm not sure you know it, since it isn't new, but this is pretty neat:
https://jackschaedler.github.io/circles-sines-signals/
It's also done with (an old version of) d3.
doersino · 2021-05-05
Right, or the handwriting recognition built into RAND’s GRAIL system back in the 60s: https://jackschaedler.github.io/handwriting-recognition/
...which I’ve reimplemented in SQL (yes, SQL) a while ago: https://github.com/doersino/handwriting/blob/master/code/handwriting.s…
rrherr · 2018-02-14
Here's another good link, similar in message & medium:
Seeing Circles, Sines, and Signals: A Compact Primer on Digital Signal Prcoessing, by Jack Schaedler
https://jackschaedler.github.io/circles-sines-signals/
panic · 2017-04-11
There's this article https://jackschaedler.github.io/circles-sines-signals/ which is accompanied by some really neat interactive visuals.
grkvlt · 2016-03-29
I found this after looking at http://jackschaedler.github.io/handwriting-recognition/ - it's a collection of similar interactive essays, using tools like D3 go visualize mathematical and other abstract concepts.
lbotos · 2015-11-25
I spent a few hours on sunday casually reading this:
http://jackschaedler.github.io/circles-sines-signals/index.html
Which was an enjoyable primer if you are interested in DSP.
aclissold · 2015-11-10
A fun alternative is to build everything yourself for free, from scratch, as an app! Shameless plug: [1]
Some resources for getting started down this path: [2] [3] [4]
If anybody wants to chat about audio synthesis on iOS, feel free to get in touch :)
[1] https://github.com/aclissold/twyst
[2] http://jackschaedler.github.io/circles-sines-signals/
[3] http://mkonrad.net/projects/ios_audio_synth.html
[4] https://developer.apple.com/library/ios/documentation/MusicAudio/Conce…
burger_moon · 2015-06-23
Here's another project that was posted here a while back that goes into details explaining different waveforms with examples. It's titled "SEEING CIRCLES, SINES, AND SIGNALS
A COMPACT PRIMER ON DIGITAL SIGNAL PROCESSING". It's really well put together.
http://jackschaedler.github.io/circles-sines-signals/dft_introduction.…
hikz · 2015-05-07
More introductory DSP for non-EE people:
http://jackschaedler.github.io/circles-sines-signals/
http://dsp.cs.cmu.edu/
keppy · 2015-03-14
Recently went through this a few times, found it here on HN:
http://jackschaedler.github.io/circles-sines-signals/
Made me realize how useless degrees are, why pi is used, etc.
andyrobr · 2015-03-05
I think this may be the link you are looking for: http://jackschaedler.github.io/circles-sines-signals/
gdubs · 2015-03-02
This is an _incredibly_ well-crafted piece of work. I mean -- my god -- the pressure wave animation? [1]
1: http://jackschaedler.github.io/circles-sines-signals/sound.html
daGrevis · 2014-06-16
Here's another pixel editor, but this time made with ClojureScript and Om (React-based framework).
https://jackschaedler.github.io/goya/
babs474 · 2014-05-13
In the case of Om, I believe the immutability of clojure helps out and makes the diffing of databound elements a simple (non-deep) compare.
You can end up making an app with quite a number of elements flying around.
A neat pixel editor example:
http://jackschaedler.github.io/goya/
krackers · 2022-11-19
>anyone has a more rigorous explanation of the in-between frequencies part
I think it's because the DFT is one period of the sampled version of the DTFT of your discrete input signal, or equivalently one period of the DTFT of the periodic continuation of your discrete input. (Equivalence here is that convolving by a dirac comb in time domain is multiplying by a dirac comb = sampling in the frequency domain)
When you use a windowing function (e.g. multiplication by a rect) to convert an infinite continuous signal into a time-limited one, the fourier spectrum of the original becomes convolved by the spectrum of the window (e.g. sinc). For a given sample length (window size), I guess if you capture the signal at a period boundary then your discretization of the DTFT is done exactly at peaks and zeroes. Otherwise if there's a mismatch, then you're not sampling the DTFT exactly at the peaks/zeroes so you get the spectral leakage. See [1] for a nice interactive example. Figure 3 shows as input a pure sin. If this was infinite, the fourier transform would be a dirac delta at the correpsonding frequency. But since it's windowed by a fixed window of 12 samples, the DTFT is the dirac convolved with a sinc.
Another perspective might be that if you don't capture it at a period boundary, when you create a periodic summation of your input you're introducing higher frequencies at the discontinuity.
[1] https://jackschaedler.github.io/circles-sines-signals/dft_leakage.html
[2]…
SeeThruHead · 2015-12-07