<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>NexusUI API</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel="icon" type="image/png" href="../favicon.png" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">
<script src="js/jquery.js"></script>
<link rel='stylesheet' href='prism/prism.css' />
<script src="prism/prism.js"></script>
<script src="js/moustache.min.js"></script>
<script src="../dist/NexusUI.js"></script>
<script src="js/Tone9.js"></script>
</head>
<body class='documentation'>
<div id="menu-tab" onclick="toggleSidebar()">
<img src="media/hamburger.png" width="40px">
</div>
<div id="sidebar" class="menuClosed" onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';">
<h2>NexusUI</h2>
<a href="#intro">Getting Started</a><br />
<a href="#colors">Changing Colors</a><br />
<a href="#rack">Creating a Rack</a><br />
<a href="#sync">Syncing Number Boxes</a><br />
<h2>Interfaces</h2>
<h3>Core</h3>
<a href="#Button">Button</a><br />
<a href="#Dial">Dial</a><br />
<a href="#Number">Number</a><br />
<a href="#Position">Position</a><br />
<a href="#Slider">Slider</a><br />
<a href="#Toggle">Toggle</a><br />
<h3>General</h3>
<a href="#Envelope">Envelope</a><br />
<a href="#Multislider">Multislider</a><br />
<a href="#Piano">Piano</a><br />
<a href="#RadioButton">RadioButton</a><br />
<a href="#Select">Select</a><br />
<!-- <a href="#Range">range</a><br /> -->
<a href="#Sequencer">Sequencer</a><br />
<a href="#TextButton">TextButton</a><br />
<!-- <a href="#Waveform">waveform</a><br /> -->
<h3>Mobile</h3>
<a href="#Tilt">Tilt</a><br />
<h3>Spatialization</h3>
<a href="#Pan">Pan</a><br />
<a href="#Pan2D">Pan2D</a><br />
<h3>Visualization</h3>
<a href="#Meter">Meter</a><br />
<a href="#Oscilloscope">Oscilloscope</a><br />
<a href="#Spectrogram">Spectrogram</a><br />
<h2>Tuning</h2>
<a href="#tune">Tune</a><br />
<h2>Timing</h2>
<a href="#interval">Interval</a><br />
<h2>Models</h2>
<a href="#counter">Counter</a><br />
<a href="#sequence">Sequence</a><br />
<a href="#drunk">Drunk</a><br />
<a href="#matrix">Matrix</a><br />
<h2>Helpers</h2>
<a href="#ri">ri (random integer)</a><br />
<a href="#rf">rf (random float)</a><br />
<a href="#clip">clip</a><br />
<a href="#scale">scale</a><br />
<a href="#mtof">mtof</a><br />
<a href="#interp">interp</a><br />
<a href="#pick">pick</a><br />
<a href="#octave">octave</a><br />
<a href="#distance">distance</a><br />
<a href="#average">average</a><br />
<a href="#coin">coin</a><br />
</div>
<div id="tutorial" class="tutorial">
<div id="target"></div>
<script id="template" type="x-tmpl-mustache">
<h2>{{ name }}</h2>
<div class="overview" >
{{ description }}
<br />
<div id="demo">
{{{ demo }}}
</div>
</div>
{{#examples}}
<div class="code-basic">
{{title}}:
<pre class="example"><code class="language-javascript">{{ description }}</code></pre>
</div>
{{/examples}}
<div class="output">
<h4>Events</h4>
{{ #outputs }}
<h5>{{{ name }}}</h5>
{{{ description }}} <br />
{{ #example }}
<pre class="example"><code class="language-javascript">{{ example }}</code></pre>
{{ /example }}
{{ /outputs }}
</div>
<h4>Properties & Methods</h4>
<div class="properties">
{{#properties}}
<div class="property">
<div class="property-name">{{ name }}</div>
<div class="property-type">{{{ type }}}</div>
<div class="property-description">{{{ description }}}</div>
{{ #example }}
<pre class="example property-example"><code class="language-javascript">{{ code }}</code></pre>
<div class="example-toggle">Example</div>
{{ /example }}
</div>
{{/properties}}
</div>
<div class="methods">
{{#methods}}
<div class="method">
<div class="method-name">{{ name }}(
{{#parameters}}
{{name}}{{^last}}, {{/last}}
{{/parameters}}
)</div>
<div class="method-description">{{{ description }}}</div>
{{ #example }}
<pre class="example method-example"><code class="language-javascript">{{ code }}</code></pre>
<div class="example-toggle">Example</div>
{{ /example }}
</div>
{{/methods}}
</div>
<div class="examples">
{{#tutorials}}
<div class="codepen">
<h3>Example: {{name}}</h3>
{{{codepen}}}
{{description}}
</div>
{{/tutorials}}
</div>
</script>
<script id="helper-template" type="x-tmpl-mustache">
<h2>Helper Methods</h2>
{{#helpers}}
<div class="method" id="{{ name }}">
<div class="method-name">{{ name }}(
{{#parameters}}
{{name}}{{^last}}, {{/last}}
{{/parameters}}
)</div>
<div class="method-description">{{{ description }}}</div>
<table style="padding: 5px">
{{#parameters}}
<tr>
<td style="padding:5px 10px">
<b>{{name}}:</b>
</td>
<td style="padding:5px 10px">
<i>{{type}}</i>
</td>
<td style="padding:5px 10px">
{{description}}
</td>
</tr>
{{/parameters}}
</table>
<pre class="example"><code class="language-javascript">{{ example }}</code></pre>
</div>
{{/helpers}}
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</script>
</div>
<!--
GETTING STARTED
-->
<div id="intro" class="custom-tutorial" style="display:none">
<h1 style="margin: 5px auto;width:100%;font-size:27pt;font-weight:700;">NexusUI</h1>
<h2 style="margin: 10px auto 0px;width:100%;font-size:18pt;font-weight:normal">Web Audio Interfaces</h2>
<h3 style="margin: 10px auto 0px;width:100%;font-size:14pt;font-weight:normal">Version 2</h3>
<div style="margin:0px auto">
<div id="splash-demo" style="width:400px;text-align:center;margin:0 auto">
</div>
<p class="lib-overview">
NexusUI is a collection of HTML5 interfaces and Javascript helper functions to assist with building web audio instruments in the browser.
</p>
<p class="lib-overview">
In addition to interfaces, the toolkit contains some helpers for tuning and timing. It does not provide any sound-making capabilities –– for that, check out <a href="http://tonejs.github.io" target="blank">Tone.js</a>, <a href="https://github.com/sebpiq/WebPd" target="blank">WebPD</a>, <a
href="https://github.com/charlieroberts/gibber.audio.lib" target="blank">Gibber.lib</a>, or the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" target="blank">Web Audio API</a>.
</p>
<p class="lib-overview">
This toolkit is designed to help you rapidly prototype your musical ideas. It is lacking some features which would be useful for production –– for example, these interfaces are <b>not responsive</b> (they do not understand percentage widths and heights). NexusUI is an ongoing open-source
project; please get in touch on GitHub if you would like to contribute.
</p>
</div>
<h5>Setup</h5>
<p>
Download <a href="https://cdn.jsdelivr.net/npm/nexusui@latest/dist/NexusUI.js" download>NexusUI.js</a>. <br />
(The link grabs the latest version of the file directly from our NPM.)
</p>
<p>
Or access on a CDN if you want a hosted file:
</p>
<ul>
<li><a href="https://cdn.jsdelivr.net/npm/nexusui@latest/dist/NexusUI.js">Development</a></li>
<li><a href="https://cdn.jsdelivr.net/npm/nexusui@latest/dist/NexusUI.min.js">Production</a></li>
</ul>
<p>
Link to NexusUI.js in your HTML file.
</p>
<pre><code class="language-html">
<html>
<head>
<script src="path/to/NexusUI.js"></script>
</head>
<body>
</body>
</html>
</code></pre>
<h5>Creating an Interface</h5>
<p>
You can transform regular HTML elements into NexusUI interfaces (<div> is recommended). By default, the interface component will adopt the height and width of the target element as specified in your CSS or in the element's style. Alternatively, you can specify the interface component's
size in JavaScript when you create it (see the API for each interface).
</p>
<pre><code class="language-html">
<html>
<head>
<script src="path/to/NexusUI.js"></script>
</head>
<body>
<div id="dial"></div>
<script>
var dial = new Nexus.Dial('#dial')
</script>
</body>
</html>
</code></pre>
<p>
You can also transform many elements at once by <a href="#rack">creating a rack</a>.
</p>
<h5>Dynamically Adding and Removing Interfaces</h5>
<p>
You can also dynamically add interfaces to your page at any point using <b>Nexus.Add</b>. This lets you add many interfaces to the same parent element. You can later remove the interface using the interface's <b>.destroy()</b> method.
</p>
<pre><code class="language-html">
<html>
<head>
<script src="path/to/NexusUI.js"></script>
</head>
<body>
<div id="instrument"></div>
<script>
var dial = Nexus.Add.Dial('#instrument',{
'size': [100,100]
});
var slider = Nexus.Add.Slider('#instrument',{
'size': [25,100]
});
// then, to remove them tlater
dial.destroy();
slider.destroy();
</script>
</body>
</html>
</code></pre>
<!--
<p data-height="265" data-theme-id="0" data-slug-hash="GmEJVL" data-default-tab="html,result" data-user="taylorbf" data-embed-version="2" data-pen-title="Basic Dial" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/GmEJVL/">Basic Dial</a> by Ben Taylor (<a href="http://codepen.io/taylorbf">@taylorbf</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<p data-height="265" data-theme-id="0" data-slug-hash="ygGMxq" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="MT Test" class="codepen">See the Pen <a href="http://codepen.io/taylorbf/pen/ygGMxq/">MT Test</a> by Ben Taylor (<a href="http://codepen.io/taylorbf">@taylorbf</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> -->
<h5>Listening for Interaction Events</h5>
<p>
Every NexusUI interface fires an event function when the interface is interacted with or changed programatically through the interface's API. If you use Node.JS, this syntax should look familiar –– every NexusUI interface extends Node.js's built-in EventEmitter.
</p>
<pre><code class="language-js">
var dial = new Nexus.Dial("#dial");
dial.on('change',function(v) {
// v holds the new numeric value of the dial
});
</code></pre>
<p>
Many of the core interfaces also fire events on mouse click and mouse release. The following interfaces accept click and release events: button, dial, number, pan, pan2d, position, slider, textbutton, toggle. We hope to develop this feature for all interfaces in the future.
</p>
<pre><code class="language-js">
var slider = new Nexus.Slider("#slider");
slider.on('click',function() {
console.log('clicked!');
});
slider.on('release',function() {
console.log('released');
});
</code></pre>
<!-- <p>
Example:
</p>
<p data-height="265" data-theme-id="0" data-slug-hash="jmwPgq" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="Dial Event" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/jmwPgq/">Dial Event</a> by Ben Taylor (<a href="http://codepen.io/taylorbf">@taylorbf</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<!-- <p data-height="265" data-theme-id="0" data-slug-hash="YVQXEL" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="MT - Interface Event Demo" class="codepen">See the Pen <a href="http://codepen.io/taylorbf/pen/YVQXEL/">MT - Interface Event Demo</a> by Ben Taylor (<a href="http://codepen.io/taylorbf">@taylorbf</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> -->
<h5>Interface Options</h5>
<p>
Each interface has an API through which you can customize its values and interaction modes. Common options include:
<ul>
<li>
Setting a numeric range for the value of the interface
</li>
<li>
Absolute or relative mouse interaction
</li>
<li>
Vertical, horizontal, or radial (for dials) interaction & orientation
</li>
</ul>
</p>
<p>
Example:
</p>
<p data-height="265" data-theme-id="0" data-slug-hash="BRZNvg" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="MT - Interface Options Demo" class="codepen">See the Pen <a href="http://codepen.io/taylorbf/pen/BRZNvg/">MT - Interface Options Demo</a> by Ben
Taylor (<a href="http://codepen.io/taylorbf">@taylorbf</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<h5>Documentation</h5>
<p>
Check out the API for more details on interface options, as well as for tutorials on tuning and timing mechanisms.
</p>
<br /><br /><br />
</div>
<!--
COLORS
-->
<div id="colors" class="custom-tutorial" style="display:none">
<h1 style="margin: 5px auto;width:100%;font-size:27pt;font-weight:700;">Colors</h1>
<p>
You can change an interface's colors using <b>.colorize()</b>
</p>
<p data-height="266" data-theme-id="0" data-slug-hash="eRdNaB" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="Colors" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/eRdNaB/">Colors</a> by Ben Taylor (<a
href="https://codepen.io/taylorbf">@taylorbf</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<br /><br />
Alternately, you can set <b>Nexus.colors</b>, which will be inherited by every interface created from that point on. This is useful if you want all of your interface components to share the same color scheme.
<a href="https://codepen.io/taylorbf/pen/zzKGgz">See example on CodePen.</a>
<br /><br />
<!-- <p data-height="265" data-theme-id="0" data-slug-hash="zzKGgz" data-default-tab="result" data-user="taylorbf" data-embed-version="2" data-pen-title="Colors - Inheritance" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/zzKGgz/">Colors - Inheritance</a> by Ben Taylor (<a href="https://codepen.io/taylorbf">@taylorbf</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> -->
<!-- <p data-height="265" data-theme-id="0" data-slug-hash="zzKGgz" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="Colors - Inheritance" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/zzKGgz/">Colors - Inheritance</a> by Ben Taylor (<a href="https://codepen.io/taylorbf">@taylorbf</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> -->
A complete list of color properties used in the interfaces are:
<b>accent</b>,
<b>fill</b>,
<b>dark</b>,
<b>light</b>,
<b>mediumDark</b>,
<b>mediumLight</b>.
Not all interfaces use all of these colors.
</div>
<!--
RACK
-->
<div id="rack" class="custom-tutorial" style="display:none">
<h1 style="margin: 5px auto;width:100%;font-size:27pt;font-weight:700;">Creating a Rack</h1>
<p>
You can create many interface components at once using <b>Nexus.Rack()</b>. Here is an example:
</p>
<p data-height="265" data-theme-id="0" data-slug-hash="RgGMJm" data-default-tab="html,result" data-user="taylorbf" data-embed-version="2" data-pen-title="Creating a Rack" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/RgGMJm/">Creating a Rack</a> by Ben Taylor (<a
href="https://codepen.io/taylorbf">@taylorbf</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<!--<iframe width="100%" height="300" src="//jsfiddle.net/suncannon/e8vtubc2/1/embedded/js,html,result/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-->
<br /><br />
First, create an element that will be the container of the rack.
<br /><br />
Inside that container, create several elements with <b>nexus-ui</b> attributes describing what type of interface it should transform into, such as <b>nexus-ui="dial"</b>.
<br /><br />
Give each interface element an ID which will be used to identify it in JavaScript later.
<br /><br />
In your JavaScript, use <b>new Nexus.Rack("#containerID")</b> to transform the container element into a rack. When this happens, any elements inside the container with valid <b>nexus-ui</b> attributes will be transformed into interface elements.
<h5>Using a Custom Attribute</h5>
<p>
Nexus.Rack optionally lets you specify which attribute to look for ('nexus-ui' by default). This is useful for using NexusUI with React, which requires <i>data-</i> attribute prefixes.
</p>
<p>
HTML:
</p>
<pre><code class="language-html">
<div id="target">
<div data-nx="dial"></div>
</div>
</code></pre>
<p>
JS:
</p>
<pre><code class="language-javascript">
var synth = new Nexus.Rack("#target",{
attribute: 'data-nx'
})
</code></pre>
<br /><br />
<h5>Rack Methods</h5>
<b>.hide()</b><br />
<b>.show()</b><br />
<b>.colorize()</b> (See <a href="#colors">changing colors</a>)
<br />
<br /><br />
</div>
</div>
<!--
SYNCING NUMBER BOXES
-->
<div id="sync" class="custom-tutorial" style="display:none">
<h1 style="margin: 5px auto;width:100%;font-size:27pt;font-weight:700;">Linking a Number Box to a Dial or Slider</h1>
<p>
A number box can be linked to the value of a dial or slider using <b>.link()</b>
<br /><br />
In this case, when the dial or slider is updated, the number box will show its numeric value. When the number box is updated or interacted with, the dial or slider will be updated to the new value as well.
</p>
<p data-height="265" data-theme-id="0" data-slug-hash="owdpxy" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="Number Box Sync" class="codepen">See the Pen <a href="https://codepen.io/taylorbf/pen/owdpxy/">Number Box Sync</a> by Ben Taylor (<a
href="https://codepen.io/taylorbf">@taylorbf</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
<!--
NEXUS.TUNE
-->
<div id="tune" class="custom-tutorial" style="display:none">
<h2>Tuning</h2>
<p>
<b>Nexus.note()</b> and <b>Nexus.tune</b> offer ways to manage pitches and scales.
</p>
<pre><code class="language-javascript">
// Nexus.note(0) returns the frequency of the 1st note of the scale
synth.frequency.value = Nexus.note(0);
// Nexus.note(2) returns the frequency of the 3rd note of the scale
synth.frequency.value = Nexus.note(2);
</code></pre>
<p>
By default the scale is an equal-tempered major scale. An API for changing the scale is below.
</p>
<p>
This approach emphasizes algorithmic composition by using numbers to traverse musical scales.
</p>
<!-- section -->
<h3>Turning Scale Degrees to Frequency Values</h3>
<p>
<b>Nexus.note()</b> provides a method for turning scale degrees into frequency values which your web audio synth will understand.
</p>
<pre>
<code class="language-javascript">
// Nexus.note(0) returns the frequency of 1st note of the scale
synth.frequency.value = Nexus.note(0);
// Nexus.note(1) returns the frequency of 2nd note of the scale
synth.frequency.value = Nexus.note(1);
// Negative numbers wrap to a lower octave
// Nexus.note(-1) returns the frequency of the top note of the scale, 1 octave lower
synth.frequency.value = Nexus.note(-1);
// You can also specify the octave using an optional second parameter
// Nexus.note(0,2) returns the frequency of the 1st note of the scale, 2 octaves up.
synth.frequency.value = Nexus.note(0,2);
// Nexus.note(0,-1) returns the frequency of the 1st note of the scale, 1 octave lower
synth.frequency.value = Nexus.note(0,-1);
</code></pre>
<p>
By using counters or number generators in tandem with <b>Nexus.note()</b>, you can play scales, arpeggios, etc.
</p>
<pre>
<code class="language-javascript">
// Play 5 octaves of the major scale
var counter = new Nexus.Counter( 0, 36 );
var beat = new Nexus.Interval(200,function() {
synth.frequency.value = Nexus.note( counter.next() );
})
</code>
</pre>
<h3>Getting Pitch Ratios or adjusted MIDI values</h3>
<p>
If working with an audio sample, you may wish to tune your sample by changing its playback speed.
You can use <b>Nexus.tune.ratio()</b> to get the frequency ratio of a note to the root of your scale. This ratio can be used to set the playback speed of your sample.
<pre>
<code class="language-javascript">
// This gives you the pitch ratio between the 5th note in scale and the root.
Nexus.tune.ratio(4) // returns 1.49830693925
// You can use this to set the playback speed of a sampler
sampler.playbackRate = Nexus.tune.ratio(4)
</code>
</pre>
</p>
<h3>Changing the Scale</h3>
<p>
By default, the scale is an equal-tempered major scale.
</p>
<p>
We do not provide any other built-in scales. However, we provide two ways for you to create your own scale.
</p>
<h4>Describing a Scale</h4>
To define your own scale, you can call <b>.createScale()</b> with a list of the chromatic scale degrees you want in your scale.
<pre><code class="language-javascript">
// Create a minor scale
Nexus.tune.createScale(0,2,3,5,7,8,10);
// Now, Nexus.note() will refer to the scale you defined
Nexus.note(0) // returns the frequency number of the root
Nexus.note(1) // returns the frequency number of a Major 2nd
Nexus.note(2) // returns the frequency number of a Minor 3rd
</code></pre>
<h4>Describing a Just Intonation Scale</h4>
You can also define <a href="https://en.wikipedia.org/wiki/Just_intonation">just intonation</a> scales.
To do so, call <b>.createJIScale()</b> with your own list of pitch ratios.
<pre><code class="language-javascript">
// Create a major scale in just intonation
Nexus.tune.createJIScale( 1/1, 9/8, 5/4, 4/3, 3/2, 8/5, 5/3, 15/8 );
// Now, Nexus.note() will refer to the scale you defined
Nexus.note(0) // returns the frequency number for ratio 1/1
Nexus.note(1) // returns the frequency number for ratio 9/8
Nexus.note(2) // returns the frequency number for ratio 5/4
</code></pre>
<h3>Changing the root </h3>
<p>
By default, the root of the scale is Middle C. Therefore, <b>Nexus.note(0)</b> returns the frequency for Middle C.
</p>
<p>
You can set the root using <b>Nexus.tune.root</b>, which is a frequency value.
</p>
<pre><code class="language-javascript">
// Set the root to 3 octaves below Middle C.
Nexus.tune.root = Nexus.note(0,-3);
</code></pre>
In this way, you can change your scale root on the fly by setting it to other notes of the scale you are currently using.
<p>
The root can also be set using traditional musical values like "C3" or "A1". This is the only place in this toolkit where this type of music notation is used.
</p>
<pre><code class="language-javascript">
// Set the root to low A.
Nexus.tune.root = "A1";
</code></pre>
<p>
You can also set Nexus.tune.root direction to a frequency value, for example if you are working in Just Intonation.
</p>
<pre><code class="language-javascript">
// Set the root of your scale to 120hz.
Nexus.tune.root = 120;
</code></pre>
<!--
<h3>Examples</h3>
<p>
Codepen for: scale over 5 octaves
</p>
<p>
Codepen for: arpeggio
</p>
<p>
Codepen for: melody and rhythm
</p>
<p>
Codepen for: custom scales
</p>
<!-- <pre><code class="language-javascript">
// Every 100ms, play a random note from a random octave in the major scale
mt.interval(100,function() {
var scaleDegree = mt.ri( 0, mt.tune.scale.length );
var octave = mt.ri( -3 , 3 );
synth1.frequency.value = mt.tune.note( scaleDegree, octave ); // returns the root
})
</code></pre> -->
</div>
<!--
TIMING
-->
<div id="interval" class="custom-tutorial" style="display:none">
<h2>Timing</h2>
<p>
<b>Nexus.Interval</b> creates a repeating pulse using <a href="http://github.com/sebpiq/WAAClock">WAAClock</a>.
</p>
<pre><code class="language-javascript">
// Create a pulse of 100ms. At each pulse, the callback function is executed.
var interval = new Nexus.Interval(100, function() {
console.log('beep');
})
</code></pre>
<p>
This interval uses a web audio context to handle timing, so it is more accurate than a regular <b>setInterval</b> or <b>setTimeout</b>
</p>
<h3>Autostart</h3>
<p>
Be default, the interval will automatically start when it is created.
However a third parameter can set autostart to false.
</p>
<pre><code class="language-javascript">
// Create a pulse that does not autostart.
var interval = new Nexus.Interval(100, function() {
console.log('beep');
}, false)
</code></pre>
<!-- section -->
<h3>Changing the Interval Period</h3>
<pre><code class="language-javascript">
// Change your interval period to 200ms.
interval.ms(200)
</code></pre>
<!-- section -->
<h3>All methods</h3>
<pre><code class="language-javascript">
// Create a pulse of 1 second
var interval = new Nexus.Interval(1000, function() {
console.log('beep');
})
// Stop the pulse
interval.stop();
// Start the pulse
interval.start();
// Change the interval time
interval.ms(200);
// Change the function that is called at each pulse
interval.event = function() {
console.log("bloop");
}
</code></pre>
</div>
<!--
MT.MATRIX
-->
<div id="matrix" class="custom-tutorial" style="display:none">
<h2>Matrix Model</h2>
<p>
The Matrix Model lets you read, write, and manipulate a two-dimensional array of data (such as the data that is visualized by a <a href="#Sequencer">sequencer</a>).
</p>
<br />
Creating a Matrix Model from scratch...
<pre><code class="language-javascript">
matrix = new Nexus.Matrix(5,10);
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10)
document.write(matrix.formatAsText())
</script>
</pre>
<h3>Accessing a Matrix's Values</h3>
<br />
<b>matrix.pattern</b> contains a 2-dimensional JavaScript array. <b>matrix.pattern[0]</b> contains an array of the first row's values. <b>matrix.pattern[0][0]</b> contains the value of the first cell in the first row.
<br /><br />
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
console.log( matrix.pattern );
</code></pre>
<br /><br /><br />
<h3>Toggling cells</h3>
<br />
<b>matrix.toggle</b> flips a cell or group of cells to their opposite state
<br /><br />
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.toggle.cell(2,2)
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.toggle.cell(2,2)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.toggle.row(2)
</code></pre>
<pre><script>
matrix.toggle.row(2)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.toggle.column(2)
</code></pre>
<pre><script>
matrix.toggle.column(2)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.toggle.all()
</code></pre>
<pre><script>
matrix.toggle.all()
document.write(matrix.formatAsText())
</script>
</pre>
<!-- -->
<h3>Setting cells</h3>
<br />
<b>matrix.toggle</b> flips a cell or group of cells to their opposite state
<br /><br />
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.set.cell(0,0,1)
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.set.cell(0,0,1)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.set.row(0,[0,1,0,1,0,1,0,1,0,1])
</code></pre>
<pre><script>
matrix.set.row(0,[0,1,0,1,0,1,0,1,0,1])
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.set.column(0,[0,1,1,1,0])
</code></pre>
<pre><script>
matrix.set.column(0,[0,1,1,1,0])
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.set.all([
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1]
])
</code></pre>
<pre><script>
matrix.set.all([
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1],
[0,1,0,1,0,1,0,1,0,1]
])
document.write(matrix.formatAsText())
</script>
</pre>
<!-- -->
<h3>Rotating</h3>
<br />
<b>matrix.rotate</b> moves parts of the matrix to the right or left
<br /><br />
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.toggle.cell(0,0)
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.toggle.cell(0,0)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.rotate.row(0)
</code></pre>
<pre><script>
matrix.rotate.row(0)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.rotate.row(0,4)
</code></pre>
<pre><script>
matrix.rotate.row(0,4)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.rotate.column(5)
</code></pre>
<pre><script>
matrix.rotate.column(5)
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
matrix.rotate.all(2)
</code></pre>
<pre><script>
matrix.rotate.all(2)
document.write(matrix.formatAsText())
</script>
</pre>
<!-- -->
<h3>Populating with Patterns</h3>
<br />
<b>matrix.populate</b> can set row or column using a pattern.
<br /><br />
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.populate.row( 0, [0,1] )
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.populate.row( 0, [0,1] )
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.populate.column( 0, [0,1] )
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.populate.column( 0, [0,1] )
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.populate.all( [0,1] )
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.populate.all( [0,1] )
document.write(matrix.formatAsText())
</script>
</pre>
<!-- -->
<h3>Populating with Probability</h3>
<br />
<b>matrix.populate</b> can set row or column using a pattern of probability values.
<br /><br />
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.populate.row( 0, [0.3, 0.6] )
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.populate.row( 0, [0.3, 0.3] )
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.populate.column( 0, [0.5] )
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.populate.column( 0, [0.5] )
document.write(matrix.formatAsText())
</script>
</pre>
<pre><code class="language-javascript">
var matrix = new Nexus.Matrix(5,10);
matrix.populate.all( [0.2, 0.5, 0.2, 0.8] )
</code></pre>
<pre><script>
var matrix = new Nexus.Matrix(5,10);
matrix.populate.all( [0.2, 0.5, 0.2, 0.8] )
document.write(matrix.formatAsText())
</script>
</pre>
<!-- <pre><code class="language-javascript">
// Every 100ms, play a random note from a random octave in the major scale
mt.interval(100,function() {
var scaleDegree = mt.ri( 0, mt.tune.scale.length );
var octave = mt.ri( -3 , 3 );
synth1.frequency.value = mt.tune.note( scaleDegree, octave ); // returns the root
})
</code></pre> -->
<h3>Matrix and the Sequencer Interface</h3>
The sequencer interface uses a matrix model to hold its grid of values. You can use any of the above matrix manipulation methods on your sequencer grid, using the sequencer's <b>.matrix</b> property.
<pre><code class="language-javascript">
var sequencer = new Nexus.Sequencer("#target",5,10);
sequencer.matrix.toggle.row(2);
sequencer.matrix.set.row(1, [0,1,0,1,0,1,0,1,0,1])
</code></pre>
<br /><br /><br /><br />
</div>
<!--
MT.COUNTER
-->
<div id="counter" class="custom-tutorial" style="display:none">
<h2>Counter Model</h2>
<p>
A Counter model is an object with a minimal API for counting up or down.
</p>
<pre><code class="language-javascript">
counter = new Nexus.Counter(0,10)
counter.next() // returns 0
counter.next() // returns 1
counter.next() // returns 2
// ...
counter.next() // returns 9
counter.next() // returns 10
counter.next() // returns 0
</code></pre>
<!-- section -->
<h3>Modes</h3>
The counter method takes an optional third argument for the counting mode, which can be <b>up</b>, <b>down</b>, <b>drunk</b> (randomly chooses to step up or down), or <b>random</b> (chooses a random number from within the counting range).
<pre><code class="language-javascript">
counter = new Nexus.Counter(0,10,"down")
counter.next() // returns 10
counter.next() // returns 9
counter.next() // returns 8
</code></pre>
<h3>Properties</h3>
<pre><code class="language-javascript">
counter.min = 10
counter.max = 100
counter.mode = "down"
counter.value = 50 // jumps the counter to this value
</code></pre>
</div>
<!--
MT.SEQUENCE
-->
<div id="sequence" class="custom-tutorial" style="display:none">
<h2>Sequence Model</h2>
<p>
A Sequence model steps through a series of numeric values defined by you.
</p>
<pre><code class="language-javascript">
var sequence = new Nexus.Sequence([1,3,5,7])
sequence.next() // returns 1
sequence.next() // returns 3
sequence.next() // returns 5
sequence.next() // returns 7
sequence.next() // returns 1
sequence.next() // returns 3
</code></pre>
<!-- section -->
<h3>Modes</h3>
The sequence model takes an optional second argument for the sequence mode, which can be <b>up</b>, <b>down</b>, <b>drunk</b> (randomly chooses to step up or down), or <b>random</b> (chooses a random number from within the counting range).
<pre><code class="language-javascript">
var sequence = new Nexus.Sequence([1,3,5,7],"down")
sequence.next() // returns 7
sequence.next() // returns 5
sequence.next() // returns 3
sequence.next() // returns 1
sequence.next() // returns 7
sequence.next() // returns 5
</code></pre>
<h3>Properties</h3>
<pre><code class="language-javascript">
sequence.values = [2,4,5,8] // updates the sequence of values
sequence.mode = "drunk"
sequence.value = 2 // this jumps to where the '2' value is in the sequence, which is index 0.
</code></pre>
</div>
<!--
MT.DRUNK
-->
<div id="drunk" class="custom-tutorial" style="display:none">
<h2>Drunk Model</h2>
<p>
A Drunk Model does a "drunk walk" through a given range, meaning it will randomly step up or down by a given increment.
</p>
<pre><code class="language-javascript">
// This drunk model has a range of 0 to 100
// Its starting value is 50
// Its stepping increment is 10
var drunk = new Nexus.Drunk(0,100,50,10)
drunk.next() // returns 40
drunk.next() // returns 50
drunk.next() // returns 40
drunk.next() // returns 30
drunk.next() // returns 40
drunk.next() // returns 30
</code></pre>
<!-- section -->
<h3>Properties</h3>
<pre><code class="language-javascript">
drunk.min = 100
drunk.max = 1000
drunk.increment = 100
drunk.value = 500 // jumps to this value
</code></pre>
</div>
</body>
<script>
var Unformatted = {}
var API = {}
var Helpers = []
Nexus.context = Tone.context;
$.getJSON('api.json', function (data) {
data.forEach(function (entry) {
Unformatted[entry.name] = entry
})
// Parse Helper doc into Helpers object
for (var key in Unformatted) {
if (LoadLinks.Helper.indexOf(key) >= 0) {
var unformatted = Unformatted[key]
var entry = {
name: unformatted.name,
parameters: unformatted.params,
description: unformatted.description.children[0].children[0].value,
returns: {
type: unformatted.returns[0].type,
description: unformatted.returns[0].description.children[0].children[0].value
},
example: unformatted.examples[0].description,
}
if (entry.parameters && entry.parameters.length > 0) {
let params = []
entry.parameters.forEach(function (param) {
params.push({
name: param.name,
type: param.type.name,
description: param.description.children[0].children[0].value
})
})
entry.parameters = params
entry.parameters[entry.parameters.length - 1].last = true
}
Helpers.push(entry);
}
}
// Parse interface documentation into API object
for (var key in Unformatted) {
var unformatted = Unformatted[key]
var entry = {
name: unformatted.name,
examples: unformatted.examples,
outputs: []
}
var exampleTypes = ['Basic', 'With Options']
if (entry.examples) {
for (var i = 0; i < entry.examples.length; i++) {
entry.examples[i].title = exampleTypes[i];
}
}
for (var i = 0; i < unformatted.tags.length; i++) {
if (unformatted.tags[i].title === "output") {
var name = unformatted.tags[i].description.split('\n').slice(0, 1)[0]
var desc = unformatted.tags[i].description.split('\n').slice(1).join("\n")
entry.outputs.push({
name: name,
description: desc,
example: ''
})
} else if (unformatted.tags[i].title === "outputexample") {
if (entry.outputs.length - 1 >= 0) {
entry.outputs[entry.outputs.length - 1].example = unformatted.tags[i].description
}
}
entry[unformatted.tags[i].title] = unformatted.tags[i].description
}
// collect members
var members = unformatted.members.instance
//get inherited members
if (unformatted.augments) {
for (var i = 0; i < unformatted.augments.length; i++) {
var name = unformatted.augments[i].name
if (name != "EventEmitter") {
members = members.concat(Unformatted[name].members.instance)
if (Unformatted[name].augments) {
unformatted.augments.push(Unformatted[name].augments[0])
}
}
}
}
//sort members
entry.properties = []
entry.methods = []
for (var i = 0; i < members.length; i++) {
if (members[i].kind == "function") {
var method = {
name: members[i].name,
parameters: [],
description: members[i].description.children[0].children[0].value,
returns: false,
example: false,
}
for (var j = 0; j < members[i].tags.length; j++) {
var tag = members[i].tags[j]
switch (tag.title) {
case 'type':
method.type = tag.type.name
break;
case 'example':
method.example = {
code: tag.description
}
break;
}
}
/* parameters */
if (members[i].params && members[i].params.length > 0) {
for (var j = 0; j < members[i].params.length; j++) {
method.parameters.push({
name: members[i].params[j].name
// type: members[i].params[j].name,
})
}
method.parameters[method.parameters.length - 1].last = true
}
entry.methods.push(method)
} else {
var property = {
name: members[i].name,
description: members[i].description.children[0].children[0].value,
type: '',
example: false
}
for (var j = 0; j < members[i].tags.length; j++) {
var tag = members[i].tags[j]
switch (tag.title) {
case 'type':
property.type = tag.type.name
if (TypeLinks.indexOf(property.type) >= 0) {
property.type = '<a href="#' + property.type + '">' + property.type + '</a>';
}
break;
case 'example':
property.example = {
code: tag.description
}
break;
}
}
entry.properties.push(property);
}
}
/* alphabetize members */
// for (var i=0; i<entry.properties.length;i++) {
entry.properties.sort(function (a, b) {
return a.name.localeCompare(b.name);
});
entry.methods.sort(function (a, b) {
return a.name.localeCompare(b.name);
});
// }
entry.tutorials = []
for (var i = 0; i < unformatted.tags.length; i++) {
if (unformatted.tags[i].title == 'tutorial') {
var contents = unformatted.tags[i].description
var name = contents.split("\n")[0]
var codepen = contents.split("\n")[1]
var description = contents.split("\n")[2]
entry.tutorials.push({
description: description,
name: name,
codepen: '<p data-height="265" data-theme-id="0" data-slug-hash="' + codepen + '" data-default-tab="js,result" data-user="taylorbf" data-embed-version="2" data-pen-title="' + codepen + '" class="codepen">See the Pen <a href="http://codepen.io/taylorbf/pen/' + codepen + '/">' +
codepen + '</a> by Ben Taylor (<a href="http://codepen.io/taylorbf">@taylorbf</a>) on <a href="http://codepen.io">CodePen</a>.</p><scr' + 'ipt async src="https://production-assets.codepen.io/assets/embed/ei.js"></scr' + 'ipt>'
})
}
}
API[key] = entry
}
//load hash
if (window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
load(hash);
} else {
window.location.hash = "#intro";
}
window.addEventListener("hashchange", function () {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
load(hash);
toggleSidebar(false);
window.scrollTo(0, 0);
}, false);
});
var instrument = false
var player = player = new Tone.Player("media/D-sharp.mp3");
function doc(name) {
// if (window.location.hash.substring(1)!=name) {
// window.location.hash = name;
// }
var entry = API[name];
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, entry);
$('#target').html(rendered);
Prism.highlightAll();
if (instrument) {
try {
instrument.empty()
} catch (e) {
console.log(e);
}
}
instrument = new Nexus.Rack("demo");
$(".example-toggle").click(function () {
$(this).parent().find(".example").toggle();
})
if (name == "Waveform") {
player.load("media/D-sharp.mp3", function () {
instrument["Waveform1"].load(player.buffer._buffer)
})
} else if (["Meter", "Oscilloscope", "Spectrogram"].indexOf(name) > -1) {
player.load("media/D-sharp.mp3", function () {
player.loopStart = 0;
player.loopEnd = 3;
player.loop = true;
instrument[name + "1"].connect(player, 2);
player.start();
})
}
}
function tut(name) {
// if (window.location.hash.substring(1)!=name) {
// window.location.hash = name;
// }
$('#target').empty();
if ($("#" + name).length > 0) {
$("#" + name).clone().appendTo('#target').show()
Prism.highlightAll();
if (instrument) {
try {
instrument.empty();
} catch (e) {
console.log(e);
}
}
if (name == "intro") {
var splashRack = new Nexus.Rack("splash-demo");
}
// instrument = mt.rack("target");
}
}
function helper(name) {
// if (window.location.hash.substring(1)!=name) {
// window.location.hash = name;
// }
if (instrument) {
try {
instrument.empty();
} catch (e) {
console.log(e);
}
}
var entry = {
"helpers": Helpers
}
var template = $('#helper-template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, entry);
$('#target').html(rendered);
Prism.highlightAll();
$('html, body').animate({
scrollTop: $("#" + name).offset().top - 20
}, 50);
/* $("#"+name).css("background-color","#0af");
$("#"+name).css("transition","background-color 1s ease");
$("#"+name).css("background-color","#fff"); */
}
var TypeLinks = [
"matrix",
"counter",
"interval",
]
var LoadLinks = {
"Doc": [
'Button', 'Dial', 'Number', 'Position', 'Slider', 'Toggle',
'Envelope', 'Sequencer', 'Multislider', 'Piano', 'RadioButton', 'Select',
'Range', 'TextButton', 'Waveform', 'Tilt', 'Pan', 'Pan2D', 'Meter',
'Oscilloscope', 'Spectrogram'
],
"Tut": [
'tune', 'interval', 'counter', 'sequence', 'drunk', 'matrix', 'intro', 'colors', 'rack', 'sync'
],
"Helper": [
'ri', 'rf', 'clip', 'scale', 'mtof', 'interp', 'pick', 'octave', 'distance', 'average', 'coin'
]
}
function load(name) {
if (LoadLinks.Doc.indexOf(name) >= 0) {
doc(name);
} else if (LoadLinks.Tut.indexOf(name) >= 0) {
tut(name);
} else if (LoadLinks.Helper.indexOf(name) >= 0) {
helper(name);
}
window.scrollTo(0, 0);
document.getElementById("target").scrollTop = 0
}
var menuOpen = false;
function toggleSidebar(on) {
if (on || on == false) {
menuOpen = !on;
}
if (menuOpen) {
$("#sidebar").removeClass("menuOpen")
$("#sidebar").addClass("menuClosed")
menuOpen = false;
} else {
$("#sidebar").removeClass("menuClosed")
$("#sidebar").addClass("menuOpen")
menuOpen = true;
}
}
</script>
<style>
body {
font-family: 'Muli', helvetica;
padding: 0;
margin: 0;
width: 100%;
user-select: #000 !important;
}
#menu-tab {
display: none;
}
#sidebar {
position: fixed;
height: 100%;
top: 0px;
overflow: auto;
width: 225px;
padding: 10px 15px 15px;
box-sizing: border-box;
z-index: 5;
}
#tutorial {
margin-left: 225px;
}
#target {
width: 100%;
}
h1,
h2,
h3 {
line-height: 1em;
padding: 0;
font-weight: 700;
}
h1 {
margin: 20px 0px 5px;
}
h2 {
margin: 20px 0px 5px;
font-size: 20px;
}
h3 {
margin: 10px 0px 5px;
font-size: 16px;
}
#sidebar a {
line-height: 1.3em;
color: #555;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#tutorial a {
line-height: 1.3em;
color: #09d;
text-decoration: none;
}
#tutorial a:hover {
text-decoration: underline;
}
/* Doc Tutorial Entry */
.tutorial {
margin-left: 225px;
padding: 0px 20px;
height: 100%;
overflow: auto;
box-sizing: border-box;
font-weight: 400;
font-size: 15px;
}
.tutorial .overview {
padding-bottom: 20px;
}
.tutorial #demo {
margin-top: 10px;
}
.tutorial h2 {
font-size: 35px;
}
.tutorial h3 {
font-size: 30px;
}
.tutorial h4 {
font-size: 25px;
margin: 35px 0px 10px;
}
.tutorial h5 {
font-size: 20px;
margin: 20px 0px 10px;
}
/*
.tutorial .output, .tutorial .properties, .tutorial .codepen {
border-top: solid 0px #ccc;
margin-top:30px;
padding:30px 0px 0px;
} */
.tutorial .properties {
padding: 0px 0px 0px;
}
.tutorial .property-name,
.tutorial .method-name {
font-weight: 700;
padding: 0px 20px 0px 0px;
font-size: 17px;
display: inline-block;
}
.tutorial .property-type,
.tutorial .method-type {
display: inline-block;
font-style: italic;
color: #aaa;
}
.tutorial .property-description,
.tutorial .method-description {
padding: 5px 0px;
font-size: 15px;
color: #333;
letter-spacing: 0.2px;
}
.tutorial .property-example,
.tutorial .method-example {
padding: 20px;
display: none;
}
.tutorial .property,
.tutorial .method {
border: solid 1px #555;
padding: 10px 20px;
border-left-width: 1px;
margin: 20px 0px;
border-bottom: none;
border-right: none;
position: relative;
}
.tutorial .example-toggle {
position: absolute;
top: 0px;
right: 0px;
border: solid 1px #555;
color: #333;
padding: 3px 6px;
font-size: 11px;
border-top: none;
cursor: pointer;
}
.tutorial .example-toggle:hover {
background-color: #eee;
}
.custom-tutorial pre {
padding: 0px 25px;
}
.custom-tutorial h3 {
margin-top: 30px;
}
[nexus-ui] {
display: inline-block;
}
/* Getting Started section*/
.lib-overview {
font-size: 13pt;
}
#intro h5 {
margin-top: 35px;
font-size: 20pt;
}
@media (max-width: 730px) {
body {
height: auto;
}
#menu-tab {
background-color: #000;
color: #fff;
text-align: left;
padding: 20px 20px;
overflow: auto;
cursor: pointer;
display: block;
position: fixed;
top: 0px;
right: 0px;
width: 100%;
height: 32px;
}
#menu-tab img {
float: right;
}
#sidebar {
width: 100%;
position: absolute;
top: 70px;
padding-bottom: 100px;
/* display:none; */
overflow: auto;
height: 100%;
background-color: white;
z-index: 3;
}
#sidebar a,
#sidebar h2,
#sidebar h3 {
font-size: 120%;
}
#tutorial {
margin-left: 0px;
margin-top: 70px;
}
.menuClosed {
display: none;
}
.menuOpen {
display: block;
}
}
</style>
<script>
window.scrollTo(0, 0);
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-42209714-3', 'auto');
ga('send', 'pageview');
</script>
</html>