⌈⌋ ⎇ branch:  Bitrhythm


Hex Artifact Content

Artifact b95bf7451d2645adc1260661e348ce5db316a3ab88da21265ea078509518ac10:


0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c  'use strict';..l
0010: 65 74 20 73 76 67 20 3d 20 72 65 71 75 69 72 65  et svg = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 67 27 29 3b  ('../util/svg');
0030: 0a 6c 65 74 20 6d 61 74 68 20 3d 20 72 65 71 75  .let math = requ
0040: 69 72 65 28 27 2e 2e 2f 75 74 69 6c 2f 6d 61 74  ire('../util/mat
0050: 68 27 29 3b 0a 6c 65 74 20 49 6e 74 65 72 66 61  h');.let Interfa
0060: 63 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e  ce = require('..
0070: 2f 63 6f 72 65 2f 69 6e 74 65 72 66 61 63 65 27  /core/interface'
0080: 29 3b 0a 6c 65 74 20 53 74 65 70 20 3d 20 72 65  );.let Step = re
0090: 71 75 69 72 65 28 27 2e 2e 2f 6d 6f 64 65 6c 73  quire('../models
00a0: 2f 73 74 65 70 27 29 3b 0a 69 6d 70 6f 72 74 20  /step');.import 
00b0: 2a 20 61 73 20 49 6e 74 65 72 61 63 74 69 6f 6e  * as Interaction
00c0: 20 66 72 6f 6d 20 27 2e 2e 2f 75 74 69 6c 2f 69   from '../util/i
00d0: 6e 74 65 72 61 63 74 69 6f 6e 27 3b 0a 0a 2f 2a  nteraction';../*
00e0: 2a 0a 2a 20 50 61 6e 32 44 0a 2a 0a 2a 20 40 64  *.* Pan2D.*.* @d
00f0: 65 73 63 72 69 70 74 69 6f 6e 20 49 6e 74 65 72  escription Inter
0100: 66 61 63 65 20 66 6f 72 20 6d 6f 76 69 6e 67 20  face for moving 
0110: 61 20 73 6f 75 6e 64 20 61 72 6f 75 6e 64 20 61  a sound around a
0120: 6e 20 61 72 72 61 79 20 6f 66 20 73 70 65 61 6b  n array of speak
0130: 65 72 73 2e 20 53 70 65 61 6b 65 72 20 6c 6f 63  ers. Speaker loc
0140: 61 74 69 6f 6e 73 20 63 61 6e 20 62 65 20 63 75  ations can be cu
0150: 73 74 6f 6d 69 7a 65 64 2e 20 54 68 65 20 69 6e  stomized. The in
0160: 74 65 72 66 61 63 65 20 63 61 6c 63 75 6c 61 74  terface calculat
0170: 65 73 20 74 68 65 20 63 6c 6f 73 65 6e 65 73 73  es the closeness
0180: 20 6f 66 20 74 68 65 20 73 6f 75 6e 64 20 73 6f   of the sound so
0190: 75 72 63 65 20 74 6f 20 65 61 63 68 20 73 70 65  urce to each spe
01a0: 61 6b 65 72 20 61 6e 64 20 72 65 74 75 72 6e 73  aker and returns
01b0: 20 74 68 61 74 20 64 69 73 74 61 6e 63 65 20 61   that distance a
01c0: 73 20 61 20 6e 75 6d 65 72 69 63 20 76 61 6c 75  s a numeric valu
01d0: 65 2e 0a 2a 0a 2a 20 40 64 65 6d 6f 20 3c 73 70  e..*.* @demo <sp
01e0: 61 6e 20 6e 65 78 75 73 2d 75 69 3d 22 70 61 6e  an nexus-ui="pan
01f0: 32 44 22 3e 3c 2f 73 70 61 6e 3e 0a 2a 0a 2a 20  2D"></span>.*.* 
0200: 40 65 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 70  @example.* var p
0210: 61 6e 32 64 20 3d 20 6e 65 77 20 4e 65 78 75 73  an2d = new Nexus
0220: 2e 50 61 6e 32 64 28 27 23 74 61 72 67 65 74 27  .Pan2d('#target'
0230: 29 0a 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 0a 2a  ).*.* @example.*
0240: 20 76 61 72 20 70 61 6e 32 64 20 3d 20 6e 65 77   var pan2d = new
0250: 20 4e 65 78 75 73 2e 50 61 6e 32 44 28 27 23 74   Nexus.Pan2D('#t
0260: 61 72 67 65 74 27 2c 7b 0a 2a 20 20 20 27 73 69  arget',{.*   'si
0270: 7a 65 27 3a 20 5b 32 30 30 2c 32 30 30 5d 2c 0a  ze': [200,200],.
0280: 2a 20 20 20 27 72 61 6e 67 65 27 3a 20 30 2e 35  *   'range': 0.5
0290: 2c 20 20 2f 2f 20 64 65 74 65 63 74 69 6f 6e 20  ,  // detection 
02a0: 72 61 64 69 75 73 20 6f 66 20 65 61 63 68 20 73  radius of each s
02b0: 70 65 61 6b 65 72 0a 2a 20 20 20 27 6d 6f 64 65  peaker.*   'mode
02c0: 27 3a 20 27 61 62 73 6f 6c 75 74 65 27 2c 20 20  ': 'absolute',  
02d0: 20 2f 2f 20 27 61 62 73 6f 6c 75 74 65 27 20 6f   // 'absolute' o
02e0: 72 20 27 72 65 6c 61 74 69 76 65 27 20 73 6f 75  r 'relative' sou
02f0: 6e 64 20 6d 6f 76 65 6d 65 6e 74 0a 2a 20 20 20  nd movement.*   
0300: 27 73 70 65 61 6b 65 72 73 27 3a 20 5b 20 20 2f  'speakers': [  /
0310: 2f 20 74 68 65 20 73 70 65 61 6b 65 72 20 5b 78  / the speaker [x
0320: 2c 79 5d 20 70 6f 73 69 74 69 6f 6e 73 0a 2a 20  ,y] positions.* 
0330: 20 20 20 20 20 20 5b 30 2e 35 2c 30 2e 32 5d 2c        [0.5,0.2],
0340: 0a 2a 20 20 20 20 20 20 20 5b 30 2e 37 35 2c 30  .*       [0.75,0
0350: 2e 32 35 5d 2c 0a 2a 20 20 20 20 20 20 20 5b 30  .25],.*       [0
0360: 2e 38 2c 30 2e 35 5d 2c 0a 2a 20 20 20 20 20 20  .8,0.5],.*      
0370: 20 5b 30 2e 37 35 2c 30 2e 37 35 5d 2c 0a 2a 20   [0.75,0.75],.* 
0380: 20 20 20 20 20 20 5b 30 2e 35 2c 30 2e 38 5d 2c        [0.5,0.8],
0390: 0a 2a 20 20 20 20 20 20 20 5b 30 2e 32 35 2c 30  .*       [0.25,0
03a0: 2e 37 35 5d 0a 2a 20 20 20 20 20 20 20 5b 30 2e  .75].*       [0.
03b0: 32 2c 30 2e 35 5d 2c 0a 2a 20 20 20 20 20 20 20  2,0.5],.*       
03c0: 5b 30 2e 32 35 2c 30 2e 32 35 5d 0a 2a 20 20 20  [0.25,0.25].*   
03d0: 5d 0a 2a 20 7d 29 0a 2a 0a 2a 20 40 6f 75 74 70  ].* }).*.* @outp
03e0: 75 74 0a 2a 20 63 68 61 6e 67 65 0a 2a 20 46 69  ut.* change.* Fi
03f0: 72 65 73 20 61 6e 79 20 74 69 6d 65 20 74 68 65  res any time the
0400: 20 22 73 6f 75 72 63 65 22 20 6e 6f 64 65 27 73   "source" node's
0410: 20 70 6f 73 69 74 69 6f 6e 20 63 68 61 6e 67 65   position change
0420: 73 2e 20 3c 62 72 3e 0a 2a 20 54 68 65 20 65 76  s. <br>.* The ev
0430: 65 6e 74 20 64 61 74 61 20 69 73 20 61 6e 20 61  ent data is an a
0440: 72 72 61 79 20 6f 66 20 74 68 65 20 61 6d 70 6c  rray of the ampl
0450: 69 74 75 64 65 73 20 28 30 2d 31 29 2c 20 72 65  itudes (0-1), re
0460: 70 72 65 73 65 6e 74 69 6e 67 20 74 68 65 20 6c  presenting the l
0470: 65 76 65 6c 20 6f 66 20 65 61 63 68 20 73 70 65  evel of each spe
0480: 61 6b 65 72 20 28 61 73 20 63 61 6c 63 75 6c 61  aker (as calcula
0490: 74 65 64 20 62 79 20 69 74 73 20 64 69 73 74 61  ted by its dista
04a0: 6e 63 65 20 74 6f 20 74 68 65 20 61 75 64 69 6f  nce to the audio
04b0: 20 73 6f 75 72 63 65 29 2e 0a 2a 0a 2a 20 40 6f   source)..*.* @o
04c0: 75 74 70 75 74 65 78 61 6d 70 6c 65 0a 2a 20 70  utputexample.* p
04d0: 61 6e 32 64 2e 6f 6e 28 27 63 68 61 6e 67 65 27  an2d.on('change'
04e0: 2c 66 75 6e 63 74 69 6f 6e 28 76 29 20 7b 0a 2a  ,function(v) {.*
04f0: 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 76     console.log(v
0500: 29 3b 0a 2a 20 7d 29 0a 2a 0a 2a 2f 0a 0a 65 78  );.* }).*.*/..ex
0510: 70 6f 72 74 20 64 65 66 61 75 6c 74 20 63 6c 61  port default cla
0520: 73 73 20 50 61 6e 32 44 20 65 78 74 65 6e 64 73  ss Pan2D extends
0530: 20 49 6e 74 65 72 66 61 63 65 20 7b 0a 0a 20 20   Interface {..  
0540: 63 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a  constructor() {.
0550: 0a 20 20 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73  .    let options
0560: 20 3d 20 5b 27 72 61 6e 67 65 27 5d 3b 0a 0a 20   = ['range'];.. 
0570: 20 20 20 6c 65 74 20 64 65 66 61 75 6c 74 73 20     let defaults 
0580: 3d 20 7b 0a 20 20 20 20 20 20 27 73 69 7a 65 27  = {.      'size'
0590: 3a 20 5b 32 30 30 2c 32 30 30 5d 2c 0a 20 20 20  : [200,200],.   
05a0: 20 20 20 27 72 61 6e 67 65 27 3a 20 30 2e 35 2c     'range': 0.5,
05b0: 0a 20 20 20 20 20 20 27 6d 6f 64 65 27 3a 20 27  .      'mode': '
05c0: 61 62 73 6f 6c 75 74 65 27 2c 0a 20 20 20 20 20  absolute',.     
05d0: 20 27 73 70 65 61 6b 65 72 73 27 3a 20 5b 0a 20   'speakers': [. 
05e0: 20 20 20 20 20 20 20 5b 30 2e 35 2c 30 2e 32 5d         [0.5,0.2]
05f0: 2c 0a 20 20 20 20 20 20 20 20 5b 30 2e 37 35 2c  ,.        [0.75,
0600: 30 2e 32 35 5d 2c 0a 20 20 20 20 20 20 20 20 5b  0.25],.        [
0610: 30 2e 38 2c 30 2e 35 5d 2c 0a 20 20 20 20 20 20  0.8,0.5],.      
0620: 20 20 5b 30 2e 37 35 2c 30 2e 37 35 5d 2c 0a 20    [0.75,0.75],. 
0630: 20 20 20 20 20 20 20 5b 30 2e 35 2c 30 2e 38 5d         [0.5,0.8]
0640: 2c 0a 20 20 20 20 20 20 20 20 5b 30 2e 32 35 2c  ,.        [0.25,
0650: 30 2e 37 35 5d 2c 0a 20 20 20 20 20 20 20 20 5b  0.75],.        [
0660: 30 2e 32 2c 30 2e 35 5d 2c 0a 20 20 20 20 20 20  0.2,0.5],.      
0670: 20 20 5b 30 2e 32 35 2c 30 2e 32 35 5d 0a 20 20    [0.25,0.25].  
0680: 20 20 20 20 5d 0a 20 20 20 20 7d 3b 0a 0a 20 20      ].    };..  
0690: 20 20 73 75 70 65 72 28 61 72 67 75 6d 65 6e 74    super(argument
06a0: 73 2c 6f 70 74 69 6f 6e 73 2c 64 65 66 61 75 6c  s,options,defaul
06b0: 74 73 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 76  ts);..    this.v
06c0: 61 6c 75 65 20 3d 20 7b 0a 20 20 20 20 20 20 78  alue = {.      x
06d0: 3a 20 6e 65 77 20 53 74 65 70 28 30 2c 31 2c 30  : new Step(0,1,0
06e0: 2c 30 2e 35 29 2c 0a 20 20 20 20 20 20 79 3a 20  ,0.5),.      y: 
06f0: 6e 65 77 20 53 74 65 70 28 30 2c 31 2c 30 2c 30  new Step(0,1,0,0
0700: 2e 35 29 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20  .5).    };..    
0710: 2f 2a 2a 0a 20 20 20 20 41 62 73 6f 6c 75 74 65  /**.    Absolute
0720: 20 6f 72 20 72 65 6c 61 74 69 76 65 20 6d 6f 75   or relative mou
0730: 73 65 20 69 6e 74 65 72 61 63 74 69 6f 6e 2e 20  se interaction. 
0740: 49 6e 20 22 61 62 73 6f 6c 75 74 65 22 20 6d 6f  In "absolute" mo
0750: 64 65 2c 20 74 68 65 20 73 6f 75 72 63 65 20 6e  de, the source n
0760: 6f 64 65 20 77 69 6c 6c 20 6a 75 6d 70 20 74 6f  ode will jump to
0770: 20 79 6f 75 72 20 6d 6f 75 73 65 20 70 6f 73 69   your mouse posi
0780: 74 69 6f 6e 20 6f 6e 20 6d 6f 75 73 65 20 63 6c  tion on mouse cl
0790: 69 63 6b 2e 20 49 6e 20 22 72 65 6c 61 74 69 76  ick. In "relativ
07a0: 65 22 20 6d 6f 64 65 2c 20 69 74 20 64 6f 65 73  e" mode, it does
07b0: 20 6e 6f 74 2e 0a 20 20 20 20 2a 2f 0a 20 20 20   not..    */.   
07c0: 20 74 68 69 73 2e 6d 6f 64 65 20 3d 20 74 68 69   this.mode = thi
07d0: 73 2e 73 65 74 74 69 6e 67 73 2e 6d 6f 64 65 3b  s.settings.mode;
07e0: 0a 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74  ..    this.posit
07f0: 69 6f 6e 20 3d 20 7b 0a 20 20 20 20 20 20 78 3a  ion = {.      x:
0800: 20 6e 65 77 20 49 6e 74 65 72 61 63 74 69 6f 6e   new Interaction
0810: 2e 48 61 6e 64 6c 65 28 74 68 69 73 2e 6d 6f 64  .Handle(this.mod
0820: 65 2c 27 68 6f 72 69 7a 6f 6e 74 61 6c 27 2c 5b  e,'horizontal',[
0830: 30 2c 74 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74  0,this.width],[t
0840: 68 69 73 2e 68 65 69 67 68 74 2c 30 5d 29 2c 0a  his.height,0]),.
0850: 20 20 20 20 20 20 79 3a 20 6e 65 77 20 49 6e 74        y: new Int
0860: 65 72 61 63 74 69 6f 6e 2e 48 61 6e 64 6c 65 28  eraction.Handle(
0870: 74 68 69 73 2e 6d 6f 64 65 2c 27 76 65 72 74 69  this.mode,'verti
0880: 63 61 6c 27 2c 5b 30 2c 74 68 69 73 2e 77 69 64  cal',[0,this.wid
0890: 74 68 5d 2c 5b 74 68 69 73 2e 68 65 69 67 68 74  th],[this.height
08a0: 2c 30 5d 29 0a 20 20 20 20 7d 3b 0a 20 20 20 20  ,0]).    };.    
08b0: 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 78 2e  this.position.x.
08c0: 76 61 6c 75 65 20 3d 20 74 68 69 73 2e 76 61 6c  value = this.val
08d0: 75 65 2e 78 2e 6e 6f 72 6d 61 6c 69 7a 65 64 3b  ue.x.normalized;
08e0: 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69  .    this.positi
08f0: 6f 6e 2e 79 2e 76 61 6c 75 65 20 3d 20 74 68 69  on.y.value = thi
0900: 73 2e 76 61 6c 75 65 2e 79 2e 6e 6f 72 6d 61 6c  s.value.y.normal
0910: 69 7a 65 64 3b 0a 0a 20 20 20 20 2f 2a 2a 0a 20  ized;..    /**. 
0920: 20 20 20 41 6e 20 61 72 72 61 79 20 6f 66 20 73     An array of s
0930: 70 65 61 6b 65 72 20 6c 6f 63 61 74 69 6f 6e 73  peaker locations
0940: 2e 20 55 70 64 61 74 65 20 74 68 69 73 20 77 69  . Update this wi
0950: 74 68 20 2e 6d 6f 76 65 53 70 65 61 6b 65 72 28  th .moveSpeaker(
0960: 29 20 6f 72 20 2e 6d 6f 76 65 41 6c 6c 53 70 65  ) or .moveAllSpe
0970: 61 6b 65 72 73 28 29 0a 20 20 20 20 2a 2f 0a 20  akers().    */. 
0980: 20 20 20 74 68 69 73 2e 73 70 65 61 6b 65 72 73     this.speakers
0990: 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73   = this.settings
09a0: 2e 73 70 65 61 6b 65 72 73 3b 0a 0a 20 20 20 20  .speakers;..    
09b0: 2f 2a 2a 0a 20 20 20 20 52 65 77 72 69 74 65 3a  /**.    Rewrite:
09c0: 20 54 68 65 20 6d 61 78 69 6d 75 6d 20 64 69 73   The maximum dis
09d0: 74 61 6e 63 65 20 66 72 6f 6d 20 61 20 73 70 65  tance from a spe
09e0: 61 6b 65 72 20 74 68 61 74 20 74 68 65 20 73 6f  aker that the so
09f0: 75 72 63 65 20 6e 6f 64 65 20 63 61 6e 20 62 65  urce node can be
0a00: 20 66 6f 72 20 69 74 20 74 6f 20 62 65 20 68 65   for it to be he
0a10: 61 72 64 20 66 72 6f 6d 20 74 68 61 74 20 73 70  ard from that sp
0a20: 65 61 6b 65 72 2e 20 41 20 6c 6f 77 20 72 61 6e  eaker. A low ran
0a30: 67 65 20 28 30 2e 31 29 20 77 69 6c 6c 20 72 65  ge (0.1) will re
0a40: 73 75 6c 74 20 69 6e 20 73 70 65 61 6b 65 72 73  sult in speakers
0a50: 20 6f 6e 6c 79 20 70 6c 61 79 69 6e 67 20 77 68   only playing wh
0a60: 65 6e 20 74 68 65 20 73 6f 75 6e 64 20 69 73 20  en the sound is 
0a70: 76 65 72 79 20 63 6c 6f 73 65 20 69 74 2e 20 44  very close it. D
0a80: 65 66 61 75 6c 74 20 69 73 20 30 2e 35 20 28 68  efault is 0.5 (h
0a90: 61 6c 66 20 6f 66 20 74 68 65 20 69 6e 74 65 72  alf of the inter
0aa0: 66 61 63 65 29 2e 0a 20 20 20 20 2a 2f 0a 20 20  face)..    */.  
0ab0: 20 20 74 68 69 73 2e 72 61 6e 67 65 20 3d 20 74    this.range = t
0ac0: 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 72 61 6e  his.settings.ran
0ad0: 67 65 3b 0a 0a 20 20 20 20 2f 2a 2a 0a 20 20 20  ge;..    /**.   
0ae0: 20 54 68 65 20 63 75 72 72 65 6e 74 20 6c 65 76   The current lev
0af0: 65 6c 73 20 66 6f 72 20 65 61 63 68 20 73 70 65  els for each spe
0b00: 61 6b 65 72 2e 20 54 68 69 73 20 69 73 20 63 61  aker. This is ca
0b10: 6c 63 75 6c 61 74 65 64 20 77 68 65 6e 20 61 20  lculated when a 
0b20: 73 6f 75 72 63 65 20 6e 6f 64 65 20 6f 72 20 73  source node or s
0b30: 70 65 61 6b 65 72 20 6e 6f 64 65 20 69 73 20 6d  peaker node is m
0b40: 6f 76 65 64 20 74 68 72 6f 75 67 68 20 69 6e 74  oved through int
0b50: 65 72 61 63 74 69 6f 6e 20 6f 72 20 70 72 6f 67  eraction or prog
0b60: 72 61 6d 61 74 69 63 61 6c 6c 79 2e 0a 20 20 20  ramatically..   
0b70: 20 2a 2f 0a 20 20 20 20 74 68 69 73 2e 6c 65 76   */.    this.lev
0b80: 65 6c 73 20 3d 20 5b 5d 3b 0a 0a 20 20 20 20 74  els = [];..    t
0b90: 68 69 73 2e 69 6e 69 74 28 29 3b 0a 0a 20 20 20  his.init();..   
0ba0: 20 74 68 69 73 2e 63 61 6c 63 75 6c 61 74 65 4c   this.calculateL
0bb0: 65 76 65 6c 73 28 29 3b 0a 20 20 20 20 74 68 69  evels();.    thi
0bc0: 73 2e 72 65 6e 64 65 72 28 29 3b 0a 0a 20 20 7d  s.render();..  }
0bd0: 0a 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 66 61  ..  buildInterfa
0be0: 63 65 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 73  ce() {..    this
0bf0: 2e 6b 6e 6f 62 20 3d 20 73 76 67 2e 63 72 65 61  .knob = svg.crea
0c00: 74 65 28 27 63 69 72 63 6c 65 27 29 3b 0a 0a 0a  te('circle');...
0c10: 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74      this.element
0c20: 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69  .appendChild(thi
0c30: 73 2e 6b 6e 6f 62 29 3b 0a 0a 0a 20 20 20 20 2f  s.knob);...    /
0c40: 2f 20 61 64 64 20 73 70 65 61 6b 65 72 73 0a 20  / add speakers. 
0c50: 20 20 20 74 68 69 73 2e 73 70 65 61 6b 65 72 45     this.speakerE
0c60: 6c 65 6d 65 6e 74 73 20 3d 20 5b 5d 3b 0a 0a 20  lements = [];.. 
0c70: 20 20 20 66 6f 72 20 28 6c 65 74 20 69 3d 30 3b     for (let i=0;
0c80: 69 3c 74 68 69 73 2e 73 70 65 61 6b 65 72 73 2e  i<this.speakers.
0c90: 6c 65 6e 67 74 68 3b 69 2b 2b 29 20 7b 0a 20 20  length;i++) {.  
0ca0: 20 20 20 20 6c 65 74 20 73 70 65 61 6b 65 72 45      let speakerE
0cb0: 6c 65 6d 65 6e 74 20 3d 20 73 76 67 2e 63 72 65  lement = svg.cre
0cc0: 61 74 65 28 27 63 69 72 63 6c 65 27 29 3b 0a 0a  ate('circle');..
0cd0: 20 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65        this.eleme
0ce0: 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 73  nt.appendChild(s
0cf0: 70 65 61 6b 65 72 45 6c 65 6d 65 6e 74 29 3b 0a  peakerElement);.
0d00: 0a 20 20 20 20 20 20 74 68 69 73 2e 73 70 65 61  .      this.spea
0d10: 6b 65 72 45 6c 65 6d 65 6e 74 73 2e 70 75 73 68  kerElements.push
0d20: 28 73 70 65 61 6b 65 72 45 6c 65 6d 65 6e 74 29  (speakerElement)
0d30: 3b 0a 20 20 20 20 7d 0a 0a 20 20 7d 0a 0a 20 20  ;.    }..  }..  
0d40: 73 69 7a 65 49 6e 74 65 72 66 61 63 65 28 29 20  sizeInterface() 
0d50: 7b 0a 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e  {..        this.
0d60: 5f 6d 69 6e 44 69 6d 65 6e 73 69 6f 6e 20 3d 20  _minDimension = 
0d70: 4d 61 74 68 2e 6d 69 6e 28 74 68 69 73 2e 77 69  Math.min(this.wi
0d80: 64 74 68 2c 74 68 69 73 2e 68 65 69 67 68 74 29  dth,this.height)
0d90: 3b 0a 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e  ;..        this.
0da0: 6b 6e 6f 62 52 61 64 69 75 73 20 3d 20 7b 0a 20  knobRadius = {. 
0db0: 20 20 20 20 20 20 20 20 20 6f 66 66 3a 20 7e 7e           off: ~~
0dc0: 28 74 68 69 73 2e 5f 6d 69 6e 44 69 6d 65 6e 73  (this._minDimens
0dd0: 69 6f 6e 2f 31 30 30 29 20 2a 20 33 20 2b 20 35  ion/100) * 3 + 5
0de0: 2c 0a 20 20 20 20 20 20 20 20 7d 3b 0a 20 20 20  ,.        };.   
0df0: 20 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 52 61       this.knobRa
0e00: 64 69 75 73 2e 6f 6e 20 3d 20 74 68 69 73 2e 6b  dius.on = this.k
0e10: 6e 6f 62 52 61 64 69 75 73 2e 6f 66 66 20 2a 20  nobRadius.off * 
0e20: 32 3b 0a 0a 20 20 20 20 20 20 20 20 74 68 69 73  2;..        this
0e30: 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72 69 62 75  .knob.setAttribu
0e40: 74 65 28 27 63 78 27 2c 74 68 69 73 2e 77 69 64  te('cx',this.wid
0e50: 74 68 2f 32 29 3b 0a 20 20 20 20 20 20 20 20 74  th/2);.        t
0e60: 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74 72  his.knob.setAttr
0e70: 69 62 75 74 65 28 27 63 79 27 2c 74 68 69 73 2e  ibute('cy',this.
0e80: 68 65 69 67 68 74 2f 32 29 3b 0a 20 20 20 20 20  height/2);.     
0e90: 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74     this.knob.set
0ea0: 41 74 74 72 69 62 75 74 65 28 27 72 27 2c 74 68  Attribute('r',th
0eb0: 69 73 2e 6b 6e 6f 62 52 61 64 69 75 73 2e 6f 66  is.knobRadius.of
0ec0: 66 29 3b 0a 0a 20 20 20 20 20 20 20 20 66 6f 72  f);..        for
0ed0: 20 28 6c 65 74 20 69 3d 30 3b 69 3c 74 68 69 73   (let i=0;i<this
0ee0: 2e 73 70 65 61 6b 65 72 73 2e 6c 65 6e 67 74 68  .speakers.length
0ef0: 3b 69 2b 2b 29 20 7b 0a 20 20 20 20 20 20 20 20  ;i++) {.        
0f00: 20 20 6c 65 74 20 73 70 65 61 6b 65 72 45 6c 65    let speakerEle
0f10: 6d 65 6e 74 20 3d 20 74 68 69 73 2e 73 70 65 61  ment = this.spea
0f20: 6b 65 72 45 6c 65 6d 65 6e 74 73 5b 69 5d 3b 0a  kerElements[i];.
0f30: 20 20 20 20 20 20 20 20 20 20 6c 65 74 20 73 70            let sp
0f40: 65 61 6b 65 72 20 3d 20 74 68 69 73 2e 73 70 65  eaker = this.spe
0f50: 61 6b 65 72 73 5b 69 5d 3b 0a 20 20 20 20 20 20  akers[i];.      
0f60: 20 20 20 20 73 70 65 61 6b 65 72 45 6c 65 6d 65      speakerEleme
0f70: 6e 74 2e 73 65 74 41 74 74 72 69 62 75 74 65 28  nt.setAttribute(
0f80: 27 63 78 27 2c 73 70 65 61 6b 65 72 5b 30 5d 2a  'cx',speaker[0]*
0f90: 74 68 69 73 2e 77 69 64 74 68 29 3b 0a 20 20 20  this.width);.   
0fa0: 20 20 20 20 20 20 20 73 70 65 61 6b 65 72 45 6c         speakerEl
0fb0: 65 6d 65 6e 74 2e 73 65 74 41 74 74 72 69 62 75  ement.setAttribu
0fc0: 74 65 28 27 63 79 27 2c 73 70 65 61 6b 65 72 5b  te('cy',speaker[
0fd0: 31 5d 2a 74 68 69 73 2e 68 65 69 67 68 74 29 3b  1]*this.height);
0fe0: 0a 20 20 20 20 20 20 20 20 20 20 73 70 65 61 6b  .          speak
0ff0: 65 72 45 6c 65 6d 65 6e 74 2e 73 65 74 41 74 74  erElement.setAtt
1000: 72 69 62 75 74 65 28 27 72 27 2c 74 68 69 73 2e  ribute('r',this.
1010: 5f 6d 69 6e 44 69 6d 65 6e 73 69 6f 6e 2f 32 30  _minDimension/20
1020: 20 2b 20 35 29 3b 0a 20 20 20 20 20 20 20 20 20   + 5);.         
1030: 20 73 70 65 61 6b 65 72 45 6c 65 6d 65 6e 74 2e   speakerElement.
1040: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69  setAttribute('fi
1050: 6c 6c 2d 6f 70 61 63 69 74 79 27 2c 20 27 30 27  ll-opacity', '0'
1060: 29 3b 0a 20 20 20 20 20 20 20 20 7d 0a 0a 20 20  );.        }..  
1070: 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f      this.positio
1080: 6e 2e 78 2e 72 65 73 69 7a 65 28 5b 30 2c 74 68  n.x.resize([0,th
1090: 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 2e  is.width],[this.
10a0: 68 65 69 67 68 74 2c 30 5d 29 3b 0a 20 20 20 20  height,0]);.    
10b0: 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e    this.position.
10c0: 79 2e 72 65 73 69 7a 65 28 5b 30 2c 74 68 69 73  y.resize([0,this
10d0: 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 2e 68 65  .width],[this.he
10e0: 69 67 68 74 2c 30 5d 29 3b 0a 0a 20 20 20 20 20  ight,0]);..     
10f0: 20 20 20 2f 2f 20 6e 65 78 74 2c 20 6e 65 65 64     // next, need
1100: 20 74 6f 0a 20 20 20 20 20 20 20 20 2f 2f 20 72   to.        // r
1110: 65 73 69 7a 65 20 70 6f 73 69 74 69 6f 6e 73 0a  esize positions.
1120: 20 20 20 20 20 20 20 20 2f 2f 20 63 61 6c 63 75          // calcu
1130: 6c 61 74 65 20 73 70 65 61 6b 65 72 20 64 69 73  late speaker dis
1140: 74 61 6e 63 65 73 0a 20 20 20 20 20 20 74 68 69  tances.      thi
1150: 73 2e 63 61 6c 63 75 6c 61 74 65 4c 65 76 65 6c  s.calculateLevel
1160: 73 28 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e  s();.      this.
1170: 72 65 6e 64 65 72 28 29 3b 0a 0a 20 20 7d 0a 0a  render();..  }..
1180: 20 20 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65    colorInterface
1190: 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 73 2e 65  () {..    this.e
11a0: 6c 65 6d 65 6e 74 2e 73 74 79 6c 65 2e 62 61 63  lement.style.bac
11b0: 6b 67 72 6f 75 6e 64 43 6f 6c 6f 72 20 3d 20 74  kgroundColor = t
11c0: 68 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 3b  his.colors.fill;
11d0: 0a 20 20 20 20 74 68 69 73 2e 6b 6e 6f 62 2e 73  .    this.knob.s
11e0: 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 6c  etAttribute('fil
11f0: 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e  l', this.colors.
1200: 6d 65 64 69 75 6d 4c 69 67 68 74 29 3b 0a 0a 20  mediumLight);.. 
1210: 20 20 20 66 6f 72 20 28 6c 65 74 20 69 3d 30 3b     for (let i=0;
1220: 69 3c 74 68 69 73 2e 73 70 65 61 6b 65 72 73 2e  i<this.speakers.
1230: 6c 65 6e 67 74 68 3b 69 2b 2b 29 20 7b 0a 20 20  length;i++) {.  
1240: 20 20 20 20 6c 65 74 20 73 70 65 61 6b 65 72 45      let speakerE
1250: 6c 65 6d 65 6e 74 20 3d 20 74 68 69 73 2e 73 70  lement = this.sp
1260: 65 61 6b 65 72 45 6c 65 6d 65 6e 74 73 5b 69 5d  eakerElements[i]
1270: 3b 0a 20 20 20 20 20 20 73 70 65 61 6b 65 72 45  ;.      speakerE
1280: 6c 65 6d 65 6e 74 2e 73 65 74 41 74 74 72 69 62  lement.setAttrib
1290: 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 68 69 73  ute('fill', this
12a0: 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 29 3b  .colors.accent);
12b0: 0a 20 20 20 20 20 20 73 70 65 61 6b 65 72 45 6c  .      speakerEl
12c0: 65 6d 65 6e 74 2e 73 65 74 41 74 74 72 69 62 75  ement.setAttribu
12d0: 74 65 28 27 73 74 72 6f 6b 65 27 2c 20 74 68 69  te('stroke', thi
12e0: 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 29  s.colors.accent)
12f0: 3b 0a 20 20 20 20 7d 0a 0a 20 20 7d 0a 0a 20 20  ;.    }..  }..  
1300: 72 65 6e 64 65 72 28 29 20 7b 0a 20 20 20 20 74  render() {.    t
1310: 68 69 73 2e 6b 6e 6f 62 43 6f 6f 72 64 69 6e 61  his.knobCoordina
1320: 74 65 73 20 3d 20 7b 0a 20 20 20 20 20 20 78 3a  tes = {.      x:
1330: 20 74 68 69 73 2e 76 61 6c 75 65 2e 78 2e 6e 6f   this.value.x.no
1340: 72 6d 61 6c 69 7a 65 64 20 2a 20 74 68 69 73 2e  rmalized * this.
1350: 77 69 64 74 68 2c 0a 20 20 20 20 20 20 79 3a 20  width,.      y: 
1360: 74 68 69 73 2e 68 65 69 67 68 74 20 2d 20 74 68  this.height - th
1370: 69 73 2e 76 61 6c 75 65 2e 79 2e 6e 6f 72 6d 61  is.value.y.norma
1380: 6c 69 7a 65 64 20 2a 20 74 68 69 73 2e 68 65 69  lized * this.hei
1390: 67 68 74 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20  ght.    };..    
13a0: 74 68 69 73 2e 6b 6e 6f 62 2e 73 65 74 41 74 74  this.knob.setAtt
13b0: 72 69 62 75 74 65 28 27 63 78 27 2c 74 68 69 73  ribute('cx',this
13c0: 2e 6b 6e 6f 62 43 6f 6f 72 64 69 6e 61 74 65 73  .knobCoordinates
13d0: 2e 78 29 3b 0a 20 20 20 20 74 68 69 73 2e 6b 6e  .x);.    this.kn
13e0: 6f 62 2e 73 65 74 41 74 74 72 69 62 75 74 65 28  ob.setAttribute(
13f0: 27 63 79 27 2c 74 68 69 73 2e 6b 6e 6f 62 43 6f  'cy',this.knobCo
1400: 6f 72 64 69 6e 61 74 65 73 2e 79 29 3b 0a 20 20  ordinates.y);.  
1410: 7d 0a 0a 0a 20 20 63 6c 69 63 6b 28 29 20 7b 0a  }...  click() {.
1420: 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f      this.positio
1430: 6e 2e 78 2e 61 6e 63 68 6f 72 20 3d 20 74 68 69  n.x.anchor = thi
1440: 73 2e 6d 6f 75 73 65 3b 0a 20 20 20 20 74 68 69  s.mouse;.    thi
1450: 73 2e 70 6f 73 69 74 69 6f 6e 2e 79 2e 61 6e 63  s.position.y.anc
1460: 68 6f 72 20 3d 20 74 68 69 73 2e 6d 6f 75 73 65  hor = this.mouse
1470: 3b 0a 20 20 20 20 74 68 69 73 2e 6d 6f 76 65 28  ;.    this.move(
1480: 29 3b 0a 20 20 7d 0a 0a 20 20 6d 6f 76 65 28 29  );.  }..  move()
1490: 20 7b 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e   {.    if (this.
14a0: 63 6c 69 63 6b 65 64 29 20 7b 0a 20 20 20 20 20  clicked) {.     
14b0: 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 78   this.position.x
14c0: 2e 75 70 64 61 74 65 28 74 68 69 73 2e 6d 6f 75  .update(this.mou
14d0: 73 65 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e  se);.      this.
14e0: 70 6f 73 69 74 69 6f 6e 2e 79 2e 75 70 64 61 74  position.y.updat
14f0: 65 28 74 68 69 73 2e 6d 6f 75 73 65 29 3b 0a 20  e(this.mouse);. 
1500: 20 20 20 20 20 2f 2f 20 70 6f 73 69 74 69 6f 6e       // position
1510: 2e 78 20 61 6e 64 20 70 6f 73 69 74 69 6f 6e 2e  .x and position.
1520: 79 20 61 72 65 20 6e 6f 72 6d 61 6c 69 7a 65 64  y are normalized
1530: 0a 20 20 20 20 20 20 2f 2f 20 73 6f 20 61 72 65  .      // so are
1540: 20 74 68 65 20 6c 65 76 65 6c 73 0a 20 20 20 20   the levels.    
1550: 20 20 2f 2f 20 6c 69 6b 65 6c 79 20 64 6f 6e 27    // likely don'
1560: 74 20 6e 65 65 64 20 74 68 69 73 2e 76 61 6c 75  t need this.valu
1570: 65 20 61 74 20 61 6c 6c 20 2d 2d 20 6f 6e 6c 79  e at all -- only
1580: 20 75 73 65 64 20 66 6f 72 20 64 72 61 77 69 6e   used for drawin
1590: 67 0a 20 20 20 20 20 20 2f 2f 20 6e 6f 74 20 67  g.      // not g
15a0: 6f 69 6e 67 20 74 6f 20 62 65 20 61 20 27 73 74  oing to be a 'st
15b0: 65 70 27 20 6f 72 20 27 6d 69 6e 27 20 61 6e 64  ep' or 'min' and
15c0: 20 27 6d 61 78 27 20 69 6e 20 74 68 69 73 20 6f   'max' in this o
15d0: 6e 65 2e 0a 20 20 20 20 20 20 74 68 69 73 2e 63  ne..      this.c
15e0: 61 6c 63 75 6c 61 74 65 4c 65 76 65 6c 73 28 29  alculateLevels()
15f0: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6d 69  ;.      this.emi
1600: 74 28 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e  t('change',this.
1610: 6c 65 76 65 6c 73 29 3b 0a 20 20 20 20 20 20 74  levels);.      t
1620: 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20  his.render();.  
1630: 20 20 7d 0a 20 20 7d 0a 0a 20 20 72 65 6c 65 61    }.  }..  relea
1640: 73 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e  se() {.    this.
1650: 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a 20  render();.  }.. 
1660: 20 67 65 74 20 6e 6f 72 6d 61 6c 69 7a 65 64 28   get normalized(
1670: 29 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 7b  ) {.    return {
1680: 0a 20 20 20 20 20 20 78 3a 20 74 68 69 73 2e 76  .      x: this.v
1690: 61 6c 75 65 2e 78 2e 6e 6f 72 6d 61 6c 69 7a 65  alue.x.normalize
16a0: 64 2c 0a 20 20 20 20 20 20 79 3a 20 74 68 69 73  d,.      y: this
16b0: 2e 76 61 6c 75 65 2e 79 2e 6e 6f 72 6d 61 6c 69  .value.y.normali
16c0: 7a 65 64 0a 20 20 20 20 7d 3b 0a 20 20 7d 0a 0a  zed.    };.  }..
16d0: 20 20 63 61 6c 63 75 6c 61 74 65 4c 65 76 65 6c    calculateLevel
16e0: 73 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 76  s() {.    this.v
16f0: 61 6c 75 65 2e 78 2e 75 70 64 61 74 65 4e 6f 72  alue.x.updateNor
1700: 6d 61 6c 28 20 74 68 69 73 2e 70 6f 73 69 74 69  mal( this.positi
1710: 6f 6e 2e 78 2e 76 61 6c 75 65 20 29 3b 0a 20 20  on.x.value );.  
1720: 20 20 74 68 69 73 2e 76 61 6c 75 65 2e 79 2e 75    this.value.y.u
1730: 70 64 61 74 65 4e 6f 72 6d 61 6c 28 20 74 68 69  pdateNormal( thi
1740: 73 2e 70 6f 73 69 74 69 6f 6e 2e 79 2e 76 61 6c  s.position.y.val
1750: 75 65 20 29 3b 0a 20 20 20 20 74 68 69 73 2e 6c  ue );.    this.l
1760: 65 76 65 6c 73 20 3d 20 5b 5d 3b 0a 20 20 20 20  evels = [];.    
1770: 74 68 69 73 2e 73 70 65 61 6b 65 72 73 2e 66 6f  this.speakers.fo
1780: 72 45 61 63 68 28 28 73 2c 69 29 20 3d 3e 20 7b  rEach((s,i) => {
1790: 0a 20 20 20 20 20 20 6c 65 74 20 64 69 73 74 61  .      let dista
17a0: 6e 63 65 20 3d 20 6d 61 74 68 2e 64 69 73 74 61  nce = math.dista
17b0: 6e 63 65 28 73 5b 30 5d 2a 74 68 69 73 2e 77 69  nce(s[0]*this.wi
17c0: 64 74 68 2c 73 5b 31 5d 2a 74 68 69 73 2e 68 65  dth,s[1]*this.he
17d0: 69 67 68 74 2c 74 68 69 73 2e 70 6f 73 69 74 69  ight,this.positi
17e0: 6f 6e 2e 78 2e 76 61 6c 75 65 2a 74 68 69 73 2e  on.x.value*this.
17f0: 77 69 64 74 68 2c 28 31 2d 74 68 69 73 2e 70 6f  width,(1-this.po
1800: 73 69 74 69 6f 6e 2e 79 2e 76 61 6c 75 65 29 2a  sition.y.value)*
1810: 74 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20  this.height);.  
1820: 20 20 20 20 6c 65 74 20 6c 65 76 65 6c 20 3d 20      let level = 
1830: 6d 61 74 68 2e 63 6c 69 70 28 31 2d 64 69 73 74  math.clip(1-dist
1840: 61 6e 63 65 2f 28 74 68 69 73 2e 72 61 6e 67 65  ance/(this.range
1850: 2a 74 68 69 73 2e 77 69 64 74 68 29 2c 30 2c 31  *this.width),0,1
1860: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6c 65  );.      this.le
1870: 76 65 6c 73 2e 70 75 73 68 28 6c 65 76 65 6c 29  vels.push(level)
1880: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 73 70 65  ;.      this.spe
1890: 61 6b 65 72 45 6c 65 6d 65 6e 74 73 5b 69 5d 2e  akerElements[i].
18a0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69  setAttribute('fi
18b0: 6c 6c 2d 6f 70 61 63 69 74 79 27 2c 20 6c 65 76  ll-opacity', lev
18c0: 65 6c 29 3b 0a 20 20 20 20 7d 29 3b 0a 20 20 7d  el);.    });.  }
18d0: 0a 0a 20 20 2f 2a 2a 0a 20 20 4d 6f 76 65 20 74  ..  /**.  Move t
18e0: 68 65 20 61 75 64 69 6f 20 73 6f 75 72 63 65 20  he audio source 
18f0: 6e 6f 64 65 20 61 6e 64 20 74 72 69 67 67 65 72  node and trigger
1900: 20 74 68 65 20 6f 75 74 70 75 74 20 65 76 65 6e   the output even
1910: 74 2e 0a 20 20 40 70 61 72 61 6d 20 78 20 7b 6e  t..  @param x {n
1920: 75 6d 62 65 72 7d 20 4e 65 77 20 78 20 6c 6f 63  umber} New x loc
1930: 61 74 69 6f 6e 2c 20 6e 6f 72 6d 61 6c 69 7a 65  ation, normalize
1940: 64 20 30 2d 31 0a 20 20 40 70 61 72 61 6d 20 79  d 0-1.  @param y
1950: 20 7b 6e 75 6d 62 65 72 7d 20 4e 65 77 20 79 20   {number} New y 
1960: 6c 6f 63 61 74 69 6f 6e 2c 20 6e 6f 72 6d 61 6c  location, normal
1970: 69 7a 65 64 20 30 2d 31 0a 20 20 2a 2f 0a 20 20  ized 0-1.  */.  
1980: 6d 6f 76 65 53 6f 75 72 63 65 28 78 2c 79 29 20  moveSource(x,y) 
1990: 7b 0a 20 20 20 20 6c 65 74 20 6c 6f 63 61 74 69  {.    let locati
19a0: 6f 6e 20 3d 20 7b 0a 20 20 20 20 20 20 78 3a 20  on = {.      x: 
19b0: 78 2a 74 68 69 73 2e 77 69 64 74 68 2c 0a 20 20  x*this.width,.  
19c0: 20 20 20 20 79 3a 20 79 2a 74 68 69 73 2e 68 65      y: y*this.he
19d0: 69 67 68 74 0a 20 20 20 20 7d 3b 0a 20 20 20 20  ight.    };.    
19e0: 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 78 2e  this.position.x.
19f0: 75 70 64 61 74 65 28 6c 6f 63 61 74 69 6f 6e 29  update(location)
1a00: 3b 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74  ;.    this.posit
1a10: 69 6f 6e 2e 79 2e 75 70 64 61 74 65 28 6c 6f 63  ion.y.update(loc
1a20: 61 74 69 6f 6e 29 3b 0a 20 20 20 20 74 68 69 73  ation);.    this
1a30: 2e 63 61 6c 63 75 6c 61 74 65 4c 65 76 65 6c 73  .calculateLevels
1a40: 28 29 3b 0a 20 20 20 20 74 68 69 73 2e 65 6d 69  ();.    this.emi
1a50: 74 28 27 63 68 61 6e 67 65 27 2c 74 68 69 73 2e  t('change',this.
1a60: 6c 65 76 65 6c 73 29 3b 0a 20 20 20 20 74 68 69  levels);.    thi
1a70: 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a  s.render();.  }.
1a80: 0a 20 20 2f 2a 2a 0a 20 20 4d 6f 76 65 20 61 20  .  /**.  Move a 
1a90: 73 70 65 61 6b 65 72 20 6e 6f 64 65 20 61 6e 64  speaker node and
1aa0: 20 74 72 69 67 67 65 72 20 74 68 65 20 6f 75 74   trigger the out
1ab0: 70 75 74 20 65 76 65 6e 74 2e 0a 20 20 40 70 61  put event..  @pa
1ac0: 72 61 6d 20 69 6e 64 65 78 20 7b 6e 75 6d 62 65  ram index {numbe
1ad0: 72 7d 20 49 6e 64 65 78 20 6f 66 20 74 68 65 20  r} Index of the 
1ae0: 73 70 65 61 6b 65 72 20 74 6f 20 6d 6f 76 65 0a  speaker to move.
1af0: 20 20 40 70 61 72 61 6d 20 78 20 7b 6e 75 6d 62    @param x {numb
1b00: 65 72 7d 20 4e 65 77 20 78 20 6c 6f 63 61 74 69  er} New x locati
1b10: 6f 6e 2c 20 6e 6f 72 6d 61 6c 69 7a 65 64 20 30  on, normalized 0
1b20: 2d 31 0a 20 20 40 70 61 72 61 6d 20 79 20 7b 6e  -1.  @param y {n
1b30: 75 6d 62 65 72 7d 20 4e 65 77 20 79 20 6c 6f 63  umber} New y loc
1b40: 61 74 69 6f 6e 2c 20 6e 6f 72 6d 61 6c 69 7a 65  ation, normalize
1b50: 64 20 30 2d 31 0a 20 20 2a 2f 0a 20 20 6d 6f 76  d 0-1.  */.  mov
1b60: 65 53 70 65 61 6b 65 72 28 69 6e 64 65 78 2c 78  eSpeaker(index,x
1b70: 2c 79 29 20 7b 0a 0a 20 20 20 20 74 68 69 73 2e  ,y) {..    this.
1b80: 73 70 65 61 6b 65 72 73 5b 69 6e 64 65 78 5d 20  speakers[index] 
1b90: 3d 20 5b 78 2c 79 5d 3b 0a 20 20 20 20 74 68 69  = [x,y];.    thi
1ba0: 73 2e 73 70 65 61 6b 65 72 45 6c 65 6d 65 6e 74  s.speakerElement
1bb0: 73 5b 69 6e 64 65 78 5d 2e 73 65 74 41 74 74 72  s[index].setAttr
1bc0: 69 62 75 74 65 28 27 63 78 27 2c 20 78 2a 74 68  ibute('cx', x*th
1bd0: 69 73 2e 77 69 64 74 68 29 3b 0a 20 20 20 20 74  is.width);.    t
1be0: 68 69 73 2e 73 70 65 61 6b 65 72 45 6c 65 6d 65  his.speakerEleme
1bf0: 6e 74 73 5b 69 6e 64 65 78 5d 2e 73 65 74 41 74  nts[index].setAt
1c00: 74 72 69 62 75 74 65 28 27 63 79 27 2c 20 79 2a  tribute('cy', y*
1c10: 74 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20  this.height);.  
1c20: 20 20 74 68 69 73 2e 63 61 6c 63 75 6c 61 74 65    this.calculate
1c30: 4c 65 76 65 6c 73 28 29 3b 0a 20 20 20 20 74 68  Levels();.    th
1c40: 69 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 65 27  is.emit('change'
1c50: 2c 74 68 69 73 2e 6c 65 76 65 6c 73 29 3b 0a 20  ,this.levels);. 
1c60: 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29     this.render()
1c70: 3b 0a 0a 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20  ;..  }..  /**.  
1c80: 53 65 74 20 61 6c 6c 20 73 70 65 61 6b 65 72 20  Set all speaker 
1c90: 6c 6f 63 61 74 69 6f 6e 73 0a 20 20 40 70 61 72  locations.  @par
1ca0: 61 6d 20 6c 6f 63 61 74 69 6f 6e 73 20 7b 41 72  am locations {Ar
1cb0: 72 61 79 7d 20 41 72 72 61 79 20 6f 66 20 73 70  ray} Array of sp
1cc0: 65 61 6b 65 72 20 6c 6f 63 61 74 69 6f 6e 73 2e  eaker locations.
1cd0: 20 45 61 63 68 20 69 74 65 6d 20 69 6e 20 74 68   Each item in th
1ce0: 65 20 61 72 72 61 79 20 73 68 6f 75 6c 64 20 62  e array should b
1cf0: 65 20 61 6e 20 61 72 72 61 79 20 6f 66 20 6e 6f  e an array of no
1d00: 72 6d 61 6c 69 7a 65 64 20 78 20 61 6e 64 20 79  rmalized x and y
1d10: 20 63 6f 6f 72 64 69 6e 61 74 65 73 2e 0a 0a 20   coordinates... 
1d20: 20 73 65 74 53 70 65 61 6b 65 72 73 28 6c 6f 63   setSpeakers(loc
1d30: 61 74 69 6f 6e 73 29 20 7b 0a 0a 20 20 7d 0a 20  ations) {..  }. 
1d40: 20 2a 2f 0a 0a 7d 0a                              */..}.