<commit_before>---
layout: post
permalink: /woscope-how/index.html
title: How to draw oscilloscope lines with math and WebGL
date: 2015-09-17 19:36
---

When I saw oscilloscope music demos, they amazed and inspired me.

Observing a clever use of interaction between sound and an electron beam is a unique experience.

Some awesome oscilloscope music videos:
[Youscope](https://www.youtube.com/watch?v=s1eNjUgaB-g),
[Oscillofun](https://www.youtube.com/watch?v=J1ylMJwfLmM) and
[Khrậng](https://www.youtube.com/watch?v=vAyCl4IHIz8).

However, I could not find any *beautiful* oscilloscope emulators.
Lines produced by most emulators barely look like real oscilloscope lines at all.

Because of that I made a cool WebGL demo — [woscope](https://m1el.github.io/woscope/),
which is a XY mode oscilloscope emulator.

![sexy oscilloscope squiggle](/woscope-how/woscope-pic.png)

In this post you can learn how to draw these lines in WebGL.

<!-- more -->

<script>
window.MathJax = {
    tex2jax: {
        inlineMath: [['$', '$']],
        processEscapes: true
    }
};
</script>
<script async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

# Problem formulation

We have a stereo sound file.
We want to draw a line that looks like oscilloscope line,
when the oscilloscope is connected in XY mode.

Each pair of samples from the sound file interpreted as 2D point.

I decided to draw each line segment by drawing a rectangle
that affected by electron beam moving from the start to the end of the segment.

![](/woscope-how/points-to-segment.png)

This has two interesting implications:

- There is no corner case for segment joints
- There will be triangle overdraw, which might cause loss of performance

Beam intensity is collected from different segments using `blendFunc(gl.SRC_ALPHA, gl.ONE);`.

# Generating vertices

For a line segment, for each point of a rect we calculate
vertices position using segment start point, segment end point
and index of the vertex.

*it might be weird to store the same point 4 times in a buffer,
but I could not find a better way*
<commit_msg>Update woscope post to use local MathJax instead of CDN<commit_after>---
layout: post
permalink: /woscope-how/index.html
title: How to draw oscilloscope lines with math and WebGL
date: 2015-09-17 19:36
---

When I saw oscilloscope music demos, they amazed and inspired me.

Observing a clever use of interaction between sound and an electron beam is a unique experience.

Some awesome oscilloscope music videos:
[Youscope](https://www.youtube.com/watch?v=s1eNjUgaB-g),
[Oscillofun](https://www.youtube.com/watch?v=J1ylMJwfLmM) and
[Khrậng](https://www.youtube.com/watch?v=vAyCl4IHIz8).

However, I could not find any *beautiful* oscilloscope emulators.
Lines produced by most emulators barely look like real oscilloscope lines at all.

Because of that I made a cool WebGL demo — [woscope](https://m1el.github.io/woscope/),
which is a XY mode oscilloscope emulator.

![sexy oscilloscope squiggle](/woscope-how/woscope-pic.png)

In this post you can learn how to draw these lines in WebGL.

<!-- more -->

<script>
window.MathJax = {
    tex2jax: {
        inlineMath: [['$', '$']],
        processEscapes: true
    }
};
</script>
<script async src="/MathJax/config/TeX-AMS_HTML-full.js"></script>

# Problem formulation

We have a stereo sound file.
We want to draw a line that looks like oscilloscope line,
when the oscilloscope is connected in XY mode.

Each pair of samples from the sound file interpreted as 2D point.

I decided to draw each line segment by drawing a rectangle
that affected by electron beam moving from the start to the end of the segment.

![](/woscope-how/points-to-segment.png)

This has two interesting implications:

- There is no corner case for segment joints
- There will be triangle overdraw, which might cause loss of performance

Beam intensity is collected from different segments using `blendFunc(gl.SRC_ALPHA, gl.ONE);`.

# Generating vertices

For a line segment, for each point of a rect we calculate
vertices position using segment start point, segment end point
and index of the vertex.

*it might be weird to store the same point 4 times in a buffer,
but I could not find a better way*

{'fraction_non_alphanumeric': 0.08520179372197309, 'fraction_numerical': 0.009440641963653528, 'mean_word_length': 4.161997563946406, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 8, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5093510', 'n_tokens_mistral': 1343, 'n_tokens_neox': 1256, 'n_words': 551}