1window.onload = function() {
 2    var video = document.getElementById('video');
 3    var canvas = document.getElementById('canvas');
 4    var context = canvas.getContext('2d');
 5    var trackerCyan = new tracking.ColorTracker(['cyan']);
 6    tracking.track('#video', trackerCyan, {
 7        camera: true
 8    });
 9    trackerCyan.on('track', function(event) {
10        context.clearRect(0, 0, canvas.width, canvas.height);
11        event.data.forEach(function(rect) {
12            if (rect.color === 'custom') {
13                rect.color = trackerCyan.customColor;
14            }
15            context.strokeStyle = rect.color;
16            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
17            context.font = '11px Helvetica';
18            context.fillStyle = "#fff";
19            context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
20            context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
21            actualizePosCyan(rect);
22        });
23    });
24};
25
26
27function actualizePosCyan(rect){
28    sineWaveCyan.frequency=600-rect.y;
29    sineWaveCyan.volume=(rect.x/450);
30    console.log(sineWaveCyan.frequency);
31}
32
33var sineWaveCyan = new Pizzicato.Sound({
34    source: 'wave',
35    options: {
36        frequency: 440
37    }
38});
39/*var ringModulator = new Pizzicato.Effects.RingModulator({
40    speed: 30,
41    distortion: 1,
42    mix: 0.5
43});
44
45sineWave.addEffect(ringModulator);*/
46sineWaveCyan.volume=0.1;
47sineWaveCyan.play();
48
49/*var drum = new Pizzicato.Sound('./sounds/drum.mp3', function() {
50    // Sound loaded!
51    drum.loop=true;
52    drum.play();
53});*/
54
55function silence(){
56    sineWaveCyan.volume=0;
57}