4 ms·
Since the number of pixels on the x-axis of the canvas is typically much smaller than the number of samples, you have to reduce the number of samples. This is v
by MadDemon 2y ago
Since the number of pixels on the x-axis of the canvas is typically much smaller than the number of samples, you have to reduce the number of samples. This is very prone to aliasing if not done right, especially if you end up just drawing a line between the points. I found a good way to avoid aliasing by taking the min/max values for each chunk of samples and then filling the area in between rather than drawing lines between points. If you zoom in to a point where the window is only a few values, this will converge to the same result as just drawing lines between the samples. You can test it out by uploading audio files to our audio-to-midi web demo: https://samplab.com/audio-to-midi https://samplab.com/audio-to-midi
- xipix 2y agoMy point is that everyone seems to draw waveforms using only two colours. Inevitably, this results in aliasing. In the extreme we have the "Spotify" visualisations of vertical bars with gaps in between. I believe this is popular because it looks slightly better than a solid waveform lump with an aliased edge. To avoid aliasing you need to use more than two pixel colours.
- breakfastduck 2y agoIts much easier to read the information with the aliasing
- chrisjj 2y ago> To avoid aliasing you need to use more than two pixel colours. The aliasing in question is of the audio not the pixels, so no more colours does not help.
- xipix 2y agoAgreed, there is aliasing of the audio. But also aliasing in the way that the waveform is rendered. Consider: would you draw a line, or a circle using only a foreground and a background pixel colour?
- chrisjj 2y ago> would you draw a line, or a circle using only a foreground and a background pixel colour? That's 99% simple pixelation, not aliasing. And far less of a problem than the true aliasing in question.
- xipix 2y agoMathematically it's aliasing. And it's fixed by antialiasing. I'll bet everything on the screen you're looking at right now is antialiased. Would be nice if audio waveform visualisations were too.
- chrisjj 2y ago> Mathematically it is aliasing. Not by e.g. Wikipedia. https://en.m.wikipedia.org/wiki/Aliasing https://en.m.wikipedia.org/wiki/Aliasing
- kroltan 2y agoSure it is, it's the first thing to be said just after the title and widgets > This article is about aliasing in signal processing, including computer graphics. In computer graphics, the relevant aliasing is spatial aliasing, in fact mentioned in the article: the signal is the fundamental shape (such as a font glyph or a triangle mesh or whatever), and the samples are the pixels. In the specific application of a waveform, a typical "CD quality" audio file has 44.1 thousand samples per second, and say, 16 bits per sample. If we want to display the waveform of one second of audio horizontally on an entire standard low-density full HD computer screen, we have 1920 samples to fit our 1 second of audio data, and 1080 samples of amplitude with which to paint the amplitude. Putting it into signal processing terms, The signal frequency here is 44.1Khz, and the sampling frequency is 1.92Khz. Do you see how aliasing applies now? We want to represent f_Signal / f_Sample = 22.96875 samples of audio with 1 sample. In practice you get an even worse ratio, because we usually want more than 1 second of waveform to be visible on a region that isn't the entire screen.
- chrisjj 2y ago> Since the number of pixels on the x-axis of the canvas is typically much smaller than the number of samples That's not the cause. The cause is simply that too few of the samples are plotted. Your min/max solution succeeds by ensuring all significant samples are plotted.
- MadDemon 2y agoIf you're canvas has say 2000 pixels on the x-axis and you're trying to plot one second of 44.1kHz audio, you'll end up with more than 20 samples per pixel. You can then either reduce the number of samples or draw multiple lines within that pixel. Both approaches can result in aliasing. OP's approach seems to just draw lines between every sample, so using the second option. If you change the "Scale" in the example, you can clearly see how peaks appear/disappear due to aliasing (especially between 200 - 400 frames / px).
- chrisjj 2y ago> You can then either reduce the number of samples or draw multiple lines within that pixel. Both approaches can result in aliasing. I would disagree that the latter can result in the "super aliased" in question. Drawing one line per sample leaves very little aliasing.
- xipix 2y agoThe min/max solution doesn't prevent aliasing. Consider that if you do manage to avoid aliasing, you'll be rendering something visually akin to a downscaled version of a fully-detailed, high-resolution plot of the waveform.
- wiz21c 2y agowhy not low pass filter / decimate the wave form to remove aliasing ?
- MadDemon 2y agoYou have to down sample by a lot (easily 10-100x). That would essentially remove a lot of the information in the signal. If you low pass filter you essentially remove all the peaks and the signal looks much "quieter" than it actually is.