mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-10 05:54:20 +00:00
new examples
This commit is contained in:
Yotam Mann
parent
1b722a27b1
commit
607ce15c4b
24 changed files with 1109 additions and 680 deletions
|
|
@ -2,20 +2,17 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BUSES</title>
|
||||
<title>Buses</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/prism.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
|
|
@ -23,81 +20,123 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<div id="Explanation">
|
||||
Buses
|
||||
<br>
|
||||
<br>
|
||||
Buses allow you to send signal using named sends and receives. Sometimes
|
||||
this is advantageous over directly connecting nodes for modularity and loose coupling.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="KeyRack">
|
||||
<div id="Keyboard"></div>
|
||||
<div id="Title">Buses</div>
|
||||
<div id="Explanation">
|
||||
Buses make it easy to share effects across many instruments. <code>send</code>
|
||||
audio to a named bus from an instrument and then <code>receive</code> that
|
||||
channel on your effect.
|
||||
</div>
|
||||
<div id="Rack"></div>
|
||||
<div id="CodeBlock"></div>
|
||||
<div id="Sliders"></div>
|
||||
<div id="Keyboard"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
//the dry signal which goes to the master output
|
||||
var dry = Tone.context.createGain()
|
||||
.toMaster();
|
||||
<script type="text/javascript">
|
||||
|
||||
//the synth
|
||||
var synth = new Tone.MonoSynth()
|
||||
.setPreset("Barky")
|
||||
.connect(dry);
|
||||
var synth = new Tone.SimpleSynth().toMaster()
|
||||
.set("envelope.attack", 0.04);
|
||||
|
||||
//need to force the single channel synth
|
||||
//signal a stereo signal for the the chorus
|
||||
var mono = new Tone.Mono();
|
||||
synth.connect(mono);
|
||||
|
||||
var chorusSend = mono.send("chorus", 0);
|
||||
var chebySend = synth.send("cheby", 0);
|
||||
var autowahSend = synth.send("autowah", 0);
|
||||
//send audio to each of the effect channels
|
||||
var chorusSend = synth.send("chorus", -Infinity);
|
||||
var chebySend = synth.send("cheby", -Infinity);
|
||||
var autowahSend = synth.send("autowah", -Infinity);
|
||||
var reverbSend = synth.send("reverb", -Infinity);
|
||||
|
||||
//make some effects
|
||||
var chorus = new Tone.Chorus()
|
||||
.receive("chorus")
|
||||
.setPreset("Ether")
|
||||
.toMaster();
|
||||
|
||||
var cheby = new Tone.Chebyshev(50)
|
||||
.receive("cheby")
|
||||
.toMaster();
|
||||
|
||||
var reverb = new Tone.Freeverb(0.9, 4000)
|
||||
.receive("reverb")
|
||||
.toMaster();
|
||||
|
||||
var autoWah = new Tone.AutoWah()
|
||||
.receive("autowah")
|
||||
.setPreset("Talker")
|
||||
.toMaster();
|
||||
.toMaster()
|
||||
.set({
|
||||
"baseFrequency" : 100,
|
||||
"octaves" : 4,
|
||||
"sensitivity" : 0,
|
||||
"Q" : 2,
|
||||
"gain" : 10,
|
||||
"follower" : {
|
||||
"attack" : 0.05,
|
||||
"release" : 0.2
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script id="gui" type="text/javascript">
|
||||
<script id="GUI" type="text/javascript">
|
||||
$(function(){
|
||||
Notone.config({
|
||||
"search" : false,
|
||||
"expandInDrawer" : true,
|
||||
"hideDrawer" : Interface.isMobile,
|
||||
"drawer" : true,
|
||||
"container" : "body"
|
||||
});
|
||||
|
||||
Notone.add(synth);
|
||||
|
||||
new Interface.Slider({
|
||||
name : "Chebyshev",
|
||||
parent : $("#Sliders"),
|
||||
drag : function(val){
|
||||
chebySend.gain.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
new Interface.Slider({
|
||||
name : "Chorus",
|
||||
parent : $("#Sliders"),
|
||||
drag : function(val){
|
||||
chorusSend.gain.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
new Interface.Slider({
|
||||
name : "Freeverb",
|
||||
parent : $("#Sliders"),
|
||||
drag : function(val){
|
||||
reverbSend.gain.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
new Interface.Slider({
|
||||
name : "AutoWah",
|
||||
parent : $("#Sliders"),
|
||||
drag : function(val){
|
||||
autowahSend.gain.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* the keyboard
|
||||
*/
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: $("#Content").width(),
|
||||
height: 150,
|
||||
octaves: Interface.isMobile ? 1.26 : 3,
|
||||
startNote: "C3",
|
||||
whiteKeyColour: "white",
|
||||
blackKeyColour: "#f5871f",
|
||||
activeColour : "#1EDF3E"
|
||||
});
|
||||
|
||||
keyboard.keyDown = function (note, frequency) {
|
||||
synth.triggerAttack(frequency);
|
||||
};
|
||||
|
||||
keyboard.keyUp = function () {
|
||||
synth.triggerRelease();
|
||||
};
|
||||
|
||||
Interface.Rack("KeyRack", "MonoSynth");
|
||||
Interface.Rack("Rack", "Sends");
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: $("#KeyRack").width(),
|
||||
height: 75,
|
||||
octaves : 3,
|
||||
startNote: "A2",
|
||||
});
|
||||
keyboard.keyDown = function(note, freq){
|
||||
synth.triggerAttack(freq);
|
||||
};
|
||||
keyboard.keyUp = function(){
|
||||
synth.triggerRelease();
|
||||
};
|
||||
Interface.HorizontalSlider("Rack", dry, "gain", 0, 1, 2).label = "dry";
|
||||
var chorusSlider = Interface.HorizontalSlider("Rack", chorusSend, "gain");
|
||||
var chebySlider = Interface.HorizontalSlider("Rack", chebySend, "gain");
|
||||
var autoSlider = Interface.HorizontalSlider("Rack", autowahSend, "gain");
|
||||
chorusSlider.label = "chorus";
|
||||
chebySlider.label = "chebyshev";
|
||||
autoSlider.label = "autowah";
|
||||
chorusSlider.draw();
|
||||
chebySlider.draw();
|
||||
autoSlider.draw();
|
||||
Interface.Code("CodeBlock", "ToneCode");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,11 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/prism.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
|
|
@ -23,54 +20,124 @@
|
|||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
[nx="button"] {
|
||||
height: 120px;
|
||||
width: 50%;
|
||||
img {
|
||||
width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
#Envelope {
|
||||
width: 50%!important;
|
||||
|
||||
.y {
|
||||
float: left;
|
||||
height: 290px!important;
|
||||
}
|
||||
|
||||
#Sliders {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.Button {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
ADSR Envelope
|
||||
<br>
|
||||
<br>
|
||||
Click the button to trigger the attack/decay portion of the envelope.
|
||||
Let go of the button to trigger the release.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Rack">
|
||||
<div id="Title">Envelope</div>
|
||||
<div id="Explanation">
|
||||
Envelopes ramp amplitude, frequency or any other parameter over time. Tone.Envelope and the classes that extend it
|
||||
implement an <a href="https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope" target="_blank">ADSR</a> envelope type
|
||||
which splits its ramp into four distinct phases: Attack, Decay, Sustain, Release.
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg">
|
||||
</div>
|
||||
<div id="CodeBlock"></div>
|
||||
<div id="Sliders"></div>
|
||||
</div>
|
||||
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
var env = new Tone.AmplitudeEnvelope({
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.02,
|
||||
"attack" : 0.11,
|
||||
"decay" : 0.21,
|
||||
"sustain" : 0.09,
|
||||
"release" : 1.2
|
||||
}).toMaster();
|
||||
|
||||
var osc = new Tone.Oscillator(440, "square")
|
||||
.connect(env)
|
||||
.start();
|
||||
//create an oscillator and connect it to the envelope
|
||||
var osc = new Tone.Oscillator({
|
||||
"type" : "triangle",
|
||||
"frequency" : "C#4",
|
||||
"volume" : -8,
|
||||
}).connect(env).start();
|
||||
|
||||
//just so it's not soo loud.
|
||||
osc.volume.value = -6;
|
||||
</script>
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
Interface.Rack("Rack", "Envelope");
|
||||
Interface.Momentary("Rack", function(down){
|
||||
if (down){
|
||||
env.triggerAttack();
|
||||
} else {
|
||||
env.triggerRelease();
|
||||
}
|
||||
$(function(){
|
||||
Notone.config({
|
||||
"search" : false,
|
||||
"expandInDrawer" : true,
|
||||
"hideDrawer" : Interface.isMobile,
|
||||
"drawer" : true,
|
||||
"container" : "body"
|
||||
});
|
||||
|
||||
var oscGUI = Notone.add(osc, "Oscillator");
|
||||
|
||||
var envGUI = Notone.add(env, "Envelope");
|
||||
|
||||
console.log($("#Sliders").get(0));
|
||||
|
||||
new Interface.Slider({
|
||||
param : "attack",
|
||||
name : "attack",
|
||||
parent : $("#Sliders"),
|
||||
gui : envGUI,
|
||||
min : 0.005,
|
||||
max : 0.5,
|
||||
exp : 2,
|
||||
});
|
||||
|
||||
new Interface.Slider({
|
||||
param : "decay",
|
||||
name : "decay",
|
||||
parent : $("#Sliders"),
|
||||
gui : envGUI,
|
||||
min : 0.005,
|
||||
max : 1,
|
||||
exp : 2,
|
||||
});
|
||||
|
||||
new Interface.Slider({
|
||||
param : "release",
|
||||
name : "release",
|
||||
parent : $("#Sliders"),
|
||||
gui : envGUI,
|
||||
min : 0.2,
|
||||
max : 2,
|
||||
exp : 2,
|
||||
});
|
||||
|
||||
new Interface.Slider({
|
||||
param : "sustain",
|
||||
name : "sustain",
|
||||
gui : envGUI,
|
||||
axis : "y",
|
||||
min : 0.0,
|
||||
max : 1,
|
||||
exp : 2,
|
||||
});
|
||||
|
||||
new Interface.Button({
|
||||
text : "Trigger Attack",
|
||||
activeText : "Trigger Release",
|
||||
key : 32, //spacebar
|
||||
start : function(){
|
||||
env.triggerAttack();
|
||||
},
|
||||
end : function(){
|
||||
env.triggerRelease();
|
||||
},
|
||||
});
|
||||
});
|
||||
var envGroup = Interface.Group($("<div>").appendTo("#Rack"), "Envelope");
|
||||
Interface.AmplitudeEnvelope(envGroup, env);
|
||||
Interface.Code("CodeBlock", "ToneCode");
|
||||
</script>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/ExampleList.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
|
|
@ -19,11 +19,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="Content">
|
||||
<div id="Title">LFO Effects</div>
|
||||
<div id="Explanation">
|
||||
LFO Effects
|
||||
<br>
|
||||
<br>
|
||||
These effects use an LFO (Low Frequency Oscillator) to modulate one parameter of the effect. Click and drag the dot to change the frequency and depth of the effect.
|
||||
These effects use an LFO (Low Frequency Oscillator) to modulate the effect. Click and drag the dot to change the frequency and depth of the effect.
|
||||
</div>
|
||||
<div id="DragContainer">
|
||||
|
||||
|
|
@ -50,28 +48,23 @@
|
|||
|
||||
//the input oscillators
|
||||
var osc0 = new Tone.Oscillator({
|
||||
"volume" : -6,
|
||||
"type" : "triangle",
|
||||
"volume" : -Infinity,
|
||||
"type" : "square6",
|
||||
"frequency" : "C4"
|
||||
}).connect(panner).start();
|
||||
|
||||
var osc1 = new Tone.Oscillator({
|
||||
"volume" : -6,
|
||||
"type" : "triangle",
|
||||
"volume" : -Infinity,
|
||||
"type" : "square6",
|
||||
"frequency" : "E4"
|
||||
}).connect(filter).start();
|
||||
|
||||
var osc2 = new Tone.Oscillator({
|
||||
"volume" : -6,
|
||||
"type" : "triangle",
|
||||
"volume" : -Infinity,
|
||||
"type" : "square6",
|
||||
"frequency" : "A4"
|
||||
}).connect(tremolo).start();
|
||||
|
||||
//set the volumes to silent initially
|
||||
osc0.volume.value = -Infinity;
|
||||
osc1.volume.value = -Infinity;
|
||||
osc2.volume.value = -Infinity;
|
||||
|
||||
</script>
|
||||
<script id="gui" type="text/javascript">
|
||||
|
||||
|
|
@ -90,7 +83,8 @@
|
|||
|
||||
var filterGUI = Notone.add(filter, "AutoFilter");
|
||||
|
||||
new Interface.Dragger(pannerGUI, {
|
||||
new Interface.Dragger({
|
||||
gui : pannerGUI,
|
||||
x : {
|
||||
param : "frequency",
|
||||
min : 0.1,
|
||||
|
|
@ -109,7 +103,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
new Interface.Dragger(filterGUI, {
|
||||
new Interface.Dragger({
|
||||
gui : filterGUI,
|
||||
x : {
|
||||
param : "frequency",
|
||||
min : 0.1,
|
||||
|
|
@ -128,7 +123,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
new Interface.Dragger(tremoloGUI, {
|
||||
new Interface.Dragger({
|
||||
gui : tremoloGUI,
|
||||
x : {
|
||||
param : "frequency",
|
||||
min : 0.1,
|
||||
|
|
|
|||
|
|
@ -2,99 +2,98 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MONOSYNTH</title>
|
||||
<title>MonoSynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
||||
<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/prism.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
#Amplitude {
|
||||
/*position: relative;*/
|
||||
width: calc(40% - 10px)!important;
|
||||
}
|
||||
#FilterEnvelope {
|
||||
/*position: relative;*/
|
||||
width: calc(60% - 10px)!important;
|
||||
}
|
||||
.FilterEnvelope.Envelope {
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
.Envelope {
|
||||
width: 100%!important;
|
||||
}
|
||||
img {
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#Keyboard {
|
||||
margin: 3px!important;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
MonoSynth
|
||||
<br>
|
||||
<br>
|
||||
MonoSynth is a monophonic synthesizer composed simply of one oscillator and one filter each with their own independent envelope.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="KeyRack">
|
||||
<div id="Keyboard"></div>
|
||||
<div id="Title">MonoSynth</div>
|
||||
<div id="Explanation">
|
||||
Tone.MonoSynth is composed of one oscillator, one filter, and two envelopes.
|
||||
Both envelopes are triggered simultaneously when a note is triggered.
|
||||
<img src="https://docs.google.com/drawings/d/1gaY1DF9_Hzkodqf8JI1Cg2VZfwSElpFQfI94IQwad38/pub?w=924&h=240">
|
||||
</div>
|
||||
<div id="Oscillator"></div>
|
||||
<div id="Envelope">
|
||||
<div id="Amplitude"></div>
|
||||
<div id="FilterEnvelope"></div>
|
||||
</div>
|
||||
<div id="Filter"></div>
|
||||
<div id="Presets"></div>
|
||||
<div id="Keyboard"></div>
|
||||
</div>
|
||||
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
var synth = new Tone.MonoSynth().toMaster();
|
||||
<script type="text/javascript">
|
||||
|
||||
var synth = new Tone.MonoSynth({
|
||||
"oscillator" : {
|
||||
"type" : "square"
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.2,
|
||||
"sustain" : 0.4,
|
||||
"release" : 0.2,
|
||||
}
|
||||
}).toMaster();
|
||||
|
||||
</script>
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
$(function(){
|
||||
Notone.config({
|
||||
"search" : false,
|
||||
"expandInDrawer" : true,
|
||||
"hideDrawer" : Interface.isMobile,
|
||||
"drawer" : true,
|
||||
"container" : "body"
|
||||
});
|
||||
|
||||
Notone.add(synth);
|
||||
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: $("#Content").width(),
|
||||
height: 150,
|
||||
octaves: Interface.isMobile ? 1.26 : 3,
|
||||
startNote: "C3",
|
||||
whiteKeyColour: "white",
|
||||
blackKeyColour: "#1EDF3E",
|
||||
activeColour : "#3833ED"
|
||||
});
|
||||
|
||||
keyboard.keyDown = function (note, frequency) {
|
||||
synth.triggerAttack(frequency);
|
||||
};
|
||||
|
||||
keyboard.keyUp = function () {
|
||||
synth.triggerRelease();
|
||||
};
|
||||
|
||||
Interface.Rack("KeyRack", "Keyboard", true).open();
|
||||
//the keyboard
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: $("#KeyRack").width(),
|
||||
height: 75,
|
||||
octaves : 3,
|
||||
startNote: "A2",
|
||||
});
|
||||
keyboard.keyDown = function(note, freq){
|
||||
synth.triggerAttack(freq);
|
||||
};
|
||||
keyboard.keyUp = function(){
|
||||
synth.triggerRelease();
|
||||
};
|
||||
|
||||
//the oscillator
|
||||
Interface.Rack("Oscillator", "Oscillator", true);
|
||||
Interface.DropDown("Oscillator", synth.oscillator, "type", ["sine", "square", "triangle", "sawtooth", "pwm", "pulse"]).listen();
|
||||
//the envelopes
|
||||
Interface.Rack("Envelope", "Envelopes", true);
|
||||
var ampGroup = Interface.Group("Amplitude", "Amplitude");
|
||||
Interface.AmplitudeEnvelope(ampGroup, synth.envelope).listen();
|
||||
var filtGroup = Interface.Group("FilterEnvelope", "Filter");
|
||||
Interface.FilterEnvelope(filtGroup, synth.filterEnvelope).listen();
|
||||
Interface.Rack("Filter", "Filter", true);
|
||||
var type = Interface.DropDown("Filter", synth.filter, "type", ["lowpass", "highpass", "bandpass"]).listen();
|
||||
var Q = Interface.Slider("Filter", synth.filter, "Q", 0.1, 20);
|
||||
Interface.Rack("Presets", "Presets", true);
|
||||
Interface.Presets("Presets", synth);
|
||||
|
||||
</script>
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
|
|
@ -25,10 +25,8 @@
|
|||
}
|
||||
</style>
|
||||
<div id="Content">
|
||||
<div id="Title">Noise</div>
|
||||
<div id="Explanation">
|
||||
Noise
|
||||
<br>
|
||||
<br>
|
||||
Tone has 3 different types of noise. Careful, it's loud!
|
||||
</div>
|
||||
<div id="DragContainer"></div>
|
||||
|
|
@ -53,7 +51,8 @@
|
|||
|
||||
var noiseGUI = Notone.add(noise, "Noise");
|
||||
|
||||
new Interface.Dragger(noiseGUI, {
|
||||
new Interface.Dragger({
|
||||
gui : noiseGUI,
|
||||
y : {
|
||||
param : "volume",
|
||||
min : -40,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
|
|
@ -20,10 +20,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="Content">
|
||||
<div id="Title">Oscillator</div>
|
||||
<div id="Explanation">
|
||||
Oscillator
|
||||
<br>
|
||||
<br>
|
||||
Click and drag the dot to hear the oscillator. The x-axis controls the freqency of the oscillator and the y-axis controls the amplitude.
|
||||
</div>
|
||||
<div id="DragContainer"></div>
|
||||
|
|
@ -46,10 +44,11 @@
|
|||
|
||||
var oscGUI = Notone.add(osc, "Oscillator");
|
||||
|
||||
new Interface.Dragger(oscGUI, {
|
||||
new Interface.Dragger({
|
||||
gui: oscGUI,
|
||||
x : {
|
||||
param : "frequency",
|
||||
min : 20,
|
||||
min : 40,
|
||||
max : 2000,
|
||||
exp : 2
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/p5.js"></script>
|
||||
<script type="text/javascript" src="../build/p5.Tone.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.js"></script>
|
||||
<script type="text/javascript" src="http://cdn.tonejs.org/r4/Tone.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
|
|
@ -19,12 +19,14 @@
|
|||
|
||||
var player;
|
||||
|
||||
p5.prototype.registerPreloadMethod(Tone.Buffer.load);
|
||||
|
||||
function preload(){
|
||||
player = new Tone.Player("./audio/FWDL.mp3");
|
||||
player = new Tone.Player("./A1.mp3").toMaster();
|
||||
}
|
||||
|
||||
function setup(){
|
||||
console.log("setup");
|
||||
player.start();
|
||||
}
|
||||
|
||||
function draw(){
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,12 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/prism.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
|
|
@ -21,47 +19,70 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<div id="Explanation">
|
||||
Player
|
||||
<br>
|
||||
<br>
|
||||
Press "on" to hear a grain from the player. Change the start and end points of the grain by adjusting the range slider.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="LoadingBar"></div>
|
||||
<div id="Rack"></div>
|
||||
<div id="Code"></div>
|
||||
<div id="Title">Grains</div>
|
||||
<div id="Explanation">
|
||||
Click on the dragger to play a grain from the Tone.Player. A grain is a short, looped
|
||||
piece of audio. When the loop becomes very small, it takes on another pitch value. Drag
|
||||
the circle to the bottom to hear this. The x-axis controls the starting position of the loop,
|
||||
and the y-axis controls the grain size.
|
||||
</div>
|
||||
<div id="DragContainer"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
//muted until you click
|
||||
Tone.Master.volume.value = -Infinity;
|
||||
|
||||
//the player
|
||||
var player = new Tone.Player("./audio/casio/A1.mp3")
|
||||
.toMaster();
|
||||
//loop setting
|
||||
player.loop = true;
|
||||
player.loopStart = 0.1;
|
||||
player.loopEnd = 0.11;
|
||||
var player = new Tone.Player({
|
||||
"url" : "./audio/casio/A1.mp3",
|
||||
"loop" : true,
|
||||
"loopStart" : 0.201,
|
||||
"loopEnd" : 0.211,
|
||||
"autostart" : true
|
||||
}).toMaster();
|
||||
</script>
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
var duration = 2.521655328798186;
|
||||
Interface.Loading("LoadingBar");
|
||||
Interface.Toggle("Rack", function(on){
|
||||
if (on){
|
||||
player.start();
|
||||
} else {
|
||||
player.stop();
|
||||
}
|
||||
});
|
||||
Interface.Rack("Rack", "Player");
|
||||
var range = Interface.Range("Rack", function(data){
|
||||
player.loopStart = data.start * duration;
|
||||
player.loopEnd = data.stop * duration;
|
||||
});
|
||||
range.label = "grain";
|
||||
range.val.start = duration * player.loopStart;
|
||||
range.val.stop = duration * player.loopEnd;
|
||||
range.draw();
|
||||
Interface.Code("Code", "ToneCode");
|
||||
$(function(){
|
||||
Notone.config({
|
||||
"search" : false,
|
||||
"expandInDrawer" : true,
|
||||
"hideDrawer" : Interface.isMobile,
|
||||
"drawer" : true,
|
||||
"container" : "body"
|
||||
});
|
||||
|
||||
var playerGUI = Notone.add(player, "player", ["loopStart", "loopEnd"]);
|
||||
|
||||
new Interface.Dragger({
|
||||
gui: playerGUI,
|
||||
x : {
|
||||
param : "loopStart",
|
||||
min : 0.1,
|
||||
max : 1,
|
||||
},
|
||||
y : {
|
||||
min : 0.003,
|
||||
max : 0.5,
|
||||
exp : 4,
|
||||
value : player.loopEnd - player.loopStart,
|
||||
drag : function(y){
|
||||
//loopStart
|
||||
playerGUI.set({
|
||||
"loopStart" : player.loopStart,
|
||||
"loopEnd" : player.loopStart + y,
|
||||
});
|
||||
}
|
||||
},
|
||||
start : function(){
|
||||
Tone.Master.volume.rampTo(0, 0.05);
|
||||
},
|
||||
end : function(){
|
||||
Tone.Master.volume.rampTo(-Infinity, 0.05);
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
79
examples/polySynth.html
Normal file
79
examples/polySynth.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PolySynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
|
||||
#Content {
|
||||
width: calc(100% - 6px)!important;
|
||||
max-width: calc(100% - 6px)!important;
|
||||
}
|
||||
|
||||
#Keyboard {
|
||||
margin: 3px!important;
|
||||
}
|
||||
</style>
|
||||
<div id="Content">
|
||||
<div id="Title">PolySynth</div>
|
||||
<div id="Explanation">
|
||||
Tone.PolySynth handles voice creation and allocation for any
|
||||
instruments passed in as the second paramter. PolySynth is
|
||||
not a synthesizer by itself, it merely manages voices of
|
||||
one of the other types of synths, allowing any of the
|
||||
monophonic synthesizers to be polyphonic.
|
||||
</div>
|
||||
<div id="Keyboard"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var synth = new Tone.PolySynth(6, Tone.SimpleSynth).toMaster();
|
||||
|
||||
</script>
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
$(function(){
|
||||
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: $("#Content").width(),
|
||||
height: 150,
|
||||
octaves: Interface.isMobile ? 1.26 : 3,
|
||||
startNote: "C3",
|
||||
whiteKeyColour: "white",
|
||||
blackKeyColour: "#7F33ED",
|
||||
activeColour : "#ED3333"
|
||||
});
|
||||
|
||||
keyboard.keyDown = function (note) {
|
||||
synth.triggerAttack(note);
|
||||
};
|
||||
|
||||
keyboard.keyUp = function (note) {
|
||||
synth.triggerRelease(note);
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
/* globals Tone, nx */
|
||||
/* globals Tone */
|
||||
|
||||
//nexusUI setup
|
||||
// nx.showLabels = true;
|
||||
// nx.colorize("accent", "#D76767");
|
||||
// nx.colorize("fill", "#fff");
|
||||
// nx.colorize("border", "#000");
|
||||
|
||||
var dragContainer = "#DragContainer";
|
||||
|
||||
var Interface = {
|
||||
isMobile : false
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* INIT
|
||||
*
|
||||
*/
|
||||
$(function(){
|
||||
var topbar = $("<div>").attr("id", "TopBar");
|
||||
$("body").prepend(topbar);
|
||||
|
|
@ -30,7 +29,7 @@ $(function(){
|
|||
Interface.isMobile = true;
|
||||
$("body").addClass("Mobile");
|
||||
var element = $("<div>", {"id" : "MobileStart"}).appendTo("body");
|
||||
var button = $("<div>").attr("id", "Button")
|
||||
$("<div>").attr("id", "Button")
|
||||
.text("\u25B6")
|
||||
.on("touchstart", function(e){
|
||||
e.preventDefault();
|
||||
|
|
@ -59,9 +58,6 @@ $(function(){
|
|||
}
|
||||
update();
|
||||
}
|
||||
|
||||
//subtract the explaination from the dragger container
|
||||
$(dragContainer).height($(dragContainer).height() - $("#Explanation").height());
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -86,206 +82,360 @@ Interface.Code = function(container, codeID){
|
|||
};
|
||||
|
||||
|
||||
Interface.Dragger = function(gui, params){
|
||||
|
||||
this.container = $(dragContainer);
|
||||
/**
|
||||
*
|
||||
*
|
||||
* DRAGGER
|
||||
*
|
||||
*/
|
||||
Interface.Dragger = function(params){
|
||||
|
||||
this.gui = gui;
|
||||
if ($("#DragContainer").length === 0){
|
||||
$("<div>", {
|
||||
"class" : "DragContainer"
|
||||
}).appendTo(params.parent || "#Content");
|
||||
}
|
||||
|
||||
this.container = $("#DragContainer");
|
||||
|
||||
/**
|
||||
* the gui
|
||||
*/
|
||||
this.gui = params.gui;
|
||||
|
||||
/**
|
||||
* callbacks
|
||||
*/
|
||||
this.start = params.start;
|
||||
|
||||
this.end = params.end;
|
||||
|
||||
this.drag = params.drag;
|
||||
|
||||
/**
|
||||
* the name
|
||||
*/
|
||||
var name = params.name || this.gui ? this.gui.name : "";
|
||||
|
||||
/**
|
||||
* elements
|
||||
*/
|
||||
this.element = $("<div>", {
|
||||
"class" : "Dragger",
|
||||
"id" : this.gui.name
|
||||
}).appendTo(dragContainer)
|
||||
"id" : name
|
||||
}).appendTo(this.container)
|
||||
.on("dragMove", this._ondrag.bind(this))
|
||||
.on("touchstart mousedown", params.start)
|
||||
.on("mouseup touchend", params.end);
|
||||
.on("touchstart mousedown", this._onstart.bind(this))
|
||||
.on("dragEnd touchend mouseup", this._onend.bind(this));
|
||||
|
||||
this.name = $("<div>", {
|
||||
"id" : "Name",
|
||||
"text" : this.gui.name
|
||||
"text" : name
|
||||
}).appendTo(this.element);
|
||||
|
||||
this.xaxis = $("<div>", {
|
||||
"id" : "xAxis",
|
||||
"class" : "Axis"
|
||||
}).appendTo(this.container);
|
||||
|
||||
this.yaxis = $("<div>", {
|
||||
"id" : "yAxis",
|
||||
"class" : "Axis"
|
||||
}).appendTo(this.container);
|
||||
|
||||
this.halfSize = this.element.width() / 2;
|
||||
|
||||
this.top = this.container.offset().top + 40;
|
||||
|
||||
this.left = this.container.offset().left;
|
||||
this.element.draggabilly({
|
||||
"axis" : this.axis,
|
||||
"containment": this.container
|
||||
});
|
||||
|
||||
/**
|
||||
* the parameters
|
||||
* x slider
|
||||
*/
|
||||
if (params.x){
|
||||
var xParams = params.x;
|
||||
xParams.axis = "x";
|
||||
xParams.element = this.element;
|
||||
xParams.gui = this.gui;
|
||||
xParams.container = this.container;
|
||||
this.xAxis = new Interface.Slider(xParams);
|
||||
|
||||
if (typeof params.x === "string"){
|
||||
this.xParam = params.x;
|
||||
//default values
|
||||
this.xMin = 0;
|
||||
this.xMax = 1;
|
||||
this.xExp = 1;
|
||||
} else if (typeof params.x === "object"){
|
||||
this.xParam = params.x.param;
|
||||
this.xMin = typeof params.x.min === "undefined" ? 0 : params.x.min;
|
||||
this.xMax = typeof params.x.max === "undefined" ? 1 : params.x.max;
|
||||
this.xExp = typeof params.x.exp === "undefined" ? 1 : params.x.exp;
|
||||
if (params.x.options){
|
||||
this.xOptions = params.x.options;
|
||||
this.xMin = 0;
|
||||
this.xMax = this.xOptions.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
//set the original position
|
||||
var width = this.container.width() - this.element.width();
|
||||
var xParamVal = this.gui.params[this.xParam].get();
|
||||
if (this.xOptions){
|
||||
xParamVal = this.xOptions.indexOf(xParamVal);
|
||||
}
|
||||
var left = (xParamVal - this.xMin) / (this.xMax - this.xMin);
|
||||
left = Math.pow(left, 1 / this.xExp) * width;
|
||||
this.element.css("left", left);
|
||||
this.xaxis.css("left",left + this.halfSize);
|
||||
|
||||
if (this.xOptions){
|
||||
this._setParam(this.xParam, this.xOptions[xParamVal]);
|
||||
} else {
|
||||
this._setParam(this.xParam, xParamVal);
|
||||
}
|
||||
} else {
|
||||
this.xParam = false;
|
||||
}
|
||||
|
||||
if (params.y){
|
||||
|
||||
if (typeof params.y === "string"){
|
||||
this.yParam = params.y;
|
||||
//default values
|
||||
this.yMin = 0;
|
||||
this.yMax = 1;
|
||||
this.yExp = 1;
|
||||
} else {
|
||||
this.yParam = params.y.param;
|
||||
this.yMin = typeof params.y.min === "undefined" ? 0 : params.y.min;
|
||||
this.yMax = typeof params.y.max === "undefined" ? 1 : params.y.max;
|
||||
this.yExp = typeof params.y.exp === "undefined" ? 1 : params.y.exp;
|
||||
if (params.y.options){
|
||||
this.yOptions = params.y.options;
|
||||
this.yMin = 0;
|
||||
this.yMax = this.yOptions.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
var height = this.container.height() - this.element.height();
|
||||
var yParamVal = this.gui.params[this.yParam].get();
|
||||
if (this.yOptions){
|
||||
yParamVal = this.yOptions.indexOf(yParamVal);
|
||||
}
|
||||
var top = (yParamVal - this.yMin) / (this.yMax - this.yMin);
|
||||
top = Math.pow(1 - top, 1 / this.yExp) * height;
|
||||
this.element.css("top", top);
|
||||
this.yaxis.css("top", top + this.halfSize);
|
||||
|
||||
if (this.yOptions){
|
||||
this._setParam(this.yParam, this.yOptions[yParamVal]);
|
||||
} else {
|
||||
this._setParam(this.yParam, yParamVal);
|
||||
}
|
||||
} else {
|
||||
this.yParam = false;
|
||||
}
|
||||
|
||||
if (!(this.yParam && this.xParam)){
|
||||
var axis = "x";
|
||||
if (this.yParam){
|
||||
axis = "y";
|
||||
}
|
||||
this.element.draggabilly({
|
||||
"axis" : axis,
|
||||
"containment": dragContainer
|
||||
});
|
||||
} else {
|
||||
this.element.draggabilly({
|
||||
"containment": dragContainer
|
||||
});
|
||||
}
|
||||
/**
|
||||
* y slider
|
||||
*/
|
||||
var yParams = params.y;
|
||||
yParams.axis = "y";
|
||||
yParams.element = this.element;
|
||||
yParams.gui = this.gui;
|
||||
yParams.container = this.container;
|
||||
this.yAxis = new Interface.Slider(yParams);
|
||||
|
||||
//set the axis indicator
|
||||
var position = this.element.position();
|
||||
this.halfSize = this.xAxis.halfSize;
|
||||
this.xAxis.axisIndicator.css("top", position.top + this.halfSize);
|
||||
this.yAxis.axisIndicator.css("left", position.left + this.halfSize);
|
||||
};
|
||||
|
||||
Interface.Dragger.prototype._ondrag = function(e, pointer){
|
||||
var normX = (pointer.pageX - this.left) / this.container.width();
|
||||
var normY = (pointer.pageY - this.top) / this.container.height();
|
||||
normX = Math.pow(normX, this.xExp);
|
||||
normY = 1 - Math.pow(normY, this.yExp);
|
||||
var resX = normX * (this.xMax - this.xMin) + this.xMin;
|
||||
var resY = normY * (this.yMax - this.yMin) + this.yMin;
|
||||
|
||||
var xVal = resX;
|
||||
if (this.xOptions){
|
||||
xVal = this.xOptions[Math.round(resX)];
|
||||
if (this.drag){
|
||||
this.drag();
|
||||
}
|
||||
|
||||
var yVal = resY;
|
||||
if (this.yOptions){
|
||||
yVal = this.yOptions[Math.round(resY)];
|
||||
}
|
||||
|
||||
this._setParam(this.xParam, xVal);
|
||||
this._setParam(this.yParam, yVal);
|
||||
//set the line positions
|
||||
this.xAxis._ondrag(e, pointer);
|
||||
this.yAxis._ondrag(e, pointer);
|
||||
var position = this.element.position();
|
||||
this.xaxis.css("left", position.left + this.halfSize);
|
||||
this.yaxis.css("top", position.top + this.halfSize);
|
||||
this.xAxis.axisIndicator.css("top", position.top + this.halfSize);
|
||||
this.yAxis.axisIndicator.css("left", position.left + this.halfSize);
|
||||
};
|
||||
|
||||
Interface.Dragger.prototype._setParam = function(param, value){
|
||||
if (param){
|
||||
this.gui.params[param].set(value);
|
||||
Interface.Dragger.prototype._onstart = function(e){
|
||||
if (this.start){
|
||||
this.start();
|
||||
}
|
||||
this.xAxis._onstart(e);
|
||||
this.yAxis._onstart(e);
|
||||
};
|
||||
|
||||
Interface.Dragger.prototype._onend = function(e){
|
||||
if (this.end){
|
||||
this.end();
|
||||
}
|
||||
this.xAxis._onend(e);
|
||||
this.yAxis._onend(e);
|
||||
var position = this.element.position();
|
||||
this.xAxis.axisIndicator.css("top", position.top + this.halfSize);
|
||||
this.yAxis.axisIndicator.css("left", position.left + this.halfSize);
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* SLIDER
|
||||
*
|
||||
*/
|
||||
Interface.Slider = function(params){
|
||||
|
||||
this.gui = params.gui;
|
||||
|
||||
var name = params.name ? params.name : this.gui ? this.gui.name : "";
|
||||
|
||||
/**
|
||||
* callback functions
|
||||
*/
|
||||
this.start = params.start;
|
||||
|
||||
this.end = params.end;
|
||||
|
||||
this.drag = params.drag;
|
||||
|
||||
/**
|
||||
* the axis indicator
|
||||
*/
|
||||
this.axis = params.axis || "x";
|
||||
|
||||
if (!params.element){
|
||||
|
||||
this.container = $("<div>", {
|
||||
"class" : "Slider "+this.axis,
|
||||
}).appendTo(params.parent || "#Content");
|
||||
|
||||
this.element = $("<div>", {
|
||||
"class" : "Dragger",
|
||||
"id" : name
|
||||
}).appendTo(this.container)
|
||||
.on("dragMove", this._ondrag.bind(this))
|
||||
.on("touchstart mousedown", this._onstart.bind(this))
|
||||
.on("dragEnd touchend mouseup", this._onend.bind(this));
|
||||
|
||||
this.name = $("<div>", {
|
||||
"id" : "Name",
|
||||
"text" : name
|
||||
}).appendTo(this.element);
|
||||
|
||||
this.element.draggabilly({
|
||||
"axis" : this.axis,
|
||||
"containment": this.container.get(0)
|
||||
});
|
||||
} else {
|
||||
this.element = params.element;
|
||||
|
||||
this.container = params.container;
|
||||
}
|
||||
|
||||
this.axisIndicator = $("<div>", {
|
||||
"id" : this.axis + "Axis",
|
||||
"class" : "Axis"
|
||||
}).appendTo(this.container);
|
||||
|
||||
/**
|
||||
* the initial value / position
|
||||
*/
|
||||
this.parameter = params.param || false;
|
||||
//default values
|
||||
this.min = typeof params.min === "undefined" ? 0 : params.min;
|
||||
this.max = typeof params.max === "undefined" ? 1 : params.max;
|
||||
this.exp = typeof params.exp === "undefined" ? 1 : params.exp;
|
||||
if (params.options){
|
||||
this.options = params.options;
|
||||
this.min = 0;
|
||||
this.max = this.options.length - 1;
|
||||
this.exp = params.exp || 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* cache some measurements for later
|
||||
*/
|
||||
this.halfSize = this.element.width() / 2;
|
||||
this.top = this.container.offset().top;
|
||||
this.left = this.container.offset().left;
|
||||
|
||||
this.maxAxis = this.axis === "x" ? "width" : "height";
|
||||
this.posAxis = this.axis === "x" ? "left" : "top";
|
||||
this.oppositeAxis = this.axis === "x" ? "top" : "left";
|
||||
|
||||
/**
|
||||
* initial value
|
||||
*/
|
||||
if (this.parameter || typeof params.value !== "undefined"){
|
||||
|
||||
var maxSize = this.container[this.maxAxis]() - this.element[this.maxAxis]();
|
||||
|
||||
//y gets inverted
|
||||
if (this.axis === "y"){
|
||||
maxSize = this.container[this.maxAxis]() - maxSize;
|
||||
}
|
||||
|
||||
var paramValue = typeof params.value !== "undefined" ? params.value : this.gui.params[this.parameter].get();
|
||||
|
||||
if (this.options){
|
||||
paramValue = this.options.indexOf(paramValue);
|
||||
}
|
||||
|
||||
var pos = (paramValue - this.min) / (this.max - this.min);
|
||||
pos = Math.pow(pos, 1 / this.exp) * (maxSize );
|
||||
this.element.css(this.posAxis, pos);
|
||||
|
||||
if (this.options){
|
||||
this._setParam(this.options[paramValue]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Slider.prototype._ondrag = function(e, pointer){
|
||||
var normPos;
|
||||
if (this.axis === "x"){
|
||||
var xVal = Math.max((pointer.pageX - this.left), 0);
|
||||
normPos = xVal / (this.container.width());
|
||||
} else {
|
||||
var yVal = Math.max((pointer.pageY - this.top ), 0);
|
||||
normPos = yVal / (this.container.height());
|
||||
normPos = 1 - normPos;
|
||||
}
|
||||
normPos = Math.pow(normPos, this.exp);
|
||||
|
||||
var result = normPos * (this.max - this.min) + this.min;
|
||||
|
||||
result = Math.max(Math.min(this.max, result), this.min);
|
||||
|
||||
var value = result;
|
||||
|
||||
if (this.options){
|
||||
value = this.options[Math.round(result)];
|
||||
}
|
||||
|
||||
if (this.drag){
|
||||
this.drag(value);
|
||||
}
|
||||
|
||||
this._setParam(value);
|
||||
};
|
||||
|
||||
Interface.Slider.prototype._onstart = function(e){
|
||||
e.preventDefault();
|
||||
if (this.start){
|
||||
this.start();
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Slider.prototype._onend = function(){
|
||||
if (this.end){
|
||||
this.end();
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Slider.prototype._setParam = function(value){
|
||||
if (this.parameter && this.gui){
|
||||
this.gui.params[this.parameter].set(value);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* A Slider
|
||||
*
|
||||
* BUTTON
|
||||
*
|
||||
*/
|
||||
Interface.Slider = function(gui, params){
|
||||
this.container = $(dragContainer);
|
||||
Interface.Button = function(params){
|
||||
|
||||
this.gui = gui;
|
||||
this.activeText = params.activeText || false;
|
||||
|
||||
this.text = params.text || "Button";
|
||||
|
||||
this.element = $("<div>", {
|
||||
"class" : "Dragger",
|
||||
"id" : this.gui.name
|
||||
}).appendTo(dragContainer)
|
||||
.on("dragMove", this._ondrag.bind(this))
|
||||
.on("touchstart mousedown", params.start)
|
||||
.on("mouseup touchend", params.end);
|
||||
"class" : "Button",
|
||||
"text" : this.text
|
||||
}).appendTo(params.parent || "#Content")
|
||||
.on("mousedown touchstart", this._start.bind(this))
|
||||
.on("mouseup touchend", this._end.bind(this));
|
||||
|
||||
this.name = $("<div>", {
|
||||
"id" : "Name",
|
||||
"text" : this.gui.name
|
||||
}).appendTo(this.element);
|
||||
/**
|
||||
* the button state
|
||||
*/
|
||||
this.active = false;
|
||||
|
||||
this.xaxis = $("<div>", {
|
||||
"id" : "xAxis",
|
||||
"class" : "Axis"
|
||||
}).appendTo(this.container);
|
||||
/**
|
||||
* callbacks
|
||||
*/
|
||||
this.start = params.start;
|
||||
this.end = params.end;
|
||||
|
||||
this.yaxis = $("<div>", {
|
||||
"id" : "yAxis",
|
||||
"class" : "Axis"
|
||||
}).appendTo(this.container);
|
||||
/**
|
||||
* key presses
|
||||
*/
|
||||
if (params.key){
|
||||
this.key = params.key;
|
||||
$(window).on("keydown", this._keydown.bind(this));
|
||||
$(window).on("keyup", this._keyup.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Button.prototype._start = function(){
|
||||
if (!this.active){
|
||||
this.active = true;
|
||||
this.element.addClass("Active");
|
||||
if (this.activeText){
|
||||
this.element.text(this.activeText);
|
||||
}
|
||||
if (this.start){
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Button.prototype._end = function(){
|
||||
if (this.active){
|
||||
this.active = false;
|
||||
this.element.removeClass("Active");
|
||||
this.element.text(this.text);
|
||||
if (this.end){
|
||||
this.end();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Button.prototype._keydown = function(e){
|
||||
if (e.which === this.key){
|
||||
e.preventDefault();
|
||||
this._start();
|
||||
}
|
||||
};
|
||||
|
||||
Interface.Button.prototype._keyup = function(e){
|
||||
if (e.which === this.key){
|
||||
e.preventDefault();
|
||||
this._end();
|
||||
}
|
||||
};
|
||||
|
||||
this.halfSize = this.element.width() / 2;
|
||||
|
||||
this.top = this.container.offset().top + 40;
|
||||
|
||||
this.left = this.container.offset().left;
|
||||
};
|
||||
4
examples/scripts/jquery.min.js
vendored
Normal file
4
examples/scripts/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
|
||||
|
|
@ -20,35 +20,67 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="Content">
|
||||
<div id="Title">Audio-Rate Math</div>
|
||||
<div id="Explanation">
|
||||
Audio-Rate Math
|
||||
<br>
|
||||
<br>
|
||||
One of the most powerful features of Tone.js is the ability to
|
||||
perform math and logic on audio-rate signal. Signals
|
||||
can be ramped and scheduled to control Audio Parameters and
|
||||
other Signals making it simple to create elaborate,
|
||||
interconnected automations. Additionally, Signals and Signal maths use no
|
||||
ScriptProcessorNodes which make them very efficient.
|
||||
interconnected automations.
|
||||
<br><br>
|
||||
This example applies a series of mappings to the original
|
||||
signal value and applies the results of those mappings
|
||||
to the frequency attribute of 3 sawtooth oscillators.
|
||||
</div>
|
||||
<div id="DragContainer"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
//the driving signal
|
||||
var signal = new Tone.Signal(0);
|
||||
<script type="text/javascript">
|
||||
//initially muted
|
||||
Tone.Master.mute = true;
|
||||
|
||||
//take the absolute value of the signal
|
||||
var abs = new Tone.Abs();
|
||||
//use this to pan the two oscillators hard left/right
|
||||
var merge = new Tone.Merge().toMaster();
|
||||
|
||||
//add a constant value to the dry signal
|
||||
var adder = new Tone.Add(100);
|
||||
//two oscillators panned hard left / hard right
|
||||
var rightOsc = new Tone.Oscillator({
|
||||
"type" : "sawtooth",
|
||||
"volume" : -20
|
||||
}).connect(merge.right).start();
|
||||
|
||||
var leftOsc = new Tone.Oscillator({
|
||||
"type" : "square",
|
||||
"volume" : -20
|
||||
}).connect(merge.left).start();
|
||||
|
||||
//create an oscillation that goes from 0 to 1200
|
||||
//connection it to the detune of the two oscillators
|
||||
var detuneLFO = new Tone.LFO({
|
||||
"type" : "square",
|
||||
"min" : 0,
|
||||
"max" : 1200
|
||||
}).fan(rightOsc.detune, leftOsc.detune).start();
|
||||
|
||||
//the frequency signal
|
||||
var frequency = new Tone.Signal(0.5);
|
||||
|
||||
//the move the 0 to 1 value into frequency range
|
||||
var scale = new Tone.ScaleExp(110, 440);
|
||||
|
||||
//multiply the output by 10
|
||||
var mult = new Tone.Multiply(10);
|
||||
//multiply the frequency by 2.5 to get a 10th above
|
||||
var mult = new Tone.Multiply(2.5);
|
||||
|
||||
//chain the components together
|
||||
// signal.chain(abs, adder, norm, scaler, mult, clip);
|
||||
frequency.chain(scale, mult);
|
||||
scale.connect(rightOsc.frequency);
|
||||
mult.connect(leftOsc.frequency);
|
||||
|
||||
//multiply the frequency by 2 to get the octave above
|
||||
var detuneScale = new Tone.Scale(14, 4);
|
||||
frequency.chain(detuneScale, detuneLFO.frequency);
|
||||
|
||||
</script>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
|
||||
$(function(){
|
||||
Notone.config({
|
||||
|
|
@ -59,13 +91,31 @@
|
|||
"container" : "body"
|
||||
});
|
||||
|
||||
var signalMeter = Notone.create(Tone.Meter, "signal");
|
||||
signal.connect(signalMeter);
|
||||
var rightOscGUI = Notone.add(rightOsc, "Right Oscillator", ["type"]);
|
||||
|
||||
var signalMeter = Notone.create(Tone.Meter, "signal2");
|
||||
signal.connect(signalMeter);
|
||||
var leftOscGUI = Notone.add(leftOsc, "Left Oscillator", ["type"]);
|
||||
|
||||
})
|
||||
var detuneLFOGUI = Notone.add(detuneLFO, "Detune LFO", ["type"]);
|
||||
|
||||
new Interface.Slider({
|
||||
drag : function(value){
|
||||
frequency.rampTo(value, 0.1);
|
||||
},
|
||||
start : function(){
|
||||
Tone.Master.mute = false;
|
||||
},
|
||||
end: function(){
|
||||
Tone.Master.mute = true;
|
||||
},
|
||||
name : "frequency",
|
||||
min : 0,
|
||||
max : 1,
|
||||
exp : 0.5,
|
||||
value : 0.5,
|
||||
position: 5
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
103
examples/simpleSynth.html
Normal file
103
examples/simpleSynth.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SimpleSynth</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
||||
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
||||
<script type="text/javascript" src="./scripts/qwerty-hancock.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
// jshint ignore: start
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<style type="text/css">
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#Keyboard {
|
||||
margin: 3px!important;
|
||||
}
|
||||
</style>
|
||||
<div id="Content">
|
||||
<div id="Title">SimpleSynth</div>
|
||||
<div id="Explanation">
|
||||
<a href="http://tonejs.org/docs/#SimpleSynth" target="_blank">Tone.SimpleSynth</a> is composed simply of a
|
||||
<a href="http://tonejs.org/docs/#OmniOscillator" target="_blank">Tone.OmniOscillator</a>
|
||||
routed through a
|
||||
<a href="http://tonejs.org/docs/#AmplitudeEnvelope" target="_blank">Tone.AmplitudeEnvelope</a>.
|
||||
<img src="https://docs.google.com/drawings/d/1-1_0YW2Z1J2EPI36P8fNCMcZG7N1w1GZluPs4og4evo/pub?w=1163&h=231">
|
||||
</div>
|
||||
<div id="Keyboard"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var synth = new Tone.SimpleSynth({
|
||||
"oscillator" : {
|
||||
"type" : "square"
|
||||
},
|
||||
"envelope" : {
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.2,
|
||||
"sustain" : 0.4,
|
||||
"release" : 0.2,
|
||||
}
|
||||
}).toMaster();
|
||||
|
||||
</script>
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
$(function(){
|
||||
Notone.config({
|
||||
"search" : false,
|
||||
"expandInDrawer" : true,
|
||||
"expandChildren" : true,
|
||||
"hideDrawer" : Interface.isMobile,
|
||||
"drawer" : true,
|
||||
"container" : "body"
|
||||
});
|
||||
|
||||
Notone.add(synth);
|
||||
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: $("#Content").width(),
|
||||
height: 150,
|
||||
octaves: Interface.isMobile ? 1.26 : 2,
|
||||
startNote: "C4",
|
||||
whiteKeyColour: "white",
|
||||
blackKeyColour: "#22DBC0",
|
||||
hoverColour: "#1EDF3E",
|
||||
activeColour : "#ED33CF"
|
||||
});
|
||||
|
||||
keyboard.keyDown = function (note, frequency) {
|
||||
synth.triggerAttack(frequency);
|
||||
};
|
||||
|
||||
keyboard.keyUp = function () {
|
||||
synth.triggerRelease();
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script type="text/javascript" src="../build/Tone.js"></script>
|
||||
<script type="text/javascript" src="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
|
||||
<script type="text/javascript" src="./deps/nexusUI.js"></script>
|
||||
<script type="text/javascript" src="./deps/prism.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,55 @@
|
|||
/**
|
||||
* GLOBAL
|
||||
* COLORS
|
||||
*/
|
||||
/**
|
||||
* SIZING
|
||||
*/
|
||||
canvas {
|
||||
border-radius: 0px !important;
|
||||
margin-top: 5px; }
|
||||
|
||||
/* FOR MOBILES */
|
||||
@media (max-width: 320px) {
|
||||
@media (max-width: 400px) {
|
||||
#TopBar #Homepage a {
|
||||
font-size: 16px !important; }
|
||||
|
||||
#Content {
|
||||
font-size: 10px !important;
|
||||
max-width: 100% !important; }
|
||||
max-width: calc(100% - 32px) !important; }
|
||||
|
||||
#Content * {
|
||||
font-size: 10px !important; } }
|
||||
body {
|
||||
margin: 0px; }
|
||||
font-size: 14px !important; } }
|
||||
html, body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
height: calc(100% - 4px); }
|
||||
|
||||
#Explanation {
|
||||
font-family: monospace;
|
||||
background-color: #D0D0D0;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
margin: 10px;
|
||||
width: calc(100% - 4 * 10px); }
|
||||
#NotoneDrawer {
|
||||
top: 40.5px;
|
||||
z-index: 2; }
|
||||
|
||||
#Explanation a {
|
||||
color: black;
|
||||
font-family: monospace;
|
||||
font-size: 14px; }
|
||||
.Notone {
|
||||
z-index: 3 !important; }
|
||||
|
||||
/* TOP BAR */
|
||||
/**
|
||||
*
|
||||
* TOP BAR
|
||||
*
|
||||
*/
|
||||
#TopBar {
|
||||
background-color: black;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
height: 34.5px;
|
||||
margin: 3px;
|
||||
position: relative;
|
||||
width: calc(100% - 2 * 10px);
|
||||
width: calc(100% - 2 * 3px);
|
||||
font-family: monospace; }
|
||||
#TopBar #Homepage {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
line-height: 34.5px;
|
||||
color: white; }
|
||||
#TopBar #Homepage a {
|
||||
line-height: inherit;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
text-transform: none;
|
||||
|
|
@ -56,14 +57,16 @@ body {
|
|||
margin-left: 0px; }
|
||||
#TopBar #Examples {
|
||||
left: 50%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 34.5px;
|
||||
line-height: 34.5px;
|
||||
position: absolute; }
|
||||
#TopBar #Examples a {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-ms-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-transform: none;
|
||||
|
|
@ -73,7 +76,7 @@ body {
|
|||
width: 50px;
|
||||
height: calc(100% - 10px);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 3px;
|
||||
top: 5px; }
|
||||
#TopBar #Meter .Level {
|
||||
height: 100%;
|
||||
|
|
@ -108,208 +111,126 @@ body {
|
|||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px; }
|
||||
#MobileStart #Button:hover {
|
||||
background-color: #7F33ED;
|
||||
color: white; }
|
||||
#MobileStart #Button:hover:active {
|
||||
background-color: #ED33CF;
|
||||
color: #22DBC0; }
|
||||
|
||||
.Mobile #Content {
|
||||
width: calc(100% - 28px); }
|
||||
|
||||
#Content {
|
||||
font-family: monospace;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
width: 75%;
|
||||
min-width: 300px;
|
||||
max-width: 640px;
|
||||
height: auto;
|
||||
/**
|
||||
* NX STUFF
|
||||
*/
|
||||
/**
|
||||
* THE RACK
|
||||
*/
|
||||
/**
|
||||
* GROUP
|
||||
*/
|
||||
/**
|
||||
* CODE BLOCK
|
||||
*/
|
||||
/**
|
||||
* ENVELOPE
|
||||
*/
|
||||
/**
|
||||
* LOADING BAR
|
||||
*/
|
||||
/**
|
||||
* METER
|
||||
*/
|
||||
/**
|
||||
* DROP DOWN
|
||||
*/
|
||||
/**
|
||||
* STEP SEQUENCER
|
||||
*/ }
|
||||
#Content [nx="slider"] {
|
||||
width: 100%;
|
||||
height: 20px; }
|
||||
#Content [nx="range"] {
|
||||
width: 100%;
|
||||
height: 20px; }
|
||||
#Content [nx="toggle"] {
|
||||
width: 100%;
|
||||
height: 40px; }
|
||||
#Content .Rack {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: #D0D0D0;
|
||||
border: 10px solid #D0D0D0;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
width: calc(100% - 280px);
|
||||
margin-bottom: 15px; }
|
||||
#Content #Title {
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
width: calc(100% - padding);
|
||||
padding-left: 15px;
|
||||
background-color: black; }
|
||||
#Content #Explanation {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box; }
|
||||
#Content .Rack .Title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0px 0 5px;
|
||||
background-color: black;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-align: center; }
|
||||
#Content .Rack.Collapsible .Title:after {
|
||||
content: "\25B2";
|
||||
position: absolute;
|
||||
right: 5px; }
|
||||
#Content .Rack.Collapsible.Expanded .Title:after {
|
||||
transform: rotate(-180deg); }
|
||||
#Content .Rack.Collapsible {
|
||||
overflow: hidden;
|
||||
height: 40px; }
|
||||
#Content .Rack.Collapsible.Expanded {
|
||||
height: auto; }
|
||||
#Content .Group {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: inherit;
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
display: inline-block; }
|
||||
#Content .Group #Label {
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
background-color: inherit;
|
||||
font-size: 10px;
|
||||
color: black;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: -5px;
|
||||
text-align: center; }
|
||||
#Content .Code {
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
padding: 15px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
/*padding: $Margin;*/
|
||||
/*line-height: ;*/
|
||||
background-color: #F2F2F2; }
|
||||
#Content .Envelope {
|
||||
height: 120px;
|
||||
width: 100px; }
|
||||
#Content .Envelope [nx="slider"] {
|
||||
width: calc(25% - 11px);
|
||||
margin: 5px;
|
||||
height: calc(100% - 10px); }
|
||||
#Content .Envelope #Labels {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
margin-top: -4px; }
|
||||
#Content .Envelope #Labels .Label {
|
||||
text-transform: uppercase;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
display: inline-block; }
|
||||
#Content .FilterEnvelope {
|
||||
width: 160px; }
|
||||
#Content .FilterEnvelope [nx="slider"] {
|
||||
width: calc(100% / 6 - 11px);
|
||||
margin: 5px;
|
||||
height: calc(100% - 10px); }
|
||||
#Content .LoadingBar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
transition: all 0.4s; }
|
||||
#Content .LoadingBar #Loader {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background-color: #D0D0D0;
|
||||
transition: width 0.2s; }
|
||||
#Content .Meter {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-top: 5px;
|
||||
position: relative; }
|
||||
#Content .Meter * {
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 100%; }
|
||||
#Content .Meter #Label {
|
||||
left: 0px;
|
||||
width: 60%;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box; }
|
||||
#Content .Meter #Value {
|
||||
right: 0px;
|
||||
width: 40%;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-weight: bold; }
|
||||
#Content .Meter #Units {
|
||||
right: 10px;
|
||||
text-align: right;
|
||||
color: #D0D0D0; }
|
||||
#Content .DropDown {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
margin-top: 5px; }
|
||||
#Content .DropDown * {
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 100%; }
|
||||
#Content .DropDown #Label {
|
||||
left: 0px;
|
||||
width: 60%;
|
||||
background-color: white; }
|
||||
#Content .DropDown select {
|
||||
right: 0px;
|
||||
width: 40%;
|
||||
line-height: 17.5px;
|
||||
text-align: center;
|
||||
font-style: monospace;
|
||||
border-radius: 0px;
|
||||
border: 0px;
|
||||
background-color: black;
|
||||
color: white; }
|
||||
#Content .StepSequencer [nx="matrix"] {
|
||||
border: 3px solid black;
|
||||
border-top-width: 0px;
|
||||
width: 100%; }
|
||||
#Content #Explanation a {
|
||||
color: black;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-decoration: none; }
|
||||
#Content #Explanation a:hover {
|
||||
color: #1EDF3E; }
|
||||
#Content #Explanation a:hover:active {
|
||||
color: #ED33CF; }
|
||||
#Content #DragContainer {
|
||||
margin-left: 3px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 15px;
|
||||
width: calc(100% - 3px);
|
||||
height: 400px;
|
||||
position: relative;
|
||||
color: white; }
|
||||
#Content .Slider.x {
|
||||
position: relative;
|
||||
height: 94px;
|
||||
width: 100%;
|
||||
height: 120px; }
|
||||
|
||||
/*# sourceMappingURL=examples.css.map */
|
||||
margin-top: 3px; }
|
||||
#Content .Slider.x .Axis {
|
||||
top: 50%;
|
||||
margin-top: -1.5px; }
|
||||
#Content .Slider.y {
|
||||
position: relative;
|
||||
width: 94px;
|
||||
height: 400px; }
|
||||
#Content .Slider.y .Axis {
|
||||
left: 50%;
|
||||
margin-left: -1.5px; }
|
||||
#Content .Dragger {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
background-color: black;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
margin-top: -2px;
|
||||
border: 2px solid white;
|
||||
cursor: -webkit-grab; }
|
||||
#Content .Dragger #Name {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
line-height: 90px;
|
||||
color: white; }
|
||||
#Content .Dragger:hover {
|
||||
background-color: #3833ED;
|
||||
color: white; }
|
||||
#Content .Dragger.is-pointer-down {
|
||||
cursor: -webkit-grabbing;
|
||||
background-color: #ED33CF; }
|
||||
#Content .Dragger.is-pointer-down #Name {
|
||||
color: #1EDF3E; }
|
||||
#Content .Axis {
|
||||
position: absolute;
|
||||
background-color: black;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
border-radius: 1.5px;
|
||||
z-index: 0; }
|
||||
#Content #xAxis {
|
||||
width: calc(100% - 6px); }
|
||||
#Content #yAxis {
|
||||
height: calc(100% - 6px); }
|
||||
#Content .Button {
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
height: 90px;
|
||||
background-color: black;
|
||||
line-height: 90px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
#Content .Button:hover {
|
||||
color: white;
|
||||
background-color: #3833ED; }
|
||||
#Content .Button.Active {
|
||||
color: #22DBC0;
|
||||
background-color: #ED33CF; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue