jackschaedler/circles-sines-signals

A Compact Primer on Digital Signal Processing

circles-sines-signals

A Compact Primer On Digital Signal Processing

See it here: http://jackschaedler.github.io/circles-sines-signals/

License

Copyright © 2015 Jack Schaedler

Distributed under the Eclipse Public License version 1.0

circles-sines-signals's Issues

Suggested change to frequency resolution

I'm referring to this page, figure 3, which seems to be working as intended but I found to be misleading.

At first I thought the samples better approximated an underlying analog curve. But it soon dawned on my that the horizontal time scale is not constant, and the curve compresses in from the right. This is because the sampling frequency is fixed and the time domain increases.

I think a more honest visualization is to show the underlying curve with sample points placed only on the left side. More points are added left to right as the slider is moved. Conceptually, equal horizontal spacing corresponds to the constant sampling rate.

This is unsolicited advice that you are free to take or leave as you like. I can also try implementing it myself if you assure me you'll merge it.

"Monty" not "Morty"

In footnote #4 in signals.html, you mistakenly called him Morty. His real name is Chris "Monty" Montgomery.

typo on "sine wave properties" page

I LOVED reading your DFT guide. I wouldn't have believed that it was possible to learn so much about this topic in little over an hour, but the visualizations, together with your explanations, really make it light work. More of the same please!

There's a tiny typo at the bottom of this page: https://jackschaedler.github.io/circles-sines-signals/sine_wave_properties.html

You've written "the" twice in the third to last page. Just search for "the the" and you'll find it.

Incorrect use of `factoid`

On the correlation page: http://jackschaedler.github.io/circles-sines-signals/dotproduct2.html the usage of factoid should be corrected.

The term factoid typically represents something that appears to be true, but is not actually true. The term tidbit might be a better use here.

PS. Really enjoying this lesson.

Component Sine Wave Detector Figure misleading

On http://jackschaedler.github.io/circles-sines-signals/dotproduct3.html, Figure 2, the slider adjusts the order of the harmonic, not the frequency of it, as the caption above the slider states.

Math formulas don't load on https; work fine on http

On https://jackschaedler.github.io/circles-sines-signals/notation.html I see:

$$ \mathrm{DFT}[k] = \sum_{n=0}^{N-1} \mathrm{x}[n] \cdot e^{-\varphi\mathrm{i}} \\ where \quad \varphi = k \frac{n}{N} 2\pi $$

On jackschaedler.github.io/circles-sines-signals/notation.html, it loads fine.

No sound on the Sound page on Safari 13.0

I'm playing with the examples on the Sound page in Safari 13.0 and there's no sound. I looked at https://caniuse.com/#search=web-audio and it says Safari supports Web Audio with the webkit vendor prefix.

I do get sound on the Timbre page though.

Complex plane example initialized with inconsistent coordinates

https://jackschaedler.github.io/circles-sines-signals/complex.html

The graphical representation of the complex plane starts with the point at +0.71 + 0.71i, but the text says +0.50 + 0.50i.

Once you interact, the text updates to match the graph, but until you do they are inconsistent with one another.

Would be nice if pages scaled to higher resolution screens.

Picture is a thousand words.

Unit circle digrams not interactive

http://jackschaedler.github.io/circles-sines-signals/trig_review.html

The slider seems to trigger Uncaught ReferenceError: GET_TRIG_PHASE is not defined and the digram does not change in response. Possibly related to #2. If it worked before, it's probably an easy fix.

Pi character doesn't display properly on Trig Review page in Chrome

Only shows a question mark box where the pi character should be in the diagram. Chrome 41.0.2272.76.

Missing Comma

At the bottom of the sound.html page, you have "4000 hertz" (without a comma,) when in the immediately preceding sentence you have "3,000 Hz".

It's a miniscule nitpick, but I figured I'd let you know just in case you care.

Discussion about phase missing

In all the examples, including:
https://jackschaedler.github.io/circles-sines-signals/dft_introduction.html

All the examples use clockwise rotation for their phasors, and use phase = 0 at t=0.

A concept that is missing is the relationship between the direction of the unit circle phasors (clockwise or counter-clockwise (or anti-clockwise, depending on where you grew up)) and how this effects the other transforms. For many areas of study, this is the key to understanding why Fourier spans from -Fs/2 to + Fs/2. It describes the direction of the unit circle vector (or the phase relationships between the signals).

I will not effect too many things until you get to Euler.
https://jackschaedler.github.io/circles-sines-signals/euler.html

