From 988e90cd203511a089a1b98e9f68f6fac24d192b Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Sat, 2 Nov 2019 21:04:14 -0400 Subject: [PATCH 01/22] autoScroll = false prep work for spinner rect --- README.md | 2 +- src/js/Physics.js | 72 +++++++++++++++++++++++------------------------ src/js/Trigger.js | 2 +- src/js/app.js | 23 ++++++++------- src/js/globals.js | 5 ++-- 5 files changed, 51 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index 67112d7..ffd178c 100644 --- a/README.md +++ b/README.md @@ -22,4 +22,4 @@ https://www.youtube.com/watch?v=8QR59RP-Z_8 - Neural Drum Machine: https://codepen.io/teropa/pen/JLjXGK - Neural Melody Autocompletion: https://codepen.io/teropa/pen/gvwwZL - Performance RNN: https://magenta.tensorflow.org/performance-rnn -- Magenta demo: https://magenta.tensorflow.org/demos +- Magenta demos: https://magenta.tensorflow.org/demos diff --git a/src/js/Physics.js b/src/js/Physics.js index 6d3550d..fc58674 100644 --- a/src/js/Physics.js +++ b/src/js/Physics.js @@ -35,7 +35,8 @@ export default class Physics { const groundShape = new CANNON.Plane(); const groundMaterial = new CANNON.Material(); //http://schteppe.github.io/cannon.js/docs/classes/Material.html const groundBody = new CANNON.Body({ mass: 0, material: groundMaterial }); - groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); + // groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); //PREV - causes balls to crazily spin off canvas + groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI); groundBody.addShape(groundShape); globals.world.add(groundBody); @@ -125,11 +126,13 @@ export default class Physics { // https://codepen.io/danlong/pen/LJQYYN zPos += 10; // see globals.staffLineInitZ and globals.staffLineSecondZ } else { - // zPos -= 10; //PREV zPos -= 3; //PREV + // zPos = 0; } // zPos = options.originalPosition.z; + console.log({zPos}); + // console.log({xPos}); body.position.set((sphere) ? -xPos : xPos, yPos, zPos); body.linearDamping = globals.damping; @@ -374,9 +377,6 @@ export default class Physics { material.color = defaultColor; const ground = new THREE.Mesh(geometry, material); - // ground.scale.set(100, 100, 100); // ORIG ground aka floor size - // ground.scale.set(100, 6, 100); //PREV - ground.scale.set(500, 6, 100); //PREV ground.name = 'groundMesh'; @@ -548,41 +548,39 @@ export default class Physics { // globals.lastColor = globals.activeInstrColor; //remove? if (globals.configColorAnimate === true) { - //TODO: fix activeInstrColor by simpifying nested forEach calls // console.log('globals.scene.children -> ', globals.scene.children); - - globals.scene.children.forEach((child) => { - if (child.name && child.name === 'physicsParent') { - child.children.forEach((child) => { - if (child.name && child.name === 'groundPlane') { - child.children.forEach((child) => { - child.children.forEach((child) => { - if (child.name && child.name === 'groundMesh') { - if (globals.groundMeshIncrementer % 10 === 0) { - const tempColor = globals.activeInstrColor.substr(0, 1) === '#' ? globals.activeInstrColor.slice(1, globals.activeInstrColor.length) : 0x191CAC; - const intColor = parseInt('0x' + tempColor, 16); - - if (globals.lastColor !== globals.activeInstrColor) { - child.material.color = new THREE.Color(intColor); - - // console.log({child}); //{r: 1, g: 0.5294117647058824, b: 0.16862745098039217} - // console.log({tempColor}); - // console.log({intColor}); - // console.log(globals.lastColor); - } - - globals.lastColor = globals.activeInstrColor; + // globals.scene.children.forEach((child) => { + // if (child.name && child.name === 'physicsParent') { + // child.children.forEach((child) => { + // if (child.name && child.name === 'groundPlane') { + // child.children.forEach((child) => { + // child.children.forEach((child) => { + // if (child.name && child.name === 'groundMesh') { + // if (globals.groundMeshIncrementer % 10 === 0) { + // const tempColor = globals.activeInstrColor.substr(0, 1) === '#' ? globals.activeInstrColor.slice(1, globals.activeInstrColor.length) : 0x191CAC; + // const intColor = parseInt('0x' + tempColor, 16); + + // if (globals.lastColor !== globals.activeInstrColor) { + // child.material.color = new THREE.Color(intColor); + + // // console.log({child}); //{r: 1, g: 0.5294117647058824, b: 0.16862745098039217} + // // console.log({tempColor}); + // // console.log({intColor}); + // // console.log(globals.lastColor); + // } + + // globals.lastColor = globals.activeInstrColor; - } - globals.groundMeshIncrementer++; - } - }); - }); - } - }); - } - }); + // } + // globals.groundMeshIncrementer++; + // } + // }); + // }); + // } + // }); + // } + // }); } // IMPORTANT: cannon.js boilerplate diff --git a/src/js/Trigger.js b/src/js/Trigger.js index 14bf2cc..d89db40 100644 --- a/src/js/Trigger.js +++ b/src/js/Trigger.js @@ -118,7 +118,7 @@ export default class Trigger { let combinedNote = triggerObj.note + triggerObj.octave; // console.log('Trigger -> combinedNote: ', combinedNote); - // console.log('triggerObj: ', triggerObj); + console.log('triggerObj: ', triggerObj); let drumIndex = 0; // TODO: is if else performance causing sound bug? diff --git a/src/js/app.js b/src/js/app.js index 2613325..954f241 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -37,7 +37,7 @@ globals.instr = instrument.getInstrumentMappingTemplate(); const globalBallTextureWidth = 512; const globalCollisionThreshold = 4; //prev: 3.4 -let globalDropPosX = 5.5; +// let globalDropPosX = 5.5; // TODO: remove all globalLetterNumArr calls const globalLetterNumArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG']; //TODO: remove globalLetterNumArr array, only instrumentMapping obj needed @@ -180,7 +180,7 @@ objCenter.position.set(0, 0, globals.posBehindZ); // globals.scene.add(skyboxCubeMesh); //add nightsky skybox -physics.addSpinner(); +// physics.addSpinner(); //-----MUSIC STAFF------// function addStaffLines(color = 0x000000, offset, posXstart, posXend, posY, posZ, innerLinePadding, dashedLines = false, middleC = false) { @@ -395,7 +395,6 @@ let animate = () => { globals.camera.position.x = globals.posBehindX + (globals.ticks); // console.log(globals.camera); } else { - // globals.camera.position.x = (globals.ticks) - 12; // prev, works the (delta * 5) globals.camera.position.x = (globals.ticks) - 30; } } @@ -415,11 +414,11 @@ let animate = () => { } // TODO: readd after webpack setup - var flameRate = globals.clock.getElapsedTime() * 2.0; - // volumetricFire.update(flameRate); - if (globals.flameArr.length > 0) { - globals.flameArr[0].update(flameRate); - } + // var flameRate = globals.clock.getElapsedTime() * 2.0; + // // volumetricFire.update(flameRate); + // if (globals.flameArr.length > 0) { + // globals.flameArr[0].update(flameRate); + // } physics.updateBodies(globals.world); globals.world.step(globals.fixedTimeStep); @@ -450,8 +449,8 @@ window.onload = () => { switch (keyName) { case ('z'): - // physics.addBody(true, globalDropPosX, keyMapped); - // globalDropPosX -= 1.3; + // physics.addBody(true, globals.dropPosX, keyMapped); + // globals.dropPosX -= 1.3; break; default: // console.log('keydown -> DEFAULT...', event); @@ -466,8 +465,8 @@ window.onload = () => { if (keyName === keyMapped.keyInput) { //*** IMPORTANT *** // console.log({keyMapped}); - physics.addBody(true, globalDropPosX, keyMapped); - globalDropPosX -= 1.3; //TODO: how to manipulate Y drop position? + physics.addBody(true, globals.dropPosX, keyMapped); + // globals.dropPosX -= 1.3; //TODO: how to manipulate Y drop position? console.log('keydown -> keyMapped, event: ', keyMapped, event); } else { console.log('keyMapped UNDEF -> else: ', event); diff --git a/src/js/globals.js b/src/js/globals.js index 832172b..7c83753 100644 --- a/src/js/globals.js +++ b/src/js/globals.js @@ -14,7 +14,7 @@ export default { // activeInstrColor: '#d8d8d8', // activeInstrColor: '#00A29C', // teal: https://www.color-hex.com/color-palette/4666 activeInstrColor: '#66b2b2', // lt teal - autoScroll: true, + autoScroll: false, autoStart: false, autoStartTime: 9000, camera: new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000), @@ -25,7 +25,8 @@ export default { controls: '', // controls: new FlyControls(camera), damping: 0.01, - dropPosX: 5.5, + // dropPosX: 5.5, //prev + dropPosX: 0, fixedTimeStep: 1.0 / 60.0, flameArr: [], flameCounter: 0, From 8352d56bbd81b99459f041c46b4631a4be949679 Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Sat, 2 Nov 2019 21:31:08 -0400 Subject: [PATCH 02/22] spinner rotation and collision with balls dropped in center --- src/js/Physics.js | 69 +++++++++++++++++------------------------------ src/js/app.js | 2 -- src/js/globals.js | 2 ++ 3 files changed, 27 insertions(+), 46 deletions(-) diff --git a/src/js/Physics.js b/src/js/Physics.js index fc58674..4f33c09 100644 --- a/src/js/Physics.js +++ b/src/js/Physics.js @@ -35,8 +35,8 @@ export default class Physics { const groundShape = new CANNON.Plane(); const groundMaterial = new CANNON.Material(); //http://schteppe.github.io/cannon.js/docs/classes/Material.html const groundBody = new CANNON.Body({ mass: 0, material: groundMaterial }); - // groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); //PREV - causes balls to crazily spin off canvas - groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI); + groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); + // groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI); // weird 0 zPos drop bug groundBody.addShape(groundShape); globals.world.add(groundBody); @@ -51,6 +51,8 @@ export default class Physics { // this.animate(); this.initContactMaterial(0.3); + + this.addSpinner(); } initContactMaterial(restitutionValue = 0.3) { @@ -224,6 +226,7 @@ export default class Physics { // body.quaternion.z = 0.5; // console.log(body); //TODO: rotate adjust HERE!!! } + } addVisual(body, name, castShadow = true, receiveShadow = true, options = 'Z') { @@ -279,6 +282,7 @@ export default class Physics { addSpinner() { // DRUM MACHINE WHEEL: // https://codepen.io/danlong/pen/LJQYYN?editors=1010 + // FORK: https://codepen.io/sjcobb/pen/vYYpKMv // CANNON (PHYSICS) let boxShape = new CANNON.Box(new CANNON.Vec3(12.25, 0.5, 0.5)); @@ -288,15 +292,16 @@ export default class Physics { fixedRotation: true, }); spinnerBody.addShape(boxShape); - spinnerBody.position.set(0,0.25,0); - spinnerBody.name = 'spinner'; + spinnerBody.position.set(0, 0.25, 0); + // spinnerBody.position.set(0, -25, 0); + spinnerBody.name = 'spinner'; // THREE JS (VISUAL) var geometry = new THREE.BoxBufferGeometry( 24.5, 0.5, 0.5 ); geometry.rotateX(THREE.Math.degToRad(90)); // TODO: animate rotation so rect goes in circle var material = new THREE.MeshBasicMaterial( {color: 0xff0000} ); let spinner = new THREE.Mesh( geometry, material ); - spinner.position.y = 0; + spinner.position.y = 6; // push to meshes & bodies // this.meshes.push(spinner); @@ -305,7 +310,8 @@ export default class Physics { // this.world.addBody(this.spinnerBody); // this.bodies.push(this.spinnerBody); - globals.world.bodies.push(spinnerBody); + globals.meshes.push(spinner); + globals.bodies.push(spinnerBody); globals.scene.add(spinner); globals.world.addBody(spinnerBody); } @@ -544,45 +550,14 @@ export default class Physics { } } - updateBodies(world) { - // globals.lastColor = globals.activeInstrColor; //remove? - - if (globals.configColorAnimate === true) { - //TODO: fix activeInstrColor by simpifying nested forEach calls - // console.log('globals.scene.children -> ', globals.scene.children); - // globals.scene.children.forEach((child) => { - // if (child.name && child.name === 'physicsParent') { - // child.children.forEach((child) => { - // if (child.name && child.name === 'groundPlane') { - // child.children.forEach((child) => { - // child.children.forEach((child) => { - // if (child.name && child.name === 'groundMesh') { - // if (globals.groundMeshIncrementer % 10 === 0) { - // const tempColor = globals.activeInstrColor.substr(0, 1) === '#' ? globals.activeInstrColor.slice(1, globals.activeInstrColor.length) : 0x191CAC; - // const intColor = parseInt('0x' + tempColor, 16); - - // if (globals.lastColor !== globals.activeInstrColor) { - // child.material.color = new THREE.Color(intColor); - - // // console.log({child}); //{r: 1, g: 0.5294117647058824, b: 0.16862745098039217} - // // console.log({tempColor}); - // // console.log({intColor}); - // // console.log(globals.lastColor); - // } - - // globals.lastColor = globals.activeInstrColor; - - // } - // globals.groundMeshIncrementer++; - // } - // }); - // }); - // } - // }); - // } - // }); - } + // updateMeshPositions() { + // for (var i = 0; i !== this.meshes.length; i++) { + // globals.meshes[i].position.copy(this.bodies[i].position); + // globals.meshes[i].quaternion.copy(this.bodies[i].quaternion); + // } + // }, + updateBodies(world) { // IMPORTANT: cannon.js boilerplate // world.bodies.forEach(function(body) { globals.world.bodies.forEach(function(body) { @@ -591,6 +566,12 @@ export default class Physics { body.threemesh.quaternion.copy(body.quaternion); } }); + + // TODO: standard way to update bodies? globals.bodies and globals.meshes shouldn't only be for spinner + for (var i = 0; i !== globals.meshes.length; i++) { + globals.meshes[i].position.copy(globals.bodies[i].position); + globals.meshes[i].quaternion.copy(globals.bodies[i].quaternion); + } } } \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index 954f241..fb10e1b 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -37,8 +37,6 @@ globals.instr = instrument.getInstrumentMappingTemplate(); const globalBallTextureWidth = 512; const globalCollisionThreshold = 4; //prev: 3.4 -// let globalDropPosX = 5.5; - // TODO: remove all globalLetterNumArr calls const globalLetterNumArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG']; //TODO: remove globalLetterNumArr array, only instrumentMapping obj needed diff --git a/src/js/globals.js b/src/js/globals.js index 7c83753..5de6c50 100644 --- a/src/js/globals.js +++ b/src/js/globals.js @@ -37,6 +37,8 @@ export default { keysOnly: true, lastColor: '#000000', loader: new THREE.TextureLoader(), + meshes: [], + bodies: [], multiplierPosX: -2.5, musicActive: false, patternInfinite: false, From 909abf8cb239f475edfbb7b47fe0f0e4c015a468 Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Sat, 2 Nov 2019 23:46:44 -0400 Subject: [PATCH 03/22] add spinnerCollideCount and notePlayed boolean to reduce nonstop sound bug --- src/js/Physics.js | 69 ++++++++++++++++++++++++++++++++++++++--------- src/js/Trigger.js | 3 +++ src/js/globals.js | 1 + 3 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/js/Physics.js b/src/js/Physics.js index 4f33c09..f26c3df 100644 --- a/src/js/Physics.js +++ b/src/js/Physics.js @@ -133,8 +133,6 @@ export default class Physics { } // zPos = options.originalPosition.z; - console.log({zPos}); - // console.log({xPos}); body.position.set((sphere) ? -xPos : xPos, yPos, zPos); body.linearDamping = globals.damping; @@ -172,12 +170,29 @@ export default class Physics { }; this.addVisual(body, (sphere) ? 'sphere' : 'box', true, false, options); + let notePlayed = false; let bodyCollideCount = 0; + let spinnerCollideCount = 0; body.addEventListener('collide', function(ev) { + // console.log('body collide ev: ', ev); // console.log('body collide event: ', ev.body); // console.log('body collide INERTIA: ', ev.body.inertia); // console.log('contact between two bodies: ', ev.contact); // console.log(bodyCollideCount); + if (ev.contact) { + console.log('ev.contact.ni', ev.contact.ni); + // console.log('ev.contact.rj', ev.contact.rj); + // if (ev.contact.ri.y === -0.5) { + // if (ev.contact.rj.x < 0) { + // if (ev.contact.rj.x < -10) { + // if (ev.contact.ri.x === 0) { + // if (ev.contact.rj.z === 0) { + if (ev.contact.ni.x > 0.9) { + console.log('... ...'); + spinnerCollideCount++; + } + bodyCollideCount++; + } if (options.type === 'drum') { // if (bodyCollideCount <= 1) { //play note two times on collide @@ -191,9 +206,14 @@ export default class Physics { // } } } else { //regular spheres - if (bodyCollideCount <= 0) { //play note one time on collide + // if (bodyCollideCount <= 0) { //play note one time on collide + console.log({spinnerCollideCount}); + // + // if (spinnerCollideCount > 0) { + if (spinnerCollideCount === 1 && notePlayed !== true) { // console.log('REGULAR ev: ', ev); trigger.triggerNote(body); + notePlayed = true; } } @@ -206,7 +226,20 @@ export default class Physics { // } // }, 2000); //does not work - bodyCollideCount++; + // if (ev.contact) { + // console.log('ev.contact.ni', ev.contact.ni); + // // console.log('ev.contact.rj', ev.contact.rj); + // // if (ev.contact.ri.y === -0.5) { + // // if (ev.contact.rj.x < 0) { + // // if (ev.contact.rj.x < -10) { + // // if (ev.contact.ri.x === 0) { + // // if (ev.contact.rj.z === 0) { + // if (ev.contact.ni.x > 0.9) { + // console.log('... ...'); + // spinnerCollideCount++; + // } + // bodyCollideCount++; + // } }); const defaultRestitution = 0.3; //bounciness @@ -286,21 +319,27 @@ export default class Physics { // CANNON (PHYSICS) let boxShape = new CANNON.Box(new CANNON.Vec3(12.25, 0.5, 0.5)); - let spinnerBody = new CANNON.Body({ + globals.spinnerBody = new CANNON.Body({ mass: 1000, - angularVelocity: new CANNON.Vec3(0,5,0), + // angularVelocity: new CANNON.Vec3(0, 5 ,0), + angularVelocity: new CANNON.Vec3(0, 8, 0), fixedRotation: true, }); - spinnerBody.addShape(boxShape); - spinnerBody.position.set(0, 0.25, 0); + // console.log(globals.spinnerBody); + globals.spinnerBody.addShape(boxShape); + globals.spinnerBody.position.set(0, 0.25, 0); // spinnerBody.position.set(0, -25, 0); - spinnerBody.name = 'spinner'; + globals.spinnerBody.name = 'spinner'; // THREE JS (VISUAL) - var geometry = new THREE.BoxBufferGeometry( 24.5, 0.5, 0.5 ); + // var geometry = new THREE.BoxBufferGeometry( 24.5, 0.5, 0.5 ); + var geometry = new THREE.BoxBufferGeometry( 16, 0.5, 0.5 ); geometry.rotateX(THREE.Math.degToRad(90)); // TODO: animate rotation so rect goes in circle - var material = new THREE.MeshBasicMaterial( {color: 0xff0000} ); + + // var material = new THREE.MeshBasicMaterial( {color: 0xff0000} ); red + var material = new THREE.MeshBasicMaterial( {color: 0x003366} ); //midnight blue let spinner = new THREE.Mesh( geometry, material ); + console.log({spinner}); spinner.position.y = 6; // push to meshes & bodies @@ -311,9 +350,9 @@ export default class Physics { // this.bodies.push(this.spinnerBody); globals.meshes.push(spinner); - globals.bodies.push(spinnerBody); + globals.bodies.push(globals.spinnerBody); globals.scene.add(spinner); - globals.world.addBody(spinnerBody); + globals.world.addBody(globals.spinnerBody); } shape2Mesh(body, castShadow, receiveShadow, options) { @@ -558,6 +597,10 @@ export default class Physics { // }, updateBodies(world) { + + // globals.spinnerBody.position.set(0, 0.25, 0); + globals.spinnerBody.position.set(0, 0.25 ,0); + // IMPORTANT: cannon.js boilerplate // world.bodies.forEach(function(body) { globals.world.bodies.forEach(function(body) { diff --git a/src/js/Trigger.js b/src/js/Trigger.js index d89db40..389a048 100644 --- a/src/js/Trigger.js +++ b/src/js/Trigger.js @@ -150,7 +150,10 @@ export default class Trigger { // console.log('triggerObj -> chord: ', triggerObj.chord); // polySynth.triggerAttackRelease(triggerObj.chord, '4n'); // polySynth.triggerAttackRelease(combinedNote, '4n'); + console.log(polySynth); polySynth.triggerAttackRelease(combinedNote, '8n'); + // polySynth.unsync(); + // polySynth.dispose(); } else { bounceSynth.triggerAttackRelease(combinedNote, "8n"); // console.log('triggerNote -> ballDesc: ', triggerObj.ballDesc, ', note: ', combinedNote); diff --git a/src/js/globals.js b/src/js/globals.js index 5de6c50..d415288 100644 --- a/src/js/globals.js +++ b/src/js/globals.js @@ -48,6 +48,7 @@ export default { groundMeshIncrementer: 0, renderer: new THREE.WebGLRenderer(), scene: new THREE.Scene(), + spinnerBody: {}, staffLineInitZ: 8, staffLineSecondZ: -8, // showStaticRows: false, // old static animation From c55069ae0b73c9df0d5884c64b8156a2f603dfcf Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Sun, 3 Nov 2019 14:39:06 -0500 Subject: [PATCH 04/22] cleanup ui index.html, simplify styles for settings-container toggle --- css/bounce.css | 45 +++++++++++++----- index.html | 55 ++------------------- src/js/Input.js | 2 +- src/js/audio.js | 8 ++-- src/js/globals.js | 2 +- src/js/ui.js | 118 +++++++++++++++++++++++----------------------- webpack.config.js | 1 + 7 files changed, 102 insertions(+), 129 deletions(-) diff --git a/css/bounce.css b/css/bounce.css index 0d67c56..0e55d44 100644 --- a/css/bounce.css +++ b/css/bounce.css @@ -23,20 +23,21 @@ canvas { #controls-container { /* display: none; */ position: absolute; - top: 30px; - right: 0; - left: 5px; + top: 0; + left: 0; width: 200px; margin: 0; - padding: 8px; - background-color: rgba(160, 160, 160, 0.55); + padding: 0; color: #fff; text-align: center; - z-index: 1; + z-index: 10; } #settings-container { display: block; + padding: 10px 5px 0; + /* background: rgba(204, 204, 204, 0.3); */ + background-color: rgba(255, 255, 255, 0.2); } #settings-container.hidden { @@ -45,10 +46,23 @@ canvas { /* display: block; */ } +.toggle-wrapper { + margin: 0 0 0; +} button#settings-toggle-btn { - margin: 0 0 20px; + margin: 0 0 0; padding: 5px 10px; font-size: 16px; + color: #fff; + /* background-color: rgba(0, 0, 0, 0.30); */ + background-color: rgba(255, 255, 255, 0.2); + border: none; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} +button#settings-toggle-btn:hover { + /* background-color: rgba(0, 0, 0, 0.90); */ + background-color: rgba(255, 255, 255, 0.3); } button#settings-toggle-btn.hidden-active { @@ -67,27 +81,31 @@ button { button#bounce, .play { display: inline-block; - margin: auto 3px 30px auto; + margin: auto 3px 10px auto; padding: 6px 8px; background: none; font: 14px/1 Verdana, Geneva, sans-serif; letter-spacing: 1.2px; - color: #003366; - border: 1px solid #003366; + color: #fff; + border: 1px solid #fff; + /* color: #003366; */ + /* border: 1px solid #003366; */ text-transform: uppercase; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } -.play span.fa { +span.fa-headphones { padding: 0 5px 0 3px; } button#bounce:hover, .play:hover { - background: #003366; - color: #fff; + /* background: #003366; */ + /* color: #fff; */ + background: #fff; + color: #003366; } button#bounce { @@ -127,6 +145,7 @@ button#bounce { position: absolute; left: 0; right: 0; + z-index: 9; } #legend-container.pos-top-left { margin: 0; diff --git a/index.html b/index.html index 56b9112..cf212b7 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,9 @@ - - - @@ -20,10 +17,6 @@ - - - -

  • HUMAN

  • AI

    • - -
