index.html

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E9ZG1KHTVT"></script>
<script src='/scripts/google.js'></script>

<title>Temperament Lissajous</title>

<style>
    canvas {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 400px;
    }

    #svg-container {
        overflow-x: scroll;
    }

    svg text {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    svg text::selection {
        background: none;
    }
</style>

<div id="app">
    <canvas id="canvas"></canvas>

    <div id="svg-container">
        <svg :width="128 / 12 * 7 * 3 * keyboardPitch" height="200">
            <!-- White keys -->
            <g v-for="i in 128">
                <g v-if="!isBlackKey(i-1)">
                    <rect :width="keyboardWidth(i-1, keyboardPitch)" :height="keyboardHeight(i-1, 180, 100)"
                        :x="keyboardX(i-1, 0, keyboardPitch)" y="5" :fill="keyboardFill(i-1, isNoteOn[i-1])"
                        stroke="black" @click="noteToggle(i-1)" />
                </g>
                <text :x="keyboardX(i-1, 0, keyboardPitch) + 1.5 * keyboardPitch" y="170" text-anchor="middle"
                    dominant-baseline="central" pointer-events="none">{{ keyName(i-1) }}</text>
            </g>
            <!-- Black keys -->
            <g v-for="i in 128">
                <g v-if="isBlackKey(i-1)">
                    <rect :width="keyboardWidth(i-1, keyboardPitch)" :height="keyboardHeight(i-1, 180, 100)"
                        :x="keyboardX(i-1, 0, keyboardPitch)" y="5" :fill="keyboardFill(i-1, isNoteOn[i-1])"
                        stroke="black" @click="noteToggle(i-1)" />
                </g>
            </g>
        </svg>
    </div>

    <button @click="resetNote()">Reset</button>

    <fieldset>
        <legend>Temperament</legend>
        <label>
            <input type="radio" name="temperament" value="tempered" v-model="temperament"
                @change="updateNoteFrequency()" />
            Equal temperament (A = 440 Hz)
        </label>
        </br>
        <label>
            <input type="radio" name="temperament" value="just-intonation-c" v-model="temperament"
                @change="updateNoteFrequency()" />
            Just intonation (C dur, A = 440 Hz)
        </label>
        </br>
    </fieldset>
    <fieldset>
        <legend>Options</legend>
        <label>
            <input type="checkbox" v-model="useFluctuation" @change="updateNoteFrequency()">
            Random detune (just for fun visualization)
        </label>
        </br>
        <label>
            <input type="checkbox" v-model="debug">
            Show debug outputs
        </label>
    </fieldset>
    <fieldset v-if="debug">
        <legend>Debug</legend>
        <ul>
            <li>Temperament: {{ temperament }}</li>
            <li>useFluctuation: {{ useFluctuation }}</li>
            <li>fps: {{ fps }}</li>
            <li>WebGL2 available: {{ available.webgl2 }}</li>
            <li>MIDI available: {{ available.midi}}</li>
        </ul>
    </fieldset>

    <h2>Description</h2>
    <p>This is a visualization tool for music temperament. The complex shapes that appear with sounds on the black
        canvas are called <a href="https://en.wikipedia.org/wiki/Lissajous_curve">Lissajous curve</a>. This curve
        represents frequency ratios between notes that compose the chord. Classical temperaments (like just-intonation
        temperament) uses integer ratios for many intervals. This means that the Lissajous curves doesn't move in many
        chords for the classical temperaments, unlike the modern temperament (equal temperament), which uses an
        irrational number (2^(1/12)) for the interval ratios.</p>
    <p>In this tool, the single sound wave of each note is alternately accumulated into Lissajous x and y sound wave
        streams in the order you play. The shape represents most recent (1024 / sampling_rate (= 44100 in most case))
        [sec] sound wave.</p>
    <p>This work is inspired by <a href="https://youtu.be/6NlI4No3s0M">this video</a> originated(?)
        from Justonic Tuning Inc products. I don't have the product, so I guessed how it works and emulated it. (It's
        unbelievable that the instructions of the video seems to be using the real sounds from the microphone. How is it
        possible to extract frequencies with such accuracy? Someone tell me.)</p>
    <h2>Features</h2>
    <ul>
        <li>MIDI input (only for "noteOn" and "noteOff" operations)</li>
        <li>Random detune (just for fun visualization and reproduction of original YouTube video.)</li>
        <li>Wide range of notes (C-1 to G9)</li>
        <li>Single HTML app (Internet access is needed)</li>
        <li>Mobile friendly (maybe)</li>
    </ul>
    <h2>Q&A</h2>
    <ul>
        <li>
            Q. MIDI device doesn't work.
            <ul>
                <li>A. Enable the checkbox "debug" on "Options" and check if MIDI input is available on your browser.
                </li>
                <li>A. Use Chrome. <a href="https://caniuse.com/midi">https://caniuse.com/midi</a></li>
                <li>A. Reload this page and touch anywhere on this page before using MIDI device. <a
                        href="https://developer.chrome.com/blog/autoplay/#webaudio">Chrome needs human
                        interaction before using Web Audio API</a>.</li>
            </ul>
        </li>
        <li>
            Q. Why is the shape of the Lissajous curve changes every time for the same chord?
            <ul>
                <li>A. Because the phase of the each note changes every time you press it. </li>
                <li>A. Because the order of key pressing is different.</li>
            </ul>
        </li>
        <li>
            Q. Why is the Lissajous curve slightly moves even for the just-intonation chords?
            <ul>
                <li>A. Check if the "Random detune" option is enabled. This option emulates human error in real
                    instrument tuning. This option is only for the purpose of mimicking original YouTube movie.</li>
            </ul>
        </li>
    </ul>
    <h2>Used technologies</h2>
    <ul>
        <li>HTML / Javascript</li>
        <li>Vue.js 3</li>
        <li>WebGL2</li>
        <li>Web Audio API</li>
        <li>Web MIDI API</li>
    </ul>
    <p>
        <a href="https://github.com/monman53/temperament">Source codes (GitHub)</a>
        Any suggestions and issues are welcome.
    </p>
    <h2>Future works</h2>
    <ul>
        <li>Add more temperaments</li>
        <li>Add non-hold mode for keyboard</li>
        <li>Microphone input (hard because I don't know better way for filtering frequencies)</li>
        <li>More friendly UI</li>
    </ul>
    <h2>References</h2>
    <ul>
        <li><a href="http://web.archive.org/web/20160209025444/http://www.justonic.com/">Justonic Tuning Inc. (web
                archive)</a></li>
        <li><a href="https://youtu.be/6NlI4No3s0M">Just Intonation vs Equal Temperament</a></li>
        <li><a href="https://en.wikipedia.org/wiki/Just_intonation">Just intonation : Wikipedia</a></li>
        <li><a href="http://www.stby-2nd.sakura.ne.jp/page25/index.html">ストレングスビヨンド: 余話...</a></li>
    </ul>
    <h2>Contacts</h2>
    <ul>
        <li><a href="https://github.com/monman53/temperament">GitHub (This project)</a></li>
        <li><a href="https://github.com/monman53">GitHub (Profile page)</a></li>
        <li><a href="https://twitter.com/monman53">Twitter</a></li>
    </ul>
</div>

<script type="x-shader/x-vertex" id="vertex-shader">#version 300 es
    precision highp float;

    layout (location = 0) in float x_value;
    layout (location = 1) in float y_value;

    out float intensity;

    void main(void) {
        intensity = sqrt(float(gl_VertexID) / 2048.0);
        gl_PointSize = 10.0;
        gl_Position = vec4(
            x_value * 0.3,
            y_value * 0.3,
            0.0,
            1.0
        );
    }
</script>

<script type="x-shader/x-fragment" id="fragment-shader">#version 300 es
    precision highp float;

    in float intensity;
    out vec4 fragColor;

    void main(void) {
        // Green
        vec3 green = vec3(0.4, 1.0, 0.6) * intensity;
        fragColor = vec4(green, 1.0);
    }
</script>

<script type="module">
    //================================
    // Synthesizer (Web Audio API)
    //================================

    // Create context
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    const actx = new AudioContext();

    // Create frequency arrays
    //   The indices corresponds to MIDI numbers.
    //   e.g) 21: A0, 60: C4, 69: A4, 72: C5, 108: C8

    // Tempered
    const frequenciesTempered = new Array(128);
    for (let i = 69; i < 128; i++) {
        frequenciesTempered[i] = 440 * Math.pow(2, 1.0 / 12 * (i - 69));
    }
    for (let i = 69; i >= 0; i--) {
        frequenciesTempered[i] = 440 * Math.pow(2, -1.0 / 12 * (69 - i));
    }

    // Just intonation
    const frequenciesJustIntonationC = new Array(128);
    const baseC = 440 * 3 / 5;
    frequenciesJustIntonationC[60] = baseC;
    frequenciesJustIntonationC[61] = baseC * 16 / 15;
    frequenciesJustIntonationC[62] = baseC * 9 / 8;
    frequenciesJustIntonationC[63] = baseC * 6 / 5;
    frequenciesJustIntonationC[64] = baseC * 5 / 4;
    frequenciesJustIntonationC[65] = baseC * 4 / 3;
    frequenciesJustIntonationC[66] = baseC * 45 / 32;
    frequenciesJustIntonationC[67] = baseC * 3 / 2;
    frequenciesJustIntonationC[68] = baseC * 8 / 5;
    frequenciesJustIntonationC[69] = baseC * 5 / 3;
    frequenciesJustIntonationC[70] = baseC * 9 / 5;
    frequenciesJustIntonationC[71] = baseC * 15 / 8;
    for (let i = 72; i < 128; i++) {
        frequenciesJustIntonationC[i] = frequenciesJustIntonationC[i - 12] * 2;
    }
    for (let i = 59; i >= 0; i--) {
        frequenciesJustIntonationC[i] = frequenciesJustIntonationC[i + 12] / 2;
    }

    // Keyboard key to MIDI number map
    const keys = "qw3e4rt6y7u8io0p-[]" + "azsxdcvgbhnmk,l.;/";
    const keyToMIDI = {}
    for (let i = 0; i < keys.length; i++) {
        keyToMIDI[keys[i]] = 59 + i;
    }

    // Oscillator instances
    const oscillators = {}
    let counter = 0;

    // Intermediate nodes for Lissajous curve visualization
    const xNode = actx.createGain();
    const yNode = actx.createGain();
    const analyzerX = actx.createAnalyser();
    const analyzerY = actx.createAnalyser();
    const fftSize = 1 << 11;
    analyzerX.fftSize = fftSize;
    analyzerY.fftSize = fftSize;
    xNode.connect(analyzerX);
    yNode.connect(analyzerY);

    //================================
    // Lissajous curve visualization (WebGL)
    //================================

    //--------------------------------
    // Shaders
    //--------------------------------

    // Vertex shader
    const vertexShader = document.querySelector("#vertex-shader").innerHTML;

    // Fragment shader
    const fragmentShader = document.querySelector("#fragment-shader").innerHTML;

    //--------------------------------
    // Support functions for WebGL
    //--------------------------------

    function createShader(gl, source, type) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            throw new Error(gl.getShaderInfoLog(shader) + source);
        }
        return shader;
    }

    function createProgram(gl, vertShader, fragShader) {
        const program = gl.createProgram();
        gl.attachShader(program, vertShader);
        gl.attachShader(program, fragShader);
        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw new Error(gl.getProgramInfoLog(program));
        }
        return program;
    }

    function createVbo(gl, array, usage) {
        const vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, array, usage);
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
        return vbo;
    }

    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                temperament: 'tempered',
                useFluctuation: false,
                count: 0,
                fps: 0,
                fftSize: 2048,
                isNoteOn: Array(128).fill(false),
                keyboardPitch: 16,
                available: {
                    webgl2: false,
                    midi: false,
                },
                debug: false,
            }
        },
        methods: {
            keyboardX(keyId, start, pitch) {
                const offset = 21 * pitch * (Math.floor((keyId - start) / 12));
                switch (keyId % 12) {
                    case 0:
                        return offset + pitch * 0;
                    case 1:
                        return offset + pitch * 2;
                    case 2:
                        return offset + pitch * 3;
                    case 3:
                        return offset + pitch * 5;
                    case 4:
                        return offset + pitch * 6;
                    case 5:
                        return offset + pitch * 9;
                    case 6:
                        return offset + pitch * 11;
                    case 7:
                        return offset + pitch * 12;
                    case 8:
                        return offset + pitch * 14;
                    case 9:
                        return offset + pitch * 15;
                    case 10:
                        return offset + pitch * 17;
                    case 11:
                        return offset + pitch * 18;
                }
            },
            isBlackKey(keyId) {
                switch (keyId % 12) {
                    case 1:
                    case 3:
                    case 6:
                    case 8:
                    case 10:
                        return true;
                    default:
                        return false;
                }
            },
            keyboardFill(keyId, pressed) {
                if (pressed) {
                    return "gray";
                } else {
                    return this.isBlackKey(keyId) ? "black" : "white";
                }
            },
            keyboardHeight(keyId, heightWhite, heightBlack) {
                return this.isBlackKey(keyId) ? heightBlack : heightWhite;
            },
            keyboardWidth(keyId, pitch) {
                return this.isBlackKey(keyId) ? pitch * 2 : pitch * 3;
            },
            keyName(keyId) {
                const s = "C D EF G A B";
                const n = Math.floor(keyId / 12) - 1;
                return this.isBlackKey(keyId) ? "" : s[keyId % 12] + n;
            },
            noteOn(key) {
                const MIDIidx = key;

                // Avoiding double allocation
                if (MIDIidx in oscillators) {
                    return
                }

                // Create an oscillator
                const frequency = this.frequencies[MIDIidx];
                const oscillator = actx.createOscillator();
                oscillator.type = 'sine';
                oscillator.frequency.setValueAtTime(frequency, actx.currentTime);

                // Connect to the gain node
                // NOTE: For avoiding distortion
                const amp = actx.createGain();
                amp.gain.value = Math.min(0.1 * 440 * 440 / frequency / frequency, 0.2);
                oscillator.connect(amp);

                // Connect to the output speaker
                amp.connect(actx.destination);

                // Start oscillator and register
                oscillator.start()
                oscillators[MIDIidx] = oscillator
                this.isNoteOn[MIDIidx] = true;

                // Also connect to the visualization nodes
                // const pressedNotes = Object.keys(oscillators).length;
                if (counter % 2 == 0) {
                    oscillator.connect(xNode);
                } else {
                    oscillator.connect(yNode);
                }
                counter += 1;
            },
            noteOff(key) {
                const MIDIidx = key;

                if (!(MIDIidx in oscillators)) {
                    return;
                }

                oscillators[MIDIidx].stop();
                delete oscillators[MIDIidx];
                this.isNoteOn[MIDIidx] = false;
            },
            noteToggle(key) {
                if (this.isNoteOn[key]) {
                    this.noteOff(key);
                } else {
                    this.noteOn(key);
                }
            },
            resetNote() {
                for (let i = 0; i < 128; i++) {
                    this.noteOff(i);
                }
            },
            updateNoteFrequency() {
                // Update frequencies
                for (const [key, oscillator] of Object.entries(oscillators)) {
                    const frequency = this.frequencies[key];
                    // value.frequency.setValueAtTime(frequency, actx.currentTime);
                    oscillator.frequency.value = frequency;
                }

            }
        },
        computed: {
            frequencies() {
                // Default
                const fs = new Array(128);
                const source = this.temperament === "tempered" ? frequenciesTempered : frequenciesJustIntonationC;
                let fluctuationRatio = this.useFluctuation ? 0.00005 : 0.0;
                const addFluctuation = (freq) => {
                    const ratio = fluctuationRatio;
                    return freq * (1.0 + ratio * (Math.random() - 0.5));
                }
                for (let i = 0; i < 128; i++) {
                    fs[i] = addFluctuation(source[i])
                }
                return fs;
            }
        },
        mounted() {
            document.getElementById("svg-container").scrollLeft = 60 / 12 * 7 * 3 * this.keyboardPitch;

            //--------------------------------
            // Keyboard interactions
            //--------------------------------
            window.addEventListener('keypress', (e) => {
                // Ignoring repeat pressing
                if (e.repeat) {
                    return;
                }

                // Ignoring unsupported keys
                const MIDIidx = keyToMIDI[e.key];
                if (!MIDIidx) {
                    return;
                }

                this.noteOn(MIDIidx);
            })

            window.addEventListener('keyup', (e) => {
                const MIDIidx = keyToMIDI[e.key];
                if (!MIDIidx) {
                    return;
                }

                this.noteOff(MIDIidx);
            })

            //================================
            // MIDI input handlers (Web MIDI API)
            //================================

            const getMIDIMessage = (message) => {
                var command = message.data[0];
                var key = message.data[1];

                // noteOn
                if (144 <= command && command <= 159) {
                    this.noteOn(key);
                }

                // noteOff
                if (128 <= command && command <= 143) {
                    this.noteOff(key);
                }
            }

            if (navigator.requestMIDIAccess) {
                console.log('This browser supports WebMIDI!');
                this.available.midi = true;
            } else {
                console.log('WebMIDI is not supported in this browser.');
            }

            const onMIDISuccess = (midiAccess) => {
                for (var input of midiAccess.inputs.values()) {
                    input.onmidimessage = getMIDIMessage;
                }
            }

            const onMIDIFailure = () => {
                console.log('Could not access your MIDI devices.');
            }

            if (this.available.midi) {
                navigator.requestMIDIAccess()
                    .then(onMIDISuccess, onMIDIFailure);
            }

            //--------------------------------
            // WebGL setup
            //--------------------------------
            const canvas = document.getElementById("canvas");
            canvas.height = canvas.width;
            const gl = canvas.getContext('webgl2');

            addEventListener("resize", (event) => {
                canvas.height = canvas.width;
            });

            this.available.webgl2 = gl instanceof WebGL2RenderingContext;
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            const program = createProgram(gl,
                createShader(gl, vertexShader, gl.VERTEX_SHADER),
                createShader(gl, fragmentShader, gl.FRAGMENT_SHADER));

            // Buffers
            const xArray = new Float32Array(this.fftSize);
            const yArray = new Float32Array(this.fftSize);
            const xArrayVbo = createVbo(gl, xArray, gl.DYNAMIC_DRAW);
            const yArrayVbo = createVbo(gl, yArray, gl.DYNAMIC_DRAW);

            // Render callback
            let frames = 0;
            let startTime = new Date().getTime();
            const render = () => {
                // Calculate FPS
                frames += 1;
                let endTime = new Date().getTime();
                if (endTime - startTime >= 1000) {
                    this.fps = frames / (endTime - startTime) * 1000;
                    startTime = endTime;
                    frames = 0;
                }

                // Getting current waves
                analyzerX.getFloatTimeDomainData(xArray);
                analyzerY.getFloatTimeDomainData(yArray);

                // Canvas rendering
                gl.useProgram(program);

                // Binding x-coordinates array
                gl.bindBuffer(gl.ARRAY_BUFFER, xArrayVbo);
                gl.bufferSubData(gl.ARRAY_BUFFER, 0, xArray);
                gl.enableVertexAttribArray(0);
                gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);

                // Binding x-coordinates array
                gl.bindBuffer(gl.ARRAY_BUFFER, yArrayVbo);
                gl.bufferSubData(gl.ARRAY_BUFFER, 0, yArray);
                gl.enableVertexAttribArray(1);
                gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 0, 0);

                // Draw lines
                gl.clear(gl.COLOR_BUFFER_BIT);
                gl.lineWidth(2.0);
                gl.drawArrays(gl.LINE_STRIP, 0, xArray.length);

                // Next frame
                requestAnimationFrame(render);
            }

            // Rendering bootstrap
            requestAnimationFrame(render);
        },
    }).mount('#app')
</script>