If the phasor rotates the other way, the relationship between I & Q changes, and the FFT shows up on the opposite side of the -Fs/2 to +Fs/2 scale. It's just a mathematical way of representing phase. (that's the part that is difficult to digest for some).

Just a suggestion.

Customizing/changing this primer

Hello,

I am interested in using this as a starting point for notes for a class I am teaching. Was there a tool you used to build the pages themselves? Some theme/framework? Im just wondering if I start editing the HTML directly from this repository, or I start from using a tool.

Thanks!

Sampling rate with sinus waves

Hi,
I'm new to signal processing so it may be that this is a misunderstanding:
In the sampling.html page, to illustrate the nyquist theorem at play you give us an interactive tool with different frequencies and a bar to change the sample rate.

The issue is that the theorem has, if I understand correctly, a caveat: If sampling a pure sin wave, the theorem will need that the sampling frequency be strictly larger. As we can see we wouldn't be able to recover the 1Hz signal by setting the sampling frequency to two hertz, as it just gives values of 0.

To solve this I would shift the sampling, so as to make it a little more comprehensible for the reader.
I'm unsure what you think of this, and I am, again, new so it might not be a better solution :)

Have a great day!

Frequency distribution doesn't appear for samples when you play them

The frequency distribution doesn't appear for samples when you play them at http://jackschaedler.github.io/circles-sines-signals/sound2.html

The axes are drawn, but nothing is drawn within the plot when you play a sample. Would have expected a histogram or similar.

OSX 10.10.2/Chrome 39

Small remarks

Missing Prev button by the Next button.

PASSING THE NYQUIST LIMIT

• Slider instead Play button to allow for real playing with visualization
• vertical guiding lines like in Fig.2 in CORRELATION chapter to emphasize that sampling points stay at the same position

THE FOURIER TRANSFORM: interactive animation with sliders
This chapter requires quiet long "mental jump"
Personally, I would preset sliders setting to leave non zero for two of them to leave only 2 spinning circles.
(1: max and 3: 1/3 max for example to show something people are familiar one)

GEOMETRIC INTERPRETATION OF THE DFT: last equation
Maybe it is possible to recall definition of alpha like in the first equation in the chapter A WALKTHROUGH OF THE DFT
At first look there ere 3 free variables in the equation (k, n and alpha)

SINE WAVE ORTHOGONALITY
There two statement which seems to "interfere"
"any two sine waves whose frequencies are multiples of one another are also orthogonal"
"dot product is always zero unless the two waves are at the exact same frequency"
so taking into account that sliders positions are multiple of one can say that:
"a dot product of any integer frequencies are zero excluding the same frequency"
(examples: 2,3; 5,6)

Pythagorean theorem typo

http://jackschaedler.github.io/circles-sines-signals/complex.html, note at bottom of page.

A^2+B^2=B^2 should be C^2.

Looks gorgeous.

special functions should be roman

love the site!

https://jackschaedler.github.io/circles-sines-signals/euler.html

special functions should be roman, not italic

Also you're swapping between roman and italic for imaginary unit

License?

Can you please mention the license for the project? I am trying to make a personal blog/site and I would like to use the website template. Also, I enjoyed reading the content. It's really great!

• Amitabh

Sampling Period illustration does not work on mobile

Fig 1 on https://jackschaedler.github.io/circles-sines-signals/sampling.html does not work on mobile. Sampling period and visualization does not change on changing the slider.

Android ver 12. Chrome browser.

MathJax formula can't be rendered offline

Hi,
I git clone the repository to local machine, open it locally and found that MathJax formula can't be rendered. For example, notation.html include Equation 1. The Discrete Fourier Transform1

$$ \mathrm{DFT}[k] = \sum_{n=0}^{N-1} \mathrm{x}[n] \cdot e^{-\varphi\mathrm{i}} \\ where \quad \varphi = k \frac{n}{N} 2\pi $$

thanks

Translations?

I'm a native speaker of Ukrainian. This would be of big interest to many, especially given how horrible our books on DSP are.

What do you think?

Increasing vibration frequency shouldn't increase velocity

In figure 1 on https://jackschaedler.github.io/circles-sines-signals/sound.html, increasing the vibration frequency makes the waves move faster through the air. This isn't physically accurate. All frequencies move at the speed of sound. When the vibration speed changes, the wavelength should change and the velocity should remain constant.

It's interesting to imagine what sound would be like if velocity was proportional to frequency. The higher harmonics of a sound would reach the listener before the fundamental frequency. It would be an incoherent mess. But if that's how the physical world worked, maybe our brains would have evolved to interpret sound differently.