drart/mpeflockingexample.html

## mpeflockingexample.html
<html>
    <head>
        <script src="lib/flocking/dist/flocking-all.js"></script>
        <style>
            body{
                padding: 0;
                margin: 0;
            }
            #meter{
                box-sizing: border-box;
                position: fixed;
                bottom: 0;
                left: 0;
                border: 3px solid grey;
                border-radius: 15px;
                width: 100%; //fallback
                width: 100vw;
                height: 75px;
            }
        </style>
    </head>
    <body>
        <input type="checkbox" id="starter" name="starter"><span >start audio</span>
        <script>
            document.getElementById('starter').onclick= function(){
                if (this.checked){
                    flock.webAudio.audioSystem.audioContextSingleton.resume();
                }else{
                    flock.enviro.shared.stop();
                }
            };
        </script>

        <canvas id="meter"></canvas>

        <script>
            var basssynth = flock.synth.polyphonic({
                synthDef: {
                    ugen: "flock.ugen.distortion.tarrabiaDeJong",
                    id: "disto",
                    mul: {
                        id: "env",
                        ugen: "flock.ugen.asr",
                        attack: 0.1,
                        release: 1,
                        gate: 0,
                        mul: 0.35
                    },
                    amount: .2,
                    source: {
                        ugen: "flock.ugen.saw",
                        freq: {
                            id: "mod",
                            ugen: "flock.ugen.square",
                            mul: {
                                ugen: "flock.ugen.sin",
                                mul: 30,
                                freq: 4
                            },
                            add: 100
                        }
                    }
                }
            });

            var mpe = flock.midi.connection({
                openImmediately: true,
                ports: {
                    input: {
                        name: "Seaboard BLOCK"
                    }
                },
                listeners: {
                    noteOn: function(msg){
                        basssynth.noteOn(msg.channel, {
                            "disto.amount": (msg.velocity/127),
                            "mod.add": flock.midiFreq(msg.note),
                            "env.mul": Math.pow(10,((msg.velocity/12.7)-11)/20)
                        });
                    },
                    noteOff: function(msg){
                        basssynth.noteOff(msg.channel);
                    },
                    control: function(msg){
                        if( basssynth.voiceAllocator.activeVoices[msg.channel] !== undefined)
                            basssynth.voiceAllocator.activeVoices[msg.channel].set("mod.mul.freq", msg.value-60);
                    },
                    aftertouch: function(msg){
                        if( basssynth.voiceAllocator.activeVoices[msg.channel] !== undefined)
                            basssynth.voiceAllocator.activeVoices[msg.channel].set( "env.mul", Math.pow(10,((msg.pressure/12.7)-11)/20) );
                    },
                }
            });
        </script>

        <script>
            flock.enviro.shared.play();
        </script>
    </body>
</html>
	<html>
	<head>
	<script src="lib/flocking/dist/flocking-all.js"></script>
	<style>
	body{
	padding: 0;
	margin: 0;
	}
	#meter{
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	border: 3px solid grey;
	border-radius: 15px;
	width: 100%; //fallback
	width: 100vw;
	height: 75px;
	}
	</style>
	</head>
	<body>
	<input type="checkbox" id="starter" name="starter"><span >start audio</span>
	<script>
	document.getElementById('starter').onclick= function(){
	if (this.checked){
	flock.webAudio.audioSystem.audioContextSingleton.resume();
	}else{
	flock.enviro.shared.stop();
	}
	};
	</script>

	<canvas id="meter"></canvas>

	<script>
	var basssynth = flock.synth.polyphonic({
	synthDef: {
	ugen: "flock.ugen.distortion.tarrabiaDeJong",
	id: "disto",
	mul: {
	id: "env",
	ugen: "flock.ugen.asr",
	attack: 0.1,
	release: 1,
	gate: 0,
	mul: 0.35
	},
	amount: .2,
	source: {
	ugen: "flock.ugen.saw",
	freq: {
	id: "mod",
	ugen: "flock.ugen.square",
	mul: {
	ugen: "flock.ugen.sin",
	mul: 30,
	freq: 4
	},
	add: 100
	}
	}
	}
	});

	var mpe = flock.midi.connection({
	openImmediately: true,
	ports: {
	input: {
	name: "Seaboard BLOCK"
	}
	},
	listeners: {
	noteOn: function(msg){
	basssynth.noteOn(msg.channel, {
	"disto.amount": (msg.velocity/127),
	"mod.add": flock.midiFreq(msg.note),
	"env.mul": Math.pow(10,((msg.velocity/12.7)-11)/20)
	});
	},
	noteOff: function(msg){
	basssynth.noteOff(msg.channel);
	},
	control: function(msg){
	if( basssynth.voiceAllocator.activeVoices[msg.channel] !== undefined)
	basssynth.voiceAllocator.activeVoices[msg.channel].set("mod.mul.freq", msg.value-60);
	},
	aftertouch: function(msg){
	if( basssynth.voiceAllocator.activeVoices[msg.channel] !== undefined)
	basssynth.voiceAllocator.activeVoices[msg.channel].set( "env.mul", Math.pow(10,((msg.pressure/12.7)-11)/20) );
	},
	}
	});
	</script>

	<script>
	flock.enviro.shared.play();
	</script>
	</body>
	</html>