diff --git a/css/bounce.css b/css/bounce.css
index 5be45c5..5c9b247 100644
--- a/css/bounce.css
+++ b/css/bounce.css
@@ -197,16 +197,27 @@ button#btn-drums-1 {
}
/*** MACHINE DATA ***/
-#machineData {
+#machine-data {
margin: 10px 0 8px;
color: #ED4A82;
- font-family: sans-serif;
+ font-family: Verdana, sans-serif;
+}
+
+#machine-state {
+ position: relative;
+ top: -1px;
+ color: #fff;
+ font-family: Verdana, sans-serif;
+ font-size: 10px;
+ font-style: italic;
}
#logo-container {
position: fixed;
- top: 15px;
- right: 10vw;
+ /* top: 15px; */
+ top: 213px;
+ /* right: 350px; */
+ left: 55px;
}
#logo-container .logo {
display: inline-block;
@@ -220,7 +231,7 @@ button#btn-drums-1 {
opacity: 0;
animation: fade-in 2.0s 1;
animation-fill-mode: forwards;
- animation-delay: 3s;
+ animation-delay: 6s;
/* animation-delay: 1s; */
}
@@ -228,3 +239,12 @@ button#btn-drums-1 {
from {opacity: 0;}
to {opacity: 1;}
}
+
+
+.nsc-content-camera-container {
+ margin: 0 0 0 200px;
+}
+
+.nsc-content-camera {
+ background: transparent;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 62cf163..b8e21a4 100644
--- a/index.html
+++ b/index.html
@@ -44,11 +44,11 @@
-
+
diff --git a/src/js/Input.js b/src/js/Input.js
index 69fed01..66d12c5 100644
--- a/src/js/Input.js
+++ b/src/js/Input.js
@@ -247,22 +247,23 @@ function updateChord({ add = null, remove = null }) {
let humanKeyAdds = [],
humanKeyRemovals = [];
function humanKeyDown(note, velocity = 0.7) {
- // console.log('(humanKeyDown) -> note: ', note);
+ console.log('(humanKeyDown) -> note: ', note);
// console.log('(humanKeyDown) -> velocity: ', velocity);
if (note < MIN_NOTE || note > MAX_NOTE) return;
updateChord({ add: note });
// if (note === 60) { // C4
- if (note === 72) { // C5
+ // if (note === 72) { // C5
+ if (note === 72 || note === 67) { // C5, G5
globals.machineTrigger = true;
} else {
humanKeyAdds.push({ note, velocity });
- globals.machineTrigger = false;
+ // globals.machineTrigger = false;
}
- // if (note === 71) {
- // globals.machineTrigger = false;
- // }
+ if (note === 71) { // High B
+ globals.machineTrigger = false;
+ }
}
function humanKeyUp(note, timestampLength) {
@@ -276,10 +277,14 @@ function humanKeyUp(note, timestampLength) {
instrMapped.color = '#64b5f6'; // med blue
// instrMapped.length = timestampLength;
+ // console.log({timestampLength});
+ const maxNoteLength = 500;
+ timestampLength = timestampLength > maxNoteLength ? maxNoteLength : timestampLength;
instrMapped.length = timestampLength / 1000; // IMPORTANT - so length is in milliseconds
// if (note !== 60) {
- if (note !== 72) {
+ // if (note !== 72 && note !== 71) {
+ if (note !== 72 && note !== 71 && note !== 67) { // High G, B, C
physics.addBody(true, globals.dropPosX, instrMapped);
}
@@ -290,7 +295,10 @@ function humanKeyUp(note, timestampLength) {
function machineKeyDown(note = 60, time = 0) {
// console.log('(machineKeyDown) -> note: ', note);
// console.log('(machineKeyDown) -> time: ', time);
- if (note < MIN_NOTE || note > MAX_NOTE) return;
+
+ // const TEMP_MIN_NOTE = 60; // C4
+ const TEMP_MIN_NOTE = 64; // E4
+ if (note < TEMP_MIN_NOTE || note > MAX_NOTE) return;
let tonalNote = Tonal.Note.fromMidi(note);
let instrMapped = getInstrByInputNote(tonalNote);
@@ -304,12 +312,13 @@ function machineKeyDown(note = 60, time = 0) {
}
if (instrMapped === undefined) {
- instrMapped = getInstrByInputNote('C4');
+ // instrMapped = getInstrByInputNote('C4');
+ } else {
+ // console.log('(machineKeyDown) -> instrMapped: ', instrMapped);
+ instrMapped.color = '#ED4A82'; // pink
+ physics.addBody(true, globals.dropPosX, instrMapped);
}
- // console.log('(machineKeyDown) -> instrMapped: ', instrMapped);
- instrMapped.color = '#ED4A82'; // pink
- physics.addBody(true, globals.dropPosX, instrMapped);
}
function buildNoteSequence(seed) {
@@ -417,7 +426,7 @@ function startSequenceGenerator(seed) {
// console.log('(startSequenceGenerator) -> generatedSequence: ', generatedSequence);
let launchWaitTime = getSequenceLaunchWaitTime(seed); // returns 1 or 0.3
- launchWaitTime = 0;
+ launchWaitTime = 0.1;
let playIntervalTime = getSequencePlayIntervalTime(seed); // 0.25
let generationIntervalTime = playIntervalTime / 2;
@@ -478,7 +487,7 @@ function updateUI(machineSequence) {
globals.ui.machine.currentSequence = machineSequence;
}
}
-let machineDataId = document.getElementById('machineData');
+let machineDataId = document.getElementById('machine-data');
setInterval(() => {
if (globals.ui) {
if (globals.ui.machine.currentSequence.length > 0) {
@@ -495,10 +504,22 @@ setInterval(() => {
if (mappedNotes.length > 6) {
mappedNotes.length = 6;
}
- machineDataId.innerHTML = mappedNotes.join(', ');
+
+ if (globals.machineTrigger === true) {
+ machineDataId.innerHTML = mappedNotes.join(', ');
+ } else {
+ machineDataId.innerHTML = '';
+ }
+ }
+
+ let machineStateId = document.getElementById('machine-state');
+ if (globals.machineTrigger === true) {
+ machineStateId.innerHTML = '- ON';
+ } else {
+ machineStateId.innerHTML = '- OFF';
}
}
-}, 1000);
+}, 500);
function generateDummySequence(seed = SEED_DEFAULT) {
const sequence = rnn.continueSequence(
diff --git a/src/js/Physics.js b/src/js/Physics.js
index 06a955e..658db0d 100644
--- a/src/js/Physics.js
+++ b/src/js/Physics.js
@@ -44,7 +44,7 @@ export default class Physics {
// this.addSpinner();
}
- initGroundContactMaterial(restitutionValue = 0.3, posArr=[0, -6, 0], sizeArr=[1500, 20, 5]) {
+ initGroundContactMaterial(restitutionValue = 0.3, posArr=[0, -6, 0], sizeArr=[2500, 20, 5]) {
//TODO: add colored ground on contact here
//http://schteppe.github.io/cannon.js/docs/classes/ContactMaterial.html
// const groundShape = new CANNON.Plane(); // invisible plane across entire screen
diff --git a/src/js/app.js b/src/js/app.js
index 123e1af..9166194 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -435,7 +435,7 @@ let animate = () => {
// console.log(globals.camera);
} else {
// globals.camera.position.x = (globals.ticks) - 30; // 0.3, 0.2
- globals.camera.position.x = (globals.ticks) - 20;
+ globals.camera.position.x = (globals.ticks) - 25;
}
}