@@ -112,7 +66,6 @@ - diff --git a/src/js/Input.js b/src/js/Input.js index 79338f8..03ae485 100644 --- a/src/js/Input.js +++ b/src/js/Input.js @@ -146,7 +146,7 @@ function onActiveInputChange(id) { if (input) { input.addListener('noteon', 1, e => { humanKeyDown(e.note.number, e.velocity); - // hideUI(); + // uiHidden(); }); input.addListener('controlchange', 1, e => { if (e.controller.number === TEMPO_MIDI_CONTROLLER) { diff --git a/src/js/audio.js b/src/js/audio.js index 9a19472..1cf5a2f 100644 --- a/src/js/audio.js +++ b/src/js/audio.js @@ -9,12 +9,13 @@ let flameAudio = new Flame(); *** AUDIO *** */ -/* + const physics = new Physics(); //-----INSTRUMENT PARTS------// var allDrumsPart = new Tone.Part(function(time, instr) { - physics.addBody(true, time * globals.multiplierPosX, instr); + // physics.addBody(true, time * globals.multiplierPosX, instr); + physics.addBody(true, globals.dropPosX, instr); }, [ ["0:0:0", globals.instr.kickPrimary], ["0:6:0", globals.instr.kickPrimary], @@ -29,7 +30,7 @@ var allDrumsPart = new Tone.Part(function(time, instr) { allDrumsPart.loop = true; // allDrumsPart.start("0:0:0"); allDrumsPart.start("2:0:0"); - +/* var secondVerseDrumsPart = new Tone.Part(function(time, instr) { physics.addBody(true, time * globals.multiplierPosX, instr); }, [ @@ -168,5 +169,4 @@ export default class Audio { } } - */ \ No newline at end of file diff --git a/src/js/globals.js b/src/js/globals.js index d415288..3192182 100644 --- a/src/js/globals.js +++ b/src/js/globals.js @@ -30,7 +30,6 @@ export default { fixedTimeStep: 1.0 / 60.0, flameArr: [], flameCounter: 0, - hideUI: true, inputMidi: false, instr: {}, instrumentCounter: 0, @@ -55,6 +54,7 @@ export default { ticks: 0, triggerAnimationTime: '4:0:0', // Transport: Tone.Transport, //TODO: add Transport here for logging ticks and position + uiHidden: false, world: new CANNON.World(), }; diff --git a/src/js/ui.js b/src/js/ui.js index 8849312..62a372d 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -28,59 +28,59 @@ button.addEventListener("click", function() { // //bounceSynth.dispose(); }); -let bounce = document.getElementById('bounce'); -// bounce.innerHTML = 'BOUNCE!'; -bounce.onclick = () => { - Tone.Transport.start(); - // Tone.Transport.start("+0.1", 0); - - // if (bounceControl === false) { - // bounceControl = true; - // bounce.innerHTML = 'STOP'; - // } - // else { - // bounceControl = false; - // bounce.innerHTML = 'BOUNCE!'; - // } -}; - -document.getElementById('shape-form').onchange = (evt) => { - switch (evt.target.value) { - case 'box': - currentShape = box; - break; - case 'sphere': - currentShape = sphere; - break; - case 'torus': - currentShape = torus; - break; - default: - currentShape = box; - break; - } - obj.geometry = currentShape; - obj.geometry.buffersNeedUpdate = true; -}; - -document.getElementById('mesh-form').onchange = (evt) => { - switch (evt.target.value) { - case 'phong': - currentMesh = phong; - break; - case 'basic': - currentMesh = basic; - break; - case 'lambert': - currentMesh = lambert; - break; - default: - currentMesh = box; - break; - } - obj.material = currentMesh; - obj.material.needsUpdate = true; -}; +// let bounce = document.getElementById('bounce'); +// // bounce.innerHTML = 'BOUNCE!'; +// bounce.onclick = () => { +// Tone.Transport.start(); +// // Tone.Transport.start("+0.1", 0); + +// // if (bounceControl === false) { +// // bounceControl = true; +// // bounce.innerHTML = 'STOP'; +// // } +// // else { +// // bounceControl = false; +// // bounce.innerHTML = 'BOUNCE!'; +// // } +// }; + +// document.getElementById('shape-form').onchange = (evt) => { +// switch (evt.target.value) { +// case 'box': +// currentShape = box; +// break; +// case 'sphere': +// currentShape = sphere; +// break; +// case 'torus': +// currentShape = torus; +// break; +// default: +// currentShape = box; +// break; +// } +// obj.geometry = currentShape; +// obj.geometry.buffersNeedUpdate = true; +// }; + +// document.getElementById('mesh-form').onchange = (evt) => { +// switch (evt.target.value) { +// case 'phong': +// currentMesh = phong; +// break; +// case 'basic': +// currentMesh = basic; +// break; +// case 'lambert': +// currentMesh = lambert; +// break; +// default: +// currentMesh = box; +// break; +// } +// obj.material = currentMesh; +// obj.material.needsUpdate = true; +// }; let controlsId = document.getElementById('controls-container'); let settingsId = document.getElementById('settings-container'); @@ -88,17 +88,17 @@ let toggleId = document.getElementById('settings-toggle-btn'); toggleId.onclick = (el) => { - // console.log('RUN toggleId'); + console.log('toggleId clicked -> el: ', el); toggleId.classList.toggle('hidden-active'); settingsId.classList.toggle('hidden'); }; -let addShapeId = document.getElementById('call-add-shape'); -addShapeId.onclick = (el) => { - addBody(); -}; +// let addShapeId = document.getElementById('call-add-shape'); +// addShapeId.onclick = (el) => { +// addBody(); +// }; -if (globals.autoStart === true || globals.hideUI === true) { +if (globals.autoStart === true || globals.uiHidden === true) { controlsId.classList.toggle('hidden'); } diff --git a/webpack.config.js b/webpack.config.js index f4b3561..a5c2b5d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ // https://github.com/johndatserakis/modern-webpack-starter/blob/master/webpack.config.js +// https://github.com/edwinwebb/three-seed/blob/master/webpack.config.js // https://github.com/webpack/webpack-dev-server/blob/master/examples/api/simple/server.js#L16 // https://medium.com/code-oil/burning-questions-with-answers-to-why-webpack-dev-server-live-reload-does-not-work-6d6390277920 // USE: From 90c5ff84f98e32f822b573b529a3dead8fe2bbe3 Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Sun, 3 Nov 2019 14:50:03 -0500 Subject: [PATCH 05/22] adjust spinner length, drum sphere drop zPos --- src/js/Physics.js | 37 +++++++++++++++---------------------- src/js/ui.js | 4 ++-- 2 files changed, 17 insertions(+), 24 deletions(-) diff --git a/src/js/Physics.js b/src/js/Physics.js index f26c3df..db3f5f6 100644 --- a/src/js/Physics.js +++ b/src/js/Physics.js @@ -126,7 +126,9 @@ export default class Physics { if (options.type === 'drum') { // TODO: new drum machine paradigm - use rotating clock hand to hit drums // https://codepen.io/danlong/pen/LJQYYN - zPos += 10; // see globals.staffLineInitZ and globals.staffLineSecondZ + // zPos += 10; // PREV: see globals.staffLineInitZ and globals.staffLineSecondZ + + zPos -= 8; } else { zPos -= 3; //PREV // zPos = 0; @@ -180,7 +182,7 @@ export default class Physics { // console.log('contact between two bodies: ', ev.contact); // console.log(bodyCollideCount); if (ev.contact) { - console.log('ev.contact.ni', ev.contact.ni); + console.log('ev.contact.ni', ev.contact.ni); // DEBUG USE // console.log('ev.contact.rj', ev.contact.rj); // if (ev.contact.ri.y === -0.5) { // if (ev.contact.rj.x < 0) { @@ -188,34 +190,25 @@ export default class Physics { // if (ev.contact.ri.x === 0) { // if (ev.contact.rj.z === 0) { if (ev.contact.ni.x > 0.9) { - console.log('... ...'); + // console.log('... ...'); spinnerCollideCount++; } bodyCollideCount++; } - if (options.type === 'drum') { - // if (bodyCollideCount <= 1) { //play note two times on collide - if (bodyCollideCount <= 0) { - // console.log('DRUM ev: ', ev); - // if (isNaN(ev.body.inertia.x)) { //hack works - - // if (ev.body.initPosition.x === 0) { - // since ground is stationary at 0, must be hidden contact body above origin drop point - trigger.triggerNote(body); - // } - } - } else { //regular spheres - // if (bodyCollideCount <= 0) { //play note one time on collide - console.log({spinnerCollideCount}); - // - // if (spinnerCollideCount > 0) { + /* IMPORTANT - TODO: uncomment for previous collision functionality (diff for drum vs reg sphere) */ + // if (options.type === 'drum') { + // if (bodyCollideCount <= 0) { + // trigger.triggerNote(body); + // } + // } else { + // if (bodyCollideCount <= 0) { // PREV: play note one time on collide if (spinnerCollideCount === 1 && notePlayed !== true) { - // console.log('REGULAR ev: ', ev); + console.log('spinnerCollideCount ev: ', ev); trigger.triggerNote(body); notePlayed = true; } - } + // } // console.log(bodyCollideCount); // setTimeout(() => { @@ -333,7 +326,7 @@ export default class Physics { // THREE JS (VISUAL) // var geometry = new THREE.BoxBufferGeometry( 24.5, 0.5, 0.5 ); - var geometry = new THREE.BoxBufferGeometry( 16, 0.5, 0.5 ); + var geometry = new THREE.BoxBufferGeometry( 18, 0.5, 0.5 ); geometry.rotateX(THREE.Math.degToRad(90)); // TODO: animate rotation so rect goes in circle // var material = new THREE.MeshBasicMaterial( {color: 0xff0000} ); red diff --git a/src/js/ui.js b/src/js/ui.js index 62a372d..678d3d8 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -22,10 +22,10 @@ document.documentElement.addEventListener( /* stop all sounds */ var button = document.querySelector(".play"); button.addEventListener("click", function() { - console.log('Tone.Transport STOPPED... bounceSynth disconnected...'); + console.log('... ... ... Tone.Transport STOPPED ... ... ...'); Tone.Transport.stop(); // bounceSynth.disconnect(); - // //bounceSynth.dispose(); + // bounceSynth.dispose(); }); // let bounce = document.getElementById('bounce'); From 4b2dd0e182e68354ab1fc30207390f38795b4abb Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Sat, 9 Nov 2019 01:00:00 -0400 Subject: [PATCH 06/22] drum stage setup, set CANNON.Body angularDamping to 0 so spinner does not slow down, set rotation speed from bpm calc --- css/bounce.css | 6 +++--- index.html | 2 +- src/js/Input.js | 2 +- src/js/InstrumentMappings.js | 24 +++++++++++++++--------- src/js/Physics.js | 16 ++++++++++++---- src/js/Trigger.js | 23 ++++++++++++++--------- src/js/app.js | 10 ++++++---- src/js/audio.js | 10 +++++----- src/js/globals.js | 5 ++++- src/js/ui.js | 21 ++++++--------------- 10 files changed, 67 insertions(+), 52 deletions(-) diff --git a/css/bounce.css b/css/bounce.css index 0e55d44..56667bc 100644 --- a/css/bounce.css +++ b/css/bounce.css @@ -78,7 +78,7 @@ button { cursor: pointer; } -button#bounce, +button#btn-drums-1, .play { display: inline-block; margin: auto 3px 10px auto; @@ -100,7 +100,7 @@ span.fa-headphones { padding: 0 5px 0 3px; } -button#bounce:hover, +button#btn-drums-1:hover, .play:hover { /* background: #003366; */ /* color: #fff; */ @@ -108,7 +108,7 @@ button#bounce:hover, color: #003366; } -button#bounce { +button#btn-drums-1 { margin: auto 3px 10px auto; } diff --git a/index.html b/index.html index cf212b7..7b3b12e 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@ -
+
- +