drart/mpeFlockingSynthArray.html

## mpeFlockingSynthArray.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.enviro.shared.play();
                }else{
                    flock.enviro.shared.stop();
                }
            };
        </script>

        <canvas id="meter"></canvas>
        <script>
            fluid.defaults("adam.synth.mpearray", {
                gradeNames: "flock.synth",
                synthVoice: {
                    ugen: "flock.ugen.distortion.tarrabiaDeJong",
                    mul: {
                        id: "env",
                        ugen: "flock.ugen.asr",
                        attack: 0.1,
                        release: 1,
                        gate: 0,
                        mul: 0.35
                    },
                    amount: 2,
                    source: {
                        id: "myosc",
                        ugen: "flock.ugen.saw",
                    }
                },
                synthVoices: {
                    expander: {
                        func: function(synthVoice){
                            var ugenDefs = fluid.generate(16, function (i) {
                                var newsynthVoice = fluid.copy(synthVoice);
                                newsynthVoice.id = i;
                                return newsynthVoice;
                            }, true);

                            return ugenDefs;
                        },
                        args: [ "{that}.options.synthVoice" ]
                    }
                },
                synthDef: {
                    ugen: "flock.ugen.scope",
                    source: {
                        ugen: "flock.ugen.sum",
                        sources: "{that}.options.synthVoices"
                    },
                    options: {
                        canvas: "#meter",
                        styles: {
                            strokeColor: "#777777",
                            strokeWidth: 2
                        }
                    }
                },
            });
        </script>

        <script>
            var basssynth = adam.synth.mpearray();

            var mpe = flock.midi.connection({
                openImmediately: true,
                ports: {
                    input: {
                        name: "Seaboard BLOCK"
                    }
                },
                listeners: {
                    noteOn: function(msg){
                        var theChangeSpec = {};
                        theChangeSpec[msg.channel+".source.freq"] = flock.midiFreq(msg.note),
                        theChangeSpec[msg.channel+".mul.gate"] = 1,
                        basssynth.set( theChangeSpec);
                    },
                    noteOff: function(msg){
                        var theChangeSpec = {};
                        theChangeSpec[msg.channel+".mul.gate"] = 0,
                        basssynth.set( theChangeSpec);
                    },
                    control: function(msg){
                        var theChangeSpec = {};
                        theChangeSpec[msg.channel+".amount"] = msg.value/64,
                        basssynth.set( theChangeSpec);
                    },
                    aftertouch: function(msg){
                        var theChangeSpec = {};
                        // do something interesting
                        basssynth.set( theChangeSpec);
                    },
                }
            });
        </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.enviro.shared.play();
	}else{
	flock.enviro.shared.stop();
	}
	};
	</script>

	<canvas id="meter"></canvas>
	<script>
	fluid.defaults("adam.synth.mpearray", {
	gradeNames: "flock.synth",
	synthVoice: {
	ugen: "flock.ugen.distortion.tarrabiaDeJong",
	mul: {
	id: "env",
	ugen: "flock.ugen.asr",
	attack: 0.1,
	release: 1,
	gate: 0,
	mul: 0.35
	},
	amount: 2,
	source: {
	id: "myosc",
	ugen: "flock.ugen.saw",
	}
	},
	synthVoices: {
	expander: {
	func: function(synthVoice){
	var ugenDefs = fluid.generate(16, function (i) {
	var newsynthVoice = fluid.copy(synthVoice);
	newsynthVoice.id = i;
	return newsynthVoice;
	}, true);

	return ugenDefs;
	},
	args: [ "{that}.options.synthVoice" ]
	}
	},
	synthDef: {
	ugen: "flock.ugen.scope",
	source: {
	ugen: "flock.ugen.sum",
	sources: "{that}.options.synthVoices"
	},
	options: {
	canvas: "#meter",
	styles: {
	strokeColor: "#777777",
	strokeWidth: 2
	}
	}
	},
	});
	</script>

	<script>
	var basssynth = adam.synth.mpearray();

	var mpe = flock.midi.connection({
	openImmediately: true,
	ports: {
	input: {
	name: "Seaboard BLOCK"
	}
	},
	listeners: {
	noteOn: function(msg){
	var theChangeSpec = {};
	theChangeSpec[msg.channel+".source.freq"] = flock.midiFreq(msg.note),
	theChangeSpec[msg.channel+".mul.gate"] = 1,
	basssynth.set( theChangeSpec);
	},
	noteOff: function(msg){
	var theChangeSpec = {};
	theChangeSpec[msg.channel+".mul.gate"] = 0,
	basssynth.set( theChangeSpec);
	},
	control: function(msg){
	var theChangeSpec = {};
	theChangeSpec[msg.channel+".amount"] = msg.value/64,
	basssynth.set( theChangeSpec);
	},
	aftertouch: function(msg){
	var theChangeSpec = {};
	// do something interesting
	basssynth.set( theChangeSpec);
	},
	}
	});
	</script>
	</body>
	</html>