0000: 3c 21 64 6f 63 74 79 70 65 20 68 74 6d 6c 3e 0a <!doctype html>.
0010: 3c 68 74 6d 6c 3e 0a 0a 3c 68 65 61 64 3e 0a 20 <html>..<head>.
0020: 20 3c 6d 65 74 61 20 63 68 61 72 73 65 74 3d 27 <meta charset='
0030: 75 74 66 2d 38 27 20 2f 3e 0a 20 20 3c 74 69 74 utf-8' />. <tit
0040: 6c 65 3e 4e 65 78 75 73 55 49 20 41 50 49 3c 2f le>NexusUI API</
0050: 74 69 74 6c 65 3e 0a 20 20 3c 6d 65 74 61 20 6e title>. <meta n
0060: 61 6d 65 3d 27 76 69 65 77 70 6f 72 74 27 20 63 ame='viewport' c
0070: 6f 6e 74 65 6e 74 3d 27 77 69 64 74 68 3d 64 65 ontent='width=de
0080: 76 69 63 65 2d 77 69 64 74 68 2c 69 6e 69 74 69 vice-width,initi
0090: 61 6c 2d 73 63 61 6c 65 3d 31 27 3e 0a 20 20 3c al-scale=1'>. <
00a0: 6c 69 6e 6b 20 72 65 6c 3d 22 69 63 6f 6e 22 20 link rel="icon"
00b0: 74 79 70 65 3d 22 69 6d 61 67 65 2f 70 6e 67 22 type="image/png"
00c0: 20 68 72 65 66 3d 22 2e 2e 2f 66 61 76 69 63 6f href="../favico
00d0: 6e 2e 70 6e 67 22 20 2f 3e 0a 20 20 3c 6c 69 6e n.png" />. <lin
00e0: 6b 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f k href="https://
00f0: 66 6f 6e 74 73 2e 67 6f 6f 67 6c 65 61 70 69 73 fonts.googleapis
0100: 2e 63 6f 6d 2f 63 73 73 3f 66 61 6d 69 6c 79 3d .com/css?family=
0110: 4d 75 6c 69 3a 34 30 30 2c 37 30 30 22 20 72 65 Muli:400,700" re
0120: 6c 3d 22 73 74 79 6c 65 73 68 65 65 74 22 3e 0a l="stylesheet">.
0130: 20 20 3c 73 63 72 69 70 74 20 73 72 63 3d 22 6a <script src="j
0140: 73 2f 6a 71 75 65 72 79 2e 6a 73 22 3e 3c 2f 73 s/jquery.js"></s
0150: 63 72 69 70 74 3e 0a 20 20 3c 6c 69 6e 6b 20 72 cript>. <link r
0160: 65 6c 3d 27 73 74 79 6c 65 73 68 65 65 74 27 20 el='stylesheet'
0170: 68 72 65 66 3d 27 70 72 69 73 6d 2f 70 72 69 73 href='prism/pris
0180: 6d 2e 63 73 73 27 20 2f 3e 0a 20 20 3c 73 63 72 m.css' />. <scr
0190: 69 70 74 20 73 72 63 3d 22 70 72 69 73 6d 2f 70 ipt src="prism/p
01a0: 72 69 73 6d 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 rism.js"></scrip
01b0: 74 3e 0a 20 20 3c 73 63 72 69 70 74 20 73 72 63 t>. <script src
01c0: 3d 22 6a 73 2f 6d 6f 75 73 74 61 63 68 65 2e 6d ="js/moustache.m
01d0: 69 6e 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e in.js"></script>
01e0: 0a 20 20 3c 73 63 72 69 70 74 20 73 72 63 3d 22 . <script src="
01f0: 2e 2e 2f 64 69 73 74 2f 4e 65 78 75 73 55 49 2e ../dist/NexusUI.
0200: 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 20 20 js"></script>.
0210: 3c 73 63 72 69 70 74 20 73 72 63 3d 22 6a 73 2f <script src="js/
0220: 54 6f 6e 65 39 2e 6a 73 22 3e 3c 2f 73 63 72 69 Tone9.js"></scri
0230: 70 74 3e 0a 3c 2f 68 65 61 64 3e 0a 0a 3c 62 6f pt>.</head>..<bo
0240: 64 79 20 63 6c 61 73 73 3d 27 64 6f 63 75 6d 65 dy class='docume
0250: 6e 74 61 74 69 6f 6e 27 3e 0a 0a 0a 20 20 3c 64 ntation'>... <d
0260: 69 76 20 69 64 3d 22 6d 65 6e 75 2d 74 61 62 22 iv id="menu-tab"
0270: 20 6f 6e 63 6c 69 63 6b 3d 22 74 6f 67 67 6c 65 onclick="toggle
0280: 53 69 64 65 62 61 72 28 29 22 3e 0a 20 20 20 20 Sidebar()">.
0290: 3c 69 6d 67 20 73 72 63 3d 22 6d 65 64 69 61 2f <img src="media/
02a0: 68 61 6d 62 75 72 67 65 72 2e 70 6e 67 22 20 77 hamburger.png" w
02b0: 69 64 74 68 3d 22 34 30 70 78 22 3e 0a 20 20 3c idth="40px">. <
02c0: 2f 64 69 76 3e 0a 0a 20 20 3c 64 69 76 20 69 64 /div>.. <div id
02d0: 3d 22 73 69 64 65 62 61 72 22 20 63 6c 61 73 73 ="sidebar" class
02e0: 3d 22 6d 65 6e 75 43 6c 6f 73 65 64 22 20 6f 6e ="menuClosed" on
02f0: 6d 6f 75 73 65 6f 76 65 72 3d 22 64 6f 63 75 6d mouseover="docum
0300: 65 6e 74 2e 62 6f 64 79 2e 73 74 79 6c 65 2e 6f ent.body.style.o
0310: 76 65 72 66 6c 6f 77 3d 27 68 69 64 64 65 6e 27 verflow='hidden'
0320: 3b 22 20 6f 6e 6d 6f 75 73 65 6f 75 74 3d 22 64 ;" onmouseout="d
0330: 6f 63 75 6d 65 6e 74 2e 62 6f 64 79 2e 73 74 79 ocument.body.sty
0340: 6c 65 2e 6f 76 65 72 66 6c 6f 77 3d 27 61 75 74 le.overflow='aut
0350: 6f 27 3b 22 3e 0a 0a 20 20 20 20 3c 68 32 3e 4e o';">.. <h2>N
0360: 65 78 75 73 55 49 3c 2f 68 32 3e 0a 20 20 20 20 exusUI</h2>.
0370: 3c 61 20 68 72 65 66 3d 22 23 69 6e 74 72 6f 22 <a href="#intro"
0380: 3e 47 65 74 74 69 6e 67 20 53 74 61 72 74 65 64 >Getting Started
0390: 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c </a><br />. <
03a0: 61 20 68 72 65 66 3d 22 23 63 6f 6c 6f 72 73 22 a href="#colors"
03b0: 3e 43 68 61 6e 67 69 6e 67 20 43 6f 6c 6f 72 73 >Changing Colors
03c0: 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c </a><br />. <
03d0: 61 20 68 72 65 66 3d 22 23 72 61 63 6b 22 3e 43 a href="#rack">C
03e0: 72 65 61 74 69 6e 67 20 61 20 52 61 63 6b 3c 2f reating a Rack</
03f0: 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 a><br />. <a
0400: 68 72 65 66 3d 22 23 73 79 6e 63 22 3e 53 79 6e href="#sync">Syn
0410: 63 69 6e 67 20 4e 75 6d 62 65 72 20 42 6f 78 65 cing Number Boxe
0420: 73 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 s</a><br />..
0430: 20 3c 68 32 3e 49 6e 74 65 72 66 61 63 65 73 3c <h2>Interfaces<
0440: 2f 68 32 3e 0a 0a 20 20 20 20 3c 68 33 3e 43 6f /h2>.. <h3>Co
0450: 72 65 3c 2f 68 33 3e 0a 20 20 20 20 3c 61 20 68 re</h3>. <a h
0460: 72 65 66 3d 22 23 42 75 74 74 6f 6e 22 3e 42 75 ref="#Button">Bu
0470: 74 74 6f 6e 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 tton</a><br />.
0480: 20 20 20 3c 61 20 68 72 65 66 3d 22 23 44 69 61 <a href="#Dia
0490: 6c 22 3e 44 69 61 6c 3c 2f 61 3e 3c 62 72 20 2f l">Dial</a><br /
04a0: 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d 22 23 >. <a href="#
04b0: 4e 75 6d 62 65 72 22 3e 4e 75 6d 62 65 72 3c 2f Number">Number</
04c0: 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 a><br />. <a
04d0: 68 72 65 66 3d 22 23 50 6f 73 69 74 69 6f 6e 22 href="#Position"
04e0: 3e 50 6f 73 69 74 69 6f 6e 3c 2f 61 3e 3c 62 72 >Position</a><br
04f0: 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d />. <a href=
0500: 22 23 53 6c 69 64 65 72 22 3e 53 6c 69 64 65 72 "#Slider">Slider
0510: 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c </a><br />. <
0520: 61 20 68 72 65 66 3d 22 23 54 6f 67 67 6c 65 22 a href="#Toggle"
0530: 3e 54 6f 67 67 6c 65 3c 2f 61 3e 3c 62 72 20 2f >Toggle</a><br /
0540: 3e 0a 0a 20 20 20 20 3c 68 33 3e 47 65 6e 65 72 >.. <h3>Gener
0550: 61 6c 3c 2f 68 33 3e 0a 20 20 20 20 3c 61 20 68 al</h3>. <a h
0560: 72 65 66 3d 22 23 45 6e 76 65 6c 6f 70 65 22 3e ref="#Envelope">
0570: 45 6e 76 65 6c 6f 70 65 3c 2f 61 3e 3c 62 72 20 Envelope</a><br
0580: 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d 22 />. <a href="
0590: 23 4d 75 6c 74 69 73 6c 69 64 65 72 22 3e 4d 75 #Multislider">Mu
05a0: 6c 74 69 73 6c 69 64 65 72 3c 2f 61 3e 3c 62 72 ltislider</a><br
05b0: 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d />. <a href=
05c0: 22 23 50 69 61 6e 6f 22 3e 50 69 61 6e 6f 3c 2f "#Piano">Piano</
05d0: 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 a><br />. <a
05e0: 68 72 65 66 3d 22 23 52 61 64 69 6f 42 75 74 74 href="#RadioButt
05f0: 6f 6e 22 3e 52 61 64 69 6f 42 75 74 74 6f 6e 3c on">RadioButton<
0600: 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 /a><br />. <a
0610: 20 68 72 65 66 3d 22 23 53 65 6c 65 63 74 22 3e href="#Select">
0620: 53 65 6c 65 63 74 3c 2f 61 3e 3c 62 72 20 2f 3e Select</a><br />
0630: 0a 20 20 20 20 3c 21 2d 2d 20 20 3c 61 20 68 72 . <!-- <a hr
0640: 65 66 3d 22 23 52 61 6e 67 65 22 3e 72 61 6e 67 ef="#Range">rang
0650: 65 3c 2f 61 3e 3c 62 72 20 2f 3e 20 2d 2d 3e 0a e</a><br /> -->.
0660: 20 20 20 20 3c 61 20 68 72 65 66 3d 22 23 53 65 <a href="#Se
0670: 71 75 65 6e 63 65 72 22 3e 53 65 71 75 65 6e 63 quencer">Sequenc
0680: 65 72 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 er</a><br />.
0690: 20 3c 61 20 68 72 65 66 3d 22 23 54 65 78 74 42 <a href="#TextB
06a0: 75 74 74 6f 6e 22 3e 54 65 78 74 42 75 74 74 6f utton">TextButto
06b0: 6e 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 n</a><br />.
06c0: 3c 21 2d 2d 20 20 3c 61 20 68 72 65 66 3d 22 23 <!-- <a href="#
06d0: 57 61 76 65 66 6f 72 6d 22 3e 77 61 76 65 66 6f Waveform">wavefo
06e0: 72 6d 3c 2f 61 3e 3c 62 72 20 2f 3e 20 2d 2d 3e rm</a><br /> -->
06f0: 0a 0a 0a 20 20 20 20 3c 68 33 3e 4d 6f 62 69 6c ... <h3>Mobil
0700: 65 3c 2f 68 33 3e 0a 20 20 20 20 3c 61 20 68 72 e</h3>. <a hr
0710: 65 66 3d 22 23 54 69 6c 74 22 3e 54 69 6c 74 3c ef="#Tilt">Tilt<
0720: 2f 61 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 3c /a><br />.. <
0730: 68 33 3e 53 70 61 74 69 61 6c 69 7a 61 74 69 6f h3>Spatializatio
0740: 6e 3c 2f 68 33 3e 0a 20 20 20 20 3c 61 20 68 72 n</h3>. <a hr
0750: 65 66 3d 22 23 50 61 6e 22 3e 50 61 6e 3c 2f 61 ef="#Pan">Pan</a
0760: 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 68 ><br />. <a h
0770: 72 65 66 3d 22 23 50 61 6e 32 44 22 3e 50 61 6e ref="#Pan2D">Pan
0780: 32 44 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 0a 20 20 2D</a><br />..
0790: 20 20 3c 68 33 3e 56 69 73 75 61 6c 69 7a 61 74 <h3>Visualizat
07a0: 69 6f 6e 3c 2f 68 33 3e 0a 20 20 20 20 3c 61 20 ion</h3>. <a
07b0: 68 72 65 66 3d 22 23 4d 65 74 65 72 22 3e 4d 65 href="#Meter">Me
07c0: 74 65 72 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 ter</a><br />.
07d0: 20 20 3c 61 20 68 72 65 66 3d 22 23 4f 73 63 69 <a href="#Osci
07e0: 6c 6c 6f 73 63 6f 70 65 22 3e 4f 73 63 69 6c 6c lloscope">Oscill
07f0: 6f 73 63 6f 70 65 3c 2f 61 3e 3c 62 72 20 2f 3e oscope</a><br />
0800: 0a 20 20 20 20 3c 61 20 68 72 65 66 3d 22 23 53 . <a href="#S
0810: 70 65 63 74 72 6f 67 72 61 6d 22 3e 53 70 65 63 pectrogram">Spec
0820: 74 72 6f 67 72 61 6d 3c 2f 61 3e 3c 62 72 20 2f trogram</a><br /
0830: 3e 0a 0a 0a 20 20 20 20 3c 68 32 3e 54 75 6e 69 >... <h2>Tuni
0840: 6e 67 3c 2f 68 32 3e 0a 20 20 20 20 3c 61 20 68 ng</h2>. <a h
0850: 72 65 66 3d 22 23 74 75 6e 65 22 3e 54 75 6e 65 ref="#tune">Tune
0860: 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 </a><br />..
0870: 3c 68 32 3e 54 69 6d 69 6e 67 3c 2f 68 32 3e 0a <h2>Timing</h2>.
0880: 20 20 20 20 3c 61 20 68 72 65 66 3d 22 23 69 6e <a href="#in
0890: 74 65 72 76 61 6c 22 3e 49 6e 74 65 72 76 61 6c terval">Interval
08a0: 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 </a><br />..
08b0: 3c 68 32 3e 4d 6f 64 65 6c 73 3c 2f 68 32 3e 0a <h2>Models</h2>.
08c0: 20 20 20 20 3c 61 20 68 72 65 66 3d 22 23 63 6f <a href="#co
08d0: 75 6e 74 65 72 22 3e 43 6f 75 6e 74 65 72 3c 2f unter">Counter</
08e0: 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 a><br />. <a
08f0: 68 72 65 66 3d 22 23 73 65 71 75 65 6e 63 65 22 href="#sequence"
0900: 3e 53 65 71 75 65 6e 63 65 3c 2f 61 3e 3c 62 72 >Sequence</a><br
0910: 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d />. <a href=
0920: 22 23 64 72 75 6e 6b 22 3e 44 72 75 6e 6b 3c 2f "#drunk">Drunk</
0930: 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 a><br />. <a
0940: 68 72 65 66 3d 22 23 6d 61 74 72 69 78 22 3e 4d href="#matrix">M
0950: 61 74 72 69 78 3c 2f 61 3e 3c 62 72 20 2f 3e 0a atrix</a><br />.
0960: 0a 20 20 20 20 3c 68 32 3e 48 65 6c 70 65 72 73 . <h2>Helpers
0970: 3c 2f 68 32 3e 0a 20 20 20 20 3c 61 20 68 72 65 </h2>. <a hre
0980: 66 3d 22 23 72 69 22 3e 72 69 20 28 72 61 6e 64 f="#ri">ri (rand
0990: 6f 6d 20 69 6e 74 65 67 65 72 29 3c 2f 61 3e 3c om integer)</a><
09a0: 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 br />. <a hre
09b0: 66 3d 22 23 72 66 22 3e 72 66 20 28 72 61 6e 64 f="#rf">rf (rand
09c0: 6f 6d 20 66 6c 6f 61 74 29 3c 2f 61 3e 3c 62 72 om float)</a><br
09d0: 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d />. <a href=
09e0: 22 23 63 6c 69 70 22 3e 63 6c 69 70 3c 2f 61 3e "#clip">clip</a>
09f0: 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 <br />. <a hr
0a00: 65 66 3d 22 23 73 63 61 6c 65 22 3e 73 63 61 6c ef="#scale">scal
0a10: 65 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 e</a><br />.
0a20: 3c 61 20 68 72 65 66 3d 22 23 6d 74 6f 66 22 3e <a href="#mtof">
0a30: 6d 74 6f 66 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 mtof</a><br />.
0a40: 20 20 20 3c 61 20 68 72 65 66 3d 22 23 69 6e 74 <a href="#int
0a50: 65 72 70 22 3e 69 6e 74 65 72 70 3c 2f 61 3e 3c erp">interp</a><
0a60: 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 br />. <a hre
0a70: 66 3d 22 23 70 69 63 6b 22 3e 70 69 63 6b 3c 2f f="#pick">pick</
0a80: 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 61 20 a><br />. <a
0a90: 68 72 65 66 3d 22 23 6f 63 74 61 76 65 22 3e 6f href="#octave">o
0aa0: 63 74 61 76 65 3c 2f 61 3e 3c 62 72 20 2f 3e 0a ctave</a><br />.
0ab0: 20 20 20 20 3c 61 20 68 72 65 66 3d 22 23 64 69 <a href="#di
0ac0: 73 74 61 6e 63 65 22 3e 64 69 73 74 61 6e 63 65 stance">distance
0ad0: 3c 2f 61 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c </a><br />. <
0ae0: 61 20 68 72 65 66 3d 22 23 61 76 65 72 61 67 65 a href="#average
0af0: 22 3e 61 76 65 72 61 67 65 3c 2f 61 3e 3c 62 72 ">average</a><br
0b00: 20 2f 3e 0a 20 20 20 20 3c 61 20 68 72 65 66 3d />. <a href=
0b10: 22 23 63 6f 69 6e 22 3e 63 6f 69 6e 3c 2f 61 3e "#coin">coin</a>
0b20: 3c 62 72 20 2f 3e 0a 0a 20 20 3c 2f 64 69 76 3e <br />.. </div>
0b30: 0a 0a 20 20 3c 64 69 76 20 69 64 3d 22 74 75 74 .. <div id="tut
0b40: 6f 72 69 61 6c 22 20 63 6c 61 73 73 3d 22 74 75 orial" class="tu
0b50: 74 6f 72 69 61 6c 22 3e 0a 0a 20 20 20 20 3c 64 torial">.. <d
0b60: 69 76 20 69 64 3d 22 74 61 72 67 65 74 22 3e 3c iv id="target"><
0b70: 2f 64 69 76 3e 0a 0a 20 20 20 20 3c 73 63 72 69 /div>.. <scri
0b80: 70 74 20 69 64 3d 22 74 65 6d 70 6c 61 74 65 22 pt id="template"
0b90: 20 74 79 70 65 3d 22 78 2d 74 6d 70 6c 2d 6d 75 type="x-tmpl-mu
0ba0: 73 74 61 63 68 65 22 3e 0a 20 20 20 20 20 20 3c stache">. <
0bb0: 68 32 3e 7b 7b 20 6e 61 6d 65 20 7d 7d 3c 2f 68 h2>{{ name }}</h
0bc0: 32 3e 0a 0a 20 20 20 20 3c 64 69 76 20 63 6c 61 2>.. <div cla
0bd0: 73 73 3d 22 6f 76 65 72 76 69 65 77 22 20 3e 0a ss="overview" >.
0be0: 20 20 20 20 7b 7b 20 64 65 73 63 72 69 70 74 69 {{ descripti
0bf0: 6f 6e 20 7d 7d 0a 20 20 20 20 20 20 3c 62 72 20 on }}. <br
0c00: 2f 3e 0a 20 20 20 20 20 20 3c 64 69 76 20 69 64 />. <div id
0c10: 3d 22 64 65 6d 6f 22 3e 0a 20 20 20 20 20 20 20 ="demo">.
0c20: 20 7b 7b 7b 20 64 65 6d 6f 20 7d 7d 7d 0a 20 20 {{{ demo }}}.
0c30: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 3c </div>. <
0c40: 2f 64 69 76 3e 0a 0a 0a 20 20 20 20 7b 7b 23 65 /div>... {{#e
0c50: 78 61 6d 70 6c 65 73 7d 7d 0a 20 20 20 20 20 20 xamples}}.
0c60: 3c 64 69 76 20 63 6c 61 73 73 3d 22 63 6f 64 65 <div class="code
0c70: 2d 62 61 73 69 63 22 3e 0a 20 20 20 20 20 20 20 -basic">.
0c80: 20 7b 7b 74 69 74 6c 65 7d 7d 3a 0a 20 20 20 20 {{title}}:.
0c90: 20 20 20 20 3c 70 72 65 20 63 6c 61 73 73 3d 22 <pre class="
0ca0: 65 78 61 6d 70 6c 65 22 3e 3c 63 6f 64 65 20 63 example"><code c
0cb0: 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a lass="language-j
0cc0: 61 76 61 73 63 72 69 70 74 22 3e 7b 7b 20 64 65 avascript">{{ de
0cd0: 73 63 72 69 70 74 69 6f 6e 20 7d 7d 3c 2f 63 6f scription }}</co
0ce0: 64 65 3e 3c 2f 70 72 65 3e 0a 20 20 20 20 20 20 de></pre>.
0cf0: 3c 2f 64 69 76 3e 0a 20 20 20 20 7b 7b 2f 65 78 </div>. {{/ex
0d00: 61 6d 70 6c 65 73 7d 7d 0a 0a 0a 20 20 20 20 3c amples}}... <
0d10: 64 69 76 20 63 6c 61 73 73 3d 22 6f 75 74 70 75 div class="outpu
0d20: 74 22 3e 0a 20 20 20 20 20 20 3c 68 34 3e 45 76 t">. <h4>Ev
0d30: 65 6e 74 73 3c 2f 68 34 3e 0a 20 20 20 20 20 20 ents</h4>.
0d40: 7b 7b 20 23 6f 75 74 70 75 74 73 20 7d 7d 0a 20 {{ #outputs }}.
0d50: 20 20 20 20 20 20 20 3c 68 35 3e 7b 7b 7b 20 6e <h5>{{{ n
0d60: 61 6d 65 20 7d 7d 7d 3c 2f 68 35 3e 0a 20 20 20 ame }}}</h5>.
0d70: 20 20 20 20 20 7b 7b 7b 20 64 65 73 63 72 69 70 {{{ descrip
0d80: 74 69 6f 6e 20 7d 7d 7d 20 3c 62 72 20 2f 3e 0a tion }}} <br />.
0d90: 20 20 20 20 20 20 20 20 7b 7b 20 23 65 78 61 6d {{ #exam
0da0: 70 6c 65 20 7d 7d 0a 20 20 20 20 20 20 20 20 20 ple }}.
0db0: 20 3c 70 72 65 20 63 6c 61 73 73 3d 22 65 78 61 <pre class="exa
0dc0: 6d 70 6c 65 22 3e 3c 63 6f 64 65 20 63 6c 61 73 mple"><code clas
0dd0: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
0de0: 73 63 72 69 70 74 22 3e 7b 7b 20 65 78 61 6d 70 script">{{ examp
0df0: 6c 65 20 7d 7d 3c 2f 63 6f 64 65 3e 3c 2f 70 72 le }}</code></pr
0e00: 65 3e 0a 20 20 20 20 20 20 20 20 7b 7b 20 2f 65 e>. {{ /e
0e10: 78 61 6d 70 6c 65 20 7d 7d 0a 20 20 20 20 20 20 xample }}.
0e20: 7b 7b 20 2f 6f 75 74 70 75 74 73 20 7d 7d 0a 20 {{ /outputs }}.
0e30: 20 20 20 3c 2f 64 69 76 3e 0a 0a 0a 20 20 20 20 </div>...
0e40: 3c 68 34 3e 50 72 6f 70 65 72 74 69 65 73 20 26 <h4>Properties &
0e50: 20 4d 65 74 68 6f 64 73 3c 2f 68 34 3e 0a 0a 20 Methods</h4>..
0e60: 20 20 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 70 <div class="p
0e70: 72 6f 70 65 72 74 69 65 73 22 3e 0a 0a 20 20 20 roperties">..
0e80: 20 20 20 7b 7b 23 70 72 6f 70 65 72 74 69 65 73 {{#properties
0e90: 7d 7d 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20 }}. <div
0ea0: 63 6c 61 73 73 3d 22 70 72 6f 70 65 72 74 79 22 class="property"
0eb0: 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 64 69 76 >. <div
0ec0: 20 63 6c 61 73 73 3d 22 70 72 6f 70 65 72 74 79 class="property
0ed0: 2d 6e 61 6d 65 22 3e 7b 7b 20 6e 61 6d 65 20 7d -name">{{ name }
0ee0: 7d 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 }</div>.
0ef0: 20 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 70 72 <div class="pr
0f00: 6f 70 65 72 74 79 2d 74 79 70 65 22 3e 7b 7b 7b operty-type">{{{
0f10: 20 74 79 70 65 20 7d 7d 7d 3c 2f 64 69 76 3e 0a type }}}</div>.
0f20: 20 20 20 20 20 20 20 20 20 20 3c 64 69 76 20 63 <div c
0f30: 6c 61 73 73 3d 22 70 72 6f 70 65 72 74 79 2d 64 lass="property-d
0f40: 65 73 63 72 69 70 74 69 6f 6e 22 3e 7b 7b 7b 20 escription">{{{
0f50: 64 65 73 63 72 69 70 74 69 6f 6e 20 7d 7d 7d 3c description }}}<
0f60: 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 /div>.
0f70: 7b 7b 20 23 65 78 61 6d 70 6c 65 20 7d 7d 0a 20 {{ #example }}.
0f80: 20 20 20 20 20 20 20 20 20 20 20 3c 70 72 65 20 <pre
0f90: 63 6c 61 73 73 3d 22 65 78 61 6d 70 6c 65 20 70 class="example p
0fa0: 72 6f 70 65 72 74 79 2d 65 78 61 6d 70 6c 65 22 roperty-example"
0fb0: 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 ><code class="la
0fc0: 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 nguage-javascrip
0fd0: 74 22 3e 7b 7b 20 63 6f 64 65 20 7d 7d 3c 2f 63 t">{{ code }}</c
0fe0: 6f 64 65 3e 3c 2f 70 72 65 3e 0a 20 20 20 20 20 ode></pre>.
0ff0: 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 <div clas
1000: 73 3d 22 65 78 61 6d 70 6c 65 2d 74 6f 67 67 6c s="example-toggl
1010: 65 22 3e 45 78 61 6d 70 6c 65 3c 2f 64 69 76 3e e">Example</div>
1020: 0a 20 20 20 20 20 20 20 20 20 20 7b 7b 20 2f 65 . {{ /e
1030: 78 61 6d 70 6c 65 20 7d 7d 0a 20 20 20 20 20 20 xample }}.
1040: 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 7b </div>. {
1050: 7b 2f 70 72 6f 70 65 72 74 69 65 73 7d 7d 0a 0a {/properties}}..
1060: 20 20 20 20 3c 2f 64 69 76 3e 0a 0a 20 20 20 20 </div>..
1070: 3c 64 69 76 20 63 6c 61 73 73 3d 22 6d 65 74 68 <div class="meth
1080: 6f 64 73 22 3e 0a 0a 20 20 20 20 20 20 7b 7b 23 ods">.. {{#
1090: 6d 65 74 68 6f 64 73 7d 7d 0a 20 20 20 20 20 20 methods}}.
10a0: 20 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 6d 65 <div class="me
10b0: 74 68 6f 64 22 3e 0a 20 20 20 20 20 20 20 20 20 thod">.
10c0: 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 6d 65 74 <div class="met
10d0: 68 6f 64 2d 6e 61 6d 65 22 3e 7b 7b 20 6e 61 6d hod-name">{{ nam
10e0: 65 20 7d 7d 28 0a 20 20 20 20 20 20 20 20 20 20 e }}(.
10f0: 20 20 7b 7b 23 70 61 72 61 6d 65 74 65 72 73 7d {{#parameters}
1100: 7d 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 }.
1110: 7b 7b 6e 61 6d 65 7d 7d 7b 7b 5e 6c 61 73 74 7d {{name}}{{^last}
1120: 7d 2c 20 7b 7b 2f 6c 61 73 74 7d 7d 0a 20 20 20 }, {{/last}}.
1130: 20 20 20 20 20 20 20 20 20 7b 7b 2f 70 61 72 61 {{/para
1140: 6d 65 74 65 72 73 7d 7d 0a 20 20 20 20 20 20 20 meters}}.
1150: 20 20 20 29 3c 2f 64 69 76 3e 0a 20 20 20 20 20 )</div>.
1160: 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 3d <div class=
1170: 22 6d 65 74 68 6f 64 2d 64 65 73 63 72 69 70 74 "method-descript
1180: 69 6f 6e 22 3e 7b 7b 7b 20 64 65 73 63 72 69 70 ion">{{{ descrip
1190: 74 69 6f 6e 20 7d 7d 7d 3c 2f 64 69 76 3e 0a 20 tion }}}</div>.
11a0: 20 20 20 20 20 20 20 20 20 7b 7b 20 23 65 78 61 {{ #exa
11b0: 6d 70 6c 65 20 7d 7d 0a 20 20 20 20 20 20 20 20 mple }}.
11c0: 20 20 20 20 3c 70 72 65 20 63 6c 61 73 73 3d 22 <pre class="
11d0: 65 78 61 6d 70 6c 65 20 6d 65 74 68 6f 64 2d 65 example method-e
11e0: 78 61 6d 70 6c 65 22 3e 3c 63 6f 64 65 20 63 6c xample"><code cl
11f0: 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 ass="language-ja
1200: 76 61 73 63 72 69 70 74 22 3e 7b 7b 20 63 6f 64 vascript">{{ cod
1210: 65 20 7d 7d 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 e }}</code></pre
1220: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 >. <d
1230: 69 76 20 63 6c 61 73 73 3d 22 65 78 61 6d 70 6c iv class="exampl
1240: 65 2d 74 6f 67 67 6c 65 22 3e 45 78 61 6d 70 6c e-toggle">Exampl
1250: 65 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 e</div>.
1260: 20 20 7b 7b 20 2f 65 78 61 6d 70 6c 65 20 7d 7d {{ /example }}
1270: 0a 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a . </div>.
1280: 20 20 20 20 20 20 7b 7b 2f 6d 65 74 68 6f 64 73 {{/methods
1290: 7d 7d 0a 0a 20 20 20 20 3c 2f 64 69 76 3e 0a 0a }}.. </div>..
12a0: 0a 0a 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 .. <div class
12b0: 3d 22 65 78 61 6d 70 6c 65 73 22 3e 0a 0a 20 20 ="examples">..
12c0: 20 20 20 20 7b 7b 23 74 75 74 6f 72 69 61 6c 73 {{#tutorials
12d0: 7d 7d 0a 20 20 20 20 20 20 20 20 3c 64 69 76 20 }}. <div
12e0: 63 6c 61 73 73 3d 22 63 6f 64 65 70 65 6e 22 3e class="codepen">
12f0: 0a 20 20 20 20 20 20 20 20 20 20 3c 68 33 3e 45 . <h3>E
1300: 78 61 6d 70 6c 65 3a 20 7b 7b 6e 61 6d 65 7d 7d xample: {{name}}
1310: 3c 2f 68 33 3e 0a 20 20 20 20 20 20 20 20 20 20 </h3>.
1320: 7b 7b 7b 63 6f 64 65 70 65 6e 7d 7d 7d 0a 20 20 {{{codepen}}}.
1330: 20 20 20 20 20 20 20 20 7b 7b 64 65 73 63 72 69 {{descri
1340: 70 74 69 6f 6e 7d 7d 0a 20 20 20 20 20 20 20 20 ption}}.
1350: 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 7b 7b 2f </div>. {{/
1360: 74 75 74 6f 72 69 61 6c 73 7d 7d 0a 0a 20 20 20 tutorials}}..
1370: 20 3c 2f 64 69 76 3e 0a 0a 20 20 20 20 3c 2f 73 </div>.. </s
1380: 63 72 69 70 74 3e 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a cript>..........
1390: 0a 20 20 20 20 3c 73 63 72 69 70 74 20 69 64 3d . <script id=
13a0: 22 68 65 6c 70 65 72 2d 74 65 6d 70 6c 61 74 65 "helper-template
13b0: 22 20 74 79 70 65 3d 22 78 2d 74 6d 70 6c 2d 6d " type="x-tmpl-m
13c0: 75 73 74 61 63 68 65 22 3e 0a 0a 20 20 20 20 20 ustache">..
13d0: 20 3c 68 32 3e 48 65 6c 70 65 72 20 4d 65 74 68 <h2>Helper Meth
13e0: 6f 64 73 3c 2f 68 32 3e 0a 0a 20 20 20 20 20 20 ods</h2>..
13f0: 7b 7b 23 68 65 6c 70 65 72 73 7d 7d 0a 20 20 20 {{#helpers}}.
1400: 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 3d <div class=
1410: 22 6d 65 74 68 6f 64 22 20 69 64 3d 22 7b 7b 20 "method" id="{{
1420: 6e 61 6d 65 20 7d 7d 22 3e 0a 20 20 20 20 20 20 name }}">.
1430: 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73 3d 22 <div class="
1440: 6d 65 74 68 6f 64 2d 6e 61 6d 65 22 3e 7b 7b 20 method-name">{{
1450: 6e 61 6d 65 20 7d 7d 28 0a 20 20 20 20 20 20 20 name }}(.
1460: 20 20 20 20 20 7b 7b 23 70 61 72 61 6d 65 74 65 {{#paramete
1470: 72 73 7d 7d 0a 20 20 20 20 20 20 20 20 20 20 20 rs}}.
1480: 20 20 20 7b 7b 6e 61 6d 65 7d 7d 7b 7b 5e 6c 61 {{name}}{{^la
1490: 73 74 7d 7d 2c 20 7b 7b 2f 6c 61 73 74 7d 7d 0a st}}, {{/last}}.
14a0: 20 20 20 20 20 20 20 20 20 20 20 20 7b 7b 2f 70 {{/p
14b0: 61 72 61 6d 65 74 65 72 73 7d 7d 0a 20 20 20 20 arameters}}.
14c0: 20 20 20 20 20 20 29 3c 2f 64 69 76 3e 0a 20 20 )</div>.
14d0: 20 20 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 <div cla
14e0: 73 73 3d 22 6d 65 74 68 6f 64 2d 64 65 73 63 72 ss="method-descr
14f0: 69 70 74 69 6f 6e 22 3e 7b 7b 7b 20 64 65 73 63 iption">{{{ desc
1500: 72 69 70 74 69 6f 6e 20 7d 7d 7d 3c 2f 64 69 76 ription }}}</div
1510: 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 74 61 62 >. <tab
1520: 6c 65 20 73 74 79 6c 65 3d 22 70 61 64 64 69 6e le style="paddin
1530: 67 3a 20 35 70 78 22 3e 0a 20 20 20 20 20 20 20 g: 5px">.
1540: 20 20 20 20 20 7b 7b 23 70 61 72 61 6d 65 74 65 {{#paramete
1550: 72 73 7d 7d 0a 20 20 20 20 20 20 20 20 20 20 20 rs}}.
1560: 20 20 20 3c 74 72 3e 0a 20 20 20 20 20 20 20 20 <tr>.
1570: 20 20 20 20 20 20 20 20 20 20 3c 74 64 20 73 74 <td st
1580: 79 6c 65 3d 22 70 61 64 64 69 6e 67 3a 35 70 78 yle="padding:5px
1590: 20 31 30 70 78 22 3e 0a 20 20 20 20 20 20 20 20 10px">.
15a0: 20 20 20 20 20 20 20 20 20 20 20 20 3c 62 3e 7b <b>{
15b0: 7b 6e 61 6d 65 7d 7d 3a 3c 2f 62 3e 0a 20 20 20 {name}}:</b>.
15c0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 3c <
15d0: 2f 74 64 3e 0a 20 20 20 20 20 20 20 20 20 20 20 /td>.
15e0: 20 20 20 20 20 20 20 3c 74 64 20 73 74 79 6c 65 <td style
15f0: 3d 22 70 61 64 64 69 6e 67 3a 35 70 78 20 31 30 ="padding:5px 10
1600: 70 78 22 3e 0a 20 20 20 20 20 20 20 20 20 20 20 px">.
1610: 20 20 20 20 20 20 20 20 20 3c 69 3e 7b 7b 74 79 <i>{{ty
1620: 70 65 7d 7d 3c 2f 69 3e 0a 20 20 20 20 20 20 20 pe}}</i>.
1630: 20 20 20 20 20 20 20 20 20 20 20 3c 2f 74 64 3e </td>
1640: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
1650: 20 20 20 3c 74 64 20 73 74 79 6c 65 3d 22 70 61 <td style="pa
1660: 64 64 69 6e 67 3a 35 70 78 20 31 30 70 78 22 3e dding:5px 10px">
1670: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
1680: 20 20 20 20 20 7b 7b 64 65 73 63 72 69 70 74 69 {{descripti
1690: 6f 6e 7d 7d 0a 20 20 20 20 20 20 20 20 20 20 20 on}}.
16a0: 20 20 20 20 20 20 20 3c 2f 74 64 3e 0a 20 20 20 </td>.
16b0: 20 20 20 20 20 20 20 20 20 20 20 3c 2f 74 72 3e </tr>
16c0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 7b 7b 2f . {{/
16d0: 70 61 72 61 6d 65 74 65 72 73 7d 7d 0a 20 20 20 parameters}}.
16e0: 20 20 20 20 20 20 20 3c 2f 74 61 62 6c 65 3e 0a </table>.
16f0: 20 20 20 20 20 20 20 20 20 20 3c 70 72 65 20 63 <pre c
1700: 6c 61 73 73 3d 22 65 78 61 6d 70 6c 65 22 3e 3c lass="example"><
1710: 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 code class="lang
1720: 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 uage-javascript"
1730: 3e 7b 7b 20 65 78 61 6d 70 6c 65 20 7d 7d 3c 2f >{{ example }}</
1740: 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 20 20 20 20 code></pre>.
1750: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 20 </div>.
1760: 20 7b 7b 2f 68 65 6c 70 65 72 73 7d 7d 0a 0a 20 {{/helpers}}..
1770: 20 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 20 2f <br /><br /
1780: 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 ><br /><br /><br
1790: 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c /><br /><br /><
17a0: 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f br /><br /><br /
17b0: 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 ><br /><br /><br
17c0: 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c /><br /><br /><
17d0: 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f br /><br /><br /
17e0: 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 ><br /><br /><br
17f0: 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c /><br /><br /><
1800: 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f br /><br /><br /
1810: 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 ><br /><br /><br
1820: 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c /><br /><br /><
1830: 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 20 2f br /><br /><br /
1840: 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 3c 2f 73 ><br />.. </s
1850: 63 72 69 70 74 3e 0a 0a 20 20 3c 2f 64 69 76 3e cript>.. </div>
1860: 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 20 20 3c ............. <
1870: 21 2d 2d 0a 0a 20 20 47 45 54 54 49 4e 47 20 53 !--.. GETTING S
1880: 54 41 52 54 45 44 0a 0a 20 20 2d 2d 3e 0a 0a 20 TARTED.. -->..
1890: 20 3c 64 69 76 20 69 64 3d 22 69 6e 74 72 6f 22 <div id="intro"
18a0: 20 63 6c 61 73 73 3d 22 63 75 73 74 6f 6d 2d 74 class="custom-t
18b0: 75 74 6f 72 69 61 6c 22 20 73 74 79 6c 65 3d 22 utorial" style="
18c0: 64 69 73 70 6c 61 79 3a 6e 6f 6e 65 22 3e 0a 20 display:none">.
18d0: 20 20 20 26 6e 62 73 70 3b 0a 20 20 20 20 3c 68 . <h
18e0: 31 20 73 74 79 6c 65 3d 22 6d 61 72 67 69 6e 3a 1 style="margin:
18f0: 20 35 70 78 20 61 75 74 6f 3b 77 69 64 74 68 3a 5px auto;width:
1900: 31 30 30 25 3b 66 6f 6e 74 2d 73 69 7a 65 3a 32 100%;font-size:2
1910: 37 70 74 3b 66 6f 6e 74 2d 77 65 69 67 68 74 3a 7pt;font-weight:
1920: 37 30 30 3b 22 3e 4e 65 78 75 73 55 49 3c 2f 68 700;">NexusUI</h
1930: 31 3e 0a 20 20 20 20 3c 68 32 20 73 74 79 6c 65 1>. <h2 style
1940: 3d 22 6d 61 72 67 69 6e 3a 20 31 30 70 78 20 61 ="margin: 10px a
1950: 75 74 6f 20 30 70 78 3b 77 69 64 74 68 3a 31 30 uto 0px;width:10
1960: 30 25 3b 66 6f 6e 74 2d 73 69 7a 65 3a 31 38 70 0%;font-size:18p
1970: 74 3b 66 6f 6e 74 2d 77 65 69 67 68 74 3a 6e 6f t;font-weight:no
1980: 72 6d 61 6c 22 3e 57 65 62 20 41 75 64 69 6f 20 rmal">Web Audio
1990: 49 6e 74 65 72 66 61 63 65 73 3c 2f 68 32 3e 0a Interfaces</h2>.
19a0: 20 20 20 20 3c 68 33 20 73 74 79 6c 65 3d 22 6d <h3 style="m
19b0: 61 72 67 69 6e 3a 20 31 30 70 78 20 61 75 74 6f argin: 10px auto
19c0: 20 30 70 78 3b 77 69 64 74 68 3a 31 30 30 25 3b 0px;width:100%;
19d0: 66 6f 6e 74 2d 73 69 7a 65 3a 31 34 70 74 3b 66 font-size:14pt;f
19e0: 6f 6e 74 2d 77 65 69 67 68 74 3a 6e 6f 72 6d 61 ont-weight:norma
19f0: 6c 22 3e 56 65 72 73 69 6f 6e 20 32 3c 2f 68 33 l">Version 2</h3
1a00: 3e 0a 0a 20 20 20 20 3c 64 69 76 20 73 74 79 6c >.. <div styl
1a10: 65 3d 22 6d 61 72 67 69 6e 3a 30 70 78 20 61 75 e="margin:0px au
1a20: 74 6f 22 3e 0a 0a 20 20 20 20 20 20 3c 64 69 76 to">.. <div
1a30: 20 69 64 3d 22 73 70 6c 61 73 68 2d 64 65 6d 6f id="splash-demo
1a40: 22 20 73 74 79 6c 65 3d 22 77 69 64 74 68 3a 34 " style="width:4
1a50: 30 30 70 78 3b 74 65 78 74 2d 61 6c 69 67 6e 3a 00px;text-align:
1a60: 63 65 6e 74 65 72 3b 6d 61 72 67 69 6e 3a 30 20 center;margin:0
1a70: 61 75 74 6f 22 3e 0a 20 20 20 20 20 20 3c 2f 64 auto">. </d
1a80: 69 76 3e 0a 0a 0a 20 20 20 20 20 20 3c 70 20 63 iv>... <p c
1a90: 6c 61 73 73 3d 22 6c 69 62 2d 6f 76 65 72 76 69 lass="lib-overvi
1aa0: 65 77 22 3e 0a 20 20 20 20 20 20 20 20 4e 65 78 ew">. Nex
1ab0: 75 73 55 49 20 69 73 20 61 20 63 6f 6c 6c 65 63 usUI is a collec
1ac0: 74 69 6f 6e 20 6f 66 20 48 54 4d 4c 35 20 69 6e tion of HTML5 in
1ad0: 74 65 72 66 61 63 65 73 20 61 6e 64 20 4a 61 76 terfaces and Jav
1ae0: 61 73 63 72 69 70 74 20 68 65 6c 70 65 72 20 66 ascript helper f
1af0: 75 6e 63 74 69 6f 6e 73 20 74 6f 20 61 73 73 69 unctions to assi
1b00: 73 74 20 77 69 74 68 20 62 75 69 6c 64 69 6e 67 st with building
1b10: 20 77 65 62 20 61 75 64 69 6f 20 69 6e 73 74 72 web audio instr
1b20: 75 6d 65 6e 74 73 20 69 6e 20 74 68 65 20 62 72 uments in the br
1b30: 6f 77 73 65 72 2e 0a 20 20 20 20 20 20 3c 2f 70 owser.. </p
1b40: 3e 0a 0a 20 20 20 20 20 20 3c 70 20 63 6c 61 73 >.. <p clas
1b50: 73 3d 22 6c 69 62 2d 6f 76 65 72 76 69 65 77 22 s="lib-overview"
1b60: 3e 0a 20 20 20 20 20 20 20 20 49 6e 20 61 64 64 >. In add
1b70: 69 74 69 6f 6e 20 74 6f 20 69 6e 74 65 72 66 61 ition to interfa
1b80: 63 65 73 2c 20 74 68 65 20 74 6f 6f 6c 6b 69 74 ces, the toolkit
1b90: 20 63 6f 6e 74 61 69 6e 73 20 73 6f 6d 65 20 68 contains some h
1ba0: 65 6c 70 65 72 73 20 66 6f 72 20 74 75 6e 69 6e elpers for tunin
1bb0: 67 20 61 6e 64 20 74 69 6d 69 6e 67 2e 20 49 74 g and timing. It
1bc0: 20 64 6f 65 73 20 6e 6f 74 20 70 72 6f 76 69 64 does not provid
1bd0: 65 20 61 6e 79 20 73 6f 75 6e 64 2d 6d 61 6b 69 e any sound-maki
1be0: 6e 67 20 63 61 70 61 62 69 6c 69 74 69 65 73 20 ng capabilities
1bf0: e2 80 93 e2 80 93 20 66 6f 72 20 74 68 61 74 2c ...... for that,
1c00: 20 63 68 65 63 6b 20 6f 75 74 20 3c 61 20 68 72 check out <a hr
1c10: 65 66 3d 22 68 74 74 70 3a 2f 2f 74 6f 6e 65 6a ef="http://tonej
1c20: 73 2e 67 69 74 68 75 62 2e 69 6f 22 20 74 61 72 s.github.io" tar
1c30: 67 65 74 3d 22 62 6c 61 6e 6b 22 3e 54 6f 6e 65 get="blank">Tone
1c40: 2e 6a 73 3c 2f 61 3e 2c 20 3c 61 20 68 72 65 66 .js</a>, <a href
1c50: 3d 22 68 74 74 70 73 3a 2f 2f 67 69 74 68 75 62 ="https://github
1c60: 2e 63 6f 6d 2f 73 65 62 70 69 71 2f 57 65 62 50 .com/sebpiq/WebP
1c70: 64 22 20 74 61 72 67 65 74 3d 22 62 6c 61 6e 6b d" target="blank
1c80: 22 3e 57 65 62 50 44 3c 2f 61 3e 2c 20 3c 61 0a ">WebPD</a>, <a.
1c90: 20 20 20 20 20 20 20 20 20 20 68 72 65 66 3d 22 href="
1ca0: 68 74 74 70 73 3a 2f 2f 67 69 74 68 75 62 2e 63 https://github.c
1cb0: 6f 6d 2f 63 68 61 72 6c 69 65 72 6f 62 65 72 74 om/charlierobert
1cc0: 73 2f 67 69 62 62 65 72 2e 61 75 64 69 6f 2e 6c s/gibber.audio.l
1cd0: 69 62 22 20 74 61 72 67 65 74 3d 22 62 6c 61 6e ib" target="blan
1ce0: 6b 22 3e 47 69 62 62 65 72 2e 6c 69 62 3c 2f 61 k">Gibber.lib</a
1cf0: 3e 2c 20 6f 72 20 74 68 65 20 3c 61 20 68 72 65 >, or the <a hre
1d00: 66 3d 22 68 74 74 70 73 3a 2f 2f 64 65 76 65 6c f="https://devel
1d10: 6f 70 65 72 2e 6d 6f 7a 69 6c 6c 61 2e 6f 72 67 oper.mozilla.org
1d20: 2f 65 6e 2d 55 53 2f 64 6f 63 73 2f 57 65 62 2f /en-US/docs/Web/
1d30: 41 50 49 2f 57 65 62 5f 41 75 64 69 6f 5f 41 50 API/Web_Audio_AP
1d40: 49 22 20 74 61 72 67 65 74 3d 22 62 6c 61 6e 6b I" target="blank
1d50: 22 3e 57 65 62 20 41 75 64 69 6f 20 41 50 49 3c ">Web Audio API<
1d60: 2f 61 3e 2e 0a 20 20 20 20 20 20 3c 2f 70 3e 0a /a>.. </p>.
1d70: 0a 20 20 20 20 20 20 3c 70 20 63 6c 61 73 73 3d . <p class=
1d80: 22 6c 69 62 2d 6f 76 65 72 76 69 65 77 22 3e 0a "lib-overview">.
1d90: 20 20 20 20 20 20 20 20 54 68 69 73 20 74 6f 6f This too
1da0: 6c 6b 69 74 20 69 73 20 64 65 73 69 67 6e 65 64 lkit is designed
1db0: 20 74 6f 20 68 65 6c 70 20 79 6f 75 20 72 61 70 to help you rap
1dc0: 69 64 6c 79 20 70 72 6f 74 6f 74 79 70 65 20 79 idly prototype y
1dd0: 6f 75 72 20 6d 75 73 69 63 61 6c 20 69 64 65 61 our musical idea
1de0: 73 2e 20 49 74 20 69 73 20 6c 61 63 6b 69 6e 67 s. It is lacking
1df0: 20 73 6f 6d 65 20 66 65 61 74 75 72 65 73 20 77 some features w
1e00: 68 69 63 68 20 77 6f 75 6c 64 20 62 65 20 75 73 hich would be us
1e10: 65 66 75 6c 20 66 6f 72 20 70 72 6f 64 75 63 74 eful for product
1e20: 69 6f 6e 20 e2 80 93 e2 80 93 20 66 6f 72 20 65 ion ...... for e
1e30: 78 61 6d 70 6c 65 2c 20 74 68 65 73 65 20 69 6e xample, these in
1e40: 74 65 72 66 61 63 65 73 20 61 72 65 20 3c 62 3e terfaces are <b>
1e50: 6e 6f 74 20 72 65 73 70 6f 6e 73 69 76 65 3c 2f not responsive</
1e60: 62 3e 20 28 74 68 65 79 20 64 6f 20 6e 6f 74 20 b> (they do not
1e70: 75 6e 64 65 72 73 74 61 6e 64 20 70 65 72 63 65 understand perce
1e80: 6e 74 61 67 65 20 77 69 64 74 68 73 20 61 6e 64 ntage widths and
1e90: 20 68 65 69 67 68 74 73 29 2e 20 4e 65 78 75 73 heights). Nexus
1ea0: 55 49 20 69 73 20 61 6e 20 6f 6e 67 6f 69 6e 67 UI is an ongoing
1eb0: 20 6f 70 65 6e 2d 73 6f 75 72 63 65 0a 20 20 20 open-source.
1ec0: 20 20 20 20 20 70 72 6f 6a 65 63 74 3b 20 70 6c project; pl
1ed0: 65 61 73 65 20 67 65 74 20 69 6e 20 74 6f 75 63 ease get in touc
1ee0: 68 20 6f 6e 20 47 69 74 48 75 62 20 69 66 20 79 h on GitHub if y
1ef0: 6f 75 20 77 6f 75 6c 64 20 6c 69 6b 65 20 74 6f ou would like to
1f00: 20 63 6f 6e 74 72 69 62 75 74 65 2e 0a 20 20 20 contribute..
1f10: 20 20 20 3c 2f 70 3e 0a 0a 0a 20 20 20 20 3c 2f </p>... </
1f20: 64 69 76 3e 0a 0a 20 20 20 20 3c 68 35 3e 53 65 div>.. <h5>Se
1f30: 74 75 70 3c 2f 68 35 3e 0a 0a 20 20 20 20 3c 70 tup</h5>.. <p
1f40: 3e 0a 20 20 20 20 20 20 44 6f 77 6e 6c 6f 61 64 >. Download
1f50: 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a <a href="https:
1f60: 2f 2f 63 64 6e 2e 6a 73 64 65 6c 69 76 72 2e 6e //cdn.jsdelivr.n
1f70: 65 74 2f 6e 70 6d 2f 6e 65 78 75 73 75 69 40 6c et/npm/nexusui@l
1f80: 61 74 65 73 74 2f 64 69 73 74 2f 4e 65 78 75 73 atest/dist/Nexus
1f90: 55 49 2e 6a 73 22 20 64 6f 77 6e 6c 6f 61 64 3e UI.js" download>
1fa0: 4e 65 78 75 73 55 49 2e 6a 73 3c 2f 61 3e 2e 20 NexusUI.js</a>.
1fb0: 3c 62 72 20 2f 3e 0a 20 20 20 20 20 20 28 54 68 <br />. (Th
1fc0: 65 20 6c 69 6e 6b 20 67 72 61 62 73 20 74 68 65 e link grabs the
1fd0: 20 6c 61 74 65 73 74 20 76 65 72 73 69 6f 6e 20 latest version
1fe0: 6f 66 20 74 68 65 20 66 69 6c 65 20 64 69 72 65 of the file dire
1ff0: 63 74 6c 79 20 66 72 6f 6d 20 6f 75 72 20 4e 50 ctly from our NP
2000: 4d 2e 29 0a 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 M.). </p>..
2010: 20 20 3c 70 3e 0a 20 20 20 20 20 20 4f 72 20 61 <p>. Or a
2020: 63 63 65 73 73 20 6f 6e 20 61 20 43 44 4e 20 69 ccess on a CDN i
2030: 66 20 79 6f 75 20 77 61 6e 74 20 61 20 68 6f 73 f you want a hos
2040: 74 65 64 20 66 69 6c 65 3a 0a 20 20 20 20 3c 2f ted file:. </
2050: 70 3e 0a 20 20 20 20 3c 75 6c 3e 0a 20 20 20 20 p>. <ul>.
2060: 20 20 3c 6c 69 3e 3c 61 20 68 72 65 66 3d 22 68 <li><a href="h
2070: 74 74 70 73 3a 2f 2f 63 64 6e 2e 6a 73 64 65 6c ttps://cdn.jsdel
2080: 69 76 72 2e 6e 65 74 2f 6e 70 6d 2f 6e 65 78 75 ivr.net/npm/nexu
2090: 73 75 69 40 6c 61 74 65 73 74 2f 64 69 73 74 2f sui@latest/dist/
20a0: 4e 65 78 75 73 55 49 2e 6a 73 22 3e 44 65 76 65 NexusUI.js">Deve
20b0: 6c 6f 70 6d 65 6e 74 3c 2f 61 3e 3c 2f 6c 69 3e lopment</a></li>
20c0: 0a 20 20 20 20 20 20 3c 6c 69 3e 3c 61 20 68 72 . <li><a hr
20d0: 65 66 3d 22 68 74 74 70 73 3a 2f 2f 63 64 6e 2e ef="https://cdn.
20e0: 6a 73 64 65 6c 69 76 72 2e 6e 65 74 2f 6e 70 6d jsdelivr.net/npm
20f0: 2f 6e 65 78 75 73 75 69 40 6c 61 74 65 73 74 2f /nexusui@latest/
2100: 64 69 73 74 2f 4e 65 78 75 73 55 49 2e 6d 69 6e dist/NexusUI.min
2110: 2e 6a 73 22 3e 50 72 6f 64 75 63 74 69 6f 6e 3c .js">Production<
2120: 2f 61 3e 3c 2f 6c 69 3e 0a 20 20 20 20 3c 2f 75 /a></li>. </u
2130: 6c 3e 0a 0a 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 l>.... <p>.
2140: 20 20 20 20 4c 69 6e 6b 20 74 6f 20 4e 65 78 75 Link to Nexu
2150: 73 55 49 2e 6a 73 20 69 6e 20 79 6f 75 72 20 48 sUI.js in your H
2160: 54 4d 4c 20 66 69 6c 65 2e 0a 20 20 20 20 3c 2f TML file.. </
2170: 70 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f p>.. <pre><co
2180: 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 de class="langua
2190: 67 65 2d 68 74 6d 6c 22 3e 0a 26 6c 74 3b 68 74 ge-html">.<ht
21a0: 6d 6c 26 67 74 3b 0a 20 20 26 6c 74 3b 68 65 61 ml>. <hea
21b0: 64 26 67 74 3b 0a 20 20 20 20 26 6c 74 3b 73 63 d>. <sc
21c0: 72 69 70 74 20 73 72 63 3d 22 70 61 74 68 2f 74 ript src="path/t
21d0: 6f 2f 4e 65 78 75 73 55 49 2e 6a 73 22 26 67 74 o/NexusUI.js">
21e0: 3b 26 6c 74 3b 2f 73 63 72 69 70 74 26 67 74 3b ;</script>
21f0: 0a 20 20 26 6c 74 3b 2f 68 65 61 64 26 67 74 3b . </head>
2200: 0a 20 20 26 6c 74 3b 62 6f 64 79 26 67 74 3b 0a . <body>.
2210: 0a 20 20 26 6c 74 3b 2f 62 6f 64 79 26 67 74 3b . </body>
2220: 0a 26 6c 74 3b 2f 68 74 6d 6c 26 67 74 3b 0a 20 .</html>.
2230: 20 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 </code></p
2240: 72 65 3e 0a 0a 20 20 20 20 3c 68 35 3e 43 72 65 re>.. <h5>Cre
2250: 61 74 69 6e 67 20 61 6e 20 49 6e 74 65 72 66 61 ating an Interfa
2260: 63 65 3c 2f 68 35 3e 0a 0a 20 20 20 20 3c 70 3e ce</h5>.. <p>
2270: 0a 20 20 20 20 20 20 59 6f 75 20 63 61 6e 20 74 . You can t
2280: 72 61 6e 73 66 6f 72 6d 20 72 65 67 75 6c 61 72 ransform regular
2290: 20 48 54 4d 4c 20 65 6c 65 6d 65 6e 74 73 20 69 HTML elements i
22a0: 6e 74 6f 20 4e 65 78 75 73 55 49 20 69 6e 74 65 nto NexusUI inte
22b0: 72 66 61 63 65 73 20 28 26 6c 74 3b 64 69 76 26 rfaces (<div&
22c0: 67 74 3b 20 69 73 20 72 65 63 6f 6d 6d 65 6e 64 gt; is recommend
22d0: 65 64 29 2e 20 42 79 20 64 65 66 61 75 6c 74 2c ed). By default,
22e0: 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 20 63 the interface c
22f0: 6f 6d 70 6f 6e 65 6e 74 20 77 69 6c 6c 20 61 64 omponent will ad
2300: 6f 70 74 20 74 68 65 20 68 65 69 67 68 74 20 61 opt the height a
2310: 6e 64 20 77 69 64 74 68 20 6f 66 20 74 68 65 20 nd width of the
2320: 74 61 72 67 65 74 20 65 6c 65 6d 65 6e 74 20 61 target element a
2330: 73 20 73 70 65 63 69 66 69 65 64 20 69 6e 20 79 s specified in y
2340: 6f 75 72 20 43 53 53 20 6f 72 20 69 6e 20 74 68 our CSS or in th
2350: 65 20 65 6c 65 6d 65 6e 74 27 73 20 73 74 79 6c e element's styl
2360: 65 2e 20 41 6c 74 65 72 6e 61 74 69 76 65 6c 79 e. Alternatively
2370: 2c 20 79 6f 75 20 63 61 6e 20 73 70 65 63 69 66 , you can specif
2380: 79 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 20 y the interface
2390: 63 6f 6d 70 6f 6e 65 6e 74 27 73 0a 20 20 20 20 component's.
23a0: 20 20 73 69 7a 65 20 69 6e 20 4a 61 76 61 53 63 size in JavaSc
23b0: 72 69 70 74 20 77 68 65 6e 20 79 6f 75 20 63 72 ript when you cr
23c0: 65 61 74 65 20 69 74 20 28 73 65 65 20 74 68 65 eate it (see the
23d0: 20 41 50 49 20 66 6f 72 20 65 61 63 68 20 69 6e API for each in
23e0: 74 65 72 66 61 63 65 29 2e 0a 20 20 20 20 3c 2f terface).. </
23f0: 70 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f p>.. <pre><co
2400: 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 de class="langua
2410: 67 65 2d 68 74 6d 6c 22 3e 0a 26 6c 74 3b 68 74 ge-html">.<ht
2420: 6d 6c 26 67 74 3b 0a 20 20 26 6c 74 3b 68 65 61 ml>. <hea
2430: 64 26 67 74 3b 0a 20 20 20 20 26 6c 74 3b 73 63 d>. <sc
2440: 72 69 70 74 20 73 72 63 3d 22 70 61 74 68 2f 74 ript src="path/t
2450: 6f 2f 4e 65 78 75 73 55 49 2e 6a 73 22 26 67 74 o/NexusUI.js">
2460: 3b 26 6c 74 3b 2f 73 63 72 69 70 74 26 67 74 3b ;</script>
2470: 0a 20 20 26 6c 74 3b 2f 68 65 61 64 26 67 74 3b . </head>
2480: 0a 20 20 26 6c 74 3b 62 6f 64 79 26 67 74 3b 0a . <body>.
2490: 0a 20 20 20 20 26 6c 74 3b 64 69 76 20 69 64 3d . <div id=
24a0: 22 64 69 61 6c 22 26 67 74 3b 26 6c 74 3b 2f 64 "dial"></d
24b0: 69 76 26 67 74 3b 0a 0a 20 20 20 20 26 6c 74 3b iv>.. <
24c0: 73 63 72 69 70 74 26 67 74 3b 0a 20 20 20 20 20 script>.
24d0: 20 76 61 72 20 64 69 61 6c 20 3d 20 6e 65 77 20 var dial = new
24e0: 4e 65 78 75 73 2e 44 69 61 6c 28 27 23 64 69 61 Nexus.Dial('#dia
24f0: 6c 27 29 0a 20 20 20 20 26 6c 74 3b 2f 73 63 72 l'). </scr
2500: 69 70 74 26 67 74 3b 0a 0a 20 20 26 6c 74 3b 2f ipt>.. </
2510: 62 6f 64 79 26 67 74 3b 0a 26 6c 74 3b 2f 68 74 body>.</ht
2520: 6d 6c 26 67 74 3b 0a 20 20 20 20 20 20 20 3c 2f ml>. </
2530: 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 code></pre>..
2540: 20 3c 70 3e 0a 20 20 20 20 20 20 59 6f 75 20 63 <p>. You c
2550: 61 6e 20 61 6c 73 6f 20 74 72 61 6e 73 66 6f 72 an also transfor
2560: 6d 20 6d 61 6e 79 20 65 6c 65 6d 65 6e 74 73 20 m many elements
2570: 61 74 20 6f 6e 63 65 20 62 79 20 3c 61 20 68 72 at once by <a hr
2580: 65 66 3d 22 23 72 61 63 6b 22 3e 63 72 65 61 74 ef="#rack">creat
2590: 69 6e 67 20 61 20 72 61 63 6b 3c 2f 61 3e 2e 0a ing a rack</a>..
25a0: 20 20 20 20 3c 2f 70 3e 0a 0a 0a 0a 0a 20 20 20 </p>.....
25b0: 20 3c 68 35 3e 44 79 6e 61 6d 69 63 61 6c 6c 79 <h5>Dynamically
25c0: 20 41 64 64 69 6e 67 20 61 6e 64 20 52 65 6d 6f Adding and Remo
25d0: 76 69 6e 67 20 49 6e 74 65 72 66 61 63 65 73 3c ving Interfaces<
25e0: 2f 68 35 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 /h5>.. <p>.
25f0: 20 20 20 20 59 6f 75 20 63 61 6e 20 61 6c 73 6f You can also
2600: 20 64 79 6e 61 6d 69 63 61 6c 6c 79 20 61 64 64 dynamically add
2610: 20 69 6e 74 65 72 66 61 63 65 73 20 74 6f 20 79 interfaces to y
2620: 6f 75 72 20 70 61 67 65 20 61 74 20 61 6e 79 20 our page at any
2630: 70 6f 69 6e 74 20 75 73 69 6e 67 20 3c 62 3e 4e point using <b>N
2640: 65 78 75 73 2e 41 64 64 3c 2f 62 3e 2e 20 54 68 exus.Add</b>. Th
2650: 69 73 20 6c 65 74 73 20 79 6f 75 20 61 64 64 20 is lets you add
2660: 6d 61 6e 79 20 69 6e 74 65 72 66 61 63 65 73 20 many interfaces
2670: 74 6f 20 74 68 65 20 73 61 6d 65 20 70 61 72 65 to the same pare
2680: 6e 74 20 65 6c 65 6d 65 6e 74 2e 20 59 6f 75 20 nt element. You
2690: 63 61 6e 20 6c 61 74 65 72 20 72 65 6d 6f 76 65 can later remove
26a0: 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 20 75 the interface u
26b0: 73 69 6e 67 20 74 68 65 20 69 6e 74 65 72 66 61 sing the interfa
26c0: 63 65 27 73 20 3c 62 3e 2e 64 65 73 74 72 6f 79 ce's <b>.destroy
26d0: 28 29 3c 2f 62 3e 20 6d 65 74 68 6f 64 2e 0a 20 ()</b> method..
26e0: 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 </p>.. <pr
26f0: 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c e><code class="l
2700: 61 6e 67 75 61 67 65 2d 68 74 6d 6c 22 3e 0a 26 anguage-html">.&
2710: 6c 74 3b 68 74 6d 6c 26 67 74 3b 0a 20 26 6c 74 lt;html>. <
2720: 3b 68 65 61 64 26 67 74 3b 0a 20 20 20 26 6c 74 ;head>. <
2730: 3b 73 63 72 69 70 74 20 73 72 63 3d 22 70 61 74 ;script src="pat
2740: 68 2f 74 6f 2f 4e 65 78 75 73 55 49 2e 6a 73 22 h/to/NexusUI.js"
2750: 26 67 74 3b 26 6c 74 3b 2f 73 63 72 69 70 74 26 ></script&
2760: 67 74 3b 0a 20 26 6c 74 3b 2f 68 65 61 64 26 67 gt;. </head&g
2770: 74 3b 0a 20 26 6c 74 3b 62 6f 64 79 26 67 74 3b t;. <body>
2780: 0a 0a 20 20 20 26 6c 74 3b 64 69 76 20 69 64 3d .. <div id=
2790: 22 69 6e 73 74 72 75 6d 65 6e 74 22 26 67 74 3b "instrument">
27a0: 26 6c 74 3b 2f 64 69 76 26 67 74 3b 0a 0a 20 20 </div>..
27b0: 20 26 6c 74 3b 73 63 72 69 70 74 26 67 74 3b 0a <script>.
27c0: 20 20 20 20 20 76 61 72 20 64 69 61 6c 20 3d 20 var dial =
27d0: 4e 65 78 75 73 2e 41 64 64 2e 44 69 61 6c 28 27 Nexus.Add.Dial('
27e0: 23 69 6e 73 74 72 75 6d 65 6e 74 27 2c 7b 0a 20 #instrument',{.
27f0: 20 20 20 20 20 20 27 73 69 7a 65 27 3a 20 5b 31 'size': [1
2800: 30 30 2c 31 30 30 5d 0a 20 20 20 20 20 7d 29 3b 00,100]. });
2810: 0a 0a 20 20 20 20 20 76 61 72 20 73 6c 69 64 65 .. var slide
2820: 72 20 3d 20 4e 65 78 75 73 2e 41 64 64 2e 53 6c r = Nexus.Add.Sl
2830: 69 64 65 72 28 27 23 69 6e 73 74 72 75 6d 65 6e ider('#instrumen
2840: 74 27 2c 7b 0a 20 20 20 20 20 20 20 27 73 69 7a t',{. 'siz
2850: 65 27 3a 20 5b 32 35 2c 31 30 30 5d 0a 20 20 20 e': [25,100].
2860: 20 20 7d 29 3b 0a 0a 20 20 20 20 20 2f 2f 20 74 });.. // t
2870: 68 65 6e 2c 20 74 6f 20 72 65 6d 6f 76 65 20 74 hen, to remove t
2880: 68 65 6d 20 74 6c 61 74 65 72 0a 20 20 20 20 20 hem tlater.
2890: 64 69 61 6c 2e 64 65 73 74 72 6f 79 28 29 3b 0a dial.destroy();.
28a0: 20 20 20 20 20 73 6c 69 64 65 72 2e 64 65 73 74 slider.dest
28b0: 72 6f 79 28 29 3b 0a 20 20 20 26 6c 74 3b 2f 73 roy();. </s
28c0: 63 72 69 70 74 26 67 74 3b 0a 0a 20 26 6c 74 3b cript>.. <
28d0: 2f 62 6f 64 79 26 67 74 3b 0a 26 6c 74 3b 2f 68 /body>.</h
28e0: 74 6d 6c 26 67 74 3b 0a 20 20 20 20 20 20 3c 2f tml>. </
28f0: 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 code></pre>..
2900: 20 3c 21 2d 2d 0a 20 20 20 20 20 20 20 3c 70 20 <!--. <p
2910: 64 61 74 61 2d 68 65 69 67 68 74 3d 22 32 36 35 data-height="265
2920: 22 20 64 61 74 61 2d 74 68 65 6d 65 2d 69 64 3d " data-theme-id=
2930: 22 30 22 20 64 61 74 61 2d 73 6c 75 67 2d 68 61 "0" data-slug-ha
2940: 73 68 3d 22 47 6d 45 4a 56 4c 22 20 64 61 74 61 sh="GmEJVL" data
2950: 2d 64 65 66 61 75 6c 74 2d 74 61 62 3d 22 68 74 -default-tab="ht
2960: 6d 6c 2c 72 65 73 75 6c 74 22 20 64 61 74 61 2d ml,result" data-
2970: 75 73 65 72 3d 22 74 61 79 6c 6f 72 62 66 22 20 user="taylorbf"
2980: 64 61 74 61 2d 65 6d 62 65 64 2d 76 65 72 73 69 data-embed-versi
2990: 6f 6e 3d 22 32 22 20 64 61 74 61 2d 70 65 6e 2d on="2" data-pen-
29a0: 74 69 74 6c 65 3d 22 42 61 73 69 63 20 44 69 61 title="Basic Dia
29b0: 6c 22 20 63 6c 61 73 73 3d 22 63 6f 64 65 70 65 l" class="codepe
29c0: 6e 22 3e 53 65 65 20 74 68 65 20 50 65 6e 20 3c n">See the Pen <
29d0: 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f a href="https://
29e0: 63 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f codepen.io/taylo
29f0: 72 62 66 2f 70 65 6e 2f 47 6d 45 4a 56 4c 2f 22 rbf/pen/GmEJVL/"
2a00: 3e 42 61 73 69 63 20 44 69 61 6c 3c 2f 61 3e 20 >Basic Dial</a>
2a10: 62 79 20 42 65 6e 20 54 61 79 6c 6f 72 20 28 3c by Ben Taylor (<
2a20: 61 20 68 72 65 66 3d 22 68 74 74 70 3a 2f 2f 63 a href="http://c
2a30: 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 odepen.io/taylor
2a40: 62 66 22 3e 40 74 61 79 6c 6f 72 62 66 3c 2f 61 bf">@taylorbf</a
2a50: 3e 29 20 6f 6e 20 3c 61 20 68 72 65 66 3d 22 68 >) on <a href="h
2a60: 74 74 70 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f ttp://codepen.io
2a70: 22 3e 43 6f 64 65 50 65 6e 3c 2f 61 3e 2e 3c 2f ">CodePen</a>.</
2a80: 70 3e 0a 3c 73 63 72 69 70 74 20 61 73 79 6e 63 p>.<script async
2a90: 20 73 72 63 3d 22 68 74 74 70 73 3a 2f 2f 70 72 src="https://pr
2aa0: 6f 64 75 63 74 69 6f 6e 2d 61 73 73 65 74 73 2e oduction-assets.
2ab0: 63 6f 64 65 70 65 6e 2e 69 6f 2f 61 73 73 65 74 codepen.io/asset
2ac0: 73 2f 65 6d 62 65 64 2f 65 69 2e 6a 73 22 3e 3c s/embed/ei.js"><
2ad0: 2f 73 63 72 69 70 74 3e 0a 0a 20 20 20 20 20 20 /script>..
2ae0: 20 3c 70 20 64 61 74 61 2d 68 65 69 67 68 74 3d <p data-height=
2af0: 22 32 36 35 22 20 64 61 74 61 2d 74 68 65 6d 65 "265" data-theme
2b00: 2d 69 64 3d 22 30 22 20 64 61 74 61 2d 73 6c 75 -id="0" data-slu
2b10: 67 2d 68 61 73 68 3d 22 79 67 47 4d 78 71 22 20 g-hash="ygGMxq"
2b20: 64 61 74 61 2d 64 65 66 61 75 6c 74 2d 74 61 62 data-default-tab
2b30: 3d 22 6a 73 2c 72 65 73 75 6c 74 22 20 64 61 74 ="js,result" dat
2b40: 61 2d 75 73 65 72 3d 22 74 61 79 6c 6f 72 62 66 a-user="taylorbf
2b50: 22 20 64 61 74 61 2d 65 6d 62 65 64 2d 76 65 72 " data-embed-ver
2b60: 73 69 6f 6e 3d 22 32 22 20 64 61 74 61 2d 70 65 sion="2" data-pe
2b70: 6e 2d 74 69 74 6c 65 3d 22 4d 54 20 54 65 73 74 n-title="MT Test
2b80: 22 20 63 6c 61 73 73 3d 22 63 6f 64 65 70 65 6e " class="codepen
2b90: 22 3e 53 65 65 20 74 68 65 20 50 65 6e 20 3c 61 ">See the Pen <a
2ba0: 20 68 72 65 66 3d 22 68 74 74 70 3a 2f 2f 63 6f href="http://co
2bb0: 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 depen.io/taylorb
2bc0: 66 2f 70 65 6e 2f 79 67 47 4d 78 71 2f 22 3e 4d f/pen/ygGMxq/">M
2bd0: 54 20 54 65 73 74 3c 2f 61 3e 20 62 79 20 42 65 T Test</a> by Be
2be0: 6e 20 54 61 79 6c 6f 72 20 28 3c 61 20 68 72 65 n Taylor (<a hre
2bf0: 66 3d 22 68 74 74 70 3a 2f 2f 63 6f 64 65 70 65 f="http://codepe
2c00: 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 66 22 3e 40 n.io/taylorbf">@
2c10: 74 61 79 6c 6f 72 62 66 3c 2f 61 3e 29 20 6f 6e taylorbf</a>) on
2c20: 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 3a 2f <a href="http:/
2c30: 2f 63 6f 64 65 70 65 6e 2e 69 6f 22 3e 43 6f 64 /codepen.io">Cod
2c40: 65 50 65 6e 3c 2f 61 3e 2e 3c 2f 70 3e 0a 3c 73 ePen</a>.</p>.<s
2c50: 63 72 69 70 74 20 61 73 79 6e 63 20 73 72 63 3d cript async src=
2c60: 22 68 74 74 70 73 3a 2f 2f 70 72 6f 64 75 63 74 "https://product
2c70: 69 6f 6e 2d 61 73 73 65 74 73 2e 63 6f 64 65 70 ion-assets.codep
2c80: 65 6e 2e 69 6f 2f 61 73 73 65 74 73 2f 65 6d 62 en.io/assets/emb
2c90: 65 64 2f 65 69 2e 6a 73 22 3e 3c 2f 73 63 72 69 ed/ei.js"></scri
2ca0: 70 74 3e 20 2d 2d 3e 0a 0a 0a 20 20 20 20 3c 68 pt> -->... <h
2cb0: 35 3e 4c 69 73 74 65 6e 69 6e 67 20 66 6f 72 20 5>Listening for
2cc0: 49 6e 74 65 72 61 63 74 69 6f 6e 20 45 76 65 6e Interaction Even
2cd0: 74 73 3c 2f 68 35 3e 0a 0a 20 20 20 20 3c 70 3e ts</h5>.. <p>
2ce0: 0a 20 20 20 20 20 20 45 76 65 72 79 20 4e 65 78 . Every Nex
2cf0: 75 73 55 49 20 69 6e 74 65 72 66 61 63 65 20 66 usUI interface f
2d00: 69 72 65 73 20 61 6e 20 65 76 65 6e 74 20 66 75 ires an event fu
2d10: 6e 63 74 69 6f 6e 20 77 68 65 6e 20 74 68 65 20 nction when the
2d20: 69 6e 74 65 72 66 61 63 65 20 69 73 20 69 6e 74 interface is int
2d30: 65 72 61 63 74 65 64 20 77 69 74 68 20 6f 72 20 eracted with or
2d40: 63 68 61 6e 67 65 64 20 70 72 6f 67 72 61 6d 61 changed programa
2d50: 74 69 63 61 6c 6c 79 20 74 68 72 6f 75 67 68 20 tically through
2d60: 74 68 65 20 69 6e 74 65 72 66 61 63 65 27 73 20 the interface's
2d70: 41 50 49 2e 20 49 66 20 79 6f 75 20 75 73 65 20 API. If you use
2d80: 4e 6f 64 65 2e 4a 53 2c 20 74 68 69 73 20 73 79 Node.JS, this sy
2d90: 6e 74 61 78 20 73 68 6f 75 6c 64 20 6c 6f 6f 6b ntax should look
2da0: 20 66 61 6d 69 6c 69 61 72 20 e2 80 93 e2 80 93 familiar ......
2db0: 20 65 76 65 72 79 20 4e 65 78 75 73 55 49 20 69 every NexusUI i
2dc0: 6e 74 65 72 66 61 63 65 20 65 78 74 65 6e 64 73 nterface extends
2dd0: 20 4e 6f 64 65 2e 6a 73 27 73 20 62 75 69 6c 74 Node.js's built
2de0: 2d 69 6e 20 45 76 65 6e 74 45 6d 69 74 74 65 72 -in EventEmitter
2df0: 2e 0a 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 .. </p>..
2e00: 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 <pre><code class
2e10: 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 73 22 3e 0a ="language-js">.
2e20: 76 61 72 20 64 69 61 6c 20 3d 20 6e 65 77 20 4e var dial = new N
2e30: 65 78 75 73 2e 44 69 61 6c 28 22 23 64 69 61 6c exus.Dial("#dial
2e40: 22 29 3b 0a 0a 64 69 61 6c 2e 6f 6e 28 27 63 68 ");..dial.on('ch
2e50: 61 6e 67 65 27 2c 66 75 6e 63 74 69 6f 6e 28 76 ange',function(v
2e60: 29 20 7b 0a 20 20 2f 2f 20 76 20 68 6f 6c 64 73 ) {. // v holds
2e70: 20 74 68 65 20 6e 65 77 20 6e 75 6d 65 72 69 63 the new numeric
2e80: 20 76 61 6c 75 65 20 6f 66 20 74 68 65 20 64 69 value of the di
2e90: 61 6c 0a 7d 29 3b 0a 20 20 20 20 20 20 20 3c 2f al.});. </
2ea0: 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 code></pre>..
2eb0: 20 3c 70 3e 0a 20 20 20 20 20 20 4d 61 6e 79 20 <p>. Many
2ec0: 6f 66 20 74 68 65 20 63 6f 72 65 20 69 6e 74 65 of the core inte
2ed0: 72 66 61 63 65 73 20 61 6c 73 6f 20 66 69 72 65 rfaces also fire
2ee0: 20 65 76 65 6e 74 73 20 6f 6e 20 6d 6f 75 73 65 events on mouse
2ef0: 20 63 6c 69 63 6b 20 61 6e 64 20 6d 6f 75 73 65 click and mouse
2f00: 20 72 65 6c 65 61 73 65 2e 20 54 68 65 20 66 6f release. The fo
2f10: 6c 6c 6f 77 69 6e 67 20 69 6e 74 65 72 66 61 63 llowing interfac
2f20: 65 73 20 61 63 63 65 70 74 20 63 6c 69 63 6b 20 es accept click
2f30: 61 6e 64 20 72 65 6c 65 61 73 65 20 65 76 65 6e and release even
2f40: 74 73 3a 20 62 75 74 74 6f 6e 2c 20 64 69 61 6c ts: button, dial
2f50: 2c 20 6e 75 6d 62 65 72 2c 20 70 61 6e 2c 20 70 , number, pan, p
2f60: 61 6e 32 64 2c 20 70 6f 73 69 74 69 6f 6e 2c 20 an2d, position,
2f70: 73 6c 69 64 65 72 2c 20 74 65 78 74 62 75 74 74 slider, textbutt
2f80: 6f 6e 2c 20 74 6f 67 67 6c 65 2e 20 57 65 20 68 on, toggle. We h
2f90: 6f 70 65 20 74 6f 20 64 65 76 65 6c 6f 70 20 74 ope to develop t
2fa0: 68 69 73 20 66 65 61 74 75 72 65 20 66 6f 72 20 his feature for
2fb0: 61 6c 6c 20 69 6e 74 65 72 66 61 63 65 73 20 69 all interfaces i
2fc0: 6e 20 74 68 65 20 66 75 74 75 72 65 2e 0a 20 20 n the future..
2fd0: 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 65 </p>.. <pre
2fe0: 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 ><code class="la
2ff0: 6e 67 75 61 67 65 2d 6a 73 22 3e 0a 20 76 61 72 nguage-js">. var
3000: 20 73 6c 69 64 65 72 20 3d 20 6e 65 77 20 4e 65 slider = new Ne
3010: 78 75 73 2e 53 6c 69 64 65 72 28 22 23 73 6c 69 xus.Slider("#sli
3020: 64 65 72 22 29 3b 0a 0a 20 73 6c 69 64 65 72 2e der");.. slider.
3030: 6f 6e 28 27 63 6c 69 63 6b 27 2c 66 75 6e 63 74 on('click',funct
3040: 69 6f 6e 28 29 20 7b 0a 20 20 20 63 6f 6e 73 6f ion() {. conso
3050: 6c 65 2e 6c 6f 67 28 27 63 6c 69 63 6b 65 64 21 le.log('clicked!
3060: 27 29 3b 0a 20 7d 29 3b 0a 0a 20 73 6c 69 64 65 ');. });.. slide
3070: 72 2e 6f 6e 28 27 72 65 6c 65 61 73 65 27 2c 66 r.on('release',f
3080: 75 6e 63 74 69 6f 6e 28 29 20 7b 0a 20 20 20 63 unction() {. c
3090: 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 72 65 6c 65 onsole.log('rele
30a0: 61 73 65 64 27 29 3b 0a 20 7d 29 3b 0a 20 20 20 ased');. });.
30b0: 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 </code></pr
30c0: 65 3e 0a 0a 20 20 20 20 3c 21 2d 2d 20 20 20 3c e>.. <!-- <
30d0: 70 3e 0a 20 20 20 20 20 20 20 20 45 78 61 6d 70 p>. Examp
30e0: 6c 65 3a 0a 20 20 20 20 20 20 20 3c 2f 70 3e 0a le:. </p>.
30f0: 0a 20 20 20 20 20 20 20 3c 70 20 64 61 74 61 2d . <p data-
3100: 68 65 69 67 68 74 3d 22 32 36 35 22 20 64 61 74 height="265" dat
3110: 61 2d 74 68 65 6d 65 2d 69 64 3d 22 30 22 20 64 a-theme-id="0" d
3120: 61 74 61 2d 73 6c 75 67 2d 68 61 73 68 3d 22 6a ata-slug-hash="j
3130: 6d 77 50 67 71 22 20 64 61 74 61 2d 64 65 66 61 mwPgq" data-defa
3140: 75 6c 74 2d 74 61 62 3d 22 6a 73 2c 72 65 73 75 ult-tab="js,resu
3150: 6c 74 22 20 64 61 74 61 2d 75 73 65 72 3d 22 74 lt" data-user="t
3160: 61 79 6c 6f 72 62 66 22 20 64 61 74 61 2d 65 6d aylorbf" data-em
3170: 62 65 64 2d 76 65 72 73 69 6f 6e 3d 22 32 22 20 bed-version="2"
3180: 64 61 74 61 2d 70 65 6e 2d 74 69 74 6c 65 3d 22 data-pen-title="
3190: 44 69 61 6c 20 45 76 65 6e 74 22 20 63 6c 61 73 Dial Event" clas
31a0: 73 3d 22 63 6f 64 65 70 65 6e 22 3e 53 65 65 20 s="codepen">See
31b0: 74 68 65 20 50 65 6e 20 3c 61 20 68 72 65 66 3d the Pen <a href=
31c0: 22 68 74 74 70 73 3a 2f 2f 63 6f 64 65 70 65 6e "https://codepen
31d0: 2e 69 6f 2f 74 61 79 6c 6f 72 62 66 2f 70 65 6e .io/taylorbf/pen
31e0: 2f 6a 6d 77 50 67 71 2f 22 3e 44 69 61 6c 20 45 /jmwPgq/">Dial E
31f0: 76 65 6e 74 3c 2f 61 3e 20 62 79 20 42 65 6e 20 vent</a> by Ben
3200: 54 61 79 6c 6f 72 20 28 3c 61 20 68 72 65 66 3d Taylor (<a href=
3210: 22 68 74 74 70 3a 2f 2f 63 6f 64 65 70 65 6e 2e "http://codepen.
3220: 69 6f 2f 74 61 79 6c 6f 72 62 66 22 3e 40 74 61 io/taylorbf">@ta
3230: 79 6c 6f 72 62 66 3c 2f 61 3e 29 20 6f 6e 20 3c ylorbf</a>) on <
3240: 61 20 68 72 65 66 3d 22 68 74 74 70 3a 2f 2f 63 a href="http://c
3250: 6f 64 65 70 65 6e 2e 69 6f 22 3e 43 6f 64 65 50 odepen.io">CodeP
3260: 65 6e 3c 2f 61 3e 2e 3c 2f 70 3e 0a 3c 73 63 72 en</a>.</p>.<scr
3270: 69 70 74 20 61 73 79 6e 63 20 73 72 63 3d 22 68 ipt async src="h
3280: 74 74 70 73 3a 2f 2f 70 72 6f 64 75 63 74 69 6f ttps://productio
3290: 6e 2d 61 73 73 65 74 73 2e 63 6f 64 65 70 65 6e n-assets.codepen
32a0: 2e 69 6f 2f 61 73 73 65 74 73 2f 65 6d 62 65 64 .io/assets/embed
32b0: 2f 65 69 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 74 /ei.js"></script
32c0: 3e 0a 0a 20 20 20 20 3c 21 2d 2d 20 20 20 3c 70 >.. <!-- <p
32d0: 20 64 61 74 61 2d 68 65 69 67 68 74 3d 22 32 36 data-height="26
32e0: 35 22 20 64 61 74 61 2d 74 68 65 6d 65 2d 69 64 5" data-theme-id
32f0: 3d 22 30 22 20 64 61 74 61 2d 73 6c 75 67 2d 68 ="0" data-slug-h
3300: 61 73 68 3d 22 59 56 51 58 45 4c 22 20 64 61 74 ash="YVQXEL" dat
3310: 61 2d 64 65 66 61 75 6c 74 2d 74 61 62 3d 22 6a a-default-tab="j
3320: 73 2c 72 65 73 75 6c 74 22 20 64 61 74 61 2d 75 s,result" data-u
3330: 73 65 72 3d 22 74 61 79 6c 6f 72 62 66 22 20 64 ser="taylorbf" d
3340: 61 74 61 2d 65 6d 62 65 64 2d 76 65 72 73 69 6f ata-embed-versio
3350: 6e 3d 22 32 22 20 64 61 74 61 2d 70 65 6e 2d 74 n="2" data-pen-t
3360: 69 74 6c 65 3d 22 4d 54 20 2d 20 49 6e 74 65 72 itle="MT - Inter
3370: 66 61 63 65 20 45 76 65 6e 74 20 44 65 6d 6f 22 face Event Demo"
3380: 20 63 6c 61 73 73 3d 22 63 6f 64 65 70 65 6e 22 class="codepen"
3390: 3e 53 65 65 20 74 68 65 20 50 65 6e 20 3c 61 20 >See the Pen <a
33a0: 68 72 65 66 3d 22 68 74 74 70 3a 2f 2f 63 6f 64 href="http://cod
33b0: 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 66 epen.io/taylorbf
33c0: 2f 70 65 6e 2f 59 56 51 58 45 4c 2f 22 3e 4d 54 /pen/YVQXEL/">MT
33d0: 20 2d 20 49 6e 74 65 72 66 61 63 65 20 45 76 65 - Interface Eve
33e0: 6e 74 20 44 65 6d 6f 3c 2f 61 3e 20 62 79 20 42 nt Demo</a> by B
33f0: 65 6e 20 54 61 79 6c 6f 72 20 28 3c 61 20 68 72 en Taylor (<a hr
3400: 65 66 3d 22 68 74 74 70 3a 2f 2f 63 6f 64 65 70 ef="http://codep
3410: 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 66 22 3e en.io/taylorbf">
3420: 40 74 61 79 6c 6f 72 62 66 3c 2f 61 3e 29 20 6f @taylorbf</a>) o
3430: 6e 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 3a n <a href="http:
3440: 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f 22 3e 43 6f //codepen.io">Co
3450: 64 65 50 65 6e 3c 2f 61 3e 2e 3c 2f 70 3e 0a 3c dePen</a>.</p>.<
3460: 73 63 72 69 70 74 20 61 73 79 6e 63 20 73 72 63 script async src
3470: 3d 22 68 74 74 70 73 3a 2f 2f 70 72 6f 64 75 63 ="https://produc
3480: 74 69 6f 6e 2d 61 73 73 65 74 73 2e 63 6f 64 65 tion-assets.code
3490: 70 65 6e 2e 69 6f 2f 61 73 73 65 74 73 2f 65 6d pen.io/assets/em
34a0: 62 65 64 2f 65 69 2e 6a 73 22 3e 3c 2f 73 63 72 bed/ei.js"></scr
34b0: 69 70 74 3e 20 2d 2d 3e 0a 0a 20 20 20 20 3c 68 ipt> -->.. <h
34c0: 35 3e 49 6e 74 65 72 66 61 63 65 20 4f 70 74 69 5>Interface Opti
34d0: 6f 6e 73 3c 2f 68 35 3e 0a 0a 20 20 20 20 3c 70 ons</h5>.. <p
34e0: 3e 0a 20 20 20 20 20 20 45 61 63 68 20 69 6e 74 >. Each int
34f0: 65 72 66 61 63 65 20 68 61 73 20 61 6e 20 41 50 erface has an AP
3500: 49 20 74 68 72 6f 75 67 68 20 77 68 69 63 68 20 I through which
3510: 79 6f 75 20 63 61 6e 20 63 75 73 74 6f 6d 69 7a you can customiz
3520: 65 20 69 74 73 20 76 61 6c 75 65 73 20 61 6e 64 e its values and
3530: 20 69 6e 74 65 72 61 63 74 69 6f 6e 20 6d 6f 64 interaction mod
3540: 65 73 2e 20 43 6f 6d 6d 6f 6e 20 6f 70 74 69 6f es. Common optio
3550: 6e 73 20 69 6e 63 6c 75 64 65 3a 0a 20 20 20 20 ns include:.
3560: 20 20 3c 75 6c 3e 0a 20 20 20 20 20 20 20 20 3c <ul>. <
3570: 6c 69 3e 0a 20 20 20 20 20 20 20 20 20 20 53 65 li>. Se
3580: 74 74 69 6e 67 20 61 20 6e 75 6d 65 72 69 63 20 tting a numeric
3590: 72 61 6e 67 65 20 66 6f 72 20 74 68 65 20 76 61 range for the va
35a0: 6c 75 65 20 6f 66 20 74 68 65 20 69 6e 74 65 72 lue of the inter
35b0: 66 61 63 65 0a 20 20 20 20 20 20 20 20 3c 2f 6c face. </l
35c0: 69 3e 0a 20 20 20 20 20 20 20 20 3c 6c 69 3e 0a i>. <li>.
35d0: 20 20 20 20 20 20 20 20 20 20 41 62 73 6f 6c 75 Absolu
35e0: 74 65 20 6f 72 20 72 65 6c 61 74 69 76 65 20 6d te or relative m
35f0: 6f 75 73 65 20 69 6e 74 65 72 61 63 74 69 6f 6e ouse interaction
3600: 0a 20 20 20 20 20 20 20 20 3c 2f 6c 69 3e 0a 20 . </li>.
3610: 20 20 20 20 20 20 20 3c 6c 69 3e 0a 20 20 20 20 <li>.
3620: 20 20 20 20 20 20 56 65 72 74 69 63 61 6c 2c 20 Vertical,
3630: 68 6f 72 69 7a 6f 6e 74 61 6c 2c 20 6f 72 20 72 horizontal, or r
3640: 61 64 69 61 6c 20 28 66 6f 72 20 64 69 61 6c 73 adial (for dials
3650: 29 20 69 6e 74 65 72 61 63 74 69 6f 6e 20 26 61 ) interaction &a
3660: 6d 70 3b 20 6f 72 69 65 6e 74 61 74 69 6f 6e 0a mp; orientation.
3670: 20 20 20 20 20 20 20 20 3c 2f 6c 69 3e 0a 20 20 </li>.
3680: 20 20 20 20 3c 2f 75 6c 3e 0a 20 20 20 20 3c 2f </ul>. </
3690: 70 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 20 p>.. <p>.
36a0: 20 20 45 78 61 6d 70 6c 65 3a 0a 20 20 20 20 3c Example:. <
36b0: 2f 70 3e 0a 0a 20 20 20 20 3c 70 20 64 61 74 61 /p>.. <p data
36c0: 2d 68 65 69 67 68 74 3d 22 32 36 35 22 20 64 61 -height="265" da
36d0: 74 61 2d 74 68 65 6d 65 2d 69 64 3d 22 30 22 20 ta-theme-id="0"
36e0: 64 61 74 61 2d 73 6c 75 67 2d 68 61 73 68 3d 22 data-slug-hash="
36f0: 42 52 5a 4e 76 67 22 20 64 61 74 61 2d 64 65 66 BRZNvg" data-def
3700: 61 75 6c 74 2d 74 61 62 3d 22 6a 73 2c 72 65 73 ault-tab="js,res
3710: 75 6c 74 22 20 64 61 74 61 2d 75 73 65 72 3d 22 ult" data-user="
3720: 74 61 79 6c 6f 72 62 66 22 20 64 61 74 61 2d 65 taylorbf" data-e
3730: 6d 62 65 64 2d 76 65 72 73 69 6f 6e 3d 22 32 22 mbed-version="2"
3740: 20 64 61 74 61 2d 70 65 6e 2d 74 69 74 6c 65 3d data-pen-title=
3750: 22 4d 54 20 2d 20 49 6e 74 65 72 66 61 63 65 20 "MT - Interface
3760: 4f 70 74 69 6f 6e 73 20 44 65 6d 6f 22 20 63 6c Options Demo" cl
3770: 61 73 73 3d 22 63 6f 64 65 70 65 6e 22 3e 53 65 ass="codepen">Se
3780: 65 20 74 68 65 20 50 65 6e 20 3c 61 20 68 72 65 e the Pen <a hre
3790: 66 3d 22 68 74 74 70 3a 2f 2f 63 6f 64 65 70 65 f="http://codepe
37a0: 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 66 2f 70 65 n.io/taylorbf/pe
37b0: 6e 2f 42 52 5a 4e 76 67 2f 22 3e 4d 54 20 2d 20 n/BRZNvg/">MT -
37c0: 49 6e 74 65 72 66 61 63 65 20 4f 70 74 69 6f 6e Interface Option
37d0: 73 20 44 65 6d 6f 3c 2f 61 3e 20 62 79 20 42 65 s Demo</a> by Be
37e0: 6e 0a 20 20 20 20 20 20 54 61 79 6c 6f 72 20 28 n. Taylor (
37f0: 3c 61 20 68 72 65 66 3d 22 68 74 74 70 3a 2f 2f <a href="http://
3800: 63 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f codepen.io/taylo
3810: 72 62 66 22 3e 40 74 61 79 6c 6f 72 62 66 3c 2f rbf">@taylorbf</
3820: 61 3e 29 20 6f 6e 20 3c 61 20 68 72 65 66 3d 22 a>) on <a href="
3830: 68 74 74 70 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 http://codepen.i
3840: 6f 22 3e 43 6f 64 65 50 65 6e 3c 2f 61 3e 2e 3c o">CodePen</a>.<
3850: 2f 70 3e 0a 20 20 20 20 3c 73 63 72 69 70 74 20 /p>. <script
3860: 61 73 79 6e 63 20 73 72 63 3d 22 68 74 74 70 73 async src="https
3870: 3a 2f 2f 70 72 6f 64 75 63 74 69 6f 6e 2d 61 73 ://production-as
3880: 73 65 74 73 2e 63 6f 64 65 70 65 6e 2e 69 6f 2f sets.codepen.io/
3890: 61 73 73 65 74 73 2f 65 6d 62 65 64 2f 65 69 2e assets/embed/ei.
38a0: 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 0a 20 js"></script>..
38b0: 20 20 20 3c 68 35 3e 44 6f 63 75 6d 65 6e 74 61 <h5>Documenta
38c0: 74 69 6f 6e 3c 2f 68 35 3e 0a 0a 20 20 20 20 3c tion</h5>.. <
38d0: 70 3e 0a 20 20 20 20 20 20 43 68 65 63 6b 20 6f p>. Check o
38e0: 75 74 20 74 68 65 20 41 50 49 20 66 6f 72 20 6d ut the API for m
38f0: 6f 72 65 20 64 65 74 61 69 6c 73 20 6f 6e 20 69 ore details on i
3900: 6e 74 65 72 66 61 63 65 20 6f 70 74 69 6f 6e 73 nterface options
3910: 2c 20 61 73 20 77 65 6c 6c 20 61 73 20 66 6f 72 , as well as for
3920: 20 74 75 74 6f 72 69 61 6c 73 20 6f 6e 20 74 75 tutorials on tu
3930: 6e 69 6e 67 20 61 6e 64 20 74 69 6d 69 6e 67 20 ning and timing
3940: 6d 65 63 68 61 6e 69 73 6d 73 2e 0a 20 20 20 20 mechanisms..
3950: 3c 2f 70 3e 0a 0a 20 20 20 20 3c 62 72 20 2f 3e </p>.. <br />
3960: 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 0a 20 <br /><br />...
3970: 20 3c 2f 64 69 76 3e 0a 0a 0a 0a 0a 0a 0a 0a 0a </div>.........
3980: 0a 0a 0a 0a 0a 0a 20 20 3c 21 2d 2d 0a 0a 20 20 ...... <!--..
3990: 20 20 20 20 43 4f 4c 4f 52 53 0a 0a 20 20 20 20 COLORS..
39a0: 20 20 2d 2d 3e 0a 0a 20 20 3c 64 69 76 20 69 64 -->.. <div id
39b0: 3d 22 63 6f 6c 6f 72 73 22 20 63 6c 61 73 73 3d ="colors" class=
39c0: 22 63 75 73 74 6f 6d 2d 74 75 74 6f 72 69 61 6c "custom-tutorial
39d0: 22 20 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 79 " style="display
39e0: 3a 6e 6f 6e 65 22 3e 0a 20 20 20 20 26 6e 62 73 :none">. &nbs
39f0: 70 3b 0a 20 20 20 20 3c 68 31 20 73 74 79 6c 65 p;. <h1 style
3a00: 3d 22 6d 61 72 67 69 6e 3a 20 35 70 78 20 61 75 ="margin: 5px au
3a10: 74 6f 3b 77 69 64 74 68 3a 31 30 30 25 3b 66 6f to;width:100%;fo
3a20: 6e 74 2d 73 69 7a 65 3a 32 37 70 74 3b 66 6f 6e nt-size:27pt;fon
3a30: 74 2d 77 65 69 67 68 74 3a 37 30 30 3b 22 3e 43 t-weight:700;">C
3a40: 6f 6c 6f 72 73 3c 2f 68 31 3e 0a 0a 0a 20 20 20 olors</h1>...
3a50: 20 3c 70 3e 0a 20 20 20 20 20 20 59 6f 75 20 63 <p>. You c
3a60: 61 6e 20 63 68 61 6e 67 65 20 61 6e 20 69 6e 74 an change an int
3a70: 65 72 66 61 63 65 27 73 20 63 6f 6c 6f 72 73 20 erface's colors
3a80: 75 73 69 6e 67 20 3c 62 3e 2e 63 6f 6c 6f 72 69 using <b>.colori
3a90: 7a 65 28 29 3c 2f 62 3e 0a 20 20 20 20 3c 2f 70 ze()</b>. </p
3aa0: 3e 0a 0a 20 20 20 20 3c 70 20 64 61 74 61 2d 68 >.. <p data-h
3ab0: 65 69 67 68 74 3d 22 32 36 36 22 20 64 61 74 61 eight="266" data
3ac0: 2d 74 68 65 6d 65 2d 69 64 3d 22 30 22 20 64 61 -theme-id="0" da
3ad0: 74 61 2d 73 6c 75 67 2d 68 61 73 68 3d 22 65 52 ta-slug-hash="eR
3ae0: 64 4e 61 42 22 20 64 61 74 61 2d 64 65 66 61 75 dNaB" data-defau
3af0: 6c 74 2d 74 61 62 3d 22 6a 73 2c 72 65 73 75 6c lt-tab="js,resul
3b00: 74 22 20 64 61 74 61 2d 75 73 65 72 3d 22 74 61 t" data-user="ta
3b10: 79 6c 6f 72 62 66 22 20 64 61 74 61 2d 65 6d 62 ylorbf" data-emb
3b20: 65 64 2d 76 65 72 73 69 6f 6e 3d 22 32 22 20 64 ed-version="2" d
3b30: 61 74 61 2d 70 65 6e 2d 74 69 74 6c 65 3d 22 43 ata-pen-title="C
3b40: 6f 6c 6f 72 73 22 20 63 6c 61 73 73 3d 22 63 6f olors" class="co
3b50: 64 65 70 65 6e 22 3e 53 65 65 20 74 68 65 20 50 depen">See the P
3b60: 65 6e 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 en <a href="http
3b70: 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f 2f 74 s://codepen.io/t
3b80: 61 79 6c 6f 72 62 66 2f 70 65 6e 2f 65 52 64 4e aylorbf/pen/eRdN
3b90: 61 42 2f 22 3e 43 6f 6c 6f 72 73 3c 2f 61 3e 20 aB/">Colors</a>
3ba0: 62 79 20 42 65 6e 20 54 61 79 6c 6f 72 20 28 3c by Ben Taylor (<
3bb0: 61 0a 20 20 20 20 20 20 20 20 68 72 65 66 3d 22 a. href="
3bc0: 68 74 74 70 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e https://codepen.
3bd0: 69 6f 2f 74 61 79 6c 6f 72 62 66 22 3e 40 74 61 io/taylorbf">@ta
3be0: 79 6c 6f 72 62 66 3c 2f 61 3e 29 20 6f 6e 20 3c ylorbf</a>) on <
3bf0: 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f a href="https://
3c00: 63 6f 64 65 70 65 6e 2e 69 6f 22 3e 43 6f 64 65 codepen.io">Code
3c10: 50 65 6e 3c 2f 61 3e 2e 3c 2f 70 3e 0a 20 20 20 Pen</a>.</p>.
3c20: 20 3c 73 63 72 69 70 74 20 61 73 79 6e 63 20 73 <script async s
3c30: 72 63 3d 22 68 74 74 70 73 3a 2f 2f 70 72 6f 64 rc="https://prod
3c40: 75 63 74 69 6f 6e 2d 61 73 73 65 74 73 2e 63 6f uction-assets.co
3c50: 64 65 70 65 6e 2e 69 6f 2f 61 73 73 65 74 73 2f depen.io/assets/
3c60: 65 6d 62 65 64 2f 65 69 2e 6a 73 22 3e 3c 2f 73 embed/ei.js"></s
3c70: 63 72 69 70 74 3e 0a 0a 0a 20 20 20 20 3c 62 72 cript>... <br
3c80: 20 2f 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 41 6c /><br />. Al
3c90: 74 65 72 6e 61 74 65 6c 79 2c 20 79 6f 75 20 63 ternately, you c
3ca0: 61 6e 20 73 65 74 20 3c 62 3e 4e 65 78 75 73 2e an set <b>Nexus.
3cb0: 63 6f 6c 6f 72 73 3c 2f 62 3e 2c 20 77 68 69 63 colors</b>, whic
3cc0: 68 20 77 69 6c 6c 20 62 65 20 69 6e 68 65 72 69 h will be inheri
3cd0: 74 65 64 20 62 79 20 65 76 65 72 79 20 69 6e 74 ted by every int
3ce0: 65 72 66 61 63 65 20 63 72 65 61 74 65 64 20 66 erface created f
3cf0: 72 6f 6d 20 74 68 61 74 20 70 6f 69 6e 74 20 6f rom that point o
3d00: 6e 2e 20 54 68 69 73 20 69 73 20 75 73 65 66 75 n. This is usefu
3d10: 6c 20 69 66 20 79 6f 75 20 77 61 6e 74 20 61 6c l if you want al
3d20: 6c 20 6f 66 20 79 6f 75 72 20 69 6e 74 65 72 66 l of your interf
3d30: 61 63 65 20 63 6f 6d 70 6f 6e 65 6e 74 73 20 74 ace components t
3d40: 6f 20 73 68 61 72 65 20 74 68 65 20 73 61 6d 65 o share the same
3d50: 20 63 6f 6c 6f 72 20 73 63 68 65 6d 65 2e 0a 20 color scheme..
3d60: 20 20 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 <a href="http
3d70: 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f 2f 74 s://codepen.io/t
3d80: 61 79 6c 6f 72 62 66 2f 70 65 6e 2f 7a 7a 4b 47 aylorbf/pen/zzKG
3d90: 67 7a 22 3e 53 65 65 20 65 78 61 6d 70 6c 65 20 gz">See example
3da0: 6f 6e 20 43 6f 64 65 50 65 6e 2e 3c 2f 61 3e 0a on CodePen.</a>.
3db0: 0a 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 20 2f . <br /><br /
3dc0: 3e 0a 0a 20 20 20 20 3c 21 2d 2d 20 20 3c 70 20 >.. <!-- <p
3dd0: 64 61 74 61 2d 68 65 69 67 68 74 3d 22 32 36 35 data-height="265
3de0: 22 20 64 61 74 61 2d 74 68 65 6d 65 2d 69 64 3d " data-theme-id=
3df0: 22 30 22 20 64 61 74 61 2d 73 6c 75 67 2d 68 61 "0" data-slug-ha
3e00: 73 68 3d 22 7a 7a 4b 47 67 7a 22 20 64 61 74 61 sh="zzKGgz" data
3e10: 2d 64 65 66 61 75 6c 74 2d 74 61 62 3d 22 72 65 -default-tab="re
3e20: 73 75 6c 74 22 20 64 61 74 61 2d 75 73 65 72 3d sult" data-user=
3e30: 22 74 61 79 6c 6f 72 62 66 22 20 64 61 74 61 2d "taylorbf" data-
3e40: 65 6d 62 65 64 2d 76 65 72 73 69 6f 6e 3d 22 32 embed-version="2
3e50: 22 20 64 61 74 61 2d 70 65 6e 2d 74 69 74 6c 65 " data-pen-title
3e60: 3d 22 43 6f 6c 6f 72 73 20 2d 20 49 6e 68 65 72 ="Colors - Inher
3e70: 69 74 61 6e 63 65 22 20 63 6c 61 73 73 3d 22 63 itance" class="c
3e80: 6f 64 65 70 65 6e 22 3e 53 65 65 20 74 68 65 20 odepen">See the
3e90: 50 65 6e 20 3c 61 20 68 72 65 66 3d 22 68 74 74 Pen <a href="htt
3ea0: 70 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f 2f ps://codepen.io/
3eb0: 74 61 79 6c 6f 72 62 66 2f 70 65 6e 2f 7a 7a 4b taylorbf/pen/zzK
3ec0: 47 67 7a 2f 22 3e 43 6f 6c 6f 72 73 20 2d 20 49 Ggz/">Colors - I
3ed0: 6e 68 65 72 69 74 61 6e 63 65 3c 2f 61 3e 20 62 nheritance</a> b
3ee0: 79 20 42 65 6e 20 54 61 79 6c 6f 72 20 28 3c 61 y Ben Taylor (<a
3ef0: 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f 63 href="https://c
3f00: 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 odepen.io/taylor
3f10: 62 66 22 3e 40 74 61 79 6c 6f 72 62 66 3c 2f 61 bf">@taylorbf</a
3f20: 3e 29 20 6f 6e 20 3c 61 20 68 72 65 66 3d 22 68 >) on <a href="h
3f30: 74 74 70 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 ttps://codepen.i
3f40: 6f 22 3e 43 6f 64 65 50 65 6e 3c 2f 61 3e 2e 3c o">CodePen</a>.<
3f50: 2f 70 3e 0a 20 20 20 20 20 20 20 20 20 20 3c 73 /p>. <s
3f60: 63 72 69 70 74 20 61 73 79 6e 63 20 73 72 63 3d cript async src=
3f70: 22 68 74 74 70 73 3a 2f 2f 70 72 6f 64 75 63 74 "https://product
3f80: 69 6f 6e 2d 61 73 73 65 74 73 2e 63 6f 64 65 70 ion-assets.codep
3f90: 65 6e 2e 69 6f 2f 61 73 73 65 74 73 2f 65 6d 62 en.io/assets/emb
3fa0: 65 64 2f 65 69 2e 6a 73 22 3e 3c 2f 73 63 72 69 ed/ei.js"></scri
3fb0: 70 74 3e 20 2d 2d 3e 0a 0a 20 20 20 20 3c 21 2d pt> -->.. <!-
3fc0: 2d 20 20 3c 70 20 64 61 74 61 2d 68 65 69 67 68 - <p data-heigh
3fd0: 74 3d 22 32 36 35 22 20 64 61 74 61 2d 74 68 65 t="265" data-the
3fe0: 6d 65 2d 69 64 3d 22 30 22 20 64 61 74 61 2d 73 me-id="0" data-s
3ff0: 6c 75 67 2d 68 61 73 68 3d 22 7a 7a 4b 47 67 7a lug-hash="zzKGgz
4000: 22 20 64 61 74 61 2d 64 65 66 61 75 6c 74 2d 74 " data-default-t
4010: 61 62 3d 22 6a 73 2c 72 65 73 75 6c 74 22 20 64 ab="js,result" d
4020: 61 74 61 2d 75 73 65 72 3d 22 74 61 79 6c 6f 72 ata-user="taylor
4030: 62 66 22 20 64 61 74 61 2d 65 6d 62 65 64 2d 76 bf" data-embed-v
4040: 65 72 73 69 6f 6e 3d 22 32 22 20 64 61 74 61 2d ersion="2" data-
4050: 70 65 6e 2d 74 69 74 6c 65 3d 22 43 6f 6c 6f 72 pen-title="Color
4060: 73 20 2d 20 49 6e 68 65 72 69 74 61 6e 63 65 22 s - Inheritance"
4070: 20 63 6c 61 73 73 3d 22 63 6f 64 65 70 65 6e 22 class="codepen"
4080: 3e 53 65 65 20 74 68 65 20 50 65 6e 20 3c 61 20 >See the Pen <a
4090: 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f 63 6f href="https://co
40a0: 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 depen.io/taylorb
40b0: 66 2f 70 65 6e 2f 7a 7a 4b 47 67 7a 2f 22 3e 43 f/pen/zzKGgz/">C
40c0: 6f 6c 6f 72 73 20 2d 20 49 6e 68 65 72 69 74 61 olors - Inherita
40d0: 6e 63 65 3c 2f 61 3e 20 62 79 20 42 65 6e 20 54 nce</a> by Ben T
40e0: 61 79 6c 6f 72 20 28 3c 61 20 68 72 65 66 3d 22 aylor (<a href="
40f0: 68 74 74 70 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e https://codepen.
4100: 69 6f 2f 74 61 79 6c 6f 72 62 66 22 3e 40 74 61 io/taylorbf">@ta
4110: 79 6c 6f 72 62 66 3c 2f 61 3e 29 20 6f 6e 20 3c ylorbf</a>) on <
4120: 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f a href="https://
4130: 63 6f 64 65 70 65 6e 2e 69 6f 22 3e 43 6f 64 65 codepen.io">Code
4140: 50 65 6e 3c 2f 61 3e 2e 3c 2f 70 3e 0a 3c 73 63 Pen</a>.</p>.<sc
4150: 72 69 70 74 20 61 73 79 6e 63 20 73 72 63 3d 22 ript async src="
4160: 68 74 74 70 73 3a 2f 2f 70 72 6f 64 75 63 74 69 https://producti
4170: 6f 6e 2d 61 73 73 65 74 73 2e 63 6f 64 65 70 65 on-assets.codepe
4180: 6e 2e 69 6f 2f 61 73 73 65 74 73 2f 65 6d 62 65 n.io/assets/embe
4190: 64 2f 65 69 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 d/ei.js"></scrip
41a0: 74 3e 20 2d 2d 3e 0a 0a 20 20 20 20 41 20 63 6f t> -->.. A co
41b0: 6d 70 6c 65 74 65 20 6c 69 73 74 20 6f 66 20 63 mplete list of c
41c0: 6f 6c 6f 72 20 70 72 6f 70 65 72 74 69 65 73 20 olor properties
41d0: 75 73 65 64 20 69 6e 20 74 68 65 20 69 6e 74 65 used in the inte
41e0: 72 66 61 63 65 73 20 61 72 65 3a 0a 20 20 20 20 rfaces are:.
41f0: 3c 62 3e 61 63 63 65 6e 74 3c 2f 62 3e 2c 0a 20 <b>accent</b>,.
4200: 20 20 20 3c 62 3e 66 69 6c 6c 3c 2f 62 3e 2c 0a <b>fill</b>,.
4210: 20 20 20 20 3c 62 3e 64 61 72 6b 3c 2f 62 3e 2c <b>dark</b>,
4220: 0a 20 20 20 20 3c 62 3e 6c 69 67 68 74 3c 2f 62 . <b>light</b
4230: 3e 2c 0a 20 20 20 20 3c 62 3e 6d 65 64 69 75 6d >,. <b>medium
4240: 44 61 72 6b 3c 2f 62 3e 2c 0a 20 20 20 20 3c 62 Dark</b>,. <b
4250: 3e 6d 65 64 69 75 6d 4c 69 67 68 74 3c 2f 62 3e >mediumLight</b>
4260: 2e 0a 20 20 20 20 4e 6f 74 20 61 6c 6c 20 69 6e .. Not all in
4270: 74 65 72 66 61 63 65 73 20 75 73 65 20 61 6c 6c terfaces use all
4280: 20 6f 66 20 74 68 65 73 65 20 63 6f 6c 6f 72 73 of these colors
4290: 2e 0a 0a 20 20 3c 2f 64 69 76 3e 0a 0a 0a 0a 0a ... </div>.....
42a0: 0a 0a 0a 0a 0a 0a 0a 20 20 3c 21 2d 2d 0a 0a 20 ....... <!--..
42b0: 20 20 20 20 20 20 20 52 41 43 4b 0a 0a 20 20 20 RACK..
42c0: 20 20 20 20 20 2d 2d 3e 0a 0a 20 20 3c 64 69 76 -->.. <div
42d0: 20 69 64 3d 22 72 61 63 6b 22 20 63 6c 61 73 73 id="rack" class
42e0: 3d 22 63 75 73 74 6f 6d 2d 74 75 74 6f 72 69 61 ="custom-tutoria
42f0: 6c 22 20 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 l" style="displa
4300: 79 3a 6e 6f 6e 65 22 3e 0a 20 20 20 20 26 6e 62 y:none">. &nb
4310: 73 70 3b 0a 20 20 20 20 3c 68 31 20 73 74 79 6c sp;. <h1 styl
4320: 65 3d 22 6d 61 72 67 69 6e 3a 20 35 70 78 20 61 e="margin: 5px a
4330: 75 74 6f 3b 77 69 64 74 68 3a 31 30 30 25 3b 66 uto;width:100%;f
4340: 6f 6e 74 2d 73 69 7a 65 3a 32 37 70 74 3b 66 6f ont-size:27pt;fo
4350: 6e 74 2d 77 65 69 67 68 74 3a 37 30 30 3b 22 3e nt-weight:700;">
4360: 43 72 65 61 74 69 6e 67 20 61 20 52 61 63 6b 3c Creating a Rack<
4370: 2f 68 31 3e 0a 0a 0a 20 20 20 20 3c 70 3e 0a 20 /h1>... <p>.
4380: 20 20 20 20 20 59 6f 75 20 63 61 6e 20 63 72 65 You can cre
4390: 61 74 65 20 6d 61 6e 79 20 69 6e 74 65 72 66 61 ate many interfa
43a0: 63 65 20 63 6f 6d 70 6f 6e 65 6e 74 73 20 61 74 ce components at
43b0: 20 6f 6e 63 65 20 75 73 69 6e 67 20 3c 62 3e 4e once using <b>N
43c0: 65 78 75 73 2e 52 61 63 6b 28 29 3c 2f 62 3e 2e exus.Rack()</b>.
43d0: 20 48 65 72 65 20 69 73 20 61 6e 20 65 78 61 6d Here is an exam
43e0: 70 6c 65 3a 0a 20 20 20 20 3c 2f 70 3e 0a 0a 20 ple:. </p>..
43f0: 20 20 20 3c 70 20 64 61 74 61 2d 68 65 69 67 68 <p data-heigh
4400: 74 3d 22 32 36 35 22 20 64 61 74 61 2d 74 68 65 t="265" data-the
4410: 6d 65 2d 69 64 3d 22 30 22 20 64 61 74 61 2d 73 me-id="0" data-s
4420: 6c 75 67 2d 68 61 73 68 3d 22 52 67 47 4d 4a 6d lug-hash="RgGMJm
4430: 22 20 64 61 74 61 2d 64 65 66 61 75 6c 74 2d 74 " data-default-t
4440: 61 62 3d 22 68 74 6d 6c 2c 72 65 73 75 6c 74 22 ab="html,result"
4450: 20 64 61 74 61 2d 75 73 65 72 3d 22 74 61 79 6c data-user="tayl
4460: 6f 72 62 66 22 20 64 61 74 61 2d 65 6d 62 65 64 orbf" data-embed
4470: 2d 76 65 72 73 69 6f 6e 3d 22 32 22 20 64 61 74 -version="2" dat
4480: 61 2d 70 65 6e 2d 74 69 74 6c 65 3d 22 43 72 65 a-pen-title="Cre
4490: 61 74 69 6e 67 20 61 20 52 61 63 6b 22 20 63 6c ating a Rack" cl
44a0: 61 73 73 3d 22 63 6f 64 65 70 65 6e 22 3e 53 65 ass="codepen">Se
44b0: 65 20 74 68 65 20 50 65 6e 20 3c 61 20 68 72 65 e the Pen <a hre
44c0: 66 3d 22 68 74 74 70 73 3a 2f 2f 63 6f 64 65 70 f="https://codep
44d0: 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 62 66 2f 70 en.io/taylorbf/p
44e0: 65 6e 2f 52 67 47 4d 4a 6d 2f 22 3e 43 72 65 61 en/RgGMJm/">Crea
44f0: 74 69 6e 67 20 61 20 52 61 63 6b 3c 2f 61 3e 20 ting a Rack</a>
4500: 62 79 20 42 65 6e 20 54 61 79 6c 6f 72 20 28 3c by Ben Taylor (<
4510: 61 0a 20 20 20 20 20 20 20 20 68 72 65 66 3d 22 a. href="
4520: 68 74 74 70 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e https://codepen.
4530: 69 6f 2f 74 61 79 6c 6f 72 62 66 22 3e 40 74 61 io/taylorbf">@ta
4540: 79 6c 6f 72 62 66 3c 2f 61 3e 29 20 6f 6e 20 3c ylorbf</a>) on <
4550: 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f a href="https://
4560: 63 6f 64 65 70 65 6e 2e 69 6f 22 3e 43 6f 64 65 codepen.io">Code
4570: 50 65 6e 3c 2f 61 3e 2e 3c 2f 70 3e 0a 20 20 20 Pen</a>.</p>.
4580: 20 3c 73 63 72 69 70 74 20 61 73 79 6e 63 20 73 <script async s
4590: 72 63 3d 22 68 74 74 70 73 3a 2f 2f 70 72 6f 64 rc="https://prod
45a0: 75 63 74 69 6f 6e 2d 61 73 73 65 74 73 2e 63 6f uction-assets.co
45b0: 64 65 70 65 6e 2e 69 6f 2f 61 73 73 65 74 73 2f depen.io/assets/
45c0: 65 6d 62 65 64 2f 65 69 2e 6a 73 22 3e 3c 2f 73 embed/ei.js"></s
45d0: 63 72 69 70 74 3e 0a 0a 20 20 20 20 3c 21 2d 2d cript>.. <!--
45e0: 3c 69 66 72 61 6d 65 20 77 69 64 74 68 3d 22 31 <iframe width="1
45f0: 30 30 25 22 20 68 65 69 67 68 74 3d 22 33 30 30 00%" height="300
4600: 22 20 73 72 63 3d 22 2f 2f 6a 73 66 69 64 64 6c " src="//jsfiddl
4610: 65 2e 6e 65 74 2f 73 75 6e 63 61 6e 6e 6f 6e 2f e.net/suncannon/
4620: 65 38 76 74 75 62 63 32 2f 31 2f 65 6d 62 65 64 e8vtubc2/1/embed
4630: 64 65 64 2f 6a 73 2c 68 74 6d 6c 2c 72 65 73 75 ded/js,html,resu
4640: 6c 74 2f 64 61 72 6b 2f 22 20 61 6c 6c 6f 77 66 lt/dark/" allowf
4650: 75 6c 6c 73 63 72 65 65 6e 3d 22 61 6c 6c 6f 77 ullscreen="allow
4660: 66 75 6c 6c 73 63 72 65 65 6e 22 20 66 72 61 6d fullscreen" fram
4670: 65 62 6f 72 64 65 72 3d 22 30 22 3e 3c 2f 69 66 eborder="0"></if
4680: 72 61 6d 65 3e 0a 2d 2d 3e 0a 20 20 20 20 3c 62 rame>.-->. <b
4690: 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 0a 20 20 20 r /><br />...
46a0: 20 46 69 72 73 74 2c 20 63 72 65 61 74 65 20 61 First, create a
46b0: 6e 20 65 6c 65 6d 65 6e 74 20 74 68 61 74 20 77 n element that w
46c0: 69 6c 6c 20 62 65 20 74 68 65 20 63 6f 6e 74 61 ill be the conta
46d0: 69 6e 65 72 20 6f 66 20 74 68 65 20 72 61 63 6b iner of the rack
46e0: 2e 0a 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 20 .. <br /><br
46f0: 2f 3e 0a 20 20 20 20 49 6e 73 69 64 65 20 74 68 />. Inside th
4700: 61 74 20 63 6f 6e 74 61 69 6e 65 72 2c 20 63 72 at container, cr
4710: 65 61 74 65 20 73 65 76 65 72 61 6c 20 65 6c 65 eate several ele
4720: 6d 65 6e 74 73 20 77 69 74 68 20 3c 62 3e 6e 65 ments with <b>ne
4730: 78 75 73 2d 75 69 3c 2f 62 3e 20 61 74 74 72 69 xus-ui</b> attri
4740: 62 75 74 65 73 20 64 65 73 63 72 69 62 69 6e 67 butes describing
4750: 20 77 68 61 74 20 74 79 70 65 20 6f 66 20 69 6e what type of in
4760: 74 65 72 66 61 63 65 20 69 74 20 73 68 6f 75 6c terface it shoul
4770: 64 20 74 72 61 6e 73 66 6f 72 6d 20 69 6e 74 6f d transform into
4780: 2c 20 73 75 63 68 20 61 73 20 3c 62 3e 6e 65 78 , such as <b>nex
4790: 75 73 2d 75 69 3d 22 64 69 61 6c 22 3c 2f 62 3e us-ui="dial"</b>
47a0: 2e 0a 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 20 .. <br /><br
47b0: 2f 3e 0a 20 20 20 20 47 69 76 65 20 65 61 63 68 />. Give each
47c0: 20 69 6e 74 65 72 66 61 63 65 20 65 6c 65 6d 65 interface eleme
47d0: 6e 74 20 61 6e 20 49 44 20 77 68 69 63 68 20 77 nt an ID which w
47e0: 69 6c 6c 20 62 65 20 75 73 65 64 20 74 6f 20 69 ill be used to i
47f0: 64 65 6e 74 69 66 79 20 69 74 20 69 6e 20 4a 61 dentify it in Ja
4800: 76 61 53 63 72 69 70 74 20 6c 61 74 65 72 2e 0a vaScript later..
4810: 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e <br /><br />
4820: 0a 20 20 20 20 49 6e 20 79 6f 75 72 20 4a 61 76 . In your Jav
4830: 61 53 63 72 69 70 74 2c 20 75 73 65 20 3c 62 3e aScript, use <b>
4840: 6e 65 77 20 4e 65 78 75 73 2e 52 61 63 6b 28 22 new Nexus.Rack("
4850: 23 63 6f 6e 74 61 69 6e 65 72 49 44 22 29 3c 2f #containerID")</
4860: 62 3e 20 74 6f 20 74 72 61 6e 73 66 6f 72 6d 20 b> to transform
4870: 74 68 65 20 63 6f 6e 74 61 69 6e 65 72 20 65 6c the container el
4880: 65 6d 65 6e 74 20 69 6e 74 6f 20 61 20 72 61 63 ement into a rac
4890: 6b 2e 20 57 68 65 6e 20 74 68 69 73 20 68 61 70 k. When this hap
48a0: 70 65 6e 73 2c 20 61 6e 79 20 65 6c 65 6d 65 6e pens, any elemen
48b0: 74 73 20 69 6e 73 69 64 65 20 74 68 65 20 63 6f ts inside the co
48c0: 6e 74 61 69 6e 65 72 20 77 69 74 68 20 76 61 6c ntainer with val
48d0: 69 64 20 3c 62 3e 6e 65 78 75 73 2d 75 69 3c 2f id <b>nexus-ui</
48e0: 62 3e 20 61 74 74 72 69 62 75 74 65 73 20 77 69 b> attributes wi
48f0: 6c 6c 20 62 65 20 74 72 61 6e 73 66 6f 72 6d 65 ll be transforme
4900: 64 20 69 6e 74 6f 20 69 6e 74 65 72 66 61 63 65 d into interface
4910: 20 65 6c 65 6d 65 6e 74 73 2e 0a 0a 0a 20 20 20 elements....
4920: 20 3c 68 35 3e 55 73 69 6e 67 20 61 20 43 75 73 <h5>Using a Cus
4930: 74 6f 6d 20 41 74 74 72 69 62 75 74 65 3c 2f 68 tom Attribute</h
4940: 35 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 20 5>.. <p>.
4950: 20 20 4e 65 78 75 73 2e 52 61 63 6b 20 6f 70 74 Nexus.Rack opt
4960: 69 6f 6e 61 6c 6c 79 20 6c 65 74 73 20 79 6f 75 ionally lets you
4970: 20 73 70 65 63 69 66 79 20 77 68 69 63 68 20 61 specify which a
4980: 74 74 72 69 62 75 74 65 20 74 6f 20 6c 6f 6f 6b ttribute to look
4990: 20 66 6f 72 20 28 27 6e 65 78 75 73 2d 75 69 27 for ('nexus-ui'
49a0: 20 62 79 20 64 65 66 61 75 6c 74 29 2e 20 54 68 by default). Th
49b0: 69 73 20 69 73 20 75 73 65 66 75 6c 20 66 6f 72 is is useful for
49c0: 20 75 73 69 6e 67 20 4e 65 78 75 73 55 49 20 77 using NexusUI w
49d0: 69 74 68 20 52 65 61 63 74 2c 20 77 68 69 63 68 ith React, which
49e0: 20 72 65 71 75 69 72 65 73 20 3c 69 3e 64 61 74 requires <i>dat
49f0: 61 2d 3c 2f 69 3e 20 61 74 74 72 69 62 75 74 65 a-</i> attribute
4a00: 20 70 72 65 66 69 78 65 73 2e 0a 20 20 20 20 3c prefixes.. <
4a10: 2f 70 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 /p>.. <p>.
4a20: 20 20 20 48 54 4d 4c 3a 0a 20 20 20 20 3c 2f 70 HTML:. </p
4a30: 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 >.. <pre><cod
4a40: 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 e class="languag
4a50: 65 2d 68 74 6d 6c 22 3e 0a 20 20 26 6c 74 3b 64 e-html">. <d
4a60: 69 76 20 69 64 3d 22 74 61 72 67 65 74 22 26 67 iv id="target"&g
4a70: 74 3b 0a 20 20 20 20 26 6c 74 3b 64 69 76 20 64 t;. <div d
4a80: 61 74 61 2d 6e 78 3d 22 64 69 61 6c 22 26 67 74 ata-nx="dial">
4a90: 3b 26 6c 74 3b 2f 64 69 76 26 67 74 3b 0a 20 20 ;</div>.
4aa0: 26 6c 74 3b 2f 64 69 76 26 67 74 3b 0a 20 20 20 </div>.
4ab0: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f 63 </c
4ac0: 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 0a 20 20 20 ode></pre>...
4ad0: 20 3c 70 3e 0a 20 20 20 20 20 20 4a 53 3a 0a 20 <p>. JS:.
4ae0: 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 </p>.. <pr
4af0: 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c e><code class="l
4b00: 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 anguage-javascri
4b10: 70 74 22 3e 0a 20 20 76 61 72 20 73 79 6e 74 68 pt">. var synth
4b20: 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 52 61 63 = new Nexus.Rac
4b30: 6b 28 22 23 74 61 72 67 65 74 22 2c 7b 0a 20 20 k("#target",{.
4b40: 20 20 61 74 74 72 69 62 75 74 65 3a 20 27 64 61 attribute: 'da
4b50: 74 61 2d 6e 78 27 0a 20 20 7d 29 0a 20 20 20 20 ta-nx'. }).
4b60: 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f 63 6f </co
4b70: 64 65 3e 3c 2f 70 72 65 3e 0a 0a 0a 20 20 20 20 de></pre>...
4b80: 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 20 20 <br /><br />..
4b90: 20 20 3c 68 35 3e 52 61 63 6b 20 4d 65 74 68 6f <h5>Rack Metho
4ba0: 64 73 3c 2f 68 35 3e 0a 0a 20 20 20 20 3c 62 3e ds</h5>.. <b>
4bb0: 2e 68 69 64 65 28 29 3c 2f 62 3e 3c 62 72 20 2f .hide()</b><br /
4bc0: 3e 0a 20 20 20 20 3c 62 3e 2e 73 68 6f 77 28 29 >. <b>.show()
4bd0: 3c 2f 62 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 3c </b><br />. <
4be0: 62 3e 2e 63 6f 6c 6f 72 69 7a 65 28 29 3c 2f 62 b>.colorize()</b
4bf0: 3e 20 28 53 65 65 20 3c 61 20 68 72 65 66 3d 22 > (See <a href="
4c00: 23 63 6f 6c 6f 72 73 22 3e 63 68 61 6e 67 69 6e #colors">changin
4c10: 67 20 63 6f 6c 6f 72 73 3c 2f 61 3e 29 0a 20 20 g colors</a>).
4c20: 20 20 3c 62 72 20 2f 3e 0a 20 20 20 20 3c 62 72 <br />. <br
4c30: 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 0a 20 20 3c 2f /><br />... </
4c40: 64 69 76 3e 0a 0a 0a 20 20 3c 2f 64 69 76 3e 0a div>... </div>.
4c50: 0a 0a 0a 0a 0a 0a 0a 0a 0a 20 20 3c 21 2d 2d 0a ......... <!--.
4c60: 0a 20 20 20 20 20 20 20 20 20 20 53 59 4e 43 49 . SYNCI
4c70: 4e 47 20 4e 55 4d 42 45 52 20 42 4f 58 45 53 0a NG NUMBER BOXES.
4c80: 0a 20 20 20 20 20 20 20 20 20 20 2d 2d 3e 0a 0a . -->..
4c90: 20 20 3c 64 69 76 20 69 64 3d 22 73 79 6e 63 22 <div id="sync"
4ca0: 20 63 6c 61 73 73 3d 22 63 75 73 74 6f 6d 2d 74 class="custom-t
4cb0: 75 74 6f 72 69 61 6c 22 20 73 74 79 6c 65 3d 22 utorial" style="
4cc0: 64 69 73 70 6c 61 79 3a 6e 6f 6e 65 22 3e 0a 20 display:none">.
4cd0: 20 20 20 26 6e 62 73 70 3b 0a 20 20 20 20 3c 68 . <h
4ce0: 31 20 73 74 79 6c 65 3d 22 6d 61 72 67 69 6e 3a 1 style="margin:
4cf0: 20 35 70 78 20 61 75 74 6f 3b 77 69 64 74 68 3a 5px auto;width:
4d00: 31 30 30 25 3b 66 6f 6e 74 2d 73 69 7a 65 3a 32 100%;font-size:2
4d10: 37 70 74 3b 66 6f 6e 74 2d 77 65 69 67 68 74 3a 7pt;font-weight:
4d20: 37 30 30 3b 22 3e 4c 69 6e 6b 69 6e 67 20 61 20 700;">Linking a
4d30: 4e 75 6d 62 65 72 20 42 6f 78 20 74 6f 20 61 20 Number Box to a
4d40: 44 69 61 6c 20 6f 72 20 53 6c 69 64 65 72 3c 2f Dial or Slider</
4d50: 68 31 3e 0a 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 h1>... <p>.
4d60: 20 20 20 20 41 20 6e 75 6d 62 65 72 20 62 6f 78 A number box
4d70: 20 63 61 6e 20 62 65 20 6c 69 6e 6b 65 64 20 74 can be linked t
4d80: 6f 20 74 68 65 20 76 61 6c 75 65 20 6f 66 20 61 o the value of a
4d90: 20 64 69 61 6c 20 6f 72 20 73 6c 69 64 65 72 20 dial or slider
4da0: 75 73 69 6e 67 20 3c 62 3e 2e 6c 69 6e 6b 28 29 using <b>.link()
4db0: 3c 2f 62 3e 0a 0a 20 20 20 20 20 20 3c 62 72 20 </b>.. <br
4dc0: 2f 3e 3c 62 72 20 2f 3e 0a 20 20 20 20 20 20 49 /><br />. I
4dd0: 6e 20 74 68 69 73 20 63 61 73 65 2c 20 77 68 65 n this case, whe
4de0: 6e 20 74 68 65 20 64 69 61 6c 20 6f 72 20 73 6c n the dial or sl
4df0: 69 64 65 72 20 69 73 20 75 70 64 61 74 65 64 2c ider is updated,
4e00: 20 74 68 65 20 6e 75 6d 62 65 72 20 62 6f 78 20 the number box
4e10: 77 69 6c 6c 20 73 68 6f 77 20 69 74 73 20 6e 75 will show its nu
4e20: 6d 65 72 69 63 20 76 61 6c 75 65 2e 20 57 68 65 meric value. Whe
4e30: 6e 20 74 68 65 20 6e 75 6d 62 65 72 20 62 6f 78 n the number box
4e40: 20 69 73 20 75 70 64 61 74 65 64 20 6f 72 20 69 is updated or i
4e50: 6e 74 65 72 61 63 74 65 64 20 77 69 74 68 2c 20 nteracted with,
4e60: 74 68 65 20 64 69 61 6c 20 6f 72 20 73 6c 69 64 the dial or slid
4e70: 65 72 20 77 69 6c 6c 20 62 65 20 75 70 64 61 74 er will be updat
4e80: 65 64 20 74 6f 20 74 68 65 20 6e 65 77 20 76 61 ed to the new va
4e90: 6c 75 65 20 61 73 20 77 65 6c 6c 2e 0a 0a 20 20 lue as well...
4ea0: 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 20 64 </p>.. <p d
4eb0: 61 74 61 2d 68 65 69 67 68 74 3d 22 32 36 35 22 ata-height="265"
4ec0: 20 64 61 74 61 2d 74 68 65 6d 65 2d 69 64 3d 22 data-theme-id="
4ed0: 30 22 20 64 61 74 61 2d 73 6c 75 67 2d 68 61 73 0" data-slug-has
4ee0: 68 3d 22 6f 77 64 70 78 79 22 20 64 61 74 61 2d h="owdpxy" data-
4ef0: 64 65 66 61 75 6c 74 2d 74 61 62 3d 22 6a 73 2c default-tab="js,
4f00: 72 65 73 75 6c 74 22 20 64 61 74 61 2d 75 73 65 result" data-use
4f10: 72 3d 22 74 61 79 6c 6f 72 62 66 22 20 64 61 74 r="taylorbf" dat
4f20: 61 2d 65 6d 62 65 64 2d 76 65 72 73 69 6f 6e 3d a-embed-version=
4f30: 22 32 22 20 64 61 74 61 2d 70 65 6e 2d 74 69 74 "2" data-pen-tit
4f40: 6c 65 3d 22 4e 75 6d 62 65 72 20 42 6f 78 20 53 le="Number Box S
4f50: 79 6e 63 22 20 63 6c 61 73 73 3d 22 63 6f 64 65 ync" class="code
4f60: 70 65 6e 22 3e 53 65 65 20 74 68 65 20 50 65 6e pen">See the Pen
4f70: 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a <a href="https:
4f80: 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 //codepen.io/tay
4f90: 6c 6f 72 62 66 2f 70 65 6e 2f 6f 77 64 70 78 79 lorbf/pen/owdpxy
4fa0: 2f 22 3e 4e 75 6d 62 65 72 20 42 6f 78 20 53 79 /">Number Box Sy
4fb0: 6e 63 3c 2f 61 3e 20 62 79 20 42 65 6e 20 54 61 nc</a> by Ben Ta
4fc0: 79 6c 6f 72 20 28 3c 61 0a 20 20 20 20 20 20 20 ylor (<a.
4fd0: 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f 2f 63 href="https://c
4fe0: 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 6c 6f 72 odepen.io/taylor
4ff0: 62 66 22 3e 40 74 61 79 6c 6f 72 62 66 3c 2f 61 bf">@taylorbf</a
5000: 3e 29 20 6f 6e 20 3c 61 20 68 72 65 66 3d 22 68 >) on <a href="h
5010: 74 74 70 73 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 ttps://codepen.i
5020: 6f 22 3e 43 6f 64 65 50 65 6e 3c 2f 61 3e 2e 3c o">CodePen</a>.<
5030: 2f 70 3e 0a 20 20 20 20 3c 73 63 72 69 70 74 20 /p>. <script
5040: 61 73 79 6e 63 20 73 72 63 3d 22 68 74 74 70 73 async src="https
5050: 3a 2f 2f 70 72 6f 64 75 63 74 69 6f 6e 2d 61 73 ://production-as
5060: 73 65 74 73 2e 63 6f 64 65 70 65 6e 2e 69 6f 2f sets.codepen.io/
5070: 61 73 73 65 74 73 2f 65 6d 62 65 64 2f 65 69 2e assets/embed/ei.
5080: 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 0a 20 js"></script>..
5090: 20 3c 2f 64 69 76 3e 0a 0a 0a 0a 0a 0a 0a 20 20 </div>.......
50a0: 3c 21 2d 2d 0a 0a 4e 45 58 55 53 2e 54 55 4e 45 <!--..NEXUS.TUNE
50b0: 0a 0a 2d 2d 3e 0a 0a 20 20 3c 64 69 76 20 69 64 ..-->.. <div id
50c0: 3d 22 74 75 6e 65 22 20 63 6c 61 73 73 3d 22 63 ="tune" class="c
50d0: 75 73 74 6f 6d 2d 74 75 74 6f 72 69 61 6c 22 20 ustom-tutorial"
50e0: 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 79 3a 6e style="display:n
50f0: 6f 6e 65 22 3e 0a 20 20 20 20 3c 68 32 3e 54 75 one">. <h2>Tu
5100: 6e 69 6e 67 3c 2f 68 32 3e 0a 0a 20 20 20 20 3c ning</h2>.. <
5110: 70 3e 0a 20 20 20 20 20 20 3c 62 3e 4e 65 78 75 p>. <b>Nexu
5120: 73 2e 6e 6f 74 65 28 29 3c 2f 62 3e 20 61 6e 64 s.note()</b> and
5130: 20 3c 62 3e 4e 65 78 75 73 2e 74 75 6e 65 3c 2f <b>Nexus.tune</
5140: 62 3e 20 6f 66 66 65 72 20 77 61 79 73 20 74 6f b> offer ways to
5150: 20 6d 61 6e 61 67 65 20 70 69 74 63 68 65 73 20 manage pitches
5160: 61 6e 64 20 73 63 61 6c 65 73 2e 0a 20 20 20 20 and scales..
5170: 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c </p>.. <pre><
5180: 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 code class="lang
5190: 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 uage-javascript"
51a0: 3e 0a 2f 2f 20 4e 65 78 75 73 2e 6e 6f 74 65 28 >.// Nexus.note(
51b0: 30 29 20 72 65 74 75 72 6e 73 20 74 68 65 20 66 0) returns the f
51c0: 72 65 71 75 65 6e 63 79 20 6f 66 20 74 68 65 20 requency of the
51d0: 31 73 74 20 6e 6f 74 65 20 6f 66 20 74 68 65 20 1st note of the
51e0: 73 63 61 6c 65 0a 73 79 6e 74 68 2e 66 72 65 71 scale.synth.freq
51f0: 75 65 6e 63 79 2e 76 61 6c 75 65 20 3d 20 4e 65 uency.value = Ne
5200: 78 75 73 2e 6e 6f 74 65 28 30 29 3b 0a 0a 2f 2f xus.note(0);..//
5210: 20 4e 65 78 75 73 2e 6e 6f 74 65 28 32 29 20 72 Nexus.note(2) r
5220: 65 74 75 72 6e 73 20 74 68 65 20 66 72 65 71 75 eturns the frequ
5230: 65 6e 63 79 20 6f 66 20 74 68 65 20 33 72 64 20 ency of the 3rd
5240: 6e 6f 74 65 20 6f 66 20 74 68 65 20 73 63 61 6c note of the scal
5250: 65 0a 73 79 6e 74 68 2e 66 72 65 71 75 65 6e 63 e.synth.frequenc
5260: 79 2e 76 61 6c 75 65 20 3d 20 4e 65 78 75 73 2e y.value = Nexus.
5270: 6e 6f 74 65 28 32 29 3b 0a 20 20 20 20 20 3c 2f note(2);. </
5280: 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 code></pre>..
5290: 20 3c 70 3e 0a 20 20 20 20 20 20 42 79 20 64 65 <p>. By de
52a0: 66 61 75 6c 74 20 74 68 65 20 73 63 61 6c 65 20 fault the scale
52b0: 69 73 20 61 6e 20 65 71 75 61 6c 2d 74 65 6d 70 is an equal-temp
52c0: 65 72 65 64 20 6d 61 6a 6f 72 20 73 63 61 6c 65 ered major scale
52d0: 2e 20 41 6e 20 41 50 49 20 66 6f 72 20 63 68 61 . An API for cha
52e0: 6e 67 69 6e 67 20 74 68 65 20 73 63 61 6c 65 20 nging the scale
52f0: 69 73 20 62 65 6c 6f 77 2e 0a 20 20 20 20 3c 2f is below.. </
5300: 70 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 20 p>.. <p>.
5310: 20 20 54 68 69 73 20 61 70 70 72 6f 61 63 68 20 This approach
5320: 65 6d 70 68 61 73 69 7a 65 73 20 61 6c 67 6f 72 emphasizes algor
5330: 69 74 68 6d 69 63 20 63 6f 6d 70 6f 73 69 74 69 ithmic compositi
5340: 6f 6e 20 62 79 20 75 73 69 6e 67 20 6e 75 6d 62 on by using numb
5350: 65 72 73 20 74 6f 20 74 72 61 76 65 72 73 65 20 ers to traverse
5360: 6d 75 73 69 63 61 6c 20 73 63 61 6c 65 73 2e 0a musical scales..
5370: 20 20 20 20 3c 2f 70 3e 0a 0a 0a 20 20 20 20 3c </p>... <
5380: 21 2d 2d 20 73 65 63 74 69 6f 6e 20 2d 2d 3e 0a !-- section -->.
5390: 0a 20 20 20 20 3c 68 33 3e 54 75 72 6e 69 6e 67 . <h3>Turning
53a0: 20 53 63 61 6c 65 20 44 65 67 72 65 65 73 20 74 Scale Degrees t
53b0: 6f 20 46 72 65 71 75 65 6e 63 79 20 56 61 6c 75 o Frequency Valu
53c0: 65 73 3c 2f 68 33 3e 0a 20 20 20 20 3c 70 3e 0a es</h3>. <p>.
53d0: 20 20 20 20 20 20 3c 62 3e 4e 65 78 75 73 2e 6e <b>Nexus.n
53e0: 6f 74 65 28 29 3c 2f 62 3e 20 70 72 6f 76 69 64 ote()</b> provid
53f0: 65 73 20 61 20 6d 65 74 68 6f 64 20 66 6f 72 20 es a method for
5400: 74 75 72 6e 69 6e 67 20 73 63 61 6c 65 20 64 65 turning scale de
5410: 67 72 65 65 73 20 69 6e 74 6f 20 66 72 65 71 75 grees into frequ
5420: 65 6e 63 79 20 76 61 6c 75 65 73 20 77 68 69 63 ency values whic
5430: 68 20 79 6f 75 72 20 77 65 62 20 61 75 64 69 6f h your web audio
5440: 20 73 79 6e 74 68 20 77 69 6c 6c 20 75 6e 64 65 synth will unde
5450: 72 73 74 61 6e 64 2e 0a 20 20 20 20 3c 2f 70 3e rstand.. </p>
5460: 0a 0a 20 20 20 20 3c 70 72 65 3e 0a 20 20 20 20 .. <pre>.
5470: 20 20 20 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 <code class="
5480: 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 language-javascr
5490: 69 70 74 22 3e 0a 2f 2f 20 4e 65 78 75 73 2e 6e ipt">.// Nexus.n
54a0: 6f 74 65 28 30 29 20 72 65 74 75 72 6e 73 20 74 ote(0) returns t
54b0: 68 65 20 66 72 65 71 75 65 6e 63 79 20 6f 66 20 he frequency of
54c0: 31 73 74 20 6e 6f 74 65 20 6f 66 20 74 68 65 20 1st note of the
54d0: 73 63 61 6c 65 0a 73 79 6e 74 68 2e 66 72 65 71 scale.synth.freq
54e0: 75 65 6e 63 79 2e 76 61 6c 75 65 20 3d 20 4e 65 uency.value = Ne
54f0: 78 75 73 2e 6e 6f 74 65 28 30 29 3b 0a 0a 2f 2f xus.note(0);..//
5500: 20 4e 65 78 75 73 2e 6e 6f 74 65 28 31 29 20 72 Nexus.note(1) r
5510: 65 74 75 72 6e 73 20 74 68 65 20 66 72 65 71 75 eturns the frequ
5520: 65 6e 63 79 20 6f 66 20 32 6e 64 20 6e 6f 74 65 ency of 2nd note
5530: 20 6f 66 20 74 68 65 20 73 63 61 6c 65 0a 73 79 of the scale.sy
5540: 6e 74 68 2e 66 72 65 71 75 65 6e 63 79 2e 76 61 nth.frequency.va
5550: 6c 75 65 20 3d 20 4e 65 78 75 73 2e 6e 6f 74 65 lue = Nexus.note
5560: 28 31 29 3b 0a 0a 2f 2f 20 4e 65 67 61 74 69 76 (1);..// Negativ
5570: 65 20 6e 75 6d 62 65 72 73 20 77 72 61 70 20 74 e numbers wrap t
5580: 6f 20 61 20 6c 6f 77 65 72 20 6f 63 74 61 76 65 o a lower octave
5590: 0a 2f 2f 20 4e 65 78 75 73 2e 6e 6f 74 65 28 2d .// Nexus.note(-
55a0: 31 29 20 72 65 74 75 72 6e 73 20 74 68 65 20 66 1) returns the f
55b0: 72 65 71 75 65 6e 63 79 20 6f 66 20 74 68 65 20 requency of the
55c0: 74 6f 70 20 6e 6f 74 65 20 6f 66 20 74 68 65 20 top note of the
55d0: 73 63 61 6c 65 2c 20 31 20 6f 63 74 61 76 65 20 scale, 1 octave
55e0: 6c 6f 77 65 72 0a 73 79 6e 74 68 2e 66 72 65 71 lower.synth.freq
55f0: 75 65 6e 63 79 2e 76 61 6c 75 65 20 3d 20 4e 65 uency.value = Ne
5600: 78 75 73 2e 6e 6f 74 65 28 2d 31 29 3b 0a 0a 2f xus.note(-1);../
5610: 2f 20 59 6f 75 20 63 61 6e 20 61 6c 73 6f 20 73 / You can also s
5620: 70 65 63 69 66 79 20 74 68 65 20 6f 63 74 61 76 pecify the octav
5630: 65 20 75 73 69 6e 67 20 61 6e 20 6f 70 74 69 6f e using an optio
5640: 6e 61 6c 20 73 65 63 6f 6e 64 20 70 61 72 61 6d nal second param
5650: 65 74 65 72 0a 2f 2f 20 4e 65 78 75 73 2e 6e 6f eter.// Nexus.no
5660: 74 65 28 30 2c 32 29 20 72 65 74 75 72 6e 73 20 te(0,2) returns
5670: 74 68 65 20 66 72 65 71 75 65 6e 63 79 20 6f 66 the frequency of
5680: 20 74 68 65 20 31 73 74 20 6e 6f 74 65 20 6f 66 the 1st note of
5690: 20 74 68 65 20 73 63 61 6c 65 2c 20 32 20 6f 63 the scale, 2 oc
56a0: 74 61 76 65 73 20 75 70 2e 0a 73 79 6e 74 68 2e taves up..synth.
56b0: 66 72 65 71 75 65 6e 63 79 2e 76 61 6c 75 65 20 frequency.value
56c0: 3d 20 4e 65 78 75 73 2e 6e 6f 74 65 28 30 2c 32 = Nexus.note(0,2
56d0: 29 3b 0a 0a 2f 2f 20 4e 65 78 75 73 2e 6e 6f 74 );..// Nexus.not
56e0: 65 28 30 2c 2d 31 29 20 72 65 74 75 72 6e 73 20 e(0,-1) returns
56f0: 74 68 65 20 66 72 65 71 75 65 6e 63 79 20 6f 66 the frequency of
5700: 20 74 68 65 20 31 73 74 20 6e 6f 74 65 20 6f 66 the 1st note of
5710: 20 74 68 65 20 73 63 61 6c 65 2c 20 31 20 6f 63 the scale, 1 oc
5720: 74 61 76 65 20 6c 6f 77 65 72 0a 73 79 6e 74 68 tave lower.synth
5730: 2e 66 72 65 71 75 65 6e 63 79 2e 76 61 6c 75 65 .frequency.value
5740: 20 3d 20 4e 65 78 75 73 2e 6e 6f 74 65 28 30 2c = Nexus.note(0,
5750: 2d 31 29 3b 0a 20 20 20 20 3c 2f 63 6f 64 65 3e -1);. </code>
5760: 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 3c 70 3e 0a </pre>.. <p>.
5770: 20 20 20 20 20 20 42 79 20 75 73 69 6e 67 20 63 By using c
5780: 6f 75 6e 74 65 72 73 20 6f 72 20 6e 75 6d 62 65 ounters or numbe
5790: 72 20 67 65 6e 65 72 61 74 6f 72 73 20 69 6e 20 r generators in
57a0: 74 61 6e 64 65 6d 20 77 69 74 68 20 3c 62 3e 4e tandem with <b>N
57b0: 65 78 75 73 2e 6e 6f 74 65 28 29 3c 2f 62 3e 2c exus.note()</b>,
57c0: 20 79 6f 75 20 63 61 6e 20 70 6c 61 79 20 73 63 you can play sc
57d0: 61 6c 65 73 2c 20 61 72 70 65 67 67 69 6f 73 2c ales, arpeggios,
57e0: 20 65 74 63 2e 0a 20 20 20 20 3c 2f 70 3e 0a 0a etc.. </p>..
57f0: 20 20 20 20 3c 70 72 65 3e 0a 20 20 20 20 20 20 <pre>.
5800: 20 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 <code class="la
5810: 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 nguage-javascrip
5820: 74 22 3e 0a 20 2f 2f 20 50 6c 61 79 20 35 20 6f t">. // Play 5 o
5830: 63 74 61 76 65 73 20 6f 66 20 74 68 65 20 6d 61 ctaves of the ma
5840: 6a 6f 72 20 73 63 61 6c 65 0a 0a 20 76 61 72 20 jor scale.. var
5850: 63 6f 75 6e 74 65 72 20 3d 20 6e 65 77 20 4e 65 counter = new Ne
5860: 78 75 73 2e 43 6f 75 6e 74 65 72 28 20 30 2c 20 xus.Counter( 0,
5870: 33 36 20 29 3b 0a 0a 20 76 61 72 20 62 65 61 74 36 );.. var beat
5880: 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 49 6e 74 = new Nexus.Int
5890: 65 72 76 61 6c 28 32 30 30 2c 66 75 6e 63 74 69 erval(200,functi
58a0: 6f 6e 28 29 20 7b 0a 20 20 20 73 79 6e 74 68 2e on() {. synth.
58b0: 66 72 65 71 75 65 6e 63 79 2e 76 61 6c 75 65 20 frequency.value
58c0: 3d 20 4e 65 78 75 73 2e 6e 6f 74 65 28 20 63 6f = Nexus.note( co
58d0: 75 6e 74 65 72 2e 6e 65 78 74 28 29 20 29 3b 0a unter.next() );.
58e0: 20 7d 29 0a 20 20 20 20 20 20 20 3c 2f 63 6f 64 }). </cod
58f0: 65 3e 0a 20 20 20 20 20 3c 2f 70 72 65 3e 0a 0a e>. </pre>..
5900: 0a 0a 0a 20 20 20 20 3c 68 33 3e 47 65 74 74 69 ... <h3>Getti
5910: 6e 67 20 50 69 74 63 68 20 52 61 74 69 6f 73 20 ng Pitch Ratios
5920: 6f 72 20 61 64 6a 75 73 74 65 64 20 4d 49 44 49 or adjusted MIDI
5930: 20 76 61 6c 75 65 73 3c 2f 68 33 3e 0a 20 20 20 values</h3>.
5940: 20 3c 70 3e 0a 20 20 20 20 20 20 49 66 20 77 6f <p>. If wo
5950: 72 6b 69 6e 67 20 77 69 74 68 20 61 6e 20 61 75 rking with an au
5960: 64 69 6f 20 73 61 6d 70 6c 65 2c 20 79 6f 75 20 dio sample, you
5970: 6d 61 79 20 77 69 73 68 20 74 6f 20 74 75 6e 65 may wish to tune
5980: 20 79 6f 75 72 20 73 61 6d 70 6c 65 20 62 79 20 your sample by
5990: 63 68 61 6e 67 69 6e 67 20 69 74 73 20 70 6c 61 changing its pla
59a0: 79 62 61 63 6b 20 73 70 65 65 64 2e 0a 0a 20 20 yback speed...
59b0: 20 20 20 20 59 6f 75 20 63 61 6e 20 75 73 65 20 You can use
59c0: 3c 62 3e 4e 65 78 75 73 2e 74 75 6e 65 2e 72 61 <b>Nexus.tune.ra
59d0: 74 69 6f 28 29 3c 2f 62 3e 20 74 6f 20 67 65 74 tio()</b> to get
59e0: 20 74 68 65 20 66 72 65 71 75 65 6e 63 79 20 72 the frequency r
59f0: 61 74 69 6f 20 6f 66 20 61 20 6e 6f 74 65 20 74 atio of a note t
5a00: 6f 20 74 68 65 20 72 6f 6f 74 20 6f 66 20 79 6f o the root of yo
5a10: 75 72 20 73 63 61 6c 65 2e 20 54 68 69 73 20 72 ur scale. This r
5a20: 61 74 69 6f 20 63 61 6e 20 62 65 20 75 73 65 64 atio can be used
5a30: 20 74 6f 20 73 65 74 20 74 68 65 20 70 6c 61 79 to set the play
5a40: 62 61 63 6b 20 73 70 65 65 64 20 6f 66 20 79 6f back speed of yo
5a50: 75 72 20 73 61 6d 70 6c 65 2e 0a 0a 20 20 20 20 ur sample...
5a60: 20 20 3c 70 72 65 3e 0a 20 20 20 20 20 20 20 20 <pre>.
5a70: 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e <code class="lan
5a80: 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 guage-javascript
5a90: 22 3e 0a 2f 2f 20 54 68 69 73 20 67 69 76 65 73 ">.// This gives
5aa0: 20 79 6f 75 20 74 68 65 20 70 69 74 63 68 20 72 you the pitch r
5ab0: 61 74 69 6f 20 62 65 74 77 65 65 6e 20 74 68 65 atio between the
5ac0: 20 35 74 68 20 6e 6f 74 65 20 69 6e 20 73 63 61 5th note in sca
5ad0: 6c 65 20 61 6e 64 20 74 68 65 20 72 6f 6f 74 2e le and the root.
5ae0: 0a 4e 65 78 75 73 2e 74 75 6e 65 2e 72 61 74 69 .Nexus.tune.rati
5af0: 6f 28 34 29 20 20 2f 2f 20 72 65 74 75 72 6e 73 o(4) // returns
5b00: 20 31 2e 34 39 38 33 30 36 39 33 39 32 35 0a 0a 1.49830693925..
5b10: 2f 2f 20 59 6f 75 20 63 61 6e 20 75 73 65 20 74 // You can use t
5b20: 68 69 73 20 74 6f 20 73 65 74 20 74 68 65 20 70 his to set the p
5b30: 6c 61 79 62 61 63 6b 20 73 70 65 65 64 20 6f 66 layback speed of
5b40: 20 61 20 73 61 6d 70 6c 65 72 0a 73 61 6d 70 6c a sampler.sampl
5b50: 65 72 2e 70 6c 61 79 62 61 63 6b 52 61 74 65 20 er.playbackRate
5b60: 3d 20 4e 65 78 75 73 2e 74 75 6e 65 2e 72 61 74 = Nexus.tune.rat
5b70: 69 6f 28 34 29 0a 20 20 20 20 20 20 20 20 3c 2f io(4). </
5b80: 63 6f 64 65 3e 0a 20 20 20 20 20 20 3c 2f 70 72 code>. </pr
5b90: 65 3e 0a 0a 20 20 20 20 3c 2f 70 3e 0a 0a 0a 0a e>.. </p>....
5ba0: 20 20 20 20 3c 68 33 3e 43 68 61 6e 67 69 6e 67 <h3>Changing
5bb0: 20 74 68 65 20 53 63 61 6c 65 3c 2f 68 33 3e 0a the Scale</h3>.
5bc0: 20 20 20 20 3c 70 3e 0a 20 20 20 20 20 20 42 79 <p>. By
5bd0: 20 64 65 66 61 75 6c 74 2c 20 74 68 65 20 73 63 default, the sc
5be0: 61 6c 65 20 69 73 20 61 6e 20 65 71 75 61 6c 2d ale is an equal-
5bf0: 74 65 6d 70 65 72 65 64 20 6d 61 6a 6f 72 20 73 tempered major s
5c00: 63 61 6c 65 2e 0a 20 20 20 20 3c 2f 70 3e 0a 20 cale.. </p>.
5c10: 20 20 20 3c 70 3e 0a 20 20 20 20 20 20 57 65 20 <p>. We
5c20: 64 6f 20 6e 6f 74 20 70 72 6f 76 69 64 65 20 61 do not provide a
5c30: 6e 79 20 6f 74 68 65 72 20 62 75 69 6c 74 2d 69 ny other built-i
5c40: 6e 20 73 63 61 6c 65 73 2e 20 48 6f 77 65 76 65 n scales. Howeve
5c50: 72 2c 20 77 65 20 70 72 6f 76 69 64 65 20 74 77 r, we provide tw
5c60: 6f 20 77 61 79 73 20 66 6f 72 20 79 6f 75 20 74 o ways for you t
5c70: 6f 20 63 72 65 61 74 65 20 79 6f 75 72 20 6f 77 o create your ow
5c80: 6e 20 73 63 61 6c 65 2e 0a 20 20 20 20 3c 2f 70 n scale.. </p
5c90: 3e 0a 0a 20 20 20 20 3c 68 34 3e 44 65 73 63 72 >.. <h4>Descr
5ca0: 69 62 69 6e 67 20 61 20 53 63 61 6c 65 3c 2f 68 ibing a Scale</h
5cb0: 34 3e 0a 0a 20 20 20 20 54 6f 20 64 65 66 69 6e 4>.. To defin
5cc0: 65 20 79 6f 75 72 20 6f 77 6e 20 73 63 61 6c 65 e your own scale
5cd0: 2c 20 79 6f 75 20 63 61 6e 20 63 61 6c 6c 20 3c , you can call <
5ce0: 62 3e 2e 63 72 65 61 74 65 53 63 61 6c 65 28 29 b>.createScale()
5cf0: 3c 2f 62 3e 20 77 69 74 68 20 61 20 6c 69 73 74 </b> with a list
5d00: 20 6f 66 20 74 68 65 20 63 68 72 6f 6d 61 74 69 of the chromati
5d10: 63 20 73 63 61 6c 65 20 64 65 67 72 65 65 73 20 c scale degrees
5d20: 79 6f 75 20 77 61 6e 74 20 69 6e 20 79 6f 75 72 you want in your
5d30: 20 73 63 61 6c 65 2e 0a 0a 20 20 20 20 3c 70 72 scale... <pr
5d40: 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c e><code class="l
5d50: 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 anguage-javascri
5d60: 70 74 22 3e 0a 2f 2f 20 43 72 65 61 74 65 20 61 pt">.// Create a
5d70: 20 6d 69 6e 6f 72 20 73 63 61 6c 65 0a 4e 65 78 minor scale.Nex
5d80: 75 73 2e 74 75 6e 65 2e 63 72 65 61 74 65 53 63 us.tune.createSc
5d90: 61 6c 65 28 30 2c 32 2c 33 2c 35 2c 37 2c 38 2c ale(0,2,3,5,7,8,
5da0: 31 30 29 3b 0a 0a 2f 2f 20 4e 6f 77 2c 20 4e 65 10);..// Now, Ne
5db0: 78 75 73 2e 6e 6f 74 65 28 29 20 77 69 6c 6c 20 xus.note() will
5dc0: 72 65 66 65 72 20 74 6f 20 74 68 65 20 73 63 61 refer to the sca
5dd0: 6c 65 20 79 6f 75 20 64 65 66 69 6e 65 64 0a 4e le you defined.N
5de0: 65 78 75 73 2e 6e 6f 74 65 28 30 29 20 2f 2f 20 exus.note(0) //
5df0: 72 65 74 75 72 6e 73 20 74 68 65 20 66 72 65 71 returns the freq
5e00: 75 65 6e 63 79 20 6e 75 6d 62 65 72 20 6f 66 20 uency number of
5e10: 74 68 65 20 72 6f 6f 74 0a 4e 65 78 75 73 2e 6e the root.Nexus.n
5e20: 6f 74 65 28 31 29 20 2f 2f 20 72 65 74 75 72 6e ote(1) // return
5e30: 73 20 74 68 65 20 66 72 65 71 75 65 6e 63 79 20 s the frequency
5e40: 6e 75 6d 62 65 72 20 6f 66 20 61 20 4d 61 6a 6f number of a Majo
5e50: 72 20 32 6e 64 0a 4e 65 78 75 73 2e 6e 6f 74 65 r 2nd.Nexus.note
5e60: 28 32 29 20 2f 2f 20 72 65 74 75 72 6e 73 20 74 (2) // returns t
5e70: 68 65 20 66 72 65 71 75 65 6e 63 79 20 6e 75 6d he frequency num
5e80: 62 65 72 20 6f 66 20 61 20 4d 69 6e 6f 72 20 33 ber of a Minor 3
5e90: 72 64 0a 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f rd. </code></
5ea0: 70 72 65 3e 0a 0a 0a 20 20 20 20 3c 68 34 3e 44 pre>... <h4>D
5eb0: 65 73 63 72 69 62 69 6e 67 20 61 20 4a 75 73 74 escribing a Just
5ec0: 20 49 6e 74 6f 6e 61 74 69 6f 6e 20 53 63 61 6c Intonation Scal
5ed0: 65 3c 2f 68 34 3e 0a 0a 20 20 20 20 59 6f 75 20 e</h4>.. You
5ee0: 63 61 6e 20 61 6c 73 6f 20 64 65 66 69 6e 65 20 can also define
5ef0: 3c 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f <a href="https:/
5f00: 2f 65 6e 2e 77 69 6b 69 70 65 64 69 61 2e 6f 72 /en.wikipedia.or
5f10: 67 2f 77 69 6b 69 2f 4a 75 73 74 5f 69 6e 74 6f g/wiki/Just_into
5f20: 6e 61 74 69 6f 6e 22 3e 6a 75 73 74 20 69 6e 74 nation">just int
5f30: 6f 6e 61 74 69 6f 6e 3c 2f 61 3e 20 73 63 61 6c onation</a> scal
5f40: 65 73 2e 0a 0a 20 20 20 20 54 6f 20 64 6f 20 73 es... To do s
5f50: 6f 2c 20 63 61 6c 6c 20 3c 62 3e 2e 63 72 65 61 o, call <b>.crea
5f60: 74 65 4a 49 53 63 61 6c 65 28 29 3c 2f 62 3e 20 teJIScale()</b>
5f70: 77 69 74 68 20 79 6f 75 72 20 6f 77 6e 20 6c 69 with your own li
5f80: 73 74 20 6f 66 20 70 69 74 63 68 20 72 61 74 69 st of pitch rati
5f90: 6f 73 2e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 os... <pre><c
5fa0: 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 ode class="langu
5fb0: 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 3e age-javascript">
5fc0: 0a 2f 2f 20 43 72 65 61 74 65 20 61 20 6d 61 6a .// Create a maj
5fd0: 6f 72 20 73 63 61 6c 65 20 69 6e 20 6a 75 73 74 or scale in just
5fe0: 20 69 6e 74 6f 6e 61 74 69 6f 6e 0a 4e 65 78 75 intonation.Nexu
5ff0: 73 2e 74 75 6e 65 2e 63 72 65 61 74 65 4a 49 53 s.tune.createJIS
6000: 63 61 6c 65 28 20 31 2f 31 2c 20 39 2f 38 2c 20 cale( 1/1, 9/8,
6010: 35 2f 34 2c 20 34 2f 33 2c 20 33 2f 32 2c 20 38 5/4, 4/3, 3/2, 8
6020: 2f 35 2c 20 35 2f 33 2c 20 31 35 2f 38 20 29 3b /5, 5/3, 15/8 );
6030: 0a 0a 0a 2f 2f 20 4e 6f 77 2c 20 4e 65 78 75 73 ...// Now, Nexus
6040: 2e 6e 6f 74 65 28 29 20 77 69 6c 6c 20 72 65 66 .note() will ref
6050: 65 72 20 74 6f 20 74 68 65 20 73 63 61 6c 65 20 er to the scale
6060: 79 6f 75 20 64 65 66 69 6e 65 64 0a 4e 65 78 75 you defined.Nexu
6070: 73 2e 6e 6f 74 65 28 30 29 20 2f 2f 20 72 65 74 s.note(0) // ret
6080: 75 72 6e 73 20 74 68 65 20 66 72 65 71 75 65 6e urns the frequen
6090: 63 79 20 6e 75 6d 62 65 72 20 66 6f 72 20 72 61 cy number for ra
60a0: 74 69 6f 20 31 2f 31 0a 4e 65 78 75 73 2e 6e 6f tio 1/1.Nexus.no
60b0: 74 65 28 31 29 20 2f 2f 20 72 65 74 75 72 6e 73 te(1) // returns
60c0: 20 74 68 65 20 66 72 65 71 75 65 6e 63 79 20 6e the frequency n
60d0: 75 6d 62 65 72 20 66 6f 72 20 72 61 74 69 6f 20 umber for ratio
60e0: 39 2f 38 0a 4e 65 78 75 73 2e 6e 6f 74 65 28 32 9/8.Nexus.note(2
60f0: 29 20 2f 2f 20 72 65 74 75 72 6e 73 20 74 68 65 ) // returns the
6100: 20 66 72 65 71 75 65 6e 63 79 20 6e 75 6d 62 65 frequency numbe
6110: 72 20 66 6f 72 20 72 61 74 69 6f 20 35 2f 34 0a r for ratio 5/4.
6120: 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 </code></pre
6130: 3e 0a 0a 0a 0a 20 20 20 20 3c 68 33 3e 43 68 61 >.... <h3>Cha
6140: 6e 67 69 6e 67 20 74 68 65 20 72 6f 6f 74 20 3c nging the root <
6150: 2f 68 33 3e 0a 20 20 20 20 3c 70 3e 0a 20 20 20 /h3>. <p>.
6160: 20 20 20 42 79 20 64 65 66 61 75 6c 74 2c 20 74 By default, t
6170: 68 65 20 72 6f 6f 74 20 6f 66 20 74 68 65 20 73 he root of the s
6180: 63 61 6c 65 20 69 73 20 4d 69 64 64 6c 65 20 43 cale is Middle C
6190: 2e 20 54 68 65 72 65 66 6f 72 65 2c 20 3c 62 3e . Therefore, <b>
61a0: 4e 65 78 75 73 2e 6e 6f 74 65 28 30 29 3c 2f 62 Nexus.note(0)</b
61b0: 3e 20 72 65 74 75 72 6e 73 20 74 68 65 20 66 72 > returns the fr
61c0: 65 71 75 65 6e 63 79 20 66 6f 72 20 4d 69 64 64 equency for Midd
61d0: 6c 65 20 43 2e 0a 20 20 20 20 3c 2f 70 3e 0a 0a le C.. </p>..
61e0: 20 20 20 20 3c 70 3e 0a 20 20 20 20 20 20 59 6f <p>. Yo
61f0: 75 20 63 61 6e 20 73 65 74 20 74 68 65 20 72 6f u can set the ro
6200: 6f 74 20 75 73 69 6e 67 20 3c 62 3e 4e 65 78 75 ot using <b>Nexu
6210: 73 2e 74 75 6e 65 2e 72 6f 6f 74 3c 2f 62 3e 2c s.tune.root</b>,
6220: 20 77 68 69 63 68 20 69 73 20 61 20 66 72 65 71 which is a freq
6230: 75 65 6e 63 79 20 76 61 6c 75 65 2e 0a 20 20 20 uency value..
6240: 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 65 3e </p>.. <pre>
6250: 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e <code class="lan
6260: 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 guage-javascript
6270: 22 3e 0a 2f 2f 20 53 65 74 20 74 68 65 20 72 6f ">.// Set the ro
6280: 6f 74 20 74 6f 20 33 20 6f 63 74 61 76 65 73 20 ot to 3 octaves
6290: 62 65 6c 6f 77 20 4d 69 64 64 6c 65 20 43 2e 0a below Middle C..
62a0: 4e 65 78 75 73 2e 74 75 6e 65 2e 72 6f 6f 74 20 Nexus.tune.root
62b0: 3d 20 4e 65 78 75 73 2e 6e 6f 74 65 28 30 2c 2d = Nexus.note(0,-
62c0: 33 29 3b 0a 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 3);. </code><
62d0: 2f 70 72 65 3e 0a 0a 20 20 20 20 49 6e 20 74 68 /pre>.. In th
62e0: 69 73 20 77 61 79 2c 20 79 6f 75 20 63 61 6e 20 is way, you can
62f0: 63 68 61 6e 67 65 20 79 6f 75 72 20 73 63 61 6c change your scal
6300: 65 20 72 6f 6f 74 20 6f 6e 20 74 68 65 20 66 6c e root on the fl
6310: 79 20 62 79 20 73 65 74 74 69 6e 67 20 69 74 20 y by setting it
6320: 74 6f 20 6f 74 68 65 72 20 6e 6f 74 65 73 20 6f to other notes o
6330: 66 20 74 68 65 20 73 63 61 6c 65 20 79 6f 75 20 f the scale you
6340: 61 72 65 20 63 75 72 72 65 6e 74 6c 79 20 75 73 are currently us
6350: 69 6e 67 2e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 ing... <p>.
6360: 20 20 20 20 54 68 65 20 72 6f 6f 74 20 63 61 6e The root can
6370: 20 61 6c 73 6f 20 62 65 20 73 65 74 20 75 73 69 also be set usi
6380: 6e 67 20 74 72 61 64 69 74 69 6f 6e 61 6c 20 6d ng traditional m
6390: 75 73 69 63 61 6c 20 76 61 6c 75 65 73 20 6c 69 usical values li
63a0: 6b 65 20 22 43 33 22 20 6f 72 20 22 41 31 22 2e ke "C3" or "A1".
63b0: 20 54 68 69 73 20 69 73 20 74 68 65 20 6f 6e 6c This is the onl
63c0: 79 20 70 6c 61 63 65 20 69 6e 20 74 68 69 73 20 y place in this
63d0: 74 6f 6f 6c 6b 69 74 20 77 68 65 72 65 20 74 68 toolkit where th
63e0: 69 73 20 74 79 70 65 20 6f 66 20 6d 75 73 69 63 is type of music
63f0: 20 6e 6f 74 61 74 69 6f 6e 20 69 73 20 75 73 65 notation is use
6400: 64 2e 0a 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 d.. </p>..
6410: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
6420: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
6430: 73 63 72 69 70 74 22 3e 0a 2f 2f 20 53 65 74 20 script">.// Set
6440: 74 68 65 20 72 6f 6f 74 20 74 6f 20 6c 6f 77 20 the root to low
6450: 41 2e 0a 4e 65 78 75 73 2e 74 75 6e 65 2e 72 6f A..Nexus.tune.ro
6460: 6f 74 20 3d 20 22 41 31 22 3b 0a 20 20 20 20 3c ot = "A1";. <
6470: 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 0a 20 /code></pre>...
6480: 20 20 20 3c 70 3e 0a 20 20 20 20 20 20 59 6f 75 <p>. You
6490: 20 63 61 6e 20 61 6c 73 6f 20 73 65 74 20 4e 65 can also set Ne
64a0: 78 75 73 2e 74 75 6e 65 2e 72 6f 6f 74 20 64 69 xus.tune.root di
64b0: 72 65 63 74 69 6f 6e 20 74 6f 20 61 20 66 72 65 rection to a fre
64c0: 71 75 65 6e 63 79 20 76 61 6c 75 65 2c 20 66 6f quency value, fo
64d0: 72 20 65 78 61 6d 70 6c 65 20 69 66 20 79 6f 75 r example if you
64e0: 20 61 72 65 20 77 6f 72 6b 69 6e 67 20 69 6e 20 are working in
64f0: 4a 75 73 74 20 49 6e 74 6f 6e 61 74 69 6f 6e 2e Just Intonation.
6500: 0a 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c . </p>.. <
6510: 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d pre><code class=
6520: 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 "language-javasc
6530: 72 69 70 74 22 3e 0a 2f 2f 20 53 65 74 20 74 68 ript">.// Set th
6540: 65 20 72 6f 6f 74 20 6f 66 20 79 6f 75 72 20 73 e root of your s
6550: 63 61 6c 65 20 74 6f 20 31 32 30 68 7a 2e 0a 4e cale to 120hz..N
6560: 65 78 75 73 2e 74 75 6e 65 2e 72 6f 6f 74 20 3d exus.tune.root =
6570: 20 31 32 30 3b 0a 20 20 20 20 3c 2f 63 6f 64 65 120;. </code
6580: 3e 3c 2f 70 72 65 3e 0a 0a 0a 20 20 20 20 3c 21 ></pre>... <!
6590: 2d 2d 0a 0a 20 20 20 20 3c 68 33 3e 45 78 61 6d --.. <h3>Exam
65a0: 70 6c 65 73 3c 2f 68 33 3e 0a 0a 20 20 20 20 3c ples</h3>.. <
65b0: 70 3e 0a 20 20 20 20 20 20 43 6f 64 65 70 65 6e p>. Codepen
65c0: 20 66 6f 72 3a 20 73 63 61 6c 65 20 6f 76 65 72 for: scale over
65d0: 20 35 20 6f 63 74 61 76 65 73 0a 20 20 20 20 3c 5 octaves. <
65e0: 2f 70 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 /p>.. <p>.
65f0: 20 20 20 43 6f 64 65 70 65 6e 20 66 6f 72 3a 20 Codepen for:
6600: 61 72 70 65 67 67 69 6f 0a 20 20 20 20 3c 2f 70 arpeggio. </p
6610: 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 20 20 >.. <p>.
6620: 20 43 6f 64 65 70 65 6e 20 66 6f 72 3a 20 6d 65 Codepen for: me
6630: 6c 6f 64 79 20 61 6e 64 20 72 68 79 74 68 6d 0a lody and rhythm.
6640: 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 </p>.. <p
6650: 3e 0a 20 20 20 20 20 20 43 6f 64 65 70 65 6e 20 >. Codepen
6660: 66 6f 72 3a 20 63 75 73 74 6f 6d 20 73 63 61 6c for: custom scal
6670: 65 73 0a 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 es. </p>..
6680: 20 3c 21 2d 2d 20 20 20 20 20 3c 70 72 65 3e 3c <!-- <pre><
6690: 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 code class="lang
66a0: 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 uage-javascript"
66b0: 3e 0a 20 20 20 20 2f 2f 20 45 76 65 72 79 20 31 >. // Every 1
66c0: 30 30 6d 73 2c 20 70 6c 61 79 20 61 20 72 61 6e 00ms, play a ran
66d0: 64 6f 6d 20 6e 6f 74 65 20 66 72 6f 6d 20 61 20 dom note from a
66e0: 72 61 6e 64 6f 6d 20 6f 63 74 61 76 65 20 69 6e random octave in
66f0: 20 74 68 65 20 6d 61 6a 6f 72 20 73 63 61 6c 65 the major scale
6700: 0a 20 20 20 20 6d 74 2e 69 6e 74 65 72 76 61 6c . mt.interval
6710: 28 31 30 30 2c 66 75 6e 63 74 69 6f 6e 28 29 20 (100,function()
6720: 7b 0a 20 20 20 20 20 76 61 72 20 73 63 61 6c 65 {. var scale
6730: 44 65 67 72 65 65 20 3d 20 6d 74 2e 72 69 28 20 Degree = mt.ri(
6740: 30 2c 20 6d 74 2e 74 75 6e 65 2e 73 63 61 6c 65 0, mt.tune.scale
6750: 2e 6c 65 6e 67 74 68 20 29 3b 0a 20 20 20 20 20 .length );.
6760: 76 61 72 20 6f 63 74 61 76 65 20 3d 20 6d 74 2e var octave = mt.
6770: 72 69 28 20 2d 33 20 2c 20 33 20 29 3b 0a 20 20 ri( -3 , 3 );.
6780: 20 20 20 73 79 6e 74 68 31 2e 66 72 65 71 75 65 synth1.freque
6790: 6e 63 79 2e 76 61 6c 75 65 20 3d 20 6d 74 2e 74 ncy.value = mt.t
67a0: 75 6e 65 2e 6e 6f 74 65 28 20 73 63 61 6c 65 44 une.note( scaleD
67b0: 65 67 72 65 65 2c 20 6f 63 74 61 76 65 20 29 3b egree, octave );
67c0: 20 2f 2f 20 72 65 74 75 72 6e 73 20 74 68 65 20 // returns the
67d0: 72 6f 6f 74 0a 20 20 20 20 7d 29 0a 20 20 20 20 root. }).
67e0: 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 </code></pr
67f0: 65 3e 20 2d 2d 3e 0a 0a 0a 0a 0a 20 20 3c 2f 64 e> -->..... </d
6800: 69 76 3e 0a 0a 0a 0a 0a 0a 0a 0a 0a 20 20 3c 21 iv>......... <!
6810: 2d 2d 0a 0a 20 20 54 49 4d 49 4e 47 0a 0a 20 20 --.. TIMING..
6820: 2d 2d 3e 0a 0a 20 20 3c 64 69 76 20 69 64 3d 22 -->.. <div id="
6830: 69 6e 74 65 72 76 61 6c 22 20 63 6c 61 73 73 3d interval" class=
6840: 22 63 75 73 74 6f 6d 2d 74 75 74 6f 72 69 61 6c "custom-tutorial
6850: 22 20 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 79 " style="display
6860: 3a 6e 6f 6e 65 22 3e 0a 20 20 20 20 3c 68 32 3e :none">. <h2>
6870: 54 69 6d 69 6e 67 3c 2f 68 32 3e 0a 0a 20 20 20 Timing</h2>..
6880: 20 3c 70 3e 0a 20 20 20 20 20 20 3c 62 3e 4e 65 <p>. <b>Ne
6890: 78 75 73 2e 49 6e 74 65 72 76 61 6c 3c 2f 62 3e xus.Interval</b>
68a0: 20 63 72 65 61 74 65 73 20 61 20 72 65 70 65 61 creates a repea
68b0: 74 69 6e 67 20 70 75 6c 73 65 20 75 73 69 6e 67 ting pulse using
68c0: 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 3a 2f <a href="http:/
68d0: 2f 67 69 74 68 75 62 2e 63 6f 6d 2f 73 65 62 70 /github.com/sebp
68e0: 69 71 2f 57 41 41 43 6c 6f 63 6b 22 3e 57 41 41 iq/WAAClock">WAA
68f0: 43 6c 6f 63 6b 3c 2f 61 3e 2e 0a 20 20 20 20 3c Clock</a>.. <
6900: 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 /p>.. <pre><c
6910: 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 ode class="langu
6920: 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 3e age-javascript">
6930: 0a 2f 2f 20 43 72 65 61 74 65 20 61 20 70 75 6c .// Create a pul
6940: 73 65 20 6f 66 20 31 30 30 6d 73 2e 20 41 74 20 se of 100ms. At
6950: 65 61 63 68 20 70 75 6c 73 65 2c 20 74 68 65 20 each pulse, the
6960: 63 61 6c 6c 62 61 63 6b 20 66 75 6e 63 74 69 6f callback functio
6970: 6e 20 69 73 20 65 78 65 63 75 74 65 64 2e 0a 0a n is executed...
6980: 76 61 72 20 69 6e 74 65 72 76 61 6c 20 3d 20 6e var interval = n
6990: 65 77 20 4e 65 78 75 73 2e 49 6e 74 65 72 76 61 ew Nexus.Interva
69a0: 6c 28 31 30 30 2c 20 66 75 6e 63 74 69 6f 6e 28 l(100, function(
69b0: 29 20 7b 0a 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f ) {. console.lo
69c0: 67 28 27 62 65 65 70 27 29 3b 0a 7d 29 0a 20 20 g('beep');.}).
69d0: 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 </code></pr
69e0: 65 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 20 e>.. <p>.
69f0: 20 20 54 68 69 73 20 69 6e 74 65 72 76 61 6c 20 This interval
6a00: 75 73 65 73 20 61 20 77 65 62 20 61 75 64 69 6f uses a web audio
6a10: 20 63 6f 6e 74 65 78 74 20 74 6f 20 68 61 6e 64 context to hand
6a20: 6c 65 20 74 69 6d 69 6e 67 2c 20 73 6f 20 69 74 le timing, so it
6a30: 20 69 73 20 6d 6f 72 65 20 61 63 63 75 72 61 74 is more accurat
6a40: 65 20 74 68 61 6e 20 61 20 72 65 67 75 6c 61 72 e than a regular
6a50: 20 3c 62 3e 73 65 74 49 6e 74 65 72 76 61 6c 3c <b>setInterval<
6a60: 2f 62 3e 20 6f 72 20 3c 62 3e 73 65 74 54 69 6d /b> or <b>setTim
6a70: 65 6f 75 74 3c 2f 62 3e 0a 20 20 20 20 3c 2f 70 eout</b>. </p
6a80: 3e 0a 0a 0a 0a 0a 20 20 20 20 3c 68 33 3e 41 75 >..... <h3>Au
6a90: 74 6f 73 74 61 72 74 3c 2f 68 33 3e 0a 0a 20 20 tostart</h3>..
6aa0: 20 20 3c 70 3e 0a 20 20 20 20 20 20 42 65 20 64 <p>. Be d
6ab0: 65 66 61 75 6c 74 2c 20 74 68 65 20 69 6e 74 65 efault, the inte
6ac0: 72 76 61 6c 20 77 69 6c 6c 20 61 75 74 6f 6d 61 rval will automa
6ad0: 74 69 63 61 6c 6c 79 20 73 74 61 72 74 20 77 68 tically start wh
6ae0: 65 6e 20 69 74 20 69 73 20 63 72 65 61 74 65 64 en it is created
6af0: 2e 0a 20 20 20 20 20 20 48 6f 77 65 76 65 72 20 .. However
6b00: 61 20 74 68 69 72 64 20 70 61 72 61 6d 65 74 65 a third paramete
6b10: 72 20 63 61 6e 20 73 65 74 20 61 75 74 6f 73 74 r can set autost
6b20: 61 72 74 20 74 6f 20 66 61 6c 73 65 2e 0a 20 20 art to false..
6b30: 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 72 65 </p>.. <pre
6b40: 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 ><code class="la
6b50: 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 nguage-javascrip
6b60: 74 22 3e 0a 2f 2f 20 43 72 65 61 74 65 20 61 20 t">.// Create a
6b70: 70 75 6c 73 65 20 74 68 61 74 20 64 6f 65 73 20 pulse that does
6b80: 6e 6f 74 20 61 75 74 6f 73 74 61 72 74 2e 0a 0a not autostart...
6b90: 76 61 72 20 69 6e 74 65 72 76 61 6c 20 3d 20 6e var interval = n
6ba0: 65 77 20 4e 65 78 75 73 2e 49 6e 74 65 72 76 61 ew Nexus.Interva
6bb0: 6c 28 31 30 30 2c 20 66 75 6e 63 74 69 6f 6e 28 l(100, function(
6bc0: 29 20 7b 0a 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f ) {. console.lo
6bd0: 67 28 27 62 65 65 70 27 29 3b 0a 7d 2c 20 66 61 g('beep');.}, fa
6be0: 6c 73 65 29 0a 20 20 20 20 20 20 3c 2f 63 6f 64 lse). </cod
6bf0: 65 3e 3c 2f 70 72 65 3e 0a 0a 0a 20 20 20 20 3c e></pre>... <
6c00: 21 2d 2d 20 73 65 63 74 69 6f 6e 20 2d 2d 3e 0a !-- section -->.
6c10: 0a 20 20 20 20 3c 68 33 3e 43 68 61 6e 67 69 6e . <h3>Changin
6c20: 67 20 74 68 65 20 49 6e 74 65 72 76 61 6c 20 50 g the Interval P
6c30: 65 72 69 6f 64 3c 2f 68 33 3e 0a 20 20 20 20 3c eriod</h3>. <
6c40: 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d pre><code class=
6c50: 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 "language-javasc
6c60: 72 69 70 74 22 3e 0a 2f 2f 20 43 68 61 6e 67 65 ript">.// Change
6c70: 20 79 6f 75 72 20 69 6e 74 65 72 76 61 6c 20 70 your interval p
6c80: 65 72 69 6f 64 20 74 6f 20 32 30 30 6d 73 2e 0a eriod to 200ms..
6c90: 69 6e 74 65 72 76 61 6c 2e 6d 73 28 32 30 30 29 interval.ms(200)
6ca0: 0a 20 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f . </code></
6cb0: 70 72 65 3e 0a 0a 0a 20 20 20 20 3c 21 2d 2d 20 pre>... <!--
6cc0: 73 65 63 74 69 6f 6e 20 2d 2d 3e 0a 20 20 20 20 section -->.
6cd0: 3c 68 33 3e 41 6c 6c 20 6d 65 74 68 6f 64 73 3c <h3>All methods<
6ce0: 2f 68 33 3e 0a 20 20 20 20 3c 70 72 65 3e 3c 63 /h3>. <pre><c
6cf0: 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 ode class="langu
6d00: 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 3e age-javascript">
6d10: 0a 2f 2f 20 43 72 65 61 74 65 20 61 20 70 75 6c .// Create a pul
6d20: 73 65 20 6f 66 20 31 20 73 65 63 6f 6e 64 0a 76 se of 1 second.v
6d30: 61 72 20 69 6e 74 65 72 76 61 6c 20 3d 20 6e 65 ar interval = ne
6d40: 77 20 4e 65 78 75 73 2e 49 6e 74 65 72 76 61 6c w Nexus.Interval
6d50: 28 31 30 30 30 2c 20 66 75 6e 63 74 69 6f 6e 28 (1000, function(
6d60: 29 20 7b 0a 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f ) {. console.lo
6d70: 67 28 27 62 65 65 70 27 29 3b 0a 7d 29 0a 0a 2f g('beep');.})../
6d80: 2f 20 53 74 6f 70 20 74 68 65 20 70 75 6c 73 65 / Stop the pulse
6d90: 0a 69 6e 74 65 72 76 61 6c 2e 73 74 6f 70 28 29 .interval.stop()
6da0: 3b 0a 0a 2f 2f 20 53 74 61 72 74 20 74 68 65 20 ;..// Start the
6db0: 70 75 6c 73 65 0a 69 6e 74 65 72 76 61 6c 2e 73 pulse.interval.s
6dc0: 74 61 72 74 28 29 3b 0a 0a 2f 2f 20 43 68 61 6e tart();..// Chan
6dd0: 67 65 20 74 68 65 20 69 6e 74 65 72 76 61 6c 20 ge the interval
6de0: 74 69 6d 65 0a 69 6e 74 65 72 76 61 6c 2e 6d 73 time.interval.ms
6df0: 28 32 30 30 29 3b 0a 0a 2f 2f 20 43 68 61 6e 67 (200);..// Chang
6e00: 65 20 74 68 65 20 66 75 6e 63 74 69 6f 6e 20 74 e the function t
6e10: 68 61 74 20 69 73 20 63 61 6c 6c 65 64 20 61 74 hat is called at
6e20: 20 65 61 63 68 20 70 75 6c 73 65 0a 69 6e 74 65 each pulse.inte
6e30: 72 76 61 6c 2e 65 76 65 6e 74 20 3d 20 66 75 6e rval.event = fun
6e40: 63 74 69 6f 6e 28 29 20 7b 0a 20 20 63 6f 6e 73 ction() {. cons
6e50: 6f 6c 65 2e 6c 6f 67 28 22 62 6c 6f 6f 70 22 29 ole.log("bloop")
6e60: 3b 0a 7d 0a 20 20 20 20 20 20 3c 2f 63 6f 64 65 ;.}. </code
6e70: 3e 3c 2f 70 72 65 3e 0a 0a 0a 20 20 3c 2f 64 69 ></pre>... </di
6e80: 76 3e 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a v>..............
6e90: 0a 0a 0a 0a 0a 20 20 3c 21 2d 2d 0a 0a 20 20 4d ..... <!--.. M
6ea0: 54 2e 4d 41 54 52 49 58 0a 0a 20 20 2d 2d 3e 0a T.MATRIX.. -->.
6eb0: 0a 20 20 3c 64 69 76 20 69 64 3d 22 6d 61 74 72 . <div id="matr
6ec0: 69 78 22 20 63 6c 61 73 73 3d 22 63 75 73 74 6f ix" class="custo
6ed0: 6d 2d 74 75 74 6f 72 69 61 6c 22 20 73 74 79 6c m-tutorial" styl
6ee0: 65 3d 22 64 69 73 70 6c 61 79 3a 6e 6f 6e 65 22 e="display:none"
6ef0: 3e 0a 20 20 20 20 3c 68 32 3e 4d 61 74 72 69 78 >. <h2>Matrix
6f00: 20 4d 6f 64 65 6c 3c 2f 68 32 3e 0a 0a 20 20 20 Model</h2>..
6f10: 20 3c 70 3e 0a 20 20 20 20 20 20 54 68 65 20 4d <p>. The M
6f20: 61 74 72 69 78 20 4d 6f 64 65 6c 20 6c 65 74 73 atrix Model lets
6f30: 20 79 6f 75 20 72 65 61 64 2c 20 77 72 69 74 65 you read, write
6f40: 2c 20 61 6e 64 20 6d 61 6e 69 70 75 6c 61 74 65 , and manipulate
6f50: 20 61 20 74 77 6f 2d 64 69 6d 65 6e 73 69 6f 6e a two-dimension
6f60: 61 6c 20 61 72 72 61 79 20 6f 66 20 64 61 74 61 al array of data
6f70: 20 28 73 75 63 68 20 61 73 20 74 68 65 20 64 61 (such as the da
6f80: 74 61 20 74 68 61 74 20 69 73 20 76 69 73 75 61 ta that is visua
6f90: 6c 69 7a 65 64 20 62 79 20 61 20 3c 61 20 68 72 lized by a <a hr
6fa0: 65 66 3d 22 23 53 65 71 75 65 6e 63 65 72 22 3e ef="#Sequencer">
6fb0: 73 65 71 75 65 6e 63 65 72 3c 2f 61 3e 29 2e 0a sequencer</a>)..
6fc0: 20 20 20 20 3c 2f 70 3e 0a 20 20 20 20 3c 62 72 </p>. <br
6fd0: 20 2f 3e 0a 20 20 20 20 43 72 65 61 74 69 6e 67 />. Creating
6fe0: 20 61 20 4d 61 74 72 69 78 20 4d 6f 64 65 6c 20 a Matrix Model
6ff0: 66 72 6f 6d 20 73 63 72 61 74 63 68 2e 2e 2e 0a from scratch....
7000: 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 <pre><code c
7010: 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a lass="language-j
7020: 61 76 61 73 63 72 69 70 74 22 3e 0a 6d 61 74 72 avascript">.matr
7030: 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d ix = new Nexus.M
7040: 61 74 72 69 78 28 35 2c 31 30 29 3b 0a 20 20 20 atrix(5,10);.
7050: 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 </code></pre
7060: 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 63 72 >.. <pre><scr
7070: 69 70 74 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 ipt>.var matrix
7080: 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 = new Nexus.Matr
7090: 69 78 28 35 2c 31 30 29 0a 64 6f 63 75 6d 65 6e ix(5,10).documen
70a0: 74 2e 77 72 69 74 65 28 6d 61 74 72 69 78 2e 66 t.write(matrix.f
70b0: 6f 72 6d 61 74 41 73 54 65 78 74 28 29 29 0a 3c ormatAsText()).<
70c0: 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a 3c 2f 70 72 /script>....</pr
70d0: 65 3e 0a 0a 0a 0a 0a 0a 0a 20 20 20 20 3c 68 33 e>....... <h3
70e0: 3e 41 63 63 65 73 73 69 6e 67 20 61 20 4d 61 74 >Accessing a Mat
70f0: 72 69 78 27 73 20 56 61 6c 75 65 73 3c 2f 68 33 rix's Values</h3
7100: 3e 0a 20 20 20 20 3c 62 72 20 2f 3e 0a 20 20 20 >. <br />.
7110: 20 3c 62 3e 6d 61 74 72 69 78 2e 70 61 74 74 65 <b>matrix.patte
7120: 72 6e 3c 2f 62 3e 20 63 6f 6e 74 61 69 6e 73 20 rn</b> contains
7130: 61 20 32 2d 64 69 6d 65 6e 73 69 6f 6e 61 6c 20 a 2-dimensional
7140: 4a 61 76 61 53 63 72 69 70 74 20 61 72 72 61 79 JavaScript array
7150: 2e 20 3c 62 3e 6d 61 74 72 69 78 2e 70 61 74 74 . <b>matrix.patt
7160: 65 72 6e 5b 30 5d 3c 2f 62 3e 20 63 6f 6e 74 61 ern[0]</b> conta
7170: 69 6e 73 20 61 6e 20 61 72 72 61 79 20 6f 66 20 ins an array of
7180: 74 68 65 20 66 69 72 73 74 20 72 6f 77 27 73 20 the first row's
7190: 76 61 6c 75 65 73 2e 20 3c 62 3e 6d 61 74 72 69 values. <b>matri
71a0: 78 2e 70 61 74 74 65 72 6e 5b 30 5d 5b 30 5d 3c x.pattern[0][0]<
71b0: 2f 62 3e 20 63 6f 6e 74 61 69 6e 73 20 74 68 65 /b> contains the
71c0: 20 76 61 6c 75 65 20 6f 66 20 74 68 65 20 66 69 value of the fi
71d0: 72 73 74 20 63 65 6c 6c 20 69 6e 20 74 68 65 20 rst cell in the
71e0: 66 69 72 73 74 20 72 6f 77 2e 0a 20 20 20 20 3c first row.. <
71f0: 62 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 br /><br />..
7200: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
7210: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
7220: 73 63 72 69 70 74 22 3e 0a 76 61 72 20 6d 61 74 script">.var mat
7230: 72 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e rix = new Nexus.
7240: 4d 61 74 72 69 78 28 35 2c 31 30 29 3b 0a 63 6f Matrix(5,10);.co
7250: 6e 73 6f 6c 65 2e 6c 6f 67 28 20 6d 61 74 72 69 nsole.log( matri
7260: 78 2e 70 61 74 74 65 72 6e 20 29 3b 0a 0a 3c 2f x.pattern );..</
7270: 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 code></pre>..
7280: 20 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 3c 62 72 <br /><br /><br
7290: 20 2f 3e 0a 0a 0a 0a 0a 0a 0a 0a 0a 20 20 20 20 />.........
72a0: 3c 68 33 3e 54 6f 67 67 6c 69 6e 67 20 63 65 6c <h3>Toggling cel
72b0: 6c 73 3c 2f 68 33 3e 0a 20 20 20 20 3c 62 72 20 ls</h3>. <br
72c0: 2f 3e 0a 20 20 20 20 3c 62 3e 6d 61 74 72 69 78 />. <b>matrix
72d0: 2e 74 6f 67 67 6c 65 3c 2f 62 3e 20 66 6c 69 70 .toggle</b> flip
72e0: 73 20 61 20 63 65 6c 6c 20 6f 72 20 67 72 6f 75 s a cell or grou
72f0: 70 20 6f 66 20 63 65 6c 6c 73 20 74 6f 20 74 68 p of cells to th
7300: 65 69 72 20 6f 70 70 6f 73 69 74 65 20 73 74 61 eir opposite sta
7310: 74 65 0a 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 te. <br /><br
7320: 20 2f 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 />.. <pre><c
7330: 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 ode class="langu
7340: 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 3e age-javascript">
7350: 0a 76 61 72 20 6d 61 74 72 69 78 20 3d 20 6e 65 .var matrix = ne
7360: 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 78 28 35 w Nexus.Matrix(5
7370: 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e 74 6f 67 ,10);.matrix.tog
7380: 67 6c 65 2e 63 65 6c 6c 28 32 2c 32 29 0a 0a 3c gle.cell(2,2)..<
7390: 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 /code></pre>..
73a0: 20 20 3c 70 72 65 3e 3c 73 63 72 69 70 74 3e 0a <pre><script>.
73b0: 76 61 72 20 6d 61 74 72 69 78 20 3d 20 6e 65 77 var matrix = new
73c0: 20 4e 65 78 75 73 2e 4d 61 74 72 69 78 28 35 2c Nexus.Matrix(5,
73d0: 31 30 29 3b 0a 6d 61 74 72 69 78 2e 74 6f 67 67 10);.matrix.togg
73e0: 6c 65 2e 63 65 6c 6c 28 32 2c 32 29 0a 64 6f 63 le.cell(2,2).doc
73f0: 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 74 72 ument.write(matr
7400: 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 74 28 ix.formatAsText(
7410: 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a )).</script>....
7420: 3c 2f 70 72 65 3e 0a 0a 0a 0a 0a 20 20 20 20 3c </pre>..... <
7430: 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d pre><code class=
7440: 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 "language-javasc
7450: 72 69 70 74 22 3e 0a 6d 61 74 72 69 78 2e 74 6f ript">.matrix.to
7460: 67 67 6c 65 2e 72 6f 77 28 32 29 0a 0a 3c 2f 63 ggle.row(2)..</c
7470: 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 ode></pre>..
7480: 3c 70 72 65 3e 3c 73 63 72 69 70 74 3e 0a 6d 61 <pre><script>.ma
7490: 74 72 69 78 2e 74 6f 67 67 6c 65 2e 72 6f 77 28 trix.toggle.row(
74a0: 32 29 0a 64 6f 63 75 6d 65 6e 74 2e 77 72 69 74 2).document.writ
74b0: 65 28 6d 61 74 72 69 78 2e 66 6f 72 6d 61 74 41 e(matrix.formatA
74c0: 73 54 65 78 74 28 29 29 0a 3c 2f 73 63 72 69 70 sText()).</scrip
74d0: 74 3e 0a 0a 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a t>....</pre>....
74e0: 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 20 . <pre><code
74f0: 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d class="language-
7500: 6a 61 76 61 73 63 72 69 70 74 22 3e 0a 6d 61 74 javascript">.mat
7510: 72 69 78 2e 74 6f 67 67 6c 65 2e 63 6f 6c 75 6d rix.toggle.colum
7520: 6e 28 32 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 n(2)..</code></p
7530: 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 re>.. <pre><s
7540: 63 72 69 70 74 3e 0a 6d 61 74 72 69 78 2e 74 6f cript>.matrix.to
7550: 67 67 6c 65 2e 63 6f 6c 75 6d 6e 28 32 29 0a 64 ggle.column(2).d
7560: 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 ocument.write(ma
7570: 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 trix.formatAsTex
7580: 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a t()).</script>..
7590: 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 20 20 20 20 3c ..</pre>... <
75a0: 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d pre><code class=
75b0: 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 "language-javasc
75c0: 72 69 70 74 22 3e 0a 6d 61 74 72 69 78 2e 74 6f ript">.matrix.to
75d0: 67 67 6c 65 2e 61 6c 6c 28 29 0a 0a 3c 2f 63 6f ggle.all()..</co
75e0: 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 3c de></pre>.. <
75f0: 70 72 65 3e 3c 73 63 72 69 70 74 3e 0a 6d 61 74 pre><script>.mat
7600: 72 69 78 2e 74 6f 67 67 6c 65 2e 61 6c 6c 28 29 rix.toggle.all()
7610: 0a 64 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 .document.write(
7620: 6d 61 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 matrix.formatAsT
7630: 65 78 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e ext()).</script>
7640: 0a 0a 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 0a 0a ....</pre>......
7650: 0a 0a 0a 0a 0a 20 20 20 20 3c 21 2d 2d 20 2d 2d ..... <!-- --
7660: 3e 0a 0a 0a 0a 20 20 20 20 3c 68 33 3e 53 65 74 >.... <h3>Set
7670: 74 69 6e 67 20 63 65 6c 6c 73 3c 2f 68 33 3e 0a ting cells</h3>.
7680: 20 20 20 20 3c 62 72 20 2f 3e 0a 20 20 20 20 3c <br />. <
7690: 62 3e 6d 61 74 72 69 78 2e 74 6f 67 67 6c 65 3c b>matrix.toggle<
76a0: 2f 62 3e 20 66 6c 69 70 73 20 61 20 63 65 6c 6c /b> flips a cell
76b0: 20 6f 72 20 67 72 6f 75 70 20 6f 66 20 63 65 6c or group of cel
76c0: 6c 73 20 74 6f 20 74 68 65 69 72 20 6f 70 70 6f ls to their oppo
76d0: 73 69 74 65 20 73 74 61 74 65 0a 20 20 20 20 3c site state. <
76e0: 62 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 br /><br />..
76f0: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
7700: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
7710: 73 63 72 69 70 74 22 3e 0a 76 61 72 20 6d 61 74 script">.var mat
7720: 72 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e rix = new Nexus.
7730: 4d 61 74 72 69 78 28 35 2c 31 30 29 3b 0a 6d 61 Matrix(5,10);.ma
7740: 74 72 69 78 2e 73 65 74 2e 63 65 6c 6c 28 30 2c trix.set.cell(0,
7750: 30 2c 31 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 0,1)..</code></p
7760: 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 re>.. <pre><s
7770: 63 72 69 70 74 3e 0a 76 61 72 20 6d 61 74 72 69 cript>.var matri
7780: 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 x = new Nexus.Ma
7790: 74 72 69 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 trix(5,10);.matr
77a0: 69 78 2e 73 65 74 2e 63 65 6c 6c 28 30 2c 30 2c ix.set.cell(0,0,
77b0: 31 29 0a 64 6f 63 75 6d 65 6e 74 2e 77 72 69 74 1).document.writ
77c0: 65 28 6d 61 74 72 69 78 2e 66 6f 72 6d 61 74 41 e(matrix.formatA
77d0: 73 54 65 78 74 28 29 29 0a 3c 2f 73 63 72 69 70 sText()).</scrip
77e0: 74 3e 0a 0a 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a t>....</pre>....
77f0: 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 20 . <pre><code
7800: 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d class="language-
7810: 6a 61 76 61 73 63 72 69 70 74 22 3e 0a 6d 61 74 javascript">.mat
7820: 72 69 78 2e 73 65 74 2e 72 6f 77 28 30 2c 5b 30 rix.set.row(0,[0
7830: 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 ,1,0,1,0,1,0,1,0
7840: 2c 31 5d 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 ,1])..</code></p
7850: 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 re>.. <pre><s
7860: 63 72 69 70 74 3e 0a 6d 61 74 72 69 78 2e 73 65 cript>.matrix.se
7870: 74 2e 72 6f 77 28 30 2c 5b 30 2c 31 2c 30 2c 31 t.row(0,[0,1,0,1
7880: 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 5d 29 0a 64 ,0,1,0,1,0,1]).d
7890: 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 ocument.write(ma
78a0: 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 trix.formatAsTex
78b0: 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a t()).</script>..
78c0: 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 0a 20 20 20 ..</pre>.....
78d0: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
78e0: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
78f0: 73 63 72 69 70 74 22 3e 0a 6d 61 74 72 69 78 2e script">.matrix.
7900: 73 65 74 2e 63 6f 6c 75 6d 6e 28 30 2c 5b 30 2c set.column(0,[0,
7910: 31 2c 31 2c 31 2c 30 5d 29 0a 0a 3c 2f 63 6f 64 1,1,1,0])..</cod
7920: 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 3c 70 e></pre>.. <p
7930: 72 65 3e 3c 73 63 72 69 70 74 3e 0a 6d 61 74 72 re><script>.matr
7940: 69 78 2e 73 65 74 2e 63 6f 6c 75 6d 6e 28 30 2c ix.set.column(0,
7950: 5b 30 2c 31 2c 31 2c 31 2c 30 5d 29 0a 64 6f 63 [0,1,1,1,0]).doc
7960: 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 74 72 ument.write(matr
7970: 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 74 28 ix.formatAsText(
7980: 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a )).</script>....
7990: 3c 2f 70 72 65 3e 0a 0a 0a 20 20 20 20 3c 70 72 </pre>... <pr
79a0: 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c e><code class="l
79b0: 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 anguage-javascri
79c0: 70 74 22 3e 0a 6d 61 74 72 69 78 2e 73 65 74 2e pt">.matrix.set.
79d0: 61 6c 6c 28 5b 0a 20 20 5b 30 2c 31 2c 30 2c 31 all([. [0,1,0,1
79e0: 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 5d 2c 0a 20 ,0,1,0,1,0,1],.
79f0: 20 5b 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c [0,1,0,1,0,1,0,
7a00: 31 2c 30 2c 31 5d 2c 0a 20 20 5b 30 2c 31 2c 30 1,0,1],. [0,1,0
7a10: 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 5d 2c ,1,0,1,0,1,0,1],
7a20: 0a 20 20 5b 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c . [0,1,0,1,0,1,
7a30: 30 2c 31 2c 30 2c 31 5d 2c 0a 20 20 5b 30 2c 31 0,1,0,1],. [0,1
7a40: 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 ,0,1,0,1,0,1,0,1
7a50: 5d 0a 5d 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 ].])..</code></p
7a60: 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 re>.. <pre><s
7a70: 63 72 69 70 74 3e 0a 6d 61 74 72 69 78 2e 73 65 cript>.matrix.se
7a80: 74 2e 61 6c 6c 28 5b 0a 20 20 5b 30 2c 31 2c 30 t.all([. [0,1,0
7a90: 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 5d 2c ,1,0,1,0,1,0,1],
7aa0: 0a 20 20 5b 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c . [0,1,0,1,0,1,
7ab0: 30 2c 31 2c 30 2c 31 5d 2c 0a 20 20 5b 30 2c 31 0,1,0,1],. [0,1
7ac0: 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 ,0,1,0,1,0,1,0,1
7ad0: 5d 2c 0a 20 20 5b 30 2c 31 2c 30 2c 31 2c 30 2c ],. [0,1,0,1,0,
7ae0: 31 2c 30 2c 31 2c 30 2c 31 5d 2c 0a 20 20 5b 30 1,0,1,0,1],. [0
7af0: 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 2c 31 2c 30 ,1,0,1,0,1,0,1,0
7b00: 2c 31 5d 0a 5d 29 0a 64 6f 63 75 6d 65 6e 74 2e ,1].]).document.
7b10: 77 72 69 74 65 28 6d 61 74 72 69 78 2e 66 6f 72 write(matrix.for
7b20: 6d 61 74 41 73 54 65 78 74 28 29 29 0a 3c 2f 73 matAsText()).</s
7b30: 63 72 69 70 74 3e 0a 0a 0a 0a 3c 2f 70 72 65 3e cript>....</pre>
7b40: 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 20 20 20 .............
7b50: 20 3c 21 2d 2d 20 2d 2d 3e 0a 0a 0a 0a 20 20 20 <!-- -->....
7b60: 20 3c 68 33 3e 52 6f 74 61 74 69 6e 67 3c 2f 68 <h3>Rotating</h
7b70: 33 3e 0a 20 20 20 20 3c 62 72 20 2f 3e 0a 20 20 3>. <br />.
7b80: 20 20 3c 62 3e 6d 61 74 72 69 78 2e 72 6f 74 61 <b>matrix.rota
7b90: 74 65 3c 2f 62 3e 20 6d 6f 76 65 73 20 70 61 72 te</b> moves par
7ba0: 74 73 20 6f 66 20 74 68 65 20 6d 61 74 72 69 78 ts of the matrix
7bb0: 20 74 6f 20 74 68 65 20 72 69 67 68 74 20 6f 72 to the right or
7bc0: 20 6c 65 66 74 0a 20 20 20 20 3c 62 72 20 2f 3e left. <br />
7bd0: 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 3c 70 72 65 <br />.. <pre
7be0: 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 ><code class="la
7bf0: 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 nguage-javascrip
7c00: 74 22 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d t">.var matrix =
7c10: 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 new Nexus.Matri
7c20: 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e x(5,10);.matrix.
7c30: 74 6f 67 67 6c 65 2e 63 65 6c 6c 28 30 2c 30 29 toggle.cell(0,0)
7c40: 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a ..</code></pre>.
7c50: 0a 20 20 20 20 3c 70 72 65 3e 3c 73 63 72 69 70 . <pre><scrip
7c60: 74 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d 20 t>.var matrix =
7c70: 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 78 new Nexus.Matrix
7c80: 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e 74 (5,10);.matrix.t
7c90: 6f 67 67 6c 65 2e 63 65 6c 6c 28 30 2c 30 29 0a oggle.cell(0,0).
7ca0: 64 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d document.write(m
7cb0: 61 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 atrix.formatAsTe
7cc0: 78 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a xt()).</script>.
7cd0: 0a 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 0a 20 20 ...</pre>.....
7ce0: 20 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 <pre><code cla
7cf0: 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 ss="language-jav
7d00: 61 73 63 72 69 70 74 22 3e 0a 6d 61 74 72 69 78 ascript">.matrix
7d10: 2e 72 6f 74 61 74 65 2e 72 6f 77 28 30 29 0a 0a .rotate.row(0)..
7d20: 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 </code></pre>..
7d30: 20 20 20 3c 70 72 65 3e 3c 73 63 72 69 70 74 3e <pre><script>
7d40: 0a 6d 61 74 72 69 78 2e 72 6f 74 61 74 65 2e 72 .matrix.rotate.r
7d50: 6f 77 28 30 29 0a 64 6f 63 75 6d 65 6e 74 2e 77 ow(0).document.w
7d60: 72 69 74 65 28 6d 61 74 72 69 78 2e 66 6f 72 6d rite(matrix.form
7d70: 61 74 41 73 54 65 78 74 28 29 29 0a 3c 2f 73 63 atAsText()).</sc
7d80: 72 69 70 74 3e 0a 0a 0a 0a 3c 2f 70 72 65 3e 0a ript>....</pre>.
7d90: 0a 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 ... <pre><cod
7da0: 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 e class="languag
7db0: 65 2d 6a 61 76 61 73 63 72 69 70 74 22 3e 0a 6d e-javascript">.m
7dc0: 61 74 72 69 78 2e 72 6f 74 61 74 65 2e 72 6f 77 atrix.rotate.row
7dd0: 28 30 2c 34 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f (0,4)..</code></
7de0: 70 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c pre>.. <pre><
7df0: 73 63 72 69 70 74 3e 0a 6d 61 74 72 69 78 2e 72 script>.matrix.r
7e00: 6f 74 61 74 65 2e 72 6f 77 28 30 2c 34 29 0a 64 otate.row(0,4).d
7e10: 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 ocument.write(ma
7e20: 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 trix.formatAsTex
7e30: 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a t()).</script>..
7e40: 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 0a 20 20 20 ..</pre>.....
7e50: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
7e60: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
7e70: 73 63 72 69 70 74 22 3e 0a 6d 61 74 72 69 78 2e script">.matrix.
7e80: 72 6f 74 61 74 65 2e 63 6f 6c 75 6d 6e 28 35 29 rotate.column(5)
7e90: 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a ..</code></pre>.
7ea0: 0a 20 20 20 20 3c 70 72 65 3e 3c 73 63 72 69 70 . <pre><scrip
7eb0: 74 3e 0a 6d 61 74 72 69 78 2e 72 6f 74 61 74 65 t>.matrix.rotate
7ec0: 2e 63 6f 6c 75 6d 6e 28 35 29 0a 64 6f 63 75 6d .column(5).docum
7ed0: 65 6e 74 2e 77 72 69 74 65 28 6d 61 74 72 69 78 ent.write(matrix
7ee0: 2e 66 6f 72 6d 61 74 41 73 54 65 78 74 28 29 29 .formatAsText())
7ef0: 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a 3c 2f .</script>....</
7f00: 70 72 65 3e 0a 0a 0a 20 20 20 20 3c 70 72 65 3e pre>... <pre>
7f10: 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e <code class="lan
7f20: 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 guage-javascript
7f30: 22 3e 0a 6d 61 74 72 69 78 2e 72 6f 74 61 74 65 ">.matrix.rotate
7f40: 2e 61 6c 6c 28 32 29 0a 0a 3c 2f 63 6f 64 65 3e .all(2)..</code>
7f50: 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 </pre>.. <pre
7f60: 3e 3c 73 63 72 69 70 74 3e 0a 6d 61 74 72 69 78 ><script>.matrix
7f70: 2e 72 6f 74 61 74 65 2e 61 6c 6c 28 32 29 0a 64 .rotate.all(2).d
7f80: 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 ocument.write(ma
7f90: 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 trix.formatAsTex
7fa0: 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a t()).</script>..
7fb0: 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 0a 0a 0a 0a ..</pre>........
7fc0: 0a 0a 0a 20 20 20 20 3c 21 2d 2d 20 2d 2d 3e 0a ... <!-- -->.
7fd0: 0a 0a 0a 20 20 20 20 3c 68 33 3e 50 6f 70 75 6c ... <h3>Popul
7fe0: 61 74 69 6e 67 20 77 69 74 68 20 50 61 74 74 65 ating with Patte
7ff0: 72 6e 73 3c 2f 68 33 3e 0a 20 20 20 20 3c 62 72 rns</h3>. <br
8000: 20 2f 3e 0a 20 20 20 20 3c 62 3e 6d 61 74 72 69 />. <b>matri
8010: 78 2e 70 6f 70 75 6c 61 74 65 3c 2f 62 3e 20 63 x.populate</b> c
8020: 61 6e 20 73 65 74 20 72 6f 77 20 6f 72 20 63 6f an set row or co
8030: 6c 75 6d 6e 20 75 73 69 6e 67 20 61 20 70 61 74 lumn using a pat
8040: 74 65 72 6e 2e 0a 20 20 20 20 3c 62 72 20 2f 3e tern.. <br />
8050: 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 3c 70 72 65 <br />.. <pre
8060: 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 ><code class="la
8070: 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 nguage-javascrip
8080: 74 22 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d t">.var matrix =
8090: 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 new Nexus.Matri
80a0: 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e x(5,10);.matrix.
80b0: 70 6f 70 75 6c 61 74 65 2e 72 6f 77 28 20 30 2c populate.row( 0,
80c0: 20 5b 30 2c 31 5d 20 29 0a 0a 3c 2f 63 6f 64 65 [0,1] )..</code
80d0: 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 3c 70 72 ></pre>.. <pr
80e0: 65 3e 3c 73 63 72 69 70 74 3e 0a 76 61 72 20 6d e><script>.var m
80f0: 61 74 72 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 atrix = new Nexu
8100: 73 2e 4d 61 74 72 69 78 28 35 2c 31 30 29 3b 0a s.Matrix(5,10);.
8110: 6d 61 74 72 69 78 2e 70 6f 70 75 6c 61 74 65 2e matrix.populate.
8120: 72 6f 77 28 20 30 2c 20 5b 30 2c 31 5d 20 29 0a row( 0, [0,1] ).
8130: 64 6f 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d document.write(m
8140: 61 74 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 atrix.formatAsTe
8150: 78 74 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a xt()).</script>.
8160: 0a 0a 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 20 20 20 ...</pre>....
8170: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
8180: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
8190: 73 63 72 69 70 74 22 3e 0a 76 61 72 20 6d 61 74 script">.var mat
81a0: 72 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e rix = new Nexus.
81b0: 4d 61 74 72 69 78 28 35 2c 31 30 29 3b 0a 6d 61 Matrix(5,10);.ma
81c0: 74 72 69 78 2e 70 6f 70 75 6c 61 74 65 2e 63 6f trix.populate.co
81d0: 6c 75 6d 6e 28 20 30 2c 20 5b 30 2c 31 5d 20 29 lumn( 0, [0,1] )
81e0: 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a ..</code></pre>.
81f0: 0a 20 20 20 20 3c 70 72 65 3e 3c 73 63 72 69 70 . <pre><scrip
8200: 74 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d 20 t>.var matrix =
8210: 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 78 new Nexus.Matrix
8220: 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e 70 (5,10);.matrix.p
8230: 6f 70 75 6c 61 74 65 2e 63 6f 6c 75 6d 6e 28 20 opulate.column(
8240: 30 2c 20 5b 30 2c 31 5d 20 29 0a 64 6f 63 75 6d 0, [0,1] ).docum
8250: 65 6e 74 2e 77 72 69 74 65 28 6d 61 74 72 69 78 ent.write(matrix
8260: 2e 66 6f 72 6d 61 74 41 73 54 65 78 74 28 29 29 .formatAsText())
8270: 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a 3c 2f .</script>....</
8280: 70 72 65 3e 0a 0a 0a 0a 20 20 20 20 3c 70 72 65 pre>.... <pre
8290: 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 ><code class="la
82a0: 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 nguage-javascrip
82b0: 74 22 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d t">.var matrix =
82c0: 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 new Nexus.Matri
82d0: 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e x(5,10);.matrix.
82e0: 70 6f 70 75 6c 61 74 65 2e 61 6c 6c 28 20 5b 30 populate.all( [0
82f0: 2c 31 5d 20 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f ,1] )..</code></
8300: 70 72 65 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c pre>.. <pre><
8310: 73 63 72 69 70 74 3e 0a 76 61 72 20 6d 61 74 72 script>.var matr
8320: 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d ix = new Nexus.M
8330: 61 74 72 69 78 28 35 2c 31 30 29 3b 0a 6d 61 74 atrix(5,10);.mat
8340: 72 69 78 2e 70 6f 70 75 6c 61 74 65 2e 61 6c 6c rix.populate.all
8350: 28 20 5b 30 2c 31 5d 20 29 0a 64 6f 63 75 6d 65 ( [0,1] ).docume
8360: 6e 74 2e 77 72 69 74 65 28 6d 61 74 72 69 78 2e nt.write(matrix.
8370: 66 6f 72 6d 61 74 41 73 54 65 78 74 28 29 29 0a formatAsText()).
8380: 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a 3c 2f 70 </script>....</p
8390: 72 65 3e 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 0a 20 20 re>...........
83a0: 20 20 3c 21 2d 2d 20 2d 2d 3e 0a 0a 0a 0a 20 20 <!-- -->....
83b0: 20 20 3c 68 33 3e 50 6f 70 75 6c 61 74 69 6e 67 <h3>Populating
83c0: 20 77 69 74 68 20 50 72 6f 62 61 62 69 6c 69 74 with Probabilit
83d0: 79 3c 2f 68 33 3e 0a 20 20 20 20 3c 62 72 20 2f y</h3>. <br /
83e0: 3e 0a 20 20 20 20 3c 62 3e 6d 61 74 72 69 78 2e >. <b>matrix.
83f0: 70 6f 70 75 6c 61 74 65 3c 2f 62 3e 20 63 61 6e populate</b> can
8400: 20 73 65 74 20 72 6f 77 20 6f 72 20 63 6f 6c 75 set row or colu
8410: 6d 6e 20 75 73 69 6e 67 20 61 20 70 61 74 74 65 mn using a patte
8420: 72 6e 20 6f 66 20 70 72 6f 62 61 62 69 6c 69 74 rn of probabilit
8430: 79 20 76 61 6c 75 65 73 2e 0a 20 20 20 20 3c 62 y values.. <b
8440: 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 20 20 20 20 r /><br />..
8450: 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 <pre><code class
8460: 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 ="language-javas
8470: 63 72 69 70 74 22 3e 0a 76 61 72 20 6d 61 74 72 cript">.var matr
8480: 69 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d ix = new Nexus.M
8490: 61 74 72 69 78 28 35 2c 31 30 29 3b 0a 6d 61 74 atrix(5,10);.mat
84a0: 72 69 78 2e 70 6f 70 75 6c 61 74 65 2e 72 6f 77 rix.populate.row
84b0: 28 20 30 2c 20 5b 30 2e 33 2c 20 30 2e 36 5d 20 ( 0, [0.3, 0.6]
84c0: 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e )..</code></pre>
84d0: 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 63 72 69 .. <pre><scri
84e0: 70 74 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d pt>.var matrix =
84f0: 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 new Nexus.Matri
8500: 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e x(5,10);.matrix.
8510: 70 6f 70 75 6c 61 74 65 2e 72 6f 77 28 20 30 2c populate.row( 0,
8520: 20 5b 30 2e 33 2c 20 30 2e 33 5d 20 29 0a 64 6f [0.3, 0.3] ).do
8530: 63 75 6d 65 6e 74 2e 77 72 69 74 65 28 6d 61 74 cument.write(mat
8540: 72 69 78 2e 66 6f 72 6d 61 74 41 73 54 65 78 74 rix.formatAsText
8550: 28 29 29 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a ()).</script>...
8560: 0a 3c 2f 70 72 65 3e 0a 0a 0a 0a 20 20 20 20 3c .</pre>.... <
8570: 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d pre><code class=
8580: 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 "language-javasc
8590: 72 69 70 74 22 3e 0a 76 61 72 20 6d 61 74 72 69 ript">.var matri
85a0: 78 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 x = new Nexus.Ma
85b0: 74 72 69 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 trix(5,10);.matr
85c0: 69 78 2e 70 6f 70 75 6c 61 74 65 2e 63 6f 6c 75 ix.populate.colu
85d0: 6d 6e 28 20 30 2c 20 5b 30 2e 35 5d 20 29 0a 0a mn( 0, [0.5] )..
85e0: 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 </code></pre>..
85f0: 20 20 20 3c 70 72 65 3e 3c 73 63 72 69 70 74 3e <pre><script>
8600: 0a 76 61 72 20 6d 61 74 72 69 78 20 3d 20 6e 65 .var matrix = ne
8610: 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 78 28 35 w Nexus.Matrix(5
8620: 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e 70 6f 70 ,10);.matrix.pop
8630: 75 6c 61 74 65 2e 63 6f 6c 75 6d 6e 28 20 30 2c ulate.column( 0,
8640: 20 5b 30 2e 35 5d 20 29 0a 64 6f 63 75 6d 65 6e [0.5] ).documen
8650: 74 2e 77 72 69 74 65 28 6d 61 74 72 69 78 2e 66 t.write(matrix.f
8660: 6f 72 6d 61 74 41 73 54 65 78 74 28 29 29 0a 3c ormatAsText()).<
8670: 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a 3c 2f 70 72 /script>....</pr
8680: 65 3e 0a 0a 0a 0a 20 20 20 20 3c 70 72 65 3e 3c e>.... <pre><
8690: 63 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 code class="lang
86a0: 75 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 uage-javascript"
86b0: 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 3d 20 6e >.var matrix = n
86c0: 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 69 78 28 ew Nexus.Matrix(
86d0: 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 2e 70 6f 5,10);.matrix.po
86e0: 70 75 6c 61 74 65 2e 61 6c 6c 28 20 5b 30 2e 32 pulate.all( [0.2
86f0: 2c 20 30 2e 35 2c 20 30 2e 32 2c 20 30 2e 38 5d , 0.5, 0.2, 0.8]
8700: 20 29 0a 0a 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 )..</code></pre
8710: 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 73 63 72 >.. <pre><scr
8720: 69 70 74 3e 0a 76 61 72 20 6d 61 74 72 69 78 20 ipt>.var matrix
8730: 3d 20 6e 65 77 20 4e 65 78 75 73 2e 4d 61 74 72 = new Nexus.Matr
8740: 69 78 28 35 2c 31 30 29 3b 0a 6d 61 74 72 69 78 ix(5,10);.matrix
8750: 2e 70 6f 70 75 6c 61 74 65 2e 61 6c 6c 28 20 5b .populate.all( [
8760: 30 2e 32 2c 20 30 2e 35 2c 20 30 2e 32 2c 20 30 0.2, 0.5, 0.2, 0
8770: 2e 38 5d 20 29 0a 64 6f 63 75 6d 65 6e 74 2e 77 .8] ).document.w
8780: 72 69 74 65 28 6d 61 74 72 69 78 2e 66 6f 72 6d rite(matrix.form
8790: 61 74 41 73 54 65 78 74 28 29 29 0a 3c 2f 73 63 atAsText()).</sc
87a0: 72 69 70 74 3e 0a 0a 0a 0a 3c 2f 70 72 65 3e 0a ript>....</pre>.
87b0: 0a 0a 0a 0a 0a 0a 0a 20 20 20 20 3c 21 2d 2d 20 ....... <!--
87c0: 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 <pre><code c
87d0: 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a lass="language-j
87e0: 61 76 61 73 63 72 69 70 74 22 3e 0a 20 20 2f 2f avascript">. //
87f0: 20 45 76 65 72 79 20 31 30 30 6d 73 2c 20 70 6c Every 100ms, pl
8800: 61 79 20 61 20 72 61 6e 64 6f 6d 20 6e 6f 74 65 ay a random note
8810: 20 66 72 6f 6d 20 61 20 72 61 6e 64 6f 6d 20 6f from a random o
8820: 63 74 61 76 65 20 69 6e 20 74 68 65 20 6d 61 6a ctave in the maj
8830: 6f 72 20 73 63 61 6c 65 0a 20 20 6d 74 2e 69 6e or scale. mt.in
8840: 74 65 72 76 61 6c 28 31 30 30 2c 66 75 6e 63 74 terval(100,funct
8850: 69 6f 6e 28 29 20 7b 0a 20 20 20 76 61 72 20 73 ion() {. var s
8860: 63 61 6c 65 44 65 67 72 65 65 20 3d 20 6d 74 2e caleDegree = mt.
8870: 72 69 28 20 30 2c 20 6d 74 2e 74 75 6e 65 2e 73 ri( 0, mt.tune.s
8880: 63 61 6c 65 2e 6c 65 6e 67 74 68 20 29 3b 0a 20 cale.length );.
8890: 20 20 76 61 72 20 6f 63 74 61 76 65 20 3d 20 6d var octave = m
88a0: 74 2e 72 69 28 20 2d 33 20 2c 20 33 20 29 3b 0a t.ri( -3 , 3 );.
88b0: 20 20 20 73 79 6e 74 68 31 2e 66 72 65 71 75 65 synth1.freque
88c0: 6e 63 79 2e 76 61 6c 75 65 20 3d 20 6d 74 2e 74 ncy.value = mt.t
88d0: 75 6e 65 2e 6e 6f 74 65 28 20 73 63 61 6c 65 44 une.note( scaleD
88e0: 65 67 72 65 65 2c 20 6f 63 74 61 76 65 20 29 3b egree, octave );
88f0: 20 2f 2f 20 72 65 74 75 72 6e 73 20 74 68 65 20 // returns the
8900: 72 6f 6f 74 0a 20 20 7d 29 0a 20 20 20 20 20 20 root. }).
8910: 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 20 2d </code></pre> -
8920: 2d 3e 0a 0a 20 20 20 20 3c 68 33 3e 4d 61 74 72 ->.. <h3>Matr
8930: 69 78 20 61 6e 64 20 74 68 65 20 53 65 71 75 65 ix and the Seque
8940: 6e 63 65 72 20 49 6e 74 65 72 66 61 63 65 3c 2f ncer Interface</
8950: 68 33 3e 0a 0a 20 20 20 20 54 68 65 20 73 65 71 h3>.. The seq
8960: 75 65 6e 63 65 72 20 69 6e 74 65 72 66 61 63 65 uencer interface
8970: 20 75 73 65 73 20 61 20 6d 61 74 72 69 78 20 6d uses a matrix m
8980: 6f 64 65 6c 20 74 6f 20 68 6f 6c 64 20 69 74 73 odel to hold its
8990: 20 67 72 69 64 20 6f 66 20 76 61 6c 75 65 73 2e grid of values.
89a0: 20 59 6f 75 20 63 61 6e 20 75 73 65 20 61 6e 79 You can use any
89b0: 20 6f 66 20 74 68 65 20 61 62 6f 76 65 20 6d 61 of the above ma
89c0: 74 72 69 78 20 6d 61 6e 69 70 75 6c 61 74 69 6f trix manipulatio
89d0: 6e 20 6d 65 74 68 6f 64 73 20 6f 6e 20 79 6f 75 n methods on you
89e0: 72 20 73 65 71 75 65 6e 63 65 72 20 67 72 69 64 r sequencer grid
89f0: 2c 20 75 73 69 6e 67 20 74 68 65 20 73 65 71 75 , using the sequ
8a00: 65 6e 63 65 72 27 73 20 3c 62 3e 2e 6d 61 74 72 encer's <b>.matr
8a10: 69 78 3c 2f 62 3e 20 70 72 6f 70 65 72 74 79 2e ix</b> property.
8a20: 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 20 . <pre><code
8a30: 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 2d class="language-
8a40: 6a 61 76 61 73 63 72 69 70 74 22 3e 0a 20 20 76 javascript">. v
8a50: 61 72 20 73 65 71 75 65 6e 63 65 72 20 3d 20 6e ar sequencer = n
8a60: 65 77 20 4e 65 78 75 73 2e 53 65 71 75 65 6e 63 ew Nexus.Sequenc
8a70: 65 72 28 22 23 74 61 72 67 65 74 22 2c 35 2c 31 er("#target",5,1
8a80: 30 29 3b 0a 20 20 73 65 71 75 65 6e 63 65 72 2e 0);. sequencer.
8a90: 6d 61 74 72 69 78 2e 74 6f 67 67 6c 65 2e 72 6f matrix.toggle.ro
8aa0: 77 28 32 29 3b 0a 20 20 73 65 71 75 65 6e 63 65 w(2);. sequence
8ab0: 72 2e 6d 61 74 72 69 78 2e 73 65 74 2e 72 6f 77 r.matrix.set.row
8ac0: 28 31 2c 20 5b 30 2c 31 2c 30 2c 31 2c 30 2c 31 (1, [0,1,0,1,0,1
8ad0: 2c 30 2c 31 2c 30 2c 31 5d 29 0a 20 20 20 20 20 ,0,1,0,1]).
8ae0: 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a </code></pre>..
8af0: 20 20 20 20 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e <br /><br />
8b00: 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 0a 0a 0a 20 <br /><br />...
8b10: 20 3c 2f 64 69 76 3e 0a 0a 0a 0a 0a 0a 20 20 3c </div>...... <
8b20: 21 2d 2d 0a 0a 20 20 20 20 4d 54 2e 43 4f 55 4e !--.. MT.COUN
8b30: 54 45 52 0a 0a 20 20 20 20 2d 2d 3e 0a 0a 20 20 TER.. -->..
8b40: 3c 64 69 76 20 69 64 3d 22 63 6f 75 6e 74 65 72 <div id="counter
8b50: 22 20 63 6c 61 73 73 3d 22 63 75 73 74 6f 6d 2d " class="custom-
8b60: 74 75 74 6f 72 69 61 6c 22 20 73 74 79 6c 65 3d tutorial" style=
8b70: 22 64 69 73 70 6c 61 79 3a 6e 6f 6e 65 22 3e 0a "display:none">.
8b80: 20 20 20 20 3c 68 32 3e 43 6f 75 6e 74 65 72 20 <h2>Counter
8b90: 4d 6f 64 65 6c 3c 2f 68 32 3e 0a 0a 20 20 20 20 Model</h2>..
8ba0: 3c 70 3e 0a 20 20 20 20 20 20 41 20 43 6f 75 6e <p>. A Coun
8bb0: 74 65 72 20 6d 6f 64 65 6c 20 69 73 20 61 6e 20 ter model is an
8bc0: 6f 62 6a 65 63 74 20 77 69 74 68 20 61 20 6d 69 object with a mi
8bd0: 6e 69 6d 61 6c 20 41 50 49 20 66 6f 72 20 63 6f nimal API for co
8be0: 75 6e 74 69 6e 67 20 75 70 20 6f 72 20 64 6f 77 unting up or dow
8bf0: 6e 2e 0a 20 20 20 20 3c 2f 70 3e 0a 20 20 20 20 n.. </p>.
8c00: 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 <pre><code class
8c10: 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 ="language-javas
8c20: 63 72 69 70 74 22 3e 0a 63 6f 75 6e 74 65 72 20 cript">.counter
8c30: 3d 20 6e 65 77 20 4e 65 78 75 73 2e 43 6f 75 6e = new Nexus.Coun
8c40: 74 65 72 28 30 2c 31 30 29 0a 63 6f 75 6e 74 65 ter(0,10).counte
8c50: 72 2e 6e 65 78 74 28 29 20 20 20 20 2f 2f 20 72 r.next() // r
8c60: 65 74 75 72 6e 73 20 30 0a 63 6f 75 6e 74 65 72 eturns 0.counter
8c70: 2e 6e 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 .next() // re
8c80: 74 75 72 6e 73 20 31 0a 63 6f 75 6e 74 65 72 2e turns 1.counter.
8c90: 6e 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 next() // ret
8ca0: 75 72 6e 73 20 32 0a 2f 2f 20 2e 2e 2e 0a 63 6f urns 2.// ....co
8cb0: 75 6e 74 65 72 2e 6e 65 78 74 28 29 20 20 20 20 unter.next()
8cc0: 2f 2f 20 72 65 74 75 72 6e 73 20 39 0a 63 6f 75 // returns 9.cou
8cd0: 6e 74 65 72 2e 6e 65 78 74 28 29 20 20 20 20 2f nter.next() /
8ce0: 2f 20 72 65 74 75 72 6e 73 20 31 30 0a 63 6f 75 / returns 10.cou
8cf0: 6e 74 65 72 2e 6e 65 78 74 28 29 20 20 20 20 2f nter.next() /
8d00: 2f 20 72 65 74 75 72 6e 73 20 30 0a 20 20 20 20 / returns 0.
8d10: 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 </code></pr
8d20: 65 3e 0a 0a 20 20 20 20 3c 21 2d 2d 20 73 65 63 e>.. <!-- sec
8d30: 74 69 6f 6e 20 2d 2d 3e 0a 0a 20 20 20 20 3c 68 tion -->.. <h
8d40: 33 3e 4d 6f 64 65 73 3c 2f 68 33 3e 0a 0a 20 20 3>Modes</h3>..
8d50: 20 20 54 68 65 20 63 6f 75 6e 74 65 72 20 6d 65 The counter me
8d60: 74 68 6f 64 20 74 61 6b 65 73 20 61 6e 20 6f 70 thod takes an op
8d70: 74 69 6f 6e 61 6c 20 74 68 69 72 64 20 61 72 67 tional third arg
8d80: 75 6d 65 6e 74 20 66 6f 72 20 74 68 65 20 63 6f ument for the co
8d90: 75 6e 74 69 6e 67 20 6d 6f 64 65 2c 20 77 68 69 unting mode, whi
8da0: 63 68 20 63 61 6e 20 62 65 20 3c 62 3e 75 70 3c ch can be <b>up<
8db0: 2f 62 3e 2c 20 3c 62 3e 64 6f 77 6e 3c 2f 62 3e /b>, <b>down</b>
8dc0: 2c 20 3c 62 3e 64 72 75 6e 6b 3c 2f 62 3e 20 28 , <b>drunk</b> (
8dd0: 72 61 6e 64 6f 6d 6c 79 20 63 68 6f 6f 73 65 73 randomly chooses
8de0: 20 74 6f 20 73 74 65 70 20 75 70 20 6f 72 20 64 to step up or d
8df0: 6f 77 6e 29 2c 20 6f 72 20 3c 62 3e 72 61 6e 64 own), or <b>rand
8e00: 6f 6d 3c 2f 62 3e 20 28 63 68 6f 6f 73 65 73 20 om</b> (chooses
8e10: 61 20 72 61 6e 64 6f 6d 20 6e 75 6d 62 65 72 20 a random number
8e20: 66 72 6f 6d 20 77 69 74 68 69 6e 20 74 68 65 20 from within the
8e30: 63 6f 75 6e 74 69 6e 67 20 72 61 6e 67 65 29 2e counting range).
8e40: 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 .. <pre><code
8e50: 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 class="language
8e60: 2d 6a 61 76 61 73 63 72 69 70 74 22 3e 0a 63 6f -javascript">.co
8e70: 75 6e 74 65 72 20 3d 20 6e 65 77 20 4e 65 78 75 unter = new Nexu
8e80: 73 2e 43 6f 75 6e 74 65 72 28 30 2c 31 30 2c 22 s.Counter(0,10,"
8e90: 64 6f 77 6e 22 29 0a 63 6f 75 6e 74 65 72 2e 6e down").counter.n
8ea0: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
8eb0: 72 6e 73 20 31 30 0a 63 6f 75 6e 74 65 72 2e 6e rns 10.counter.n
8ec0: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
8ed0: 72 6e 73 20 39 0a 63 6f 75 6e 74 65 72 2e 6e 65 rns 9.counter.ne
8ee0: 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 72 xt() // retur
8ef0: 6e 73 20 38 0a 20 20 20 20 20 20 20 20 3c 2f 63 ns 8. </c
8f00: 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 ode></pre>..
8f10: 3c 68 33 3e 50 72 6f 70 65 72 74 69 65 73 3c 2f <h3>Properties</
8f20: 68 33 3e 0a 0a 20 20 20 20 3c 70 72 65 3e 3c 63 h3>.. <pre><c
8f30: 6f 64 65 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 ode class="langu
8f40: 61 67 65 2d 6a 61 76 61 73 63 72 69 70 74 22 3e age-javascript">
8f50: 0a 63 6f 75 6e 74 65 72 2e 6d 69 6e 20 3d 20 31 .counter.min = 1
8f60: 30 0a 63 6f 75 6e 74 65 72 2e 6d 61 78 20 3d 20 0.counter.max =
8f70: 31 30 30 0a 63 6f 75 6e 74 65 72 2e 6d 6f 64 65 100.counter.mode
8f80: 20 3d 20 22 64 6f 77 6e 22 0a 63 6f 75 6e 74 65 = "down".counte
8f90: 72 2e 76 61 6c 75 65 20 3d 20 35 30 20 20 2f 2f r.value = 50 //
8fa0: 20 6a 75 6d 70 73 20 74 68 65 20 63 6f 75 6e 74 jumps the count
8fb0: 65 72 20 74 6f 20 74 68 69 73 20 76 61 6c 75 65 er to this value
8fc0: 0a 20 20 20 20 20 20 20 20 3c 2f 63 6f 64 65 3e . </code>
8fd0: 3c 2f 70 72 65 3e 0a 0a 0a 20 20 3c 2f 64 69 76 </pre>... </div
8fe0: 3e 0a 0a 0a 0a 0a 20 20 3c 21 2d 2d 0a 0a 20 20 >..... <!--..
8ff0: 20 20 20 20 4d 54 2e 53 45 51 55 45 4e 43 45 0a MT.SEQUENCE.
9000: 0a 20 20 20 20 20 20 2d 2d 3e 0a 0a 20 20 3c 64 . -->.. <d
9010: 69 76 20 69 64 3d 22 73 65 71 75 65 6e 63 65 22 iv id="sequence"
9020: 20 63 6c 61 73 73 3d 22 63 75 73 74 6f 6d 2d 74 class="custom-t
9030: 75 74 6f 72 69 61 6c 22 20 73 74 79 6c 65 3d 22 utorial" style="
9040: 64 69 73 70 6c 61 79 3a 6e 6f 6e 65 22 3e 0a 20 display:none">.
9050: 20 20 20 3c 68 32 3e 53 65 71 75 65 6e 63 65 20 <h2>Sequence
9060: 4d 6f 64 65 6c 3c 2f 68 32 3e 0a 0a 20 20 20 20 Model</h2>..
9070: 3c 70 3e 0a 20 20 20 20 20 20 41 20 53 65 71 75 <p>. A Sequ
9080: 65 6e 63 65 20 6d 6f 64 65 6c 20 73 74 65 70 73 ence model steps
9090: 20 74 68 72 6f 75 67 68 20 61 20 73 65 72 69 65 through a serie
90a0: 73 20 6f 66 20 6e 75 6d 65 72 69 63 20 76 61 6c s of numeric val
90b0: 75 65 73 20 64 65 66 69 6e 65 64 20 62 79 20 79 ues defined by y
90c0: 6f 75 2e 0a 20 20 20 20 3c 2f 70 3e 0a 20 20 20 ou.. </p>.
90d0: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
90e0: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
90f0: 73 63 72 69 70 74 22 3e 0a 76 61 72 20 73 65 71 script">.var seq
9100: 75 65 6e 63 65 20 3d 20 6e 65 77 20 4e 65 78 75 uence = new Nexu
9110: 73 2e 53 65 71 75 65 6e 63 65 28 5b 31 2c 33 2c s.Sequence([1,3,
9120: 35 2c 37 5d 29 0a 73 65 71 75 65 6e 63 65 2e 6e 5,7]).sequence.n
9130: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
9140: 72 6e 73 20 31 0a 73 65 71 75 65 6e 63 65 2e 6e rns 1.sequence.n
9150: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
9160: 72 6e 73 20 33 0a 73 65 71 75 65 6e 63 65 2e 6e rns 3.sequence.n
9170: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
9180: 72 6e 73 20 35 0a 73 65 71 75 65 6e 63 65 2e 6e rns 5.sequence.n
9190: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
91a0: 72 6e 73 20 37 0a 73 65 71 75 65 6e 63 65 2e 6e rns 7.sequence.n
91b0: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
91c0: 72 6e 73 20 31 0a 73 65 71 75 65 6e 63 65 2e 6e rns 1.sequence.n
91d0: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
91e0: 72 6e 73 20 33 0a 20 20 20 20 20 20 20 20 20 3c rns 3. <
91f0: 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 /code></pre>..
9200: 20 20 3c 21 2d 2d 20 73 65 63 74 69 6f 6e 20 2d <!-- section -
9210: 2d 3e 0a 0a 20 20 20 20 3c 68 33 3e 4d 6f 64 65 ->.. <h3>Mode
9220: 73 3c 2f 68 33 3e 0a 0a 20 20 20 20 54 68 65 20 s</h3>.. The
9230: 73 65 71 75 65 6e 63 65 20 6d 6f 64 65 6c 20 74 sequence model t
9240: 61 6b 65 73 20 61 6e 20 6f 70 74 69 6f 6e 61 6c akes an optional
9250: 20 73 65 63 6f 6e 64 20 61 72 67 75 6d 65 6e 74 second argument
9260: 20 66 6f 72 20 74 68 65 20 73 65 71 75 65 6e 63 for the sequenc
9270: 65 20 6d 6f 64 65 2c 20 77 68 69 63 68 20 63 61 e mode, which ca
9280: 6e 20 62 65 20 3c 62 3e 75 70 3c 2f 62 3e 2c 20 n be <b>up</b>,
9290: 3c 62 3e 64 6f 77 6e 3c 2f 62 3e 2c 20 3c 62 3e <b>down</b>, <b>
92a0: 64 72 75 6e 6b 3c 2f 62 3e 20 28 72 61 6e 64 6f drunk</b> (rando
92b0: 6d 6c 79 20 63 68 6f 6f 73 65 73 20 74 6f 20 73 mly chooses to s
92c0: 74 65 70 20 75 70 20 6f 72 20 64 6f 77 6e 29 2c tep up or down),
92d0: 20 6f 72 20 3c 62 3e 72 61 6e 64 6f 6d 3c 2f 62 or <b>random</b
92e0: 3e 20 28 63 68 6f 6f 73 65 73 20 61 20 72 61 6e > (chooses a ran
92f0: 64 6f 6d 20 6e 75 6d 62 65 72 20 66 72 6f 6d 20 dom number from
9300: 77 69 74 68 69 6e 20 74 68 65 20 63 6f 75 6e 74 within the count
9310: 69 6e 67 20 72 61 6e 67 65 29 2e 0a 0a 20 20 20 ing range)...
9320: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
9330: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
9340: 73 63 72 69 70 74 22 3e 0a 76 61 72 20 73 65 71 script">.var seq
9350: 75 65 6e 63 65 20 3d 20 6e 65 77 20 4e 65 78 75 uence = new Nexu
9360: 73 2e 53 65 71 75 65 6e 63 65 28 5b 31 2c 33 2c s.Sequence([1,3,
9370: 35 2c 37 5d 2c 22 64 6f 77 6e 22 29 0a 73 65 71 5,7],"down").seq
9380: 75 65 6e 63 65 2e 6e 65 78 74 28 29 20 20 20 20 uence.next()
9390: 2f 2f 20 72 65 74 75 72 6e 73 20 37 0a 73 65 71 // returns 7.seq
93a0: 75 65 6e 63 65 2e 6e 65 78 74 28 29 20 20 20 20 uence.next()
93b0: 2f 2f 20 72 65 74 75 72 6e 73 20 35 0a 73 65 71 // returns 5.seq
93c0: 75 65 6e 63 65 2e 6e 65 78 74 28 29 20 20 20 20 uence.next()
93d0: 2f 2f 20 72 65 74 75 72 6e 73 20 33 0a 73 65 71 // returns 3.seq
93e0: 75 65 6e 63 65 2e 6e 65 78 74 28 29 20 20 20 20 uence.next()
93f0: 2f 2f 20 72 65 74 75 72 6e 73 20 31 0a 73 65 71 // returns 1.seq
9400: 75 65 6e 63 65 2e 6e 65 78 74 28 29 20 20 20 20 uence.next()
9410: 2f 2f 20 72 65 74 75 72 6e 73 20 37 0a 73 65 71 // returns 7.seq
9420: 75 65 6e 63 65 2e 6e 65 78 74 28 29 20 20 20 20 uence.next()
9430: 2f 2f 20 72 65 74 75 72 6e 73 20 35 0a 20 20 20 // returns 5.
9440: 20 20 20 20 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 </code></pr
9450: 65 3e 0a 0a 20 20 20 20 3c 68 33 3e 50 72 6f 70 e>.. <h3>Prop
9460: 65 72 74 69 65 73 3c 2f 68 33 3e 0a 0a 20 20 20 erties</h3>..
9470: 20 3c 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 <pre><code clas
9480: 73 3d 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 s="language-java
9490: 73 63 72 69 70 74 22 3e 0a 73 65 71 75 65 6e 63 script">.sequenc
94a0: 65 2e 76 61 6c 75 65 73 20 3d 20 5b 32 2c 34 2c e.values = [2,4,
94b0: 35 2c 38 5d 20 20 20 2f 2f 20 75 70 64 61 74 65 5,8] // update
94c0: 73 20 74 68 65 20 73 65 71 75 65 6e 63 65 20 6f s the sequence o
94d0: 66 20 76 61 6c 75 65 73 0a 73 65 71 75 65 6e 63 f values.sequenc
94e0: 65 2e 6d 6f 64 65 20 3d 20 22 64 72 75 6e 6b 22 e.mode = "drunk"
94f0: 0a 73 65 71 75 65 6e 63 65 2e 76 61 6c 75 65 20 .sequence.value
9500: 3d 20 32 20 20 20 2f 2f 20 74 68 69 73 20 6a 75 = 2 // this ju
9510: 6d 70 73 20 74 6f 20 77 68 65 72 65 20 74 68 65 mps to where the
9520: 20 27 32 27 20 76 61 6c 75 65 20 69 73 20 69 6e '2' value is in
9530: 20 74 68 65 20 73 65 71 75 65 6e 63 65 2c 20 77 the sequence, w
9540: 68 69 63 68 20 69 73 20 69 6e 64 65 78 20 30 2e hich is index 0.
9550: 0a 20 20 20 20 20 20 20 20 3c 2f 63 6f 64 65 3e . </code>
9560: 3c 2f 70 72 65 3e 0a 0a 0a 20 20 3c 2f 64 69 76 </pre>... </div
9570: 3e 0a 0a 0a 0a 0a 20 20 3c 21 2d 2d 0a 0a 20 20 >..... <!--..
9580: 20 20 20 20 4d 54 2e 44 52 55 4e 4b 0a 0a 20 20 MT.DRUNK..
9590: 20 20 20 20 2d 2d 3e 0a 0a 20 20 3c 64 69 76 20 -->.. <div
95a0: 69 64 3d 22 64 72 75 6e 6b 22 20 63 6c 61 73 73 id="drunk" class
95b0: 3d 22 63 75 73 74 6f 6d 2d 74 75 74 6f 72 69 61 ="custom-tutoria
95c0: 6c 22 20 73 74 79 6c 65 3d 22 64 69 73 70 6c 61 l" style="displa
95d0: 79 3a 6e 6f 6e 65 22 3e 0a 20 20 20 20 3c 68 32 y:none">. <h2
95e0: 3e 44 72 75 6e 6b 20 4d 6f 64 65 6c 3c 2f 68 32 >Drunk Model</h2
95f0: 3e 0a 0a 20 20 20 20 3c 70 3e 0a 20 20 20 20 20 >.. <p>.
9600: 20 41 20 44 72 75 6e 6b 20 4d 6f 64 65 6c 20 64 A Drunk Model d
9610: 6f 65 73 20 61 20 22 64 72 75 6e 6b 20 77 61 6c oes a "drunk wal
9620: 6b 22 20 74 68 72 6f 75 67 68 20 61 20 67 69 76 k" through a giv
9630: 65 6e 20 72 61 6e 67 65 2c 20 6d 65 61 6e 69 6e en range, meanin
9640: 67 20 69 74 20 77 69 6c 6c 20 72 61 6e 64 6f 6d g it will random
9650: 6c 79 20 73 74 65 70 20 75 70 20 6f 72 20 64 6f ly step up or do
9660: 77 6e 20 62 79 20 61 20 67 69 76 65 6e 20 69 6e wn by a given in
9670: 63 72 65 6d 65 6e 74 2e 0a 20 20 20 20 3c 2f 70 crement.. </p
9680: 3e 0a 20 20 20 20 3c 70 72 65 3e 3c 63 6f 64 65 >. <pre><code
9690: 20 63 6c 61 73 73 3d 22 6c 61 6e 67 75 61 67 65 class="language
96a0: 2d 6a 61 76 61 73 63 72 69 70 74 22 3e 0a 2f 2f -javascript">.//
96b0: 20 54 68 69 73 20 64 72 75 6e 6b 20 6d 6f 64 65 This drunk mode
96c0: 6c 20 68 61 73 20 61 20 72 61 6e 67 65 20 6f 66 l has a range of
96d0: 20 30 20 74 6f 20 31 30 30 0a 2f 2f 20 49 74 73 0 to 100.// Its
96e0: 20 73 74 61 72 74 69 6e 67 20 76 61 6c 75 65 20 starting value
96f0: 69 73 20 35 30 0a 2f 2f 20 49 74 73 20 73 74 65 is 50.// Its ste
9700: 70 70 69 6e 67 20 69 6e 63 72 65 6d 65 6e 74 20 pping increment
9710: 69 73 20 31 30 0a 76 61 72 20 64 72 75 6e 6b 20 is 10.var drunk
9720: 3d 20 6e 65 77 20 4e 65 78 75 73 2e 44 72 75 6e = new Nexus.Drun
9730: 6b 28 30 2c 31 30 30 2c 35 30 2c 31 30 29 0a 64 k(0,100,50,10).d
9740: 72 75 6e 6b 2e 6e 65 78 74 28 29 20 20 20 20 2f runk.next() /
9750: 2f 20 72 65 74 75 72 6e 73 20 34 30 0a 64 72 75 / returns 40.dru
9760: 6e 6b 2e 6e 65 78 74 28 29 20 20 20 20 2f 2f 20 nk.next() //
9770: 72 65 74 75 72 6e 73 20 35 30 0a 64 72 75 6e 6b returns 50.drunk
9780: 2e 6e 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 .next() // re
9790: 74 75 72 6e 73 20 34 30 0a 64 72 75 6e 6b 2e 6e turns 40.drunk.n
97a0: 65 78 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 ext() // retu
97b0: 72 6e 73 20 33 30 0a 64 72 75 6e 6b 2e 6e 65 78 rns 30.drunk.nex
97c0: 74 28 29 20 20 20 20 2f 2f 20 72 65 74 75 72 6e t() // return
97d0: 73 20 34 30 0a 64 72 75 6e 6b 2e 6e 65 78 74 28 s 40.drunk.next(
97e0: 29 20 20 20 20 2f 2f 20 72 65 74 75 72 6e 73 20 ) // returns
97f0: 33 30 0a 20 20 20 20 20 20 20 20 20 3c 2f 63 6f 30. </co
9800: 64 65 3e 3c 2f 70 72 65 3e 0a 0a 20 20 20 20 3c de></pre>.. <
9810: 21 2d 2d 20 73 65 63 74 69 6f 6e 20 2d 2d 3e 0a !-- section -->.
9820: 0a 0a 20 20 20 20 3c 68 33 3e 50 72 6f 70 65 72 .. <h3>Proper
9830: 74 69 65 73 3c 2f 68 33 3e 0a 0a 20 20 20 20 3c ties</h3>.. <
9840: 70 72 65 3e 3c 63 6f 64 65 20 63 6c 61 73 73 3d pre><code class=
9850: 22 6c 61 6e 67 75 61 67 65 2d 6a 61 76 61 73 63 "language-javasc
9860: 72 69 70 74 22 3e 0a 64 72 75 6e 6b 2e 6d 69 6e ript">.drunk.min
9870: 20 3d 20 31 30 30 0a 64 72 75 6e 6b 2e 6d 61 78 = 100.drunk.max
9880: 20 3d 20 31 30 30 30 0a 64 72 75 6e 6b 2e 69 6e = 1000.drunk.in
9890: 63 72 65 6d 65 6e 74 20 3d 20 31 30 30 0a 64 72 crement = 100.dr
98a0: 75 6e 6b 2e 76 61 6c 75 65 20 3d 20 35 30 30 20 unk.value = 500
98b0: 20 20 2f 2f 20 6a 75 6d 70 73 20 74 6f 20 74 68 // jumps to th
98c0: 69 73 20 76 61 6c 75 65 0a 20 20 20 20 20 20 20 is value.
98d0: 20 3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a 0a </code></pre>..
98e0: 0a 20 20 3c 2f 64 69 76 3e 0a 0a 0a 0a 0a 0a 0a . </div>.......
98f0: 0a 3c 2f 62 6f 64 79 3e 0a 0a 3c 73 63 72 69 70 .</body>..<scrip
9900: 74 3e 0a 20 20 76 61 72 20 55 6e 66 6f 72 6d 61 t>. var Unforma
9910: 74 74 65 64 20 3d 20 7b 7d 0a 20 20 76 61 72 20 tted = {}. var
9920: 41 50 49 20 3d 20 7b 7d 0a 20 20 76 61 72 20 48 API = {}. var H
9930: 65 6c 70 65 72 73 20 3d 20 5b 5d 0a 20 20 4e 65 elpers = []. Ne
9940: 78 75 73 2e 63 6f 6e 74 65 78 74 20 3d 20 54 6f xus.context = To
9950: 6e 65 2e 63 6f 6e 74 65 78 74 3b 0a 0a 20 20 24 ne.context;.. $
9960: 2e 67 65 74 4a 53 4f 4e 28 27 61 70 69 2e 6a 73 .getJSON('api.js
9970: 6f 6e 27 2c 20 66 75 6e 63 74 69 6f 6e 20 28 64 on', function (d
9980: 61 74 61 29 20 7b 0a 20 20 20 20 64 61 74 61 2e ata) {. data.
9990: 66 6f 72 45 61 63 68 28 66 75 6e 63 74 69 6f 6e forEach(function
99a0: 20 28 65 6e 74 72 79 29 20 7b 0a 20 20 20 20 20 (entry) {.
99b0: 20 55 6e 66 6f 72 6d 61 74 74 65 64 5b 65 6e 74 Unformatted[ent
99c0: 72 79 2e 6e 61 6d 65 5d 20 3d 20 65 6e 74 72 79 ry.name] = entry
99d0: 0a 20 20 20 20 7d 29 0a 0a 20 20 20 20 2f 2f 20 . }).. //
99e0: 50 61 72 73 65 20 48 65 6c 70 65 72 20 64 6f 63 Parse Helper doc
99f0: 20 69 6e 74 6f 20 48 65 6c 70 65 72 73 20 6f 62 into Helpers ob
9a00: 6a 65 63 74 0a 20 20 20 20 66 6f 72 20 28 76 61 ject. for (va
9a10: 72 20 6b 65 79 20 69 6e 20 55 6e 66 6f 72 6d 61 r key in Unforma
9a20: 74 74 65 64 29 20 7b 0a 20 20 20 20 20 20 69 66 tted) {. if
9a30: 20 28 4c 6f 61 64 4c 69 6e 6b 73 2e 48 65 6c 70 (LoadLinks.Help
9a40: 65 72 2e 69 6e 64 65 78 4f 66 28 6b 65 79 29 20 er.indexOf(key)
9a50: 3e 3d 20 30 29 20 7b 0a 20 20 20 20 20 20 20 20 >= 0) {.
9a60: 76 61 72 20 75 6e 66 6f 72 6d 61 74 74 65 64 20 var unformatted
9a70: 3d 20 55 6e 66 6f 72 6d 61 74 74 65 64 5b 6b 65 = Unformatted[ke
9a80: 79 5d 0a 20 20 20 20 20 20 20 20 76 61 72 20 65 y]. var e
9a90: 6e 74 72 79 20 3d 20 7b 0a 20 20 20 20 20 20 20 ntry = {.
9aa0: 20 20 20 6e 61 6d 65 3a 20 75 6e 66 6f 72 6d 61 name: unforma
9ab0: 74 74 65 64 2e 6e 61 6d 65 2c 0a 20 20 20 20 20 tted.name,.
9ac0: 20 20 20 20 20 70 61 72 61 6d 65 74 65 72 73 3a parameters:
9ad0: 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 70 61 72 unformatted.par
9ae0: 61 6d 73 2c 0a 20 20 20 20 20 20 20 20 20 20 64 ams,. d
9af0: 65 73 63 72 69 70 74 69 6f 6e 3a 20 75 6e 66 6f escription: unfo
9b00: 72 6d 61 74 74 65 64 2e 64 65 73 63 72 69 70 74 rmatted.descript
9b10: 69 6f 6e 2e 63 68 69 6c 64 72 65 6e 5b 30 5d 2e ion.children[0].
9b20: 63 68 69 6c 64 72 65 6e 5b 30 5d 2e 76 61 6c 75 children[0].valu
9b30: 65 2c 0a 20 20 20 20 20 20 20 20 20 20 72 65 74 e,. ret
9b40: 75 72 6e 73 3a 20 7b 0a 20 20 20 20 20 20 20 20 urns: {.
9b50: 20 20 20 20 74 79 70 65 3a 20 75 6e 66 6f 72 6d type: unform
9b60: 61 74 74 65 64 2e 72 65 74 75 72 6e 73 5b 30 5d atted.returns[0]
9b70: 2e 74 79 70 65 2c 0a 20 20 20 20 20 20 20 20 20 .type,.
9b80: 20 20 20 64 65 73 63 72 69 70 74 69 6f 6e 3a 20 description:
9b90: 75 6e 66 6f 72 6d 61 74 74 65 64 2e 72 65 74 75 unformatted.retu
9ba0: 72 6e 73 5b 30 5d 2e 64 65 73 63 72 69 70 74 69 rns[0].descripti
9bb0: 6f 6e 2e 63 68 69 6c 64 72 65 6e 5b 30 5d 2e 63 on.children[0].c
9bc0: 68 69 6c 64 72 65 6e 5b 30 5d 2e 76 61 6c 75 65 hildren[0].value
9bd0: 0a 20 20 20 20 20 20 20 20 20 20 7d 2c 0a 20 20 . },.
9be0: 20 20 20 20 20 20 20 20 65 78 61 6d 70 6c 65 3a example:
9bf0: 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 65 78 61 unformatted.exa
9c00: 6d 70 6c 65 73 5b 30 5d 2e 64 65 73 63 72 69 70 mples[0].descrip
9c10: 74 69 6f 6e 2c 0a 20 20 20 20 20 20 20 20 7d 0a tion,. }.
9c20: 20 20 20 20 20 20 20 20 69 66 20 28 65 6e 74 72 if (entr
9c30: 79 2e 70 61 72 61 6d 65 74 65 72 73 20 26 26 20 y.parameters &&
9c40: 65 6e 74 72 79 2e 70 61 72 61 6d 65 74 65 72 73 entry.parameters
9c50: 2e 6c 65 6e 67 74 68 20 3e 20 30 29 20 7b 0a 20 .length > 0) {.
9c60: 20 20 20 20 20 20 20 20 20 6c 65 74 20 70 61 72 let par
9c70: 61 6d 73 20 3d 20 5b 5d 0a 20 20 20 20 20 20 20 ams = [].
9c80: 20 20 20 65 6e 74 72 79 2e 70 61 72 61 6d 65 74 entry.paramet
9c90: 65 72 73 2e 66 6f 72 45 61 63 68 28 66 75 6e 63 ers.forEach(func
9ca0: 74 69 6f 6e 20 28 70 61 72 61 6d 29 20 7b 0a 20 tion (param) {.
9cb0: 20 20 20 20 20 20 20 20 20 20 20 70 61 72 61 6d param
9cc0: 73 2e 70 75 73 68 28 7b 0a 20 20 20 20 20 20 20 s.push({.
9cd0: 20 20 20 20 20 20 20 6e 61 6d 65 3a 20 70 61 72 name: par
9ce0: 61 6d 2e 6e 61 6d 65 2c 0a 20 20 20 20 20 20 20 am.name,.
9cf0: 20 20 20 20 20 20 20 74 79 70 65 3a 20 70 61 72 type: par
9d00: 61 6d 2e 74 79 70 65 2e 6e 61 6d 65 2c 0a 20 20 am.type.name,.
9d10: 20 20 20 20 20 20 20 20 20 20 20 20 64 65 73 63 desc
9d20: 72 69 70 74 69 6f 6e 3a 20 70 61 72 61 6d 2e 64 ription: param.d
9d30: 65 73 63 72 69 70 74 69 6f 6e 2e 63 68 69 6c 64 escription.child
9d40: 72 65 6e 5b 30 5d 2e 63 68 69 6c 64 72 65 6e 5b ren[0].children[
9d50: 30 5d 2e 76 61 6c 75 65 0a 20 20 20 20 20 20 20 0].value.
9d60: 20 20 20 20 20 7d 29 0a 20 20 20 20 20 20 20 20 }).
9d70: 20 20 7d 29 0a 20 20 20 20 20 20 20 20 20 20 65 }). e
9d80: 6e 74 72 79 2e 70 61 72 61 6d 65 74 65 72 73 20 ntry.parameters
9d90: 3d 20 70 61 72 61 6d 73 0a 20 20 20 20 20 20 20 = params.
9da0: 20 20 20 65 6e 74 72 79 2e 70 61 72 61 6d 65 74 entry.paramet
9db0: 65 72 73 5b 65 6e 74 72 79 2e 70 61 72 61 6d 65 ers[entry.parame
9dc0: 74 65 72 73 2e 6c 65 6e 67 74 68 20 2d 20 31 5d ters.length - 1]
9dd0: 2e 6c 61 73 74 20 3d 20 74 72 75 65 0a 20 20 20 .last = true.
9de0: 20 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20 48 }. H
9df0: 65 6c 70 65 72 73 2e 70 75 73 68 28 65 6e 74 72 elpers.push(entr
9e00: 79 29 3b 0a 20 20 20 20 20 20 7d 0a 20 20 20 20 y);. }.
9e10: 7d 0a 0a 0a 20 20 20 20 2f 2f 20 50 61 72 73 65 }... // Parse
9e20: 20 69 6e 74 65 72 66 61 63 65 20 64 6f 63 75 6d interface docum
9e30: 65 6e 74 61 74 69 6f 6e 20 69 6e 74 6f 20 41 50 entation into AP
9e40: 49 20 6f 62 6a 65 63 74 0a 20 20 20 20 66 6f 72 I object. for
9e50: 20 28 76 61 72 20 6b 65 79 20 69 6e 20 55 6e 66 (var key in Unf
9e60: 6f 72 6d 61 74 74 65 64 29 20 7b 0a 20 20 20 20 ormatted) {.
9e70: 20 20 76 61 72 20 75 6e 66 6f 72 6d 61 74 74 65 var unformatte
9e80: 64 20 3d 20 55 6e 66 6f 72 6d 61 74 74 65 64 5b d = Unformatted[
9e90: 6b 65 79 5d 0a 20 20 20 20 20 20 76 61 72 20 65 key]. var e
9ea0: 6e 74 72 79 20 3d 20 7b 0a 20 20 20 20 20 20 20 ntry = {.
9eb0: 20 6e 61 6d 65 3a 20 75 6e 66 6f 72 6d 61 74 74 name: unformatt
9ec0: 65 64 2e 6e 61 6d 65 2c 0a 20 20 20 20 20 20 20 ed.name,.
9ed0: 20 65 78 61 6d 70 6c 65 73 3a 20 75 6e 66 6f 72 examples: unfor
9ee0: 6d 61 74 74 65 64 2e 65 78 61 6d 70 6c 65 73 2c matted.examples,
9ef0: 0a 20 20 20 20 20 20 20 20 6f 75 74 70 75 74 73 . outputs
9f00: 3a 20 5b 5d 0a 20 20 20 20 20 20 7d 0a 20 20 20 : []. }.
9f10: 20 20 20 76 61 72 20 65 78 61 6d 70 6c 65 54 79 var exampleTy
9f20: 70 65 73 20 3d 20 5b 27 42 61 73 69 63 27 2c 20 pes = ['Basic',
9f30: 27 57 69 74 68 20 4f 70 74 69 6f 6e 73 27 5d 0a 'With Options'].
9f40: 20 20 20 20 20 20 69 66 20 28 65 6e 74 72 79 2e if (entry.
9f50: 65 78 61 6d 70 6c 65 73 29 20 7b 0a 20 20 20 20 examples) {.
9f60: 20 20 20 20 66 6f 72 20 28 76 61 72 20 69 20 3d for (var i =
9f70: 20 30 3b 20 69 20 3c 20 65 6e 74 72 79 2e 65 78 0; i < entry.ex
9f80: 61 6d 70 6c 65 73 2e 6c 65 6e 67 74 68 3b 20 69 amples.length; i
9f90: 2b 2b 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 ++) {.
9fa0: 65 6e 74 72 79 2e 65 78 61 6d 70 6c 65 73 5b 69 entry.examples[i
9fb0: 5d 2e 74 69 74 6c 65 20 3d 20 65 78 61 6d 70 6c ].title = exampl
9fc0: 65 54 79 70 65 73 5b 69 5d 3b 0a 20 20 20 20 20 eTypes[i];.
9fd0: 20 20 20 7d 0a 20 20 20 20 20 20 7d 0a 20 20 20 }. }.
9fe0: 20 20 20 66 6f 72 20 28 76 61 72 20 69 20 3d 20 for (var i =
9ff0: 30 3b 20 69 20 3c 20 75 6e 66 6f 72 6d 61 74 74 0; i < unformatt
a000: 65 64 2e 74 61 67 73 2e 6c 65 6e 67 74 68 3b 20 ed.tags.length;
a010: 69 2b 2b 29 20 7b 0a 20 20 20 20 20 20 20 20 69 i++) {. i
a020: 66 20 28 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 f (unformatted.t
a030: 61 67 73 5b 69 5d 2e 74 69 74 6c 65 20 3d 3d 3d ags[i].title ===
a040: 20 22 6f 75 74 70 75 74 22 29 20 7b 0a 20 20 20 "output") {.
a050: 20 20 20 20 20 20 20 76 61 72 20 6e 61 6d 65 20 var name
a060: 3d 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 61 = unformatted.ta
a070: 67 73 5b 69 5d 2e 64 65 73 63 72 69 70 74 69 6f gs[i].descriptio
a080: 6e 2e 73 70 6c 69 74 28 27 5c 6e 27 29 2e 73 6c n.split('\n').sl
a090: 69 63 65 28 30 2c 20 31 29 5b 30 5d 0a 20 20 20 ice(0, 1)[0].
a0a0: 20 20 20 20 20 20 20 76 61 72 20 64 65 73 63 20 var desc
a0b0: 3d 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 61 = unformatted.ta
a0c0: 67 73 5b 69 5d 2e 64 65 73 63 72 69 70 74 69 6f gs[i].descriptio
a0d0: 6e 2e 73 70 6c 69 74 28 27 5c 6e 27 29 2e 73 6c n.split('\n').sl
a0e0: 69 63 65 28 31 29 2e 6a 6f 69 6e 28 22 5c 6e 22 ice(1).join("\n"
a0f0: 29 0a 20 20 20 20 20 20 20 20 20 20 65 6e 74 72 ). entr
a100: 79 2e 6f 75 74 70 75 74 73 2e 70 75 73 68 28 7b y.outputs.push({
a110: 0a 20 20 20 20 20 20 20 20 20 20 20 20 6e 61 6d . nam
a120: 65 3a 20 6e 61 6d 65 2c 0a 20 20 20 20 20 20 20 e: name,.
a130: 20 20 20 20 20 64 65 73 63 72 69 70 74 69 6f 6e description
a140: 3a 20 64 65 73 63 2c 0a 20 20 20 20 20 20 20 20 : desc,.
a150: 20 20 20 20 65 78 61 6d 70 6c 65 3a 20 27 27 0a example: ''.
a160: 20 20 20 20 20 20 20 20 20 20 7d 29 0a 20 20 20 }).
a170: 20 20 20 20 20 7d 20 65 6c 73 65 20 69 66 20 28 } else if (
a180: 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 61 67 73 unformatted.tags
a190: 5b 69 5d 2e 74 69 74 6c 65 20 3d 3d 3d 20 22 6f [i].title === "o
a1a0: 75 74 70 75 74 65 78 61 6d 70 6c 65 22 29 20 7b utputexample") {
a1b0: 0a 20 20 20 20 20 20 20 20 20 20 69 66 20 28 65 . if (e
a1c0: 6e 74 72 79 2e 6f 75 74 70 75 74 73 2e 6c 65 6e ntry.outputs.len
a1d0: 67 74 68 20 2d 20 31 20 3e 3d 20 30 29 20 7b 0a gth - 1 >= 0) {.
a1e0: 20 20 20 20 20 20 20 20 20 20 20 20 65 6e 74 72 entr
a1f0: 79 2e 6f 75 74 70 75 74 73 5b 65 6e 74 72 79 2e y.outputs[entry.
a200: 6f 75 74 70 75 74 73 2e 6c 65 6e 67 74 68 20 2d outputs.length -
a210: 20 31 5d 2e 65 78 61 6d 70 6c 65 20 3d 20 75 6e 1].example = un
a220: 66 6f 72 6d 61 74 74 65 64 2e 74 61 67 73 5b 69 formatted.tags[i
a230: 5d 2e 64 65 73 63 72 69 70 74 69 6f 6e 0a 20 20 ].description.
a240: 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 }.
a250: 20 20 7d 0a 20 20 20 20 20 20 20 20 65 6e 74 72 }. entr
a260: 79 5b 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 61 y[unformatted.ta
a270: 67 73 5b 69 5d 2e 74 69 74 6c 65 5d 20 3d 20 75 gs[i].title] = u
a280: 6e 66 6f 72 6d 61 74 74 65 64 2e 74 61 67 73 5b nformatted.tags[
a290: 69 5d 2e 64 65 73 63 72 69 70 74 69 6f 6e 0a 20 i].description.
a2a0: 20 20 20 20 20 7d 0a 0a 0a 20 20 20 20 20 20 2f }... /
a2b0: 2f 20 63 6f 6c 6c 65 63 74 20 6d 65 6d 62 65 72 / collect member
a2c0: 73 0a 20 20 20 20 20 20 76 61 72 20 6d 65 6d 62 s. var memb
a2d0: 65 72 73 20 3d 20 75 6e 66 6f 72 6d 61 74 74 65 ers = unformatte
a2e0: 64 2e 6d 65 6d 62 65 72 73 2e 69 6e 73 74 61 6e d.members.instan
a2f0: 63 65 0a 0a 20 20 20 20 20 20 2f 2f 67 65 74 20 ce.. //get
a300: 69 6e 68 65 72 69 74 65 64 20 6d 65 6d 62 65 72 inherited member
a310: 73 0a 20 20 20 20 20 20 69 66 20 28 75 6e 66 6f s. if (unfo
a320: 72 6d 61 74 74 65 64 2e 61 75 67 6d 65 6e 74 73 rmatted.augments
a330: 29 20 7b 0a 20 20 20 20 20 20 20 20 66 6f 72 20 ) {. for
a340: 28 76 61 72 20 69 20 3d 20 30 3b 20 69 20 3c 20 (var i = 0; i <
a350: 75 6e 66 6f 72 6d 61 74 74 65 64 2e 61 75 67 6d unformatted.augm
a360: 65 6e 74 73 2e 6c 65 6e 67 74 68 3b 20 69 2b 2b ents.length; i++
a370: 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 76 61 ) {. va
a380: 72 20 6e 61 6d 65 20 3d 20 75 6e 66 6f 72 6d 61 r name = unforma
a390: 74 74 65 64 2e 61 75 67 6d 65 6e 74 73 5b 69 5d tted.augments[i]
a3a0: 2e 6e 61 6d 65 0a 20 20 20 20 20 20 20 20 20 20 .name.
a3b0: 69 66 20 28 6e 61 6d 65 20 21 3d 20 22 45 76 65 if (name != "Eve
a3c0: 6e 74 45 6d 69 74 74 65 72 22 29 20 7b 0a 20 20 ntEmitter") {.
a3d0: 20 20 20 20 20 20 20 20 20 20 6d 65 6d 62 65 72 member
a3e0: 73 20 3d 20 6d 65 6d 62 65 72 73 2e 63 6f 6e 63 s = members.conc
a3f0: 61 74 28 55 6e 66 6f 72 6d 61 74 74 65 64 5b 6e at(Unformatted[n
a400: 61 6d 65 5d 2e 6d 65 6d 62 65 72 73 2e 69 6e 73 ame].members.ins
a410: 74 61 6e 63 65 29 0a 20 20 20 20 20 20 20 20 20 tance).
a420: 20 20 20 69 66 20 28 55 6e 66 6f 72 6d 61 74 74 if (Unformatt
a430: 65 64 5b 6e 61 6d 65 5d 2e 61 75 67 6d 65 6e 74 ed[name].augment
a440: 73 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 20 s) {.
a450: 20 20 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 61 unformatted.a
a460: 75 67 6d 65 6e 74 73 2e 70 75 73 68 28 55 6e 66 ugments.push(Unf
a470: 6f 72 6d 61 74 74 65 64 5b 6e 61 6d 65 5d 2e 61 ormatted[name].a
a480: 75 67 6d 65 6e 74 73 5b 30 5d 29 0a 20 20 20 20 ugments[0]).
a490: 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 }.
a4a0: 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20 7d 0a }. }.
a4b0: 20 20 20 20 20 20 7d 0a 0a 20 20 20 20 20 20 2f }.. /
a4c0: 2f 73 6f 72 74 20 6d 65 6d 62 65 72 73 0a 20 20 /sort members.
a4d0: 20 20 20 20 65 6e 74 72 79 2e 70 72 6f 70 65 72 entry.proper
a4e0: 74 69 65 73 20 3d 20 5b 5d 0a 20 20 20 20 20 20 ties = [].
a4f0: 65 6e 74 72 79 2e 6d 65 74 68 6f 64 73 20 3d 20 entry.methods =
a500: 5b 5d 0a 20 20 20 20 20 20 66 6f 72 20 28 76 61 []. for (va
a510: 72 20 69 20 3d 20 30 3b 20 69 20 3c 20 6d 65 6d r i = 0; i < mem
a520: 62 65 72 73 2e 6c 65 6e 67 74 68 3b 20 69 2b 2b bers.length; i++
a530: 29 20 7b 0a 20 20 20 20 20 20 20 20 69 66 20 28 ) {. if (
a540: 6d 65 6d 62 65 72 73 5b 69 5d 2e 6b 69 6e 64 20 members[i].kind
a550: 3d 3d 20 22 66 75 6e 63 74 69 6f 6e 22 29 20 7b == "function") {
a560: 0a 20 20 20 20 20 20 20 20 20 20 76 61 72 20 6d . var m
a570: 65 74 68 6f 64 20 3d 20 7b 0a 20 20 20 20 20 20 ethod = {.
a580: 20 20 20 20 20 20 6e 61 6d 65 3a 20 6d 65 6d 62 name: memb
a590: 65 72 73 5b 69 5d 2e 6e 61 6d 65 2c 0a 20 20 20 ers[i].name,.
a5a0: 20 20 20 20 20 20 20 20 20 70 61 72 61 6d 65 74 paramet
a5b0: 65 72 73 3a 20 5b 5d 2c 0a 20 20 20 20 20 20 20 ers: [],.
a5c0: 20 20 20 20 20 64 65 73 63 72 69 70 74 69 6f 6e description
a5d0: 3a 20 6d 65 6d 62 65 72 73 5b 69 5d 2e 64 65 73 : members[i].des
a5e0: 63 72 69 70 74 69 6f 6e 2e 63 68 69 6c 64 72 65 cription.childre
a5f0: 6e 5b 30 5d 2e 63 68 69 6c 64 72 65 6e 5b 30 5d n[0].children[0]
a600: 2e 76 61 6c 75 65 2c 0a 20 20 20 20 20 20 20 20 .value,.
a610: 20 20 20 20 72 65 74 75 72 6e 73 3a 20 66 61 6c returns: fal
a620: 73 65 2c 0a 20 20 20 20 20 20 20 20 20 20 20 20 se,.
a630: 65 78 61 6d 70 6c 65 3a 20 66 61 6c 73 65 2c 0a example: false,.
a640: 20 20 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 }.
a650: 20 20 20 20 20 20 66 6f 72 20 28 76 61 72 20 6a for (var j
a660: 20 3d 20 30 3b 20 6a 20 3c 20 6d 65 6d 62 65 72 = 0; j < member
a670: 73 5b 69 5d 2e 74 61 67 73 2e 6c 65 6e 67 74 68 s[i].tags.length
a680: 3b 20 6a 2b 2b 29 20 7b 0a 20 20 20 20 20 20 20 ; j++) {.
a690: 20 20 20 20 20 76 61 72 20 74 61 67 20 3d 20 6d var tag = m
a6a0: 65 6d 62 65 72 73 5b 69 5d 2e 74 61 67 73 5b 6a embers[i].tags[j
a6b0: 5d 0a 20 20 20 20 20 20 20 20 20 20 20 20 73 77 ]. sw
a6c0: 69 74 63 68 20 28 74 61 67 2e 74 69 74 6c 65 29 itch (tag.title)
a6d0: 20 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 {.
a6e0: 20 63 61 73 65 20 27 74 79 70 65 27 3a 0a 20 20 case 'type':.
a6f0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 6d 65 me
a700: 74 68 6f 64 2e 74 79 70 65 20 3d 20 74 61 67 2e thod.type = tag.
a710: 74 79 70 65 2e 6e 61 6d 65 0a 20 20 20 20 20 20 type.name.
a720: 20 20 20 20 20 20 20 20 20 20 62 72 65 61 6b 3b break;
a730: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 63 . c
a740: 61 73 65 20 27 65 78 61 6d 70 6c 65 27 3a 0a 20 ase 'example':.
a750: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 6d m
a760: 65 74 68 6f 64 2e 65 78 61 6d 70 6c 65 20 3d 20 ethod.example =
a770: 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 {.
a780: 20 20 20 20 63 6f 64 65 3a 20 74 61 67 2e 64 65 code: tag.de
a790: 73 63 72 69 70 74 69 6f 6e 0a 20 20 20 20 20 20 scription.
a7a0: 20 20 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 }.
a7b0: 20 20 20 20 20 20 20 20 20 20 20 20 62 72 65 61 brea
a7c0: 6b 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 7d k;. }
a7d0: 0a 20 20 20 20 20 20 20 20 20 20 7d 0a 20 20 20 . }.
a7e0: 20 20 20 20 20 20 20 2f 2a 20 20 70 61 72 61 6d /* param
a7f0: 65 74 65 72 73 20 2a 2f 0a 20 20 20 20 20 20 20 eters */.
a800: 20 20 20 69 66 20 28 6d 65 6d 62 65 72 73 5b 69 if (members[i
a810: 5d 2e 70 61 72 61 6d 73 20 26 26 20 6d 65 6d 62 ].params && memb
a820: 65 72 73 5b 69 5d 2e 70 61 72 61 6d 73 2e 6c 65 ers[i].params.le
a830: 6e 67 74 68 20 3e 20 30 29 20 7b 0a 20 20 20 20 ngth > 0) {.
a840: 20 20 20 20 20 20 20 20 66 6f 72 20 28 76 61 72 for (var
a850: 20 6a 20 3d 20 30 3b 20 6a 20 3c 20 6d 65 6d 62 j = 0; j < memb
a860: 65 72 73 5b 69 5d 2e 70 61 72 61 6d 73 2e 6c 65 ers[i].params.le
a870: 6e 67 74 68 3b 20 6a 2b 2b 29 20 7b 0a 20 20 20 ngth; j++) {.
a880: 20 20 20 20 20 20 20 20 20 20 20 6d 65 74 68 6f metho
a890: 64 2e 70 61 72 61 6d 65 74 65 72 73 2e 70 75 73 d.parameters.pus
a8a0: 68 28 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 h({.
a8b0: 20 20 20 20 6e 61 6d 65 3a 20 6d 65 6d 62 65 72 name: member
a8c0: 73 5b 69 5d 2e 70 61 72 61 6d 73 5b 6a 5d 2e 6e s[i].params[j].n
a8d0: 61 6d 65 0a 20 20 20 20 20 20 20 20 20 20 20 20 ame.
a8e0: 20 20 20 20 2f 2f 20 20 74 79 70 65 3a 20 6d 65 // type: me
a8f0: 6d 62 65 72 73 5b 69 5d 2e 70 61 72 61 6d 73 5b mbers[i].params[
a900: 6a 5d 2e 6e 61 6d 65 2c 0a 20 20 20 20 20 20 20 j].name,.
a910: 20 20 20 20 20 20 20 7d 29 0a 20 20 20 20 20 20 }).
a920: 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20 }.
a930: 20 20 20 20 6d 65 74 68 6f 64 2e 70 61 72 61 6d method.param
a940: 65 74 65 72 73 5b 6d 65 74 68 6f 64 2e 70 61 72 eters[method.par
a950: 61 6d 65 74 65 72 73 2e 6c 65 6e 67 74 68 20 2d ameters.length -
a960: 20 31 5d 2e 6c 61 73 74 20 3d 20 74 72 75 65 0a 1].last = true.
a970: 20 20 20 20 20 20 20 20 20 20 7d 0a 0a 20 20 20 }..
a980: 20 20 20 20 20 20 20 65 6e 74 72 79 2e 6d 65 74 entry.met
a990: 68 6f 64 73 2e 70 75 73 68 28 6d 65 74 68 6f 64 hods.push(method
a9a0: 29 0a 20 20 20 20 20 20 20 20 7d 20 65 6c 73 65 ). } else
a9b0: 20 7b 0a 20 20 20 20 20 20 20 20 20 20 76 61 72 {. var
a9c0: 20 70 72 6f 70 65 72 74 79 20 3d 20 7b 0a 20 20 property = {.
a9d0: 20 20 20 20 20 20 20 20 20 20 6e 61 6d 65 3a 20 name:
a9e0: 6d 65 6d 62 65 72 73 5b 69 5d 2e 6e 61 6d 65 2c members[i].name,
a9f0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 64 65 73 . des
aa00: 63 72 69 70 74 69 6f 6e 3a 20 6d 65 6d 62 65 72 cription: member
aa10: 73 5b 69 5d 2e 64 65 73 63 72 69 70 74 69 6f 6e s[i].description
aa20: 2e 63 68 69 6c 64 72 65 6e 5b 30 5d 2e 63 68 69 .children[0].chi
aa30: 6c 64 72 65 6e 5b 30 5d 2e 76 61 6c 75 65 2c 0a ldren[0].value,.
aa40: 20 20 20 20 20 20 20 20 20 20 20 20 74 79 70 65 type
aa50: 3a 20 27 27 2c 0a 20 20 20 20 20 20 20 20 20 20 : '',.
aa60: 20 20 65 78 61 6d 70 6c 65 3a 20 66 61 6c 73 65 example: false
aa70: 0a 20 20 20 20 20 20 20 20 20 20 7d 0a 20 20 20 . }.
aa80: 20 20 20 20 20 20 20 66 6f 72 20 28 76 61 72 20 for (var
aa90: 6a 20 3d 20 30 3b 20 6a 20 3c 20 6d 65 6d 62 65 j = 0; j < membe
aaa0: 72 73 5b 69 5d 2e 74 61 67 73 2e 6c 65 6e 67 74 rs[i].tags.lengt
aab0: 68 3b 20 6a 2b 2b 29 20 7b 0a 20 20 20 20 20 20 h; j++) {.
aac0: 20 20 20 20 20 20 76 61 72 20 74 61 67 20 3d 20 var tag =
aad0: 6d 65 6d 62 65 72 73 5b 69 5d 2e 74 61 67 73 5b members[i].tags[
aae0: 6a 5d 0a 20 20 20 20 20 20 20 20 20 20 20 20 73 j]. s
aaf0: 77 69 74 63 68 20 28 74 61 67 2e 74 69 74 6c 65 witch (tag.title
ab00: 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 ) {.
ab10: 20 20 63 61 73 65 20 27 74 79 70 65 27 3a 0a 20 case 'type':.
ab20: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 70 p
ab30: 72 6f 70 65 72 74 79 2e 74 79 70 65 20 3d 20 74 roperty.type = t
ab40: 61 67 2e 74 79 70 65 2e 6e 61 6d 65 0a 20 20 20 ag.type.name.
ab50: 20 20 20 20 20 20 20 20 20 20 20 20 20 69 66 20 if
ab60: 28 54 79 70 65 4c 69 6e 6b 73 2e 69 6e 64 65 78 (TypeLinks.index
ab70: 4f 66 28 70 72 6f 70 65 72 74 79 2e 74 79 70 65 Of(property.type
ab80: 29 20 3e 3d 20 30 29 20 7b 0a 20 20 20 20 20 20 ) >= 0) {.
ab90: 20 20 20 20 20 20 20 20 20 20 20 20 70 72 6f 70 prop
aba0: 65 72 74 79 2e 74 79 70 65 20 3d 20 27 3c 61 20 erty.type = '<a
abb0: 68 72 65 66 3d 22 23 27 20 2b 20 70 72 6f 70 65 href="#' + prope
abc0: 72 74 79 2e 74 79 70 65 20 2b 20 27 22 3e 27 20 rty.type + '">'
abd0: 2b 20 70 72 6f 70 65 72 74 79 2e 74 79 70 65 20 + property.type
abe0: 2b 20 27 3c 2f 61 3e 27 3b 0a 20 20 20 20 20 20 + '</a>';.
abf0: 20 20 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 }.
ac00: 20 20 20 20 20 20 20 20 20 20 20 20 62 72 65 61 brea
ac10: 6b 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 k;.
ac20: 20 63 61 73 65 20 27 65 78 61 6d 70 6c 65 27 3a case 'example':
ac30: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 .
ac40: 20 70 72 6f 70 65 72 74 79 2e 65 78 61 6d 70 6c property.exampl
ac50: 65 20 3d 20 7b 0a 20 20 20 20 20 20 20 20 20 20 e = {.
ac60: 20 20 20 20 20 20 20 20 63 6f 64 65 3a 20 74 61 code: ta
ac70: 67 2e 64 65 73 63 72 69 70 74 69 6f 6e 0a 20 20 g.description.
ac80: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 7d 0a }.
ac90: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
aca0: 62 72 65 61 6b 3b 0a 20 20 20 20 20 20 20 20 20 break;.
acb0: 20 20 20 7d 0a 20 20 20 20 20 20 20 20 20 20 7d }. }
acc0: 0a 20 20 20 20 20 20 20 20 20 20 65 6e 74 72 79 . entry
acd0: 2e 70 72 6f 70 65 72 74 69 65 73 2e 70 75 73 68 .properties.push
ace0: 28 70 72 6f 70 65 72 74 79 29 3b 0a 20 20 20 20 (property);.
acf0: 20 20 20 20 7d 0a 20 20 20 20 20 20 7d 0a 0a 20 }. }..
ad00: 20 20 20 20 20 2f 2a 20 61 6c 70 68 61 62 65 74 /* alphabet
ad10: 69 7a 65 20 6d 65 6d 62 65 72 73 20 2a 2f 0a 20 ize members */.
ad20: 20 20 20 20 20 2f 2f 20 20 66 6f 72 20 28 76 61 // for (va
ad30: 72 20 69 3d 30 3b 20 69 3c 65 6e 74 72 79 2e 70 r i=0; i<entry.p
ad40: 72 6f 70 65 72 74 69 65 73 2e 6c 65 6e 67 74 68 roperties.length
ad50: 3b 69 2b 2b 29 20 7b 0a 20 20 20 20 20 20 65 6e ;i++) {. en
ad60: 74 72 79 2e 70 72 6f 70 65 72 74 69 65 73 2e 73 try.properties.s
ad70: 6f 72 74 28 66 75 6e 63 74 69 6f 6e 20 28 61 2c ort(function (a,
ad80: 20 62 29 20 7b 0a 20 20 20 20 20 20 20 20 72 65 b) {. re
ad90: 74 75 72 6e 20 61 2e 6e 61 6d 65 2e 6c 6f 63 61 turn a.name.loca
ada0: 6c 65 43 6f 6d 70 61 72 65 28 62 2e 6e 61 6d 65 leCompare(b.name
adb0: 29 3b 0a 20 20 20 20 20 20 7d 29 3b 0a 20 20 20 );. });.
adc0: 20 20 20 65 6e 74 72 79 2e 6d 65 74 68 6f 64 73 entry.methods
add0: 2e 73 6f 72 74 28 66 75 6e 63 74 69 6f 6e 20 28 .sort(function (
ade0: 61 2c 20 62 29 20 7b 0a 20 20 20 20 20 20 20 20 a, b) {.
adf0: 72 65 74 75 72 6e 20 61 2e 6e 61 6d 65 2e 6c 6f return a.name.lo
ae00: 63 61 6c 65 43 6f 6d 70 61 72 65 28 62 2e 6e 61 caleCompare(b.na
ae10: 6d 65 29 3b 0a 20 20 20 20 20 20 7d 29 3b 0a 20 me);. });.
ae20: 20 20 20 20 20 2f 2f 20 20 7d 0a 0a 0a 0a 20 20 // }....
ae30: 20 20 20 20 65 6e 74 72 79 2e 74 75 74 6f 72 69 entry.tutori
ae40: 61 6c 73 20 3d 20 5b 5d 0a 20 20 20 20 20 20 66 als = []. f
ae50: 6f 72 20 28 76 61 72 20 69 20 3d 20 30 3b 20 69 or (var i = 0; i
ae60: 20 3c 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 < unformatted.t
ae70: 61 67 73 2e 6c 65 6e 67 74 68 3b 20 69 2b 2b 29 ags.length; i++)
ae80: 20 7b 0a 20 20 20 20 20 20 20 20 69 66 20 28 75 {. if (u
ae90: 6e 66 6f 72 6d 61 74 74 65 64 2e 74 61 67 73 5b nformatted.tags[
aea0: 69 5d 2e 74 69 74 6c 65 20 3d 3d 20 27 74 75 74 i].title == 'tut
aeb0: 6f 72 69 61 6c 27 29 20 7b 0a 20 20 20 20 20 20 orial') {.
aec0: 20 20 20 20 76 61 72 20 63 6f 6e 74 65 6e 74 73 var contents
aed0: 20 3d 20 75 6e 66 6f 72 6d 61 74 74 65 64 2e 74 = unformatted.t
aee0: 61 67 73 5b 69 5d 2e 64 65 73 63 72 69 70 74 69 ags[i].descripti
aef0: 6f 6e 0a 20 20 20 20 20 20 20 20 20 20 76 61 72 on. var
af00: 20 6e 61 6d 65 20 3d 20 63 6f 6e 74 65 6e 74 73 name = contents
af10: 2e 73 70 6c 69 74 28 22 5c 6e 22 29 5b 30 5d 0a .split("\n")[0].
af20: 20 20 20 20 20 20 20 20 20 20 76 61 72 20 63 6f var co
af30: 64 65 70 65 6e 20 3d 20 63 6f 6e 74 65 6e 74 73 depen = contents
af40: 2e 73 70 6c 69 74 28 22 5c 6e 22 29 5b 31 5d 0a .split("\n")[1].
af50: 20 20 20 20 20 20 20 20 20 20 76 61 72 20 64 65 var de
af60: 73 63 72 69 70 74 69 6f 6e 20 3d 20 63 6f 6e 74 scription = cont
af70: 65 6e 74 73 2e 73 70 6c 69 74 28 22 5c 6e 22 29 ents.split("\n")
af80: 5b 32 5d 0a 20 20 20 20 20 20 20 20 20 20 65 6e [2]. en
af90: 74 72 79 2e 74 75 74 6f 72 69 61 6c 73 2e 70 75 try.tutorials.pu
afa0: 73 68 28 7b 0a 20 20 20 20 20 20 20 20 20 20 20 sh({.
afb0: 20 64 65 73 63 72 69 70 74 69 6f 6e 3a 20 64 65 description: de
afc0: 73 63 72 69 70 74 69 6f 6e 2c 0a 20 20 20 20 20 scription,.
afd0: 20 20 20 20 20 20 20 6e 61 6d 65 3a 20 6e 61 6d name: nam
afe0: 65 2c 0a 20 20 20 20 20 20 20 20 20 20 20 20 63 e,. c
aff0: 6f 64 65 70 65 6e 3a 20 27 3c 70 20 64 61 74 61 odepen: '<p data
b000: 2d 68 65 69 67 68 74 3d 22 32 36 35 22 20 64 61 -height="265" da
b010: 74 61 2d 74 68 65 6d 65 2d 69 64 3d 22 30 22 20 ta-theme-id="0"
b020: 64 61 74 61 2d 73 6c 75 67 2d 68 61 73 68 3d 22 data-slug-hash="
b030: 27 20 2b 20 63 6f 64 65 70 65 6e 20 2b 20 27 22 ' + codepen + '"
b040: 20 64 61 74 61 2d 64 65 66 61 75 6c 74 2d 74 61 data-default-ta
b050: 62 3d 22 6a 73 2c 72 65 73 75 6c 74 22 20 64 61 b="js,result" da
b060: 74 61 2d 75 73 65 72 3d 22 74 61 79 6c 6f 72 62 ta-user="taylorb
b070: 66 22 20 64 61 74 61 2d 65 6d 62 65 64 2d 76 65 f" data-embed-ve
b080: 72 73 69 6f 6e 3d 22 32 22 20 64 61 74 61 2d 70 rsion="2" data-p
b090: 65 6e 2d 74 69 74 6c 65 3d 22 27 20 2b 20 63 6f en-title="' + co
b0a0: 64 65 70 65 6e 20 2b 20 27 22 20 63 6c 61 73 73 depen + '" class
b0b0: 3d 22 63 6f 64 65 70 65 6e 22 3e 53 65 65 20 74 ="codepen">See t
b0c0: 68 65 20 50 65 6e 20 3c 61 20 68 72 65 66 3d 22 he Pen <a href="
b0d0: 68 74 74 70 3a 2f 2f 63 6f 64 65 70 65 6e 2e 69 http://codepen.i
b0e0: 6f 2f 74 61 79 6c 6f 72 62 66 2f 70 65 6e 2f 27 o/taylorbf/pen/'
b0f0: 20 2b 20 63 6f 64 65 70 65 6e 20 2b 20 27 2f 22 + codepen + '/"
b100: 3e 27 20 2b 0a 20 20 20 20 20 20 20 20 20 20 20 >' +.
b110: 20 20 20 63 6f 64 65 70 65 6e 20 2b 20 27 3c 2f codepen + '</
b120: 61 3e 20 62 79 20 42 65 6e 20 54 61 79 6c 6f 72 a> by Ben Taylor
b130: 20 28 3c 61 20 68 72 65 66 3d 22 68 74 74 70 3a (<a href="http:
b140: 2f 2f 63 6f 64 65 70 65 6e 2e 69 6f 2f 74 61 79 //codepen.io/tay
b150: 6c 6f 72 62 66 22 3e 40 74 61 79 6c 6f 72 62 66 lorbf">@taylorbf
b160: 3c 2f 61 3e 29 20 6f 6e 20 3c 61 20 68 72 65 66 </a>) on <a href
b170: 3d 22 68 74 74 70 3a 2f 2f 63 6f 64 65 70 65 6e ="http://codepen
b180: 2e 69 6f 22 3e 43 6f 64 65 50 65 6e 3c 2f 61 3e .io">CodePen</a>
b190: 2e 3c 2f 70 3e 3c 73 63 72 27 20 2b 20 27 69 70 .</p><scr' + 'ip
b1a0: 74 20 61 73 79 6e 63 20 73 72 63 3d 22 68 74 74 t async src="htt
b1b0: 70 73 3a 2f 2f 70 72 6f 64 75 63 74 69 6f 6e 2d ps://production-
b1c0: 61 73 73 65 74 73 2e 63 6f 64 65 70 65 6e 2e 69 assets.codepen.i
b1d0: 6f 2f 61 73 73 65 74 73 2f 65 6d 62 65 64 2f 65 o/assets/embed/e
b1e0: 69 2e 6a 73 22 3e 3c 2f 73 63 72 27 20 2b 20 27 i.js"></scr' + '
b1f0: 69 70 74 3e 27 0a 20 20 20 20 20 20 20 20 20 20 ipt>'.
b200: 7d 29 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 20 }). }.
b210: 20 20 20 7d 0a 0a 0a 0a 20 20 20 20 20 20 41 50 }.... AP
b220: 49 5b 6b 65 79 5d 20 3d 20 65 6e 74 72 79 0a 20 I[key] = entry.
b230: 20 20 20 7d 0a 0a 0a 20 20 20 20 2f 2f 6c 6f 61 }... //loa
b240: 64 20 68 61 73 68 0a 20 20 20 20 69 66 20 28 77 d hash. if (w
b250: 69 6e 64 6f 77 2e 6c 6f 63 61 74 69 6f 6e 2e 68 indow.location.h
b260: 61 73 68 29 20 7b 0a 20 20 20 20 20 20 76 61 72 ash) {. var
b270: 20 68 61 73 68 20 3d 20 77 69 6e 64 6f 77 2e 6c hash = window.l
b280: 6f 63 61 74 69 6f 6e 2e 68 61 73 68 2e 73 75 62 ocation.hash.sub
b290: 73 74 72 69 6e 67 28 31 29 3b 20 2f 2f 50 75 74 string(1); //Put
b2a0: 73 20 68 61 73 68 20 69 6e 20 76 61 72 69 61 62 s hash in variab
b2b0: 6c 65 2c 20 61 6e 64 20 72 65 6d 6f 76 65 73 20 le, and removes
b2c0: 74 68 65 20 23 20 63 68 61 72 61 63 74 65 72 0a the # character.
b2d0: 20 20 20 20 20 20 6c 6f 61 64 28 68 61 73 68 29 load(hash)
b2e0: 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 ;. } else {.
b2f0: 20 20 20 20 20 77 69 6e 64 6f 77 2e 6c 6f 63 61 window.loca
b300: 74 69 6f 6e 2e 68 61 73 68 20 3d 20 22 23 69 6e tion.hash = "#in
b310: 74 72 6f 22 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 tro";. }..
b320: 20 77 69 6e 64 6f 77 2e 61 64 64 45 76 65 6e 74 window.addEvent
b330: 4c 69 73 74 65 6e 65 72 28 22 68 61 73 68 63 68 Listener("hashch
b340: 61 6e 67 65 22 2c 20 66 75 6e 63 74 69 6f 6e 20 ange", function
b350: 28 29 20 7b 0a 20 20 20 20 20 20 76 61 72 20 68 () {. var h
b360: 61 73 68 20 3d 20 77 69 6e 64 6f 77 2e 6c 6f 63 ash = window.loc
b370: 61 74 69 6f 6e 2e 68 61 73 68 2e 73 75 62 73 74 ation.hash.subst
b380: 72 69 6e 67 28 31 29 3b 20 2f 2f 50 75 74 73 20 ring(1); //Puts
b390: 68 61 73 68 20 69 6e 20 76 61 72 69 61 62 6c 65 hash in variable
b3a0: 2c 20 61 6e 64 20 72 65 6d 6f 76 65 73 20 74 68 , and removes th
b3b0: 65 20 23 20 63 68 61 72 61 63 74 65 72 0a 20 20 e # character.
b3c0: 20 20 20 20 6c 6f 61 64 28 68 61 73 68 29 3b 0a load(hash);.
b3d0: 20 20 20 20 20 20 74 6f 67 67 6c 65 53 69 64 65 toggleSide
b3e0: 62 61 72 28 66 61 6c 73 65 29 3b 0a 20 20 20 20 bar(false);.
b3f0: 20 20 77 69 6e 64 6f 77 2e 73 63 72 6f 6c 6c 54 window.scrollT
b400: 6f 28 30 2c 20 30 29 3b 0a 20 20 20 20 7d 2c 20 o(0, 0);. },
b410: 66 61 6c 73 65 29 3b 0a 0a 20 20 7d 29 3b 0a 0a false);.. });..
b420: 20 20 76 61 72 20 69 6e 73 74 72 75 6d 65 6e 74 var instrument
b430: 20 3d 20 66 61 6c 73 65 0a 20 20 76 61 72 20 70 = false. var p
b440: 6c 61 79 65 72 20 3d 20 70 6c 61 79 65 72 20 3d layer = player =
b450: 20 6e 65 77 20 54 6f 6e 65 2e 50 6c 61 79 65 72 new Tone.Player
b460: 28 22 6d 65 64 69 61 2f 44 2d 73 68 61 72 70 2e ("media/D-sharp.
b470: 6d 70 33 22 29 3b 0a 0a 20 20 66 75 6e 63 74 69 mp3");.. functi
b480: 6f 6e 20 64 6f 63 28 6e 61 6d 65 29 20 7b 0a 20 on doc(name) {.
b490: 20 20 20 2f 2f 20 20 69 66 20 28 77 69 6e 64 6f // if (windo
b4a0: 77 2e 6c 6f 63 61 74 69 6f 6e 2e 68 61 73 68 2e w.location.hash.
b4b0: 73 75 62 73 74 72 69 6e 67 28 31 29 21 3d 6e 61 substring(1)!=na
b4c0: 6d 65 29 20 7b 0a 20 20 20 20 2f 2f 20 20 20 20 me) {. //
b4d0: 77 69 6e 64 6f 77 2e 6c 6f 63 61 74 69 6f 6e 2e window.location.
b4e0: 68 61 73 68 20 3d 20 6e 61 6d 65 3b 0a 20 20 20 hash = name;.
b4f0: 20 2f 2f 20 20 7d 0a 20 20 20 20 76 61 72 20 65 // }. var e
b500: 6e 74 72 79 20 3d 20 41 50 49 5b 6e 61 6d 65 5d ntry = API[name]
b510: 3b 0a 20 20 20 20 76 61 72 20 74 65 6d 70 6c 61 ;. var templa
b520: 74 65 20 3d 20 24 28 27 23 74 65 6d 70 6c 61 74 te = $('#templat
b530: 65 27 29 2e 68 74 6d 6c 28 29 3b 0a 20 20 20 20 e').html();.
b540: 4d 75 73 74 61 63 68 65 2e 70 61 72 73 65 28 74 Mustache.parse(t
b550: 65 6d 70 6c 61 74 65 29 3b 20 2f 2f 20 6f 70 74 emplate); // opt
b560: 69 6f 6e 61 6c 2c 20 73 70 65 65 64 73 20 75 70 ional, speeds up
b570: 20 66 75 74 75 72 65 20 75 73 65 73 0a 20 20 20 future uses.
b580: 20 76 61 72 20 72 65 6e 64 65 72 65 64 20 3d 20 var rendered =
b590: 4d 75 73 74 61 63 68 65 2e 72 65 6e 64 65 72 28 Mustache.render(
b5a0: 74 65 6d 70 6c 61 74 65 2c 20 65 6e 74 72 79 29 template, entry)
b5b0: 3b 0a 20 20 20 20 24 28 27 23 74 61 72 67 65 74 ;. $('#target
b5c0: 27 29 2e 68 74 6d 6c 28 72 65 6e 64 65 72 65 64 ').html(rendered
b5d0: 29 3b 0a 20 20 20 20 50 72 69 73 6d 2e 68 69 67 );. Prism.hig
b5e0: 68 6c 69 67 68 74 41 6c 6c 28 29 3b 0a 0a 20 20 hlightAll();..
b5f0: 20 20 69 66 20 28 69 6e 73 74 72 75 6d 65 6e 74 if (instrument
b600: 29 20 7b 0a 20 20 20 20 20 20 74 72 79 20 7b 0a ) {. try {.
b610: 20 20 20 20 20 20 20 20 69 6e 73 74 72 75 6d 65 instrume
b620: 6e 74 2e 65 6d 70 74 79 28 29 0a 20 20 20 20 20 nt.empty().
b630: 20 7d 20 63 61 74 63 68 20 28 65 29 20 7b 0a 20 } catch (e) {.
b640: 20 20 20 20 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c console.l
b650: 6f 67 28 65 29 3b 0a 20 20 20 20 20 20 7d 0a 20 og(e);. }.
b660: 20 20 20 7d 0a 20 20 20 20 69 6e 73 74 72 75 6d }. instrum
b670: 65 6e 74 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e ent = new Nexus.
b680: 52 61 63 6b 28 22 64 65 6d 6f 22 29 3b 0a 0a 20 Rack("demo");..
b690: 20 20 20 24 28 22 2e 65 78 61 6d 70 6c 65 2d 74 $(".example-t
b6a0: 6f 67 67 6c 65 22 29 2e 63 6c 69 63 6b 28 66 75 oggle").click(fu
b6b0: 6e 63 74 69 6f 6e 20 28 29 20 7b 0a 20 20 20 20 nction () {.
b6c0: 20 20 24 28 74 68 69 73 29 2e 70 61 72 65 6e 74 $(this).parent
b6d0: 28 29 2e 66 69 6e 64 28 22 2e 65 78 61 6d 70 6c ().find(".exampl
b6e0: 65 22 29 2e 74 6f 67 67 6c 65 28 29 3b 0a 20 20 e").toggle();.
b6f0: 20 20 7d 29 0a 0a 20 20 20 20 69 66 20 28 6e 61 }).. if (na
b700: 6d 65 20 3d 3d 20 22 57 61 76 65 66 6f 72 6d 22 me == "Waveform"
b710: 29 20 7b 0a 20 20 20 20 20 20 70 6c 61 79 65 72 ) {. player
b720: 2e 6c 6f 61 64 28 22 6d 65 64 69 61 2f 44 2d 73 .load("media/D-s
b730: 68 61 72 70 2e 6d 70 33 22 2c 20 66 75 6e 63 74 harp.mp3", funct
b740: 69 6f 6e 20 28 29 20 7b 0a 20 20 20 20 20 20 20 ion () {.
b750: 20 69 6e 73 74 72 75 6d 65 6e 74 5b 22 57 61 76 instrument["Wav
b760: 65 66 6f 72 6d 31 22 5d 2e 6c 6f 61 64 28 70 6c eform1"].load(pl
b770: 61 79 65 72 2e 62 75 66 66 65 72 2e 5f 62 75 66 ayer.buffer._buf
b780: 66 65 72 29 0a 20 20 20 20 20 20 7d 29 0a 20 20 fer). }).
b790: 20 20 7d 20 65 6c 73 65 20 69 66 20 28 5b 22 4d } else if (["M
b7a0: 65 74 65 72 22 2c 20 22 4f 73 63 69 6c 6c 6f 73 eter", "Oscillos
b7b0: 63 6f 70 65 22 2c 20 22 53 70 65 63 74 72 6f 67 cope", "Spectrog
b7c0: 72 61 6d 22 5d 2e 69 6e 64 65 78 4f 66 28 6e 61 ram"].indexOf(na
b7d0: 6d 65 29 20 3e 20 2d 31 29 20 7b 0a 20 20 20 20 me) > -1) {.
b7e0: 20 20 70 6c 61 79 65 72 2e 6c 6f 61 64 28 22 6d player.load("m
b7f0: 65 64 69 61 2f 44 2d 73 68 61 72 70 2e 6d 70 33 edia/D-sharp.mp3
b800: 22 2c 20 66 75 6e 63 74 69 6f 6e 20 28 29 20 7b ", function () {
b810: 0a 20 20 20 20 20 20 20 20 70 6c 61 79 65 72 2e . player.
b820: 6c 6f 6f 70 53 74 61 72 74 20 3d 20 30 3b 0a 20 loopStart = 0;.
b830: 20 20 20 20 20 20 20 70 6c 61 79 65 72 2e 6c 6f player.lo
b840: 6f 70 45 6e 64 20 3d 20 33 3b 0a 20 20 20 20 20 opEnd = 3;.
b850: 20 20 20 70 6c 61 79 65 72 2e 6c 6f 6f 70 20 3d player.loop =
b860: 20 74 72 75 65 3b 0a 20 20 20 20 20 20 20 20 69 true;. i
b870: 6e 73 74 72 75 6d 65 6e 74 5b 6e 61 6d 65 20 2b nstrument[name +
b880: 20 22 31 22 5d 2e 63 6f 6e 6e 65 63 74 28 70 6c "1"].connect(pl
b890: 61 79 65 72 2c 20 32 29 3b 0a 20 20 20 20 20 20 ayer, 2);.
b8a0: 20 20 70 6c 61 79 65 72 2e 73 74 61 72 74 28 29 player.start()
b8b0: 3b 0a 20 20 20 20 20 20 7d 29 0a 20 20 20 20 7d ;. }). }
b8c0: 0a 20 20 7d 0a 0a 0a 20 20 66 75 6e 63 74 69 6f . }... functio
b8d0: 6e 20 74 75 74 28 6e 61 6d 65 29 20 7b 0a 20 20 n tut(name) {.
b8e0: 20 20 2f 2f 20 20 69 66 20 28 77 69 6e 64 6f 77 // if (window
b8f0: 2e 6c 6f 63 61 74 69 6f 6e 2e 68 61 73 68 2e 73 .location.hash.s
b900: 75 62 73 74 72 69 6e 67 28 31 29 21 3d 6e 61 6d ubstring(1)!=nam
b910: 65 29 20 7b 0a 20 20 20 20 2f 2f 20 20 20 20 77 e) {. // w
b920: 69 6e 64 6f 77 2e 6c 6f 63 61 74 69 6f 6e 2e 68 indow.location.h
b930: 61 73 68 20 3d 20 6e 61 6d 65 3b 0a 20 20 20 20 ash = name;.
b940: 2f 2f 20 20 7d 0a 20 20 20 20 24 28 27 23 74 61 // }. $('#ta
b950: 72 67 65 74 27 29 2e 65 6d 70 74 79 28 29 3b 0a rget').empty();.
b960: 20 20 20 20 69 66 20 28 24 28 22 23 22 20 2b 20 if ($("#" +
b970: 6e 61 6d 65 29 2e 6c 65 6e 67 74 68 20 3e 20 30 name).length > 0
b980: 29 20 7b 0a 20 20 20 20 20 20 24 28 22 23 22 20 ) {. $("#"
b990: 2b 20 6e 61 6d 65 29 2e 63 6c 6f 6e 65 28 29 2e + name).clone().
b9a0: 61 70 70 65 6e 64 54 6f 28 27 23 74 61 72 67 65 appendTo('#targe
b9b0: 74 27 29 2e 73 68 6f 77 28 29 0a 20 20 20 20 20 t').show().
b9c0: 20 50 72 69 73 6d 2e 68 69 67 68 6c 69 67 68 74 Prism.highlight
b9d0: 41 6c 6c 28 29 3b 0a 0a 0a 0a 20 20 20 20 20 20 All();....
b9e0: 69 66 20 28 69 6e 73 74 72 75 6d 65 6e 74 29 20 if (instrument)
b9f0: 7b 0a 20 20 20 20 20 20 20 20 74 72 79 20 7b 0a {. try {.
ba00: 20 20 20 20 20 20 20 20 20 20 69 6e 73 74 72 75 instru
ba10: 6d 65 6e 74 2e 65 6d 70 74 79 28 29 3b 0a 20 20 ment.empty();.
ba20: 20 20 20 20 20 20 7d 20 63 61 74 63 68 20 28 65 } catch (e
ba30: 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 63 6f ) {. co
ba40: 6e 73 6f 6c 65 2e 6c 6f 67 28 65 29 3b 0a 20 20 nsole.log(e);.
ba50: 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 7d 0a }. }.
ba60: 0a 20 20 20 20 20 20 69 66 20 28 6e 61 6d 65 20 . if (name
ba70: 3d 3d 20 22 69 6e 74 72 6f 22 29 20 7b 0a 20 20 == "intro") {.
ba80: 20 20 20 20 20 20 76 61 72 20 73 70 6c 61 73 68 var splash
ba90: 52 61 63 6b 20 3d 20 6e 65 77 20 4e 65 78 75 73 Rack = new Nexus
baa0: 2e 52 61 63 6b 28 22 73 70 6c 61 73 68 2d 64 65 .Rack("splash-de
bab0: 6d 6f 22 29 3b 0a 20 20 20 20 20 20 7d 0a 0a 20 mo");. }..
bac0: 20 20 20 20 20 2f 2f 20 20 69 6e 73 74 72 75 6d // instrum
bad0: 65 6e 74 20 3d 20 6d 74 2e 72 61 63 6b 28 22 74 ent = mt.rack("t
bae0: 61 72 67 65 74 22 29 3b 0a 20 20 20 20 7d 0a 20 arget");. }.
baf0: 20 7d 0a 0a 20 20 66 75 6e 63 74 69 6f 6e 20 68 }.. function h
bb00: 65 6c 70 65 72 28 6e 61 6d 65 29 20 7b 0a 0a 20 elper(name) {..
bb10: 20 20 20 2f 2f 20 20 69 66 20 28 77 69 6e 64 6f // if (windo
bb20: 77 2e 6c 6f 63 61 74 69 6f 6e 2e 68 61 73 68 2e w.location.hash.
bb30: 73 75 62 73 74 72 69 6e 67 28 31 29 21 3d 6e 61 substring(1)!=na
bb40: 6d 65 29 20 7b 0a 20 20 20 20 2f 2f 20 20 20 20 me) {. //
bb50: 77 69 6e 64 6f 77 2e 6c 6f 63 61 74 69 6f 6e 2e window.location.
bb60: 68 61 73 68 20 3d 20 6e 61 6d 65 3b 0a 20 20 20 hash = name;.
bb70: 20 2f 2f 20 20 7d 0a 0a 0a 20 20 20 20 69 66 20 // }... if
bb80: 28 69 6e 73 74 72 75 6d 65 6e 74 29 20 7b 0a 20 (instrument) {.
bb90: 20 20 20 20 20 74 72 79 20 7b 0a 20 20 20 20 20 try {.
bba0: 20 20 20 69 6e 73 74 72 75 6d 65 6e 74 2e 65 6d instrument.em
bbb0: 70 74 79 28 29 3b 0a 20 20 20 20 20 20 7d 20 63 pty();. } c
bbc0: 61 74 63 68 20 28 65 29 20 7b 0a 20 20 20 20 20 atch (e) {.
bbd0: 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 65 console.log(e
bbe0: 29 3b 0a 20 20 20 20 20 20 7d 0a 20 20 20 20 7d );. }. }
bbf0: 0a 0a 20 20 20 20 76 61 72 20 65 6e 74 72 79 20 .. var entry
bc00: 3d 20 7b 0a 20 20 20 20 20 20 22 68 65 6c 70 65 = {. "helpe
bc10: 72 73 22 3a 20 48 65 6c 70 65 72 73 0a 20 20 20 rs": Helpers.
bc20: 20 7d 0a 20 20 20 20 76 61 72 20 74 65 6d 70 6c }. var templ
bc30: 61 74 65 20 3d 20 24 28 27 23 68 65 6c 70 65 72 ate = $('#helper
bc40: 2d 74 65 6d 70 6c 61 74 65 27 29 2e 68 74 6d 6c -template').html
bc50: 28 29 3b 0a 20 20 20 20 4d 75 73 74 61 63 68 65 ();. Mustache
bc60: 2e 70 61 72 73 65 28 74 65 6d 70 6c 61 74 65 29 .parse(template)
bc70: 3b 20 2f 2f 20 6f 70 74 69 6f 6e 61 6c 2c 20 73 ; // optional, s
bc80: 70 65 65 64 73 20 75 70 20 66 75 74 75 72 65 20 peeds up future
bc90: 75 73 65 73 0a 20 20 20 20 76 61 72 20 72 65 6e uses. var ren
bca0: 64 65 72 65 64 20 3d 20 4d 75 73 74 61 63 68 65 dered = Mustache
bcb0: 2e 72 65 6e 64 65 72 28 74 65 6d 70 6c 61 74 65 .render(template
bcc0: 2c 20 65 6e 74 72 79 29 3b 0a 0a 20 20 20 20 24 , entry);.. $
bcd0: 28 27 23 74 61 72 67 65 74 27 29 2e 68 74 6d 6c ('#target').html
bce0: 28 72 65 6e 64 65 72 65 64 29 3b 0a 20 20 20 20 (rendered);.
bcf0: 50 72 69 73 6d 2e 68 69 67 68 6c 69 67 68 74 41 Prism.highlightA
bd00: 6c 6c 28 29 3b 0a 0a 20 20 20 20 24 28 27 68 74 ll();.. $('ht
bd10: 6d 6c 2c 20 62 6f 64 79 27 29 2e 61 6e 69 6d 61 ml, body').anima
bd20: 74 65 28 7b 0a 20 20 20 20 20 20 73 63 72 6f 6c te({. scrol
bd30: 6c 54 6f 70 3a 20 24 28 22 23 22 20 2b 20 6e 61 lTop: $("#" + na
bd40: 6d 65 29 2e 6f 66 66 73 65 74 28 29 2e 74 6f 70 me).offset().top
bd50: 20 2d 20 32 30 0a 20 20 20 20 7d 2c 20 35 30 29 - 20. }, 50)
bd60: 3b 0a 0a 0a 20 20 20 20 2f 2a 20 20 24 28 22 23 ;... /* $("#
bd70: 22 2b 6e 61 6d 65 29 2e 63 73 73 28 22 62 61 63 "+name).css("bac
bd80: 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 22 2c 22 kground-color","
bd90: 23 30 61 66 22 29 3b 0a 20 20 20 20 20 20 24 28 #0af");. $(
bda0: 22 23 22 2b 6e 61 6d 65 29 2e 63 73 73 28 22 74 "#"+name).css("t
bdb0: 72 61 6e 73 69 74 69 6f 6e 22 2c 22 62 61 63 6b ransition","back
bdc0: 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 20 31 73 20 ground-color 1s
bdd0: 65 61 73 65 22 29 3b 0a 20 20 20 20 20 20 24 28 ease");. $(
bde0: 22 23 22 2b 6e 61 6d 65 29 2e 63 73 73 28 22 62 "#"+name).css("b
bdf0: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 22 ackground-color"
be00: 2c 22 23 66 66 66 22 29 3b 20 2a 2f 0a 0a 0a 0a ,"#fff"); */....
be10: 20 20 7d 0a 0a 20 20 76 61 72 20 54 79 70 65 4c }.. var TypeL
be20: 69 6e 6b 73 20 3d 20 5b 0a 20 20 20 20 22 6d 61 inks = [. "ma
be30: 74 72 69 78 22 2c 0a 20 20 20 20 22 63 6f 75 6e trix",. "coun
be40: 74 65 72 22 2c 0a 20 20 20 20 22 69 6e 74 65 72 ter",. "inter
be50: 76 61 6c 22 2c 0a 20 20 5d 0a 0a 20 20 76 61 72 val",. ].. var
be60: 20 4c 6f 61 64 4c 69 6e 6b 73 20 3d 20 7b 0a 20 LoadLinks = {.
be70: 20 20 20 22 44 6f 63 22 3a 20 5b 0a 20 20 20 20 "Doc": [.
be80: 20 20 27 42 75 74 74 6f 6e 27 2c 20 27 44 69 61 'Button', 'Dia
be90: 6c 27 2c 20 27 4e 75 6d 62 65 72 27 2c 20 27 50 l', 'Number', 'P
bea0: 6f 73 69 74 69 6f 6e 27 2c 20 27 53 6c 69 64 65 osition', 'Slide
beb0: 72 27 2c 20 27 54 6f 67 67 6c 65 27 2c 0a 20 20 r', 'Toggle',.
bec0: 20 20 20 20 27 45 6e 76 65 6c 6f 70 65 27 2c 20 'Envelope',
bed0: 27 53 65 71 75 65 6e 63 65 72 27 2c 20 27 4d 75 'Sequencer', 'Mu
bee0: 6c 74 69 73 6c 69 64 65 72 27 2c 20 27 50 69 61 ltislider', 'Pia
bef0: 6e 6f 27 2c 20 27 52 61 64 69 6f 42 75 74 74 6f no', 'RadioButto
bf00: 6e 27 2c 20 27 53 65 6c 65 63 74 27 2c 0a 20 20 n', 'Select',.
bf10: 20 20 20 20 27 52 61 6e 67 65 27 2c 20 27 54 65 'Range', 'Te
bf20: 78 74 42 75 74 74 6f 6e 27 2c 20 27 57 61 76 65 xtButton', 'Wave
bf30: 66 6f 72 6d 27 2c 20 27 54 69 6c 74 27 2c 20 27 form', 'Tilt', '
bf40: 50 61 6e 27 2c 20 27 50 61 6e 32 44 27 2c 20 27 Pan', 'Pan2D', '
bf50: 4d 65 74 65 72 27 2c 0a 20 20 20 20 20 20 27 4f Meter',. 'O
bf60: 73 63 69 6c 6c 6f 73 63 6f 70 65 27 2c 20 27 53 scilloscope', 'S
bf70: 70 65 63 74 72 6f 67 72 61 6d 27 0a 20 20 20 20 pectrogram'.
bf80: 5d 2c 0a 20 20 20 20 22 54 75 74 22 3a 20 5b 0a ],. "Tut": [.
bf90: 20 20 20 20 20 20 27 74 75 6e 65 27 2c 20 27 69 'tune', 'i
bfa0: 6e 74 65 72 76 61 6c 27 2c 20 27 63 6f 75 6e 74 nterval', 'count
bfb0: 65 72 27 2c 20 27 73 65 71 75 65 6e 63 65 27 2c er', 'sequence',
bfc0: 20 27 64 72 75 6e 6b 27 2c 20 27 6d 61 74 72 69 'drunk', 'matri
bfd0: 78 27 2c 20 27 69 6e 74 72 6f 27 2c 20 27 63 6f x', 'intro', 'co
bfe0: 6c 6f 72 73 27 2c 20 27 72 61 63 6b 27 2c 20 27 lors', 'rack', '
bff0: 73 79 6e 63 27 0a 20 20 20 20 5d 2c 0a 20 20 20 sync'. ],.
c000: 20 22 48 65 6c 70 65 72 22 3a 20 5b 0a 20 20 20 "Helper": [.
c010: 20 20 20 27 72 69 27 2c 20 27 72 66 27 2c 20 27 'ri', 'rf', '
c020: 63 6c 69 70 27 2c 20 27 73 63 61 6c 65 27 2c 20 clip', 'scale',
c030: 27 6d 74 6f 66 27 2c 20 27 69 6e 74 65 72 70 27 'mtof', 'interp'
c040: 2c 20 27 70 69 63 6b 27 2c 20 27 6f 63 74 61 76 , 'pick', 'octav
c050: 65 27 2c 20 27 64 69 73 74 61 6e 63 65 27 2c 20 e', 'distance',
c060: 27 61 76 65 72 61 67 65 27 2c 20 27 63 6f 69 6e 'average', 'coin
c070: 27 0a 20 20 20 20 5d 0a 20 20 7d 0a 0a 20 20 66 '. ]. }.. f
c080: 75 6e 63 74 69 6f 6e 20 6c 6f 61 64 28 6e 61 6d unction load(nam
c090: 65 29 20 7b 0a 20 20 20 20 69 66 20 28 4c 6f 61 e) {. if (Loa
c0a0: 64 4c 69 6e 6b 73 2e 44 6f 63 2e 69 6e 64 65 78 dLinks.Doc.index
c0b0: 4f 66 28 6e 61 6d 65 29 20 3e 3d 20 30 29 20 7b Of(name) >= 0) {
c0c0: 0a 20 20 20 20 20 20 64 6f 63 28 6e 61 6d 65 29 . doc(name)
c0d0: 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 69 66 20 ;. } else if
c0e0: 28 4c 6f 61 64 4c 69 6e 6b 73 2e 54 75 74 2e 69 (LoadLinks.Tut.i
c0f0: 6e 64 65 78 4f 66 28 6e 61 6d 65 29 20 3e 3d 20 ndexOf(name) >=
c100: 30 29 20 7b 0a 20 20 20 20 20 20 74 75 74 28 6e 0) {. tut(n
c110: 61 6d 65 29 3b 0a 20 20 20 20 7d 20 65 6c 73 65 ame);. } else
c120: 20 69 66 20 28 4c 6f 61 64 4c 69 6e 6b 73 2e 48 if (LoadLinks.H
c130: 65 6c 70 65 72 2e 69 6e 64 65 78 4f 66 28 6e 61 elper.indexOf(na
c140: 6d 65 29 20 3e 3d 20 30 29 20 7b 0a 20 20 20 20 me) >= 0) {.
c150: 20 20 68 65 6c 70 65 72 28 6e 61 6d 65 29 3b 0a helper(name);.
c160: 20 20 20 20 7d 0a 20 20 20 20 77 69 6e 64 6f 77 }. window
c170: 2e 73 63 72 6f 6c 6c 54 6f 28 30 2c 20 30 29 3b .scrollTo(0, 0);
c180: 0a 20 20 20 20 64 6f 63 75 6d 65 6e 74 2e 67 65 . document.ge
c190: 74 45 6c 65 6d 65 6e 74 42 79 49 64 28 22 74 61 tElementById("ta
c1a0: 72 67 65 74 22 29 2e 73 63 72 6f 6c 6c 54 6f 70 rget").scrollTop
c1b0: 20 3d 20 30 0a 20 20 7d 0a 0a 20 20 76 61 72 20 = 0. }.. var
c1c0: 6d 65 6e 75 4f 70 65 6e 20 3d 20 66 61 6c 73 65 menuOpen = false
c1d0: 3b 0a 0a 20 20 66 75 6e 63 74 69 6f 6e 20 74 6f ;.. function to
c1e0: 67 67 6c 65 53 69 64 65 62 61 72 28 6f 6e 29 20 ggleSidebar(on)
c1f0: 7b 0a 20 20 20 20 69 66 20 28 6f 6e 20 7c 7c 20 {. if (on ||
c200: 6f 6e 20 3d 3d 20 66 61 6c 73 65 29 20 7b 0a 20 on == false) {.
c210: 20 20 20 20 20 6d 65 6e 75 4f 70 65 6e 20 3d 20 menuOpen =
c220: 21 6f 6e 3b 0a 20 20 20 20 7d 0a 20 20 20 20 69 !on;. }. i
c230: 66 20 28 6d 65 6e 75 4f 70 65 6e 29 20 7b 0a 20 f (menuOpen) {.
c240: 20 20 20 20 20 24 28 22 23 73 69 64 65 62 61 72 $("#sidebar
c250: 22 29 2e 72 65 6d 6f 76 65 43 6c 61 73 73 28 22 ").removeClass("
c260: 6d 65 6e 75 4f 70 65 6e 22 29 0a 20 20 20 20 20 menuOpen").
c270: 20 24 28 22 23 73 69 64 65 62 61 72 22 29 2e 61 $("#sidebar").a
c280: 64 64 43 6c 61 73 73 28 22 6d 65 6e 75 43 6c 6f ddClass("menuClo
c290: 73 65 64 22 29 0a 20 20 20 20 20 20 6d 65 6e 75 sed"). menu
c2a0: 4f 70 65 6e 20 3d 20 66 61 6c 73 65 3b 0a 20 20 Open = false;.
c2b0: 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 20 } else {.
c2c0: 20 24 28 22 23 73 69 64 65 62 61 72 22 29 2e 72 $("#sidebar").r
c2d0: 65 6d 6f 76 65 43 6c 61 73 73 28 22 6d 65 6e 75 emoveClass("menu
c2e0: 43 6c 6f 73 65 64 22 29 0a 20 20 20 20 20 20 24 Closed"). $
c2f0: 28 22 23 73 69 64 65 62 61 72 22 29 2e 61 64 64 ("#sidebar").add
c300: 43 6c 61 73 73 28 22 6d 65 6e 75 4f 70 65 6e 22 Class("menuOpen"
c310: 29 0a 20 20 20 20 20 20 6d 65 6e 75 4f 70 65 6e ). menuOpen
c320: 20 3d 20 74 72 75 65 3b 0a 20 20 20 20 7d 0a 20 = true;. }.
c330: 20 7d 0a 3c 2f 73 63 72 69 70 74 3e 0a 3c 73 74 }.</script>.<st
c340: 79 6c 65 3e 0a 20 20 62 6f 64 79 20 7b 0a 20 20 yle>. body {.
c350: 20 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 27 font-family: '
c360: 4d 75 6c 69 27 2c 20 68 65 6c 76 65 74 69 63 61 Muli', helvetica
c370: 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 30 ;. padding: 0
c380: 3b 0a 20 20 20 20 6d 61 72 67 69 6e 3a 20 30 3b ;. margin: 0;
c390: 0a 20 20 20 20 77 69 64 74 68 3a 20 31 30 30 25 . width: 100%
c3a0: 3b 0a 20 20 20 20 75 73 65 72 2d 73 65 6c 65 63 ;. user-selec
c3b0: 74 3a 20 23 30 30 30 20 21 69 6d 70 6f 72 74 61 t: #000 !importa
c3c0: 6e 74 3b 0a 20 20 7d 0a 0a 20 20 23 6d 65 6e 75 nt;. }.. #menu
c3d0: 2d 74 61 62 20 7b 0a 20 20 20 20 64 69 73 70 6c -tab {. displ
c3e0: 61 79 3a 20 6e 6f 6e 65 3b 0a 20 20 7d 0a 0a 20 ay: none;. }..
c3f0: 20 23 73 69 64 65 62 61 72 20 7b 0a 20 20 20 20 #sidebar {.
c400: 70 6f 73 69 74 69 6f 6e 3a 20 66 69 78 65 64 3b position: fixed;
c410: 0a 20 20 20 20 68 65 69 67 68 74 3a 20 31 30 30 . height: 100
c420: 25 3b 0a 20 20 20 20 74 6f 70 3a 20 30 70 78 3b %;. top: 0px;
c430: 0a 20 20 20 20 6f 76 65 72 66 6c 6f 77 3a 20 61 . overflow: a
c440: 75 74 6f 3b 0a 20 20 20 20 77 69 64 74 68 3a 20 uto;. width:
c450: 32 32 35 70 78 3b 0a 20 20 20 20 70 61 64 64 69 225px;. paddi
c460: 6e 67 3a 20 31 30 70 78 20 31 35 70 78 20 31 35 ng: 10px 15px 15
c470: 70 78 3b 0a 20 20 20 20 62 6f 78 2d 73 69 7a 69 px;. box-sizi
c480: 6e 67 3a 20 62 6f 72 64 65 72 2d 62 6f 78 3b 0a ng: border-box;.
c490: 20 20 20 20 7a 2d 69 6e 64 65 78 3a 20 35 3b 0a z-index: 5;.
c4a0: 20 20 7d 0a 0a 20 20 23 74 75 74 6f 72 69 61 6c }.. #tutorial
c4b0: 20 7b 0a 20 20 20 20 6d 61 72 67 69 6e 2d 6c 65 {. margin-le
c4c0: 66 74 3a 20 32 32 35 70 78 3b 0a 20 20 7d 0a 0a ft: 225px;. }..
c4d0: 20 20 23 74 61 72 67 65 74 20 7b 0a 20 20 20 20 #target {.
c4e0: 77 69 64 74 68 3a 20 31 30 30 25 3b 0a 20 20 7d width: 100%;. }
c4f0: 0a 0a 20 20 68 31 2c 0a 20 20 68 32 2c 0a 20 20 .. h1,. h2,.
c500: 68 33 20 7b 0a 20 20 20 20 6c 69 6e 65 2d 68 65 h3 {. line-he
c510: 69 67 68 74 3a 20 31 65 6d 3b 0a 20 20 20 20 70 ight: 1em;. p
c520: 61 64 64 69 6e 67 3a 20 30 3b 0a 20 20 20 20 66 adding: 0;. f
c530: 6f 6e 74 2d 77 65 69 67 68 74 3a 20 37 30 30 3b ont-weight: 700;
c540: 0a 20 20 7d 0a 0a 20 20 68 31 20 7b 0a 20 20 20 . }.. h1 {.
c550: 20 6d 61 72 67 69 6e 3a 20 32 30 70 78 20 30 70 margin: 20px 0p
c560: 78 20 35 70 78 3b 0a 20 20 7d 0a 0a 20 20 68 32 x 5px;. }.. h2
c570: 20 7b 0a 20 20 20 20 6d 61 72 67 69 6e 3a 20 32 {. margin: 2
c580: 30 70 78 20 30 70 78 20 35 70 78 3b 0a 20 20 20 0px 0px 5px;.
c590: 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 32 30 70 78 font-size: 20px
c5a0: 3b 0a 20 20 7d 0a 0a 20 20 68 33 20 7b 0a 20 20 ;. }.. h3 {.
c5b0: 20 20 6d 61 72 67 69 6e 3a 20 31 30 70 78 20 30 margin: 10px 0
c5c0: 70 78 20 35 70 78 3b 0a 20 20 20 20 66 6f 6e 74 px 5px;. font
c5d0: 2d 73 69 7a 65 3a 20 31 36 70 78 3b 0a 20 20 7d -size: 16px;. }
c5e0: 0a 0a 20 20 23 73 69 64 65 62 61 72 20 61 20 7b .. #sidebar a {
c5f0: 0a 20 20 20 20 6c 69 6e 65 2d 68 65 69 67 68 74 . line-height
c600: 3a 20 31 2e 33 65 6d 3b 0a 20 20 20 20 63 6f 6c : 1.3em;. col
c610: 6f 72 3a 20 23 35 35 35 3b 0a 20 20 20 20 74 65 or: #555;. te
c620: 78 74 2d 64 65 63 6f 72 61 74 69 6f 6e 3a 20 6e xt-decoration: n
c630: 6f 6e 65 3b 0a 20 20 7d 0a 0a 20 20 23 73 69 64 one;. }.. #sid
c640: 65 62 61 72 20 61 3a 68 6f 76 65 72 20 7b 0a 20 ebar a:hover {.
c650: 20 20 20 74 65 78 74 2d 64 65 63 6f 72 61 74 69 text-decorati
c660: 6f 6e 3a 20 75 6e 64 65 72 6c 69 6e 65 3b 0a 20 on: underline;.
c670: 20 7d 0a 0a 20 20 23 74 75 74 6f 72 69 61 6c 20 }.. #tutorial
c680: 61 20 7b 0a 20 20 20 20 6c 69 6e 65 2d 68 65 69 a {. line-hei
c690: 67 68 74 3a 20 31 2e 33 65 6d 3b 0a 20 20 20 20 ght: 1.3em;.
c6a0: 63 6f 6c 6f 72 3a 20 23 30 39 64 3b 0a 20 20 20 color: #09d;.
c6b0: 20 74 65 78 74 2d 64 65 63 6f 72 61 74 69 6f 6e text-decoration
c6c0: 3a 20 6e 6f 6e 65 3b 0a 20 20 7d 0a 0a 20 20 23 : none;. }.. #
c6d0: 74 75 74 6f 72 69 61 6c 20 61 3a 68 6f 76 65 72 tutorial a:hover
c6e0: 20 7b 0a 20 20 20 20 74 65 78 74 2d 64 65 63 6f {. text-deco
c6f0: 72 61 74 69 6f 6e 3a 20 75 6e 64 65 72 6c 69 6e ration: underlin
c700: 65 3b 0a 20 20 7d 0a 0a 0a 0a 20 20 2f 2a 20 44 e;. }.... /* D
c710: 6f 63 20 54 75 74 6f 72 69 61 6c 20 45 6e 74 72 oc Tutorial Entr
c720: 79 20 2a 2f 0a 20 20 2e 74 75 74 6f 72 69 61 6c y */. .tutorial
c730: 20 7b 0a 20 20 20 20 6d 61 72 67 69 6e 2d 6c 65 {. margin-le
c740: 66 74 3a 20 32 32 35 70 78 3b 0a 20 20 20 20 70 ft: 225px;. p
c750: 61 64 64 69 6e 67 3a 20 30 70 78 20 32 30 70 78 adding: 0px 20px
c760: 3b 0a 20 20 20 20 68 65 69 67 68 74 3a 20 31 30 ;. height: 10
c770: 30 25 3b 0a 20 20 20 20 6f 76 65 72 66 6c 6f 77 0%;. overflow
c780: 3a 20 61 75 74 6f 3b 0a 20 20 20 20 62 6f 78 2d : auto;. box-
c790: 73 69 7a 69 6e 67 3a 20 62 6f 72 64 65 72 2d 62 sizing: border-b
c7a0: 6f 78 3b 0a 20 20 20 20 66 6f 6e 74 2d 77 65 69 ox;. font-wei
c7b0: 67 68 74 3a 20 34 30 30 3b 0a 20 20 20 20 66 6f ght: 400;. fo
c7c0: 6e 74 2d 73 69 7a 65 3a 20 31 35 70 78 3b 0a 20 nt-size: 15px;.
c7d0: 20 7d 0a 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 }.. .tutorial
c7e0: 2e 6f 76 65 72 76 69 65 77 20 7b 0a 20 20 20 20 .overview {.
c7f0: 70 61 64 64 69 6e 67 2d 62 6f 74 74 6f 6d 3a 20 padding-bottom:
c800: 32 30 70 78 3b 0a 20 20 7d 0a 0a 20 20 2e 74 75 20px;. }.. .tu
c810: 74 6f 72 69 61 6c 20 23 64 65 6d 6f 20 7b 0a 20 torial #demo {.
c820: 20 20 20 6d 61 72 67 69 6e 2d 74 6f 70 3a 20 31 margin-top: 1
c830: 30 70 78 3b 0a 20 20 7d 0a 0a 20 20 2e 74 75 74 0px;. }.. .tut
c840: 6f 72 69 61 6c 20 68 32 20 7b 0a 20 20 20 20 66 orial h2 {. f
c850: 6f 6e 74 2d 73 69 7a 65 3a 20 33 35 70 78 3b 0a ont-size: 35px;.
c860: 20 20 7d 0a 0a 20 20 2e 74 75 74 6f 72 69 61 6c }.. .tutorial
c870: 20 68 33 20 7b 0a 20 20 20 20 66 6f 6e 74 2d 73 h3 {. font-s
c880: 69 7a 65 3a 20 33 30 70 78 3b 0a 20 20 7d 0a 0a ize: 30px;. }..
c890: 20 20 2e 74 75 74 6f 72 69 61 6c 20 68 34 20 7b .tutorial h4 {
c8a0: 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 . font-size:
c8b0: 32 35 70 78 3b 0a 20 20 20 20 6d 61 72 67 69 6e 25px;. margin
c8c0: 3a 20 33 35 70 78 20 30 70 78 20 31 30 70 78 3b : 35px 0px 10px;
c8d0: 0a 20 20 7d 0a 0a 20 20 2e 74 75 74 6f 72 69 61 . }.. .tutoria
c8e0: 6c 20 68 35 20 7b 0a 20 20 20 20 66 6f 6e 74 2d l h5 {. font-
c8f0: 73 69 7a 65 3a 20 32 30 70 78 3b 0a 20 20 20 20 size: 20px;.
c900: 6d 61 72 67 69 6e 3a 20 32 30 70 78 20 30 70 78 margin: 20px 0px
c910: 20 31 30 70 78 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 10px;. }.. /*
c920: 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 2e 6f 75 . .tutorial .ou
c930: 74 70 75 74 2c 20 2e 74 75 74 6f 72 69 61 6c 20 tput, .tutorial
c940: 2e 70 72 6f 70 65 72 74 69 65 73 2c 20 2e 74 75 .properties, .tu
c950: 74 6f 72 69 61 6c 20 2e 63 6f 64 65 70 65 6e 20 torial .codepen
c960: 7b 0a 20 20 09 62 6f 72 64 65 72 2d 74 6f 70 3a {. .border-top:
c970: 20 73 6f 6c 69 64 20 30 70 78 20 23 63 63 63 3b solid 0px #ccc;
c980: 0a 20 20 09 6d 61 72 67 69 6e 2d 74 6f 70 3a 33 . .margin-top:3
c990: 30 70 78 3b 0a 20 20 09 70 61 64 64 69 6e 67 3a 0px;. .padding:
c9a0: 33 30 70 78 20 30 70 78 20 30 70 78 3b 0a 20 20 30px 0px 0px;.
c9b0: 7d 20 2a 2f 0a 0a 20 20 2e 74 75 74 6f 72 69 61 } */.. .tutoria
c9c0: 6c 20 2e 70 72 6f 70 65 72 74 69 65 73 20 7b 0a l .properties {.
c9d0: 20 20 20 20 70 61 64 64 69 6e 67 3a 20 30 70 78 padding: 0px
c9e0: 20 30 70 78 20 30 70 78 3b 0a 20 20 7d 0a 0a 20 0px 0px;. }..
c9f0: 20 2e 74 75 74 6f 72 69 61 6c 20 2e 70 72 6f 70 .tutorial .prop
ca00: 65 72 74 79 2d 6e 61 6d 65 2c 0a 20 20 2e 74 75 erty-name,. .tu
ca10: 74 6f 72 69 61 6c 20 2e 6d 65 74 68 6f 64 2d 6e torial .method-n
ca20: 61 6d 65 20 7b 0a 20 20 20 20 66 6f 6e 74 2d 77 ame {. font-w
ca30: 65 69 67 68 74 3a 20 37 30 30 3b 0a 20 20 20 20 eight: 700;.
ca40: 70 61 64 64 69 6e 67 3a 20 30 70 78 20 32 30 70 padding: 0px 20p
ca50: 78 20 30 70 78 20 30 70 78 3b 0a 20 20 20 20 66 x 0px 0px;. f
ca60: 6f 6e 74 2d 73 69 7a 65 3a 20 31 37 70 78 3b 0a ont-size: 17px;.
ca70: 20 20 20 20 64 69 73 70 6c 61 79 3a 20 69 6e 6c display: inl
ca80: 69 6e 65 2d 62 6c 6f 63 6b 3b 0a 0a 20 20 7d 0a ine-block;.. }.
ca90: 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 2e 70 72 . .tutorial .pr
caa0: 6f 70 65 72 74 79 2d 74 79 70 65 2c 0a 20 20 2e operty-type,. .
cab0: 74 75 74 6f 72 69 61 6c 20 2e 6d 65 74 68 6f 64 tutorial .method
cac0: 2d 74 79 70 65 20 7b 0a 20 20 20 20 64 69 73 70 -type {. disp
cad0: 6c 61 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 lay: inline-bloc
cae0: 6b 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 74 79 6c k;. font-styl
caf0: 65 3a 20 69 74 61 6c 69 63 3b 0a 20 20 20 20 63 e: italic;. c
cb00: 6f 6c 6f 72 3a 20 23 61 61 61 3b 0a 20 20 7d 0a olor: #aaa;. }.
cb10: 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 2e 70 72 . .tutorial .pr
cb20: 6f 70 65 72 74 79 2d 64 65 73 63 72 69 70 74 69 operty-descripti
cb30: 6f 6e 2c 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 on,. .tutorial
cb40: 2e 6d 65 74 68 6f 64 2d 64 65 73 63 72 69 70 74 .method-descript
cb50: 69 6f 6e 20 7b 0a 20 20 20 20 70 61 64 64 69 6e ion {. paddin
cb60: 67 3a 20 35 70 78 20 30 70 78 3b 0a 20 20 20 20 g: 5px 0px;.
cb70: 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 35 70 78 3b font-size: 15px;
cb80: 0a 20 20 20 20 63 6f 6c 6f 72 3a 20 23 33 33 33 . color: #333
cb90: 3b 0a 20 20 20 20 6c 65 74 74 65 72 2d 73 70 61 ;. letter-spa
cba0: 63 69 6e 67 3a 20 30 2e 32 70 78 3b 0a 20 20 7d cing: 0.2px;. }
cbb0: 0a 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 2e 70 .. .tutorial .p
cbc0: 72 6f 70 65 72 74 79 2d 65 78 61 6d 70 6c 65 2c roperty-example,
cbd0: 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 2e 6d 65 . .tutorial .me
cbe0: 74 68 6f 64 2d 65 78 61 6d 70 6c 65 20 7b 0a 20 thod-example {.
cbf0: 20 20 20 70 61 64 64 69 6e 67 3a 20 32 30 70 78 padding: 20px
cc00: 3b 0a 20 20 20 20 64 69 73 70 6c 61 79 3a 20 6e ;. display: n
cc10: 6f 6e 65 3b 0a 20 20 7d 0a 0a 20 20 2e 74 75 74 one;. }.. .tut
cc20: 6f 72 69 61 6c 20 2e 70 72 6f 70 65 72 74 79 2c orial .property,
cc30: 0a 20 20 2e 74 75 74 6f 72 69 61 6c 20 2e 6d 65 . .tutorial .me
cc40: 74 68 6f 64 20 7b 0a 20 20 20 20 62 6f 72 64 65 thod {. borde
cc50: 72 3a 20 73 6f 6c 69 64 20 31 70 78 20 23 35 35 r: solid 1px #55
cc60: 35 3b 0a 20 20 20 20 70 61 64 64 69 6e 67 3a 20 5;. padding:
cc70: 31 30 70 78 20 32 30 70 78 3b 0a 20 20 20 20 62 10px 20px;. b
cc80: 6f 72 64 65 72 2d 6c 65 66 74 2d 77 69 64 74 68 order-left-width
cc90: 3a 20 31 70 78 3b 0a 20 20 20 20 6d 61 72 67 69 : 1px;. margi
cca0: 6e 3a 20 32 30 70 78 20 30 70 78 3b 0a 20 20 20 n: 20px 0px;.
ccb0: 20 62 6f 72 64 65 72 2d 62 6f 74 74 6f 6d 3a 20 border-bottom:
ccc0: 6e 6f 6e 65 3b 0a 20 20 20 20 62 6f 72 64 65 72 none;. border
ccd0: 2d 72 69 67 68 74 3a 20 6e 6f 6e 65 3b 0a 20 20 -right: none;.
cce0: 20 20 70 6f 73 69 74 69 6f 6e 3a 20 72 65 6c 61 position: rela
ccf0: 74 69 76 65 3b 0a 20 20 7d 0a 0a 20 20 2e 74 75 tive;. }.. .tu
cd00: 74 6f 72 69 61 6c 20 2e 65 78 61 6d 70 6c 65 2d torial .example-
cd10: 74 6f 67 67 6c 65 20 7b 0a 20 20 20 20 70 6f 73 toggle {. pos
cd20: 69 74 69 6f 6e 3a 20 61 62 73 6f 6c 75 74 65 3b ition: absolute;
cd30: 0a 20 20 20 20 74 6f 70 3a 20 30 70 78 3b 0a 20 . top: 0px;.
cd40: 20 20 20 72 69 67 68 74 3a 20 30 70 78 3b 0a 20 right: 0px;.
cd50: 20 20 20 62 6f 72 64 65 72 3a 20 73 6f 6c 69 64 border: solid
cd60: 20 31 70 78 20 23 35 35 35 3b 0a 20 20 20 20 63 1px #555;. c
cd70: 6f 6c 6f 72 3a 20 23 33 33 33 3b 0a 20 20 20 20 olor: #333;.
cd80: 70 61 64 64 69 6e 67 3a 20 33 70 78 20 36 70 78 padding: 3px 6px
cd90: 3b 0a 20 20 20 20 66 6f 6e 74 2d 73 69 7a 65 3a ;. font-size:
cda0: 20 31 31 70 78 3b 0a 20 20 20 20 62 6f 72 64 65 11px;. borde
cdb0: 72 2d 74 6f 70 3a 20 6e 6f 6e 65 3b 0a 20 20 20 r-top: none;.
cdc0: 20 63 75 72 73 6f 72 3a 20 70 6f 69 6e 74 65 72 cursor: pointer
cdd0: 3b 0a 20 20 7d 0a 0a 20 20 2e 74 75 74 6f 72 69 ;. }.. .tutori
cde0: 61 6c 20 2e 65 78 61 6d 70 6c 65 2d 74 6f 67 67 al .example-togg
cdf0: 6c 65 3a 68 6f 76 65 72 20 7b 0a 20 20 20 20 62 le:hover {. b
ce00: 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a ackground-color:
ce10: 20 23 65 65 65 3b 0a 20 20 7d 0a 0a 0a 20 20 2e #eee;. }... .
ce20: 63 75 73 74 6f 6d 2d 74 75 74 6f 72 69 61 6c 20 custom-tutorial
ce30: 70 72 65 20 7b 0a 20 20 20 20 70 61 64 64 69 6e pre {. paddin
ce40: 67 3a 20 30 70 78 20 32 35 70 78 3b 0a 20 20 7d g: 0px 25px;. }
ce50: 0a 0a 20 20 2e 63 75 73 74 6f 6d 2d 74 75 74 6f .. .custom-tuto
ce60: 72 69 61 6c 20 68 33 20 7b 0a 20 20 20 20 6d 61 rial h3 {. ma
ce70: 72 67 69 6e 2d 74 6f 70 3a 20 33 30 70 78 3b 0a rgin-top: 30px;.
ce80: 20 20 7d 0a 0a 20 20 5b 6e 65 78 75 73 2d 75 69 }.. [nexus-ui
ce90: 5d 20 7b 0a 20 20 20 20 64 69 73 70 6c 61 79 3a ] {. display:
cea0: 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b 3b 0a 20 inline-block;.
ceb0: 20 7d 0a 0a 0a 0a 0a 20 20 2f 2a 20 47 65 74 74 }..... /* Gett
cec0: 69 6e 67 20 53 74 61 72 74 65 64 20 73 65 63 74 ing Started sect
ced0: 69 6f 6e 2a 2f 0a 0a 20 20 2e 6c 69 62 2d 6f 76 ion*/.. .lib-ov
cee0: 65 72 76 69 65 77 20 7b 0a 20 20 20 20 66 6f 6e erview {. fon
cef0: 74 2d 73 69 7a 65 3a 20 31 33 70 74 3b 0a 20 20 t-size: 13pt;.
cf00: 7d 0a 0a 20 20 23 69 6e 74 72 6f 20 68 35 20 7b }.. #intro h5 {
cf10: 0a 20 20 20 20 6d 61 72 67 69 6e 2d 74 6f 70 3a . margin-top:
cf20: 20 33 35 70 78 3b 0a 20 20 20 20 66 6f 6e 74 2d 35px;. font-
cf30: 73 69 7a 65 3a 20 32 30 70 74 3b 0a 20 20 7d 0a size: 20pt;. }.
cf40: 0a 0a 0a 0a 20 20 40 6d 65 64 69 61 20 28 6d 61 .... @media (ma
cf50: 78 2d 77 69 64 74 68 3a 20 37 33 30 70 78 29 20 x-width: 730px)
cf60: 7b 0a 20 20 20 20 62 6f 64 79 20 7b 0a 20 20 20 {. body {.
cf70: 20 20 20 68 65 69 67 68 74 3a 20 61 75 74 6f 3b height: auto;
cf80: 0a 20 20 20 20 7d 0a 0a 20 20 20 20 23 6d 65 6e . }.. #men
cf90: 75 2d 74 61 62 20 7b 0a 20 20 20 20 20 20 62 61 u-tab {. ba
cfa0: 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 ckground-color:
cfb0: 23 30 30 30 3b 0a 20 20 20 20 20 20 63 6f 6c 6f #000;. colo
cfc0: 72 3a 20 23 66 66 66 3b 0a 20 20 20 20 20 20 74 r: #fff;. t
cfd0: 65 78 74 2d 61 6c 69 67 6e 3a 20 6c 65 66 74 3b ext-align: left;
cfe0: 0a 20 20 20 20 20 20 70 61 64 64 69 6e 67 3a 20 . padding:
cff0: 32 30 70 78 20 32 30 70 78 3b 0a 20 20 20 20 20 20px 20px;.
d000: 20 6f 76 65 72 66 6c 6f 77 3a 20 61 75 74 6f 3b overflow: auto;
d010: 0a 20 20 20 20 20 20 63 75 72 73 6f 72 3a 20 70 . cursor: p
d020: 6f 69 6e 74 65 72 3b 0a 20 20 20 20 20 20 64 69 ointer;. di
d030: 73 70 6c 61 79 3a 20 62 6c 6f 63 6b 3b 0a 20 20 splay: block;.
d040: 20 20 20 20 70 6f 73 69 74 69 6f 6e 3a 20 66 69 position: fi
d050: 78 65 64 3b 0a 20 20 20 20 20 20 74 6f 70 3a 20 xed;. top:
d060: 30 70 78 3b 0a 20 20 20 20 20 20 72 69 67 68 74 0px;. right
d070: 3a 20 30 70 78 3b 0a 20 20 20 20 20 20 77 69 64 : 0px;. wid
d080: 74 68 3a 20 31 30 30 25 3b 0a 20 20 20 20 20 20 th: 100%;.
d090: 68 65 69 67 68 74 3a 20 33 32 70 78 3b 0a 20 20 height: 32px;.
d0a0: 20 20 7d 0a 0a 20 20 20 20 23 6d 65 6e 75 2d 74 }.. #menu-t
d0b0: 61 62 20 69 6d 67 20 7b 0a 20 20 20 20 20 20 66 ab img {. f
d0c0: 6c 6f 61 74 3a 20 72 69 67 68 74 3b 0a 20 20 20 loat: right;.
d0d0: 20 7d 0a 0a 20 20 20 20 23 73 69 64 65 62 61 72 }.. #sidebar
d0e0: 20 7b 0a 20 20 20 20 20 20 77 69 64 74 68 3a 20 {. width:
d0f0: 31 30 30 25 3b 0a 20 20 20 20 20 20 70 6f 73 69 100%;. posi
d100: 74 69 6f 6e 3a 20 61 62 73 6f 6c 75 74 65 3b 0a tion: absolute;.
d110: 20 20 20 20 20 20 74 6f 70 3a 20 37 30 70 78 3b top: 70px;
d120: 0a 20 20 20 20 20 20 70 61 64 64 69 6e 67 2d 62 . padding-b
d130: 6f 74 74 6f 6d 3a 20 31 30 30 70 78 3b 0a 20 20 ottom: 100px;.
d140: 20 20 20 20 2f 2a 20 64 69 73 70 6c 61 79 3a 6e /* display:n
d150: 6f 6e 65 3b 20 2a 2f 0a 20 20 20 20 20 20 6f 76 one; */. ov
d160: 65 72 66 6c 6f 77 3a 20 61 75 74 6f 3b 0a 20 20 erflow: auto;.
d170: 20 20 20 20 68 65 69 67 68 74 3a 20 31 30 30 25 height: 100%
d180: 3b 0a 20 20 20 20 20 20 62 61 63 6b 67 72 6f 75 ;. backgrou
d190: 6e 64 2d 63 6f 6c 6f 72 3a 20 77 68 69 74 65 3b nd-color: white;
d1a0: 0a 20 20 20 20 20 20 7a 2d 69 6e 64 65 78 3a 20 . z-index:
d1b0: 33 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 23 73 3;. }.. #s
d1c0: 69 64 65 62 61 72 20 61 2c 0a 20 20 20 20 23 73 idebar a,. #s
d1d0: 69 64 65 62 61 72 20 68 32 2c 0a 20 20 20 20 23 idebar h2,. #
d1e0: 73 69 64 65 62 61 72 20 68 33 20 7b 0a 20 20 20 sidebar h3 {.
d1f0: 20 20 20 66 6f 6e 74 2d 73 69 7a 65 3a 20 31 32 font-size: 12
d200: 30 25 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 23 0%;. }.. #
d210: 74 75 74 6f 72 69 61 6c 20 7b 0a 20 20 20 20 20 tutorial {.
d220: 20 6d 61 72 67 69 6e 2d 6c 65 66 74 3a 20 30 70 margin-left: 0p
d230: 78 3b 0a 20 20 20 20 20 20 6d 61 72 67 69 6e 2d x;. margin-
d240: 74 6f 70 3a 20 37 30 70 78 3b 0a 20 20 20 20 7d top: 70px;. }
d250: 0a 0a 20 20 20 20 2e 6d 65 6e 75 43 6c 6f 73 65 .. .menuClose
d260: 64 20 7b 0a 20 20 20 20 20 20 64 69 73 70 6c 61 d {. displa
d270: 79 3a 20 6e 6f 6e 65 3b 0a 20 20 20 20 7d 0a 0a y: none;. }..
d280: 20 20 20 20 2e 6d 65 6e 75 4f 70 65 6e 20 7b 0a .menuOpen {.
d290: 20 20 20 20 20 20 64 69 73 70 6c 61 79 3a 20 62 display: b
d2a0: 6c 6f 63 6b 3b 0a 20 20 20 20 7d 0a 20 20 7d 0a lock;. }. }.
d2b0: 3c 2f 73 74 79 6c 65 3e 0a 3c 73 63 72 69 70 74 </style>.<script
d2c0: 3e 0a 20 20 77 69 6e 64 6f 77 2e 73 63 72 6f 6c >. window.scrol
d2d0: 6c 54 6f 28 30 2c 20 30 29 3b 0a 3c 2f 73 63 72 lTo(0, 0);.</scr
d2e0: 69 70 74 3e 0a 0a 3c 73 63 72 69 70 74 3e 0a 20 ipt>..<script>.
d2f0: 20 28 66 75 6e 63 74 69 6f 6e 20 28 69 2c 20 73 (function (i, s
d300: 2c 20 6f 2c 20 67 2c 20 72 2c 20 61 2c 20 6d 29 , o, g, r, a, m)
d310: 20 7b 0a 20 20 20 20 69 5b 27 47 6f 6f 67 6c 65 {. i['Google
d320: 41 6e 61 6c 79 74 69 63 73 4f 62 6a 65 63 74 27 AnalyticsObject'
d330: 5d 20 3d 20 72 3b 0a 20 20 20 20 69 5b 72 5d 20 ] = r;. i[r]
d340: 3d 20 69 5b 72 5d 20 7c 7c 20 66 75 6e 63 74 69 = i[r] || functi
d350: 6f 6e 20 28 29 20 7b 0a 20 20 20 20 20 20 28 69 on () {. (i
d360: 5b 72 5d 2e 71 20 3d 20 69 5b 72 5d 2e 71 20 7c [r].q = i[r].q |
d370: 7c 20 5b 5d 29 2e 70 75 73 68 28 61 72 67 75 6d | []).push(argum
d380: 65 6e 74 73 29 0a 20 20 20 20 7d 2c 20 69 5b 72 ents). }, i[r
d390: 5d 2e 6c 20 3d 20 31 20 2a 20 6e 65 77 20 44 61 ].l = 1 * new Da
d3a0: 74 65 28 29 3b 0a 20 20 20 20 61 20 3d 20 73 2e te();. a = s.
d3b0: 63 72 65 61 74 65 45 6c 65 6d 65 6e 74 28 6f 29 createElement(o)
d3c0: 2c 0a 20 20 20 20 20 20 6d 20 3d 20 73 2e 67 65 ,. m = s.ge
d3d0: 74 45 6c 65 6d 65 6e 74 73 42 79 54 61 67 4e 61 tElementsByTagNa
d3e0: 6d 65 28 6f 29 5b 30 5d 3b 0a 20 20 20 20 61 2e me(o)[0];. a.
d3f0: 61 73 79 6e 63 20 3d 20 31 3b 0a 20 20 20 20 61 async = 1;. a
d400: 2e 73 72 63 20 3d 20 67 3b 0a 20 20 20 20 6d 2e .src = g;. m.
d410: 70 61 72 65 6e 74 4e 6f 64 65 2e 69 6e 73 65 72 parentNode.inser
d420: 74 42 65 66 6f 72 65 28 61 2c 20 6d 29 0a 20 20 tBefore(a, m).
d430: 7d 29 28 77 69 6e 64 6f 77 2c 20 64 6f 63 75 6d })(window, docum
d440: 65 6e 74 2c 20 27 73 63 72 69 70 74 27 2c 20 27 ent, 'script', '
d450: 68 74 74 70 73 3a 2f 2f 77 77 77 2e 67 6f 6f 67 https://www.goog
d460: 6c 65 2d 61 6e 61 6c 79 74 69 63 73 2e 63 6f 6d le-analytics.com
d470: 2f 61 6e 61 6c 79 74 69 63 73 2e 6a 73 27 2c 20 /analytics.js',
d480: 27 67 61 27 29 3b 0a 0a 20 20 67 61 28 27 63 72 'ga');.. ga('cr
d490: 65 61 74 65 27 2c 20 27 55 41 2d 34 32 32 30 39 eate', 'UA-42209
d4a0: 37 31 34 2d 33 27 2c 20 27 61 75 74 6f 27 29 3b 714-3', 'auto');
d4b0: 0a 20 20 67 61 28 27 73 65 6e 64 27 2c 20 27 70 . ga('send', 'p
d4c0: 61 67 65 76 69 65 77 27 29 3b 0a 3c 2f 73 63 72 ageview');.</scr
d4d0: 69 70 74 3e 0a 0a 3c 2f 68 74 6d 6c 3e 0a ipt>..</html>.