Etude - 11-08-2013

Nonsense(?) Theory: Can translating a program from it's linguistic form to an abstracted form (audio, spatial, geometric) form allow us insight and make our programs better through intuition? By mapping our program statements as unique keys that represent sounds (or in other cases, geometric shapes, distances for spatial reasoning, etc...) we can see patterns in ways that may not be so obvious. Whether or not this is useful remains to be seen, but in the same spirit of "mini-maps" or macro code structures, we can reason about a program from a completely different perspective. Plus, it looks cool! Pattern matching is easier when we translate the medium into something where emergence is more obvious. Linguistic patterns are a much newer concept than visible or audible patterns, therefore it stands to reason that we are more attuned to see them better. Note: this is a proof of concept, and as such has not been refined.

Grammar & Translation

IF CLAUSE /
[ if(something) {} => 0 ]
ELSE CLAUSE
[ elseif() {} => 1 ]
ELSE TERMINATOR
[ else {} => 2 ]
FOR LOOP
[ for(var i =...) {} => 3 ]
WHILE LOOP/DO LOOP
[ while() {} => 4 ]
RETURN CONTROL
[ return X => 5 ]
VARIABLE DECLARATION
[ var x => 6 ]
SWITCH
[ switch(case) => 7 ]
FUNCTION EXECUTION
[ fn(args) => 8 ]

Mapping rules

Starts (A, E, I, O, U ,AA, EE, II, OO, UU), each subsequent sound adds the sequential vowel one more time, lengthening the sound itself. E.g:

0 => BAP
1 => BEP
2 => BIP
3 => BOP
4 => BUP
5 => BAAP
6 => BEEP
7 => BIIP
8 => BOOP

Enter your code here

/* elements */

$(document).ready(function(){
                var result_html = $('#result').find('p');
                var play_btn = $('#play-music');
                var matches = {};
                var timeline = [];
                var sound_root = 'sounds/';
                var music = {
                'bap': new Howl({ urls: [sound_root + 'bap.mp3']}),
                'bep': new Howl({ urls: [sound_root + 'bep.mp3']}),
                'bip': new Howl({ urls: [sound_root + 'bip.mp3']}),
                'bop': new Howl({ urls: [sound_root + 'bop.mp3']}),
                'bup': new Howl({ urls: [sound_root + 'buup.mp3']}),
                'baap': new Howl({ urls: [sound_root + 'baap.mp3']}),
                'beep': new Howl({ urls: [sound_root + 'beep.mp3']}),
                'biip': new Howl({ urls: [sound_root + 'biip.mp3']}),
                'boop': new Howl({ urls: [sound_root + 'boop.mp3']})
            };
            var grammars = {
            'bap': 'if\\(', // if statement
            'bep': 'else if\\(', // else if
            'bip': 'else\\(', // else
            'bop': 'for\\(', // for loop
            'BUP': 'while\\(', // while loop
            'baap': 'return', // return
            'beep': 'var', // variable
            'biip': 'switch\\(', // switch
            'boop': 'function\\(' // function()
        };

function createTimeline() {
        // take original array, translate to new array,
        // then flatten, preserving quantity and order
        for(var match in matches) {
        timeline.push(matches[match]);
    }
    timeline = _.flatten(timeline);
    return;
}

function resetAll() {
// reset matches and timeline
timeline = [];
matches = {};

// reset html
$('form').find('button').show();
result_html.html('');
play_btn.hide();
return;
}

function playMusic() {
// loop through timeline and
// play corresponding audio files
$(timeline).each(function(k, note){
setTimeout(function(){
music[note].play();
}, k * 100);
});
resetAll();
}

function createSequence() {
// add note indicators for
// visual correspondence to sound
for(var match in matches) {
for(var seq in match) {
result_html.append('<span class="match ' + match + '">' + match + '</span>');
}
}

// unload
triggerLoading(false);
return;
}

function matchGrammar(code) {
// loop through grammar,
// looking for matches
for(var grammar in grammars) {

// create regex from object
var regex = new RegExp(grammars[grammar], 'gi');
var match = code.match(regex);
if(match) {
matches[grammar] = multiCopyToArray(match.length, grammar);
}
}
return;
}

play_btn.on('click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
createTimeline();
playMusic();
}).hide();

$('form').on('submit', function(e){
triggerLoading(true);
var code = $(this).find('textarea').val().toLowerCase();
$(this).find('button').hide();
e.preventDefault();
e.stopImmediatePropagation();
matchGrammar(code);
createSequence();
play_btn.show();
});
});

Your musical composition:

Play Composition

PROGRAM AS MUSIC

Grammar & Translation

Mapping rules

Enter your code here

Your musical composition: