diff --git a/css/bounce.css b/css/bounce.css index 00cb6b3..84ef818 100644 --- a/css/bounce.css +++ b/css/bounce.css @@ -112,7 +112,7 @@ button#bounce { #legend-container { display: inline-block; - width: 80px; + width: 90px; margin: 0 auto; position: absolute; right: 0; @@ -129,7 +129,7 @@ button#bounce { display: inline-block; position: relative; margin: 0; - padding: 6px 0px 6px 20px; + padding: 10px 0px 8px 20px; box-sizing: border-box; } .legend ul { @@ -139,13 +139,13 @@ button#bounce { } .legend ul li { height: 14px; - margin: 0 0 5px; + margin: 0 0 6px; } .legend span.symbol { display: block; - width: 8px; - height: 8px; - margin: 7px 0 0 0; + width: 10px; + height: 10px; + margin: 5px 0 0 0; padding: 0; position: absolute; left: 0; @@ -156,11 +156,13 @@ button#bounce { .legend p { margin: 0; padding: 0; - font-family: 'Didact Gothic', sans-serif; + /* font-family: 'Didact Gothic', sans-serif; */ /* font-family: 'Sawarabi Gothic', sans-serif; */ + font-family: Verdana, sans-serif; line-height: 20px; - font-size: 12px; + font-size: 14px; color: #fff; + letter-spacing: 1.25px; } #legend-container.animate-in { diff --git a/index.html b/index.html index c922676..47cf40a 100644 --- a/index.html +++ b/index.html @@ -84,17 +84,24 @@ - +
diff --git a/src/js/Flame.js b/src/js/Flame.js index 11fb5d5..70423b4 100644 --- a/src/js/Flame.js +++ b/src/js/Flame.js @@ -19,12 +19,27 @@ export default class Flame { create(pos) { // console.log(pos); - console.log(globals); + // console.log(globals); // console.log(globals.flameArr); const fireTex = globals.loader.load("assets/flame/FireOrig.png"); const volumetricFire = new THREE.Fire(fireTex); - volumetricFire.scale.set(6, 6.8, 6.0); //width, height, z + + // volumetricFire.material.uniforms.magnitude.value = 0.5; //PREV: higher = spaciness + // volumetricFire.material.uniforms.lacunarity.value = 0.1; //PREV: lower = more cartoony + // volumetricFire.material.uniforms.lacunarity.gain = 0.1; //PREV: more = less height + + // volumetricFire.material.uniforms.magnitude.value = 0.7; + volumetricFire.material.uniforms.magnitude.value = 1.0; + volumetricFire.material.uniforms.lacunarity.value = 1.8; //lower = more cartoony + // volumetricFire.material.uniforms.lacunarity.value = 2.0; //lower = more cartoony + //volumetricFire.material.uniforms.lacunarity.value = 1.0; //higher = more grainy + //volumetricFire.material.uniforms.noiseScale.value.x = 2.5; //num of fires horiz + + // volumetricFire.scale.set(6, 6.8, 6.0); //PREV: width, height, z + volumetricFire.scale.set(6, 7.5, 6.0); //width, height, z + // volumetricFire.scale.set(15, 22, 15); // + // volumetricFire.scale.set(150, 220, 150); // TODO: fix scale for higher values & position // volumetricFire.position.set(globals.posBehindX + 30, 3.5, globals.posBehindZ); // volumetricFire.position.set(pos.x, 3.5, globals.posBehindZ); diff --git a/src/js/InstrumentMappings.js b/src/js/InstrumentMappings.js index ecf5b31..a300971 100644 --- a/src/js/InstrumentMappings.js +++ b/src/js/InstrumentMappings.js @@ -90,7 +90,8 @@ export default class InstrumentMappings { }, tomHigh: { ballDesc: 'T', - color: '#800080', //purple + // color: '#800080', //purple + color: '#006400', //dkgreen keyInput: '7', note: 'C', octave: 2, diff --git a/src/js/Light.js b/src/js/Light.js index 406c8b0..802194f 100644 --- a/src/js/Light.js +++ b/src/js/Light.js @@ -27,13 +27,15 @@ export default class Light { light.shadow.camera.left = light.shadow.camera.bottom = -lightSize; light.shadow.camera.right = light.shadow.camera.top = lightSize; - light.shadow.mapSize.width = 1024; - light.shadow.mapSize.height = 1024; + // light.shadow.mapSize.width = 1024; // prev + // light.shadow.mapSize.height = 1024; + + light.shadow.mapSize.width = 0; + light.shadow.mapSize.height = 0; this.sun = light; // globals.scene.add(light); - globals.scene.add(light); // const fogColor = new THREE.Color(0xffffff); diff --git a/src/js/Trigger.js b/src/js/Trigger.js index 33fe217..867e00b 100644 --- a/src/js/Trigger.js +++ b/src/js/Trigger.js @@ -43,9 +43,9 @@ var toneSnare = new Tone.NoiseSynth({ // const player808HiHat = new Player(`${sampleBaseUrl}/808-hihat-vh.mp3`).toMaster(); // const playerHiHatOpen = new Tone.Player("./assets/sounds/drum-kits/dubstep/hihat-open.mp3").toMaster(); //PREV const playerHiHatOpen = new Player("./assets/sounds/drum-kits/dubstep/hihat-open.mp3").toMaster(); - const playerHiHat = new Player("./assets/sounds/drum-kits/dubstep/hihat-closed.mp3").toMaster(); -// playerHiHat.volume.value = 1.5; +playerHiHatOpen.volume.value = -2; +playerHiHat.volume.value = -2; // const playerKick = new Player("./assets/sounds/drum-kits/analog/kick.mp3").toMaster(); //aka dubstep - 808? // const playerKick = new Player("./assets/sounds/drum-kits/dubstep/kick.mp3").toMaster(); //aka analog - PREV diff --git a/src/js/app.js b/src/js/app.js index 43127bb..a18b78f 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -397,6 +397,7 @@ let animate = () => { // console.log('position: ', Tone.Transport.position); //ex: 0:0:0.124 // console.log('seconds: ', Tone.Transport.seconds); // console.log(globals.ticks); + // console.log(globals.clock.elapsedTime); if (globals.showStaticRows === true) { for (var key in poolBalls) { diff --git a/src/js/audio.js b/src/js/audio.js index 011616b..cc0d3ce 100644 --- a/src/js/audio.js +++ b/src/js/audio.js @@ -123,7 +123,8 @@ var animationPart = new Tone.Part(function(time, instr) { // ["0:0:0", globals.instr.flameCenter], ["0:0:0", globals.instr.flameCenter], ]); -animationPart.start("6:5:0"); +animationPart.start("6:4:3"); +// animationPart.start("0:0:0"); var animationPart2 = new Tone.Part(function(time, instr) { physics.addBody(true, time * globals.multiplierPosX, instr); diff --git a/src/js/globals.js b/src/js/globals.js index c71094d..80ce20e 100644 --- a/src/js/globals.js +++ b/src/js/globals.js @@ -2,14 +2,17 @@ import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js'; export default { - activeInstrColor: '#9F532A', //red + // activeInstrColor: '#9F532A', //ltred + // activeInstrColor: '#800000', //dkred + activeInstrColor: '#8F0000', //medred // activeInstrColor: '#0018F9', //music wheel I blue autoScroll: true, - autoStart: false, + autoStart: true, + autoStartTime: 9000, camera: new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000), cameraPositionBehind: true, - // cameraLookUp: true, - cameraLookUp: false, + cameraLookUp: true, + // cameraLookUp: false, clock: new THREE.Clock(), configColorAnimate: true, controls: '', diff --git a/src/js/physics.js b/src/js/physics.js index f9db5cc..f767c78 100644 --- a/src/js/physics.js +++ b/src/js/physics.js @@ -89,11 +89,11 @@ export default class Physics { body.angularVelocity.z = 12; if (options.type === 'animation') { - console.log('addBody -> animation: ', options); + // console.log('addBody -> animation: ', options); // if (globals.flameCounter % 2 === 0) { // if (globals.flameCounter % 3 === 0) { - console.log(globals.flameCounter); + // console.log(globals.flameCounter); // if (globals.flameCounter === 4) { // if (globals.flameCounter % 2 === 1) { //is flame is called odd num of times // if (globals.flameCounter === 1) { diff --git a/src/js/ui.js b/src/js/ui.js index 056a0a7..1e758ef 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -102,7 +102,8 @@ if (globals.autoStart === true) { controlsId.classList.toggle('hidden'); setTimeout(function() { Tone.Transport.start(); - }, 9000); + }, globals.autoStartTime); + // }, 9000); } else { controlsId.classList.toggle('show'); } @@ -111,18 +112,23 @@ document.addEventListener("visibilitychange", function() { if (document.hidden){ console.log("visibilitychange -> Browser tab is hidden"); Tone.Transport.stop(); + console.log("Tone.Transport stopped......"); } else { console.log("visibilitychange -> Browser tab is visible"); } }); -// setTimeout(function() { -// globals.cameraPositionBehind = false; -// // camera.position.set(0, 20, 40); -// camera.position.set(0, 5, 35); -// camera.lookAt(new THREE.Vector3(-1, 1, 10)); -// // }, 54000); -// }, 2000); +setTimeout(function() { + globals.cameraPositionBehind = false; + // globals.camera.position.set(0, 20, 40); + // globals.camera.position.set(0, 5, 35); + globals.camera.position.set(0, 12, 30); + globals.camera.lookAt(new THREE.Vector3(0, 1, 10)); + // globals.camera.lookAt(new THREE.Vector3(-1, 1, 10)); +// }, globals.autoStartTime + 32000); //globals.autoStartTime = 9000 +}, globals.autoStartTime + 46000); +// }, 33000); +// }, 1000); // globals.cameraPositionBehind = false; // // camera.position.set(0, 5, 35); diff --git a/webpack.config.js b/webpack.config.js index 152df45..73471bc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,6 +4,7 @@ const path = require('path'); +// TODO: include Three.js here instead of in index.html, resolve all in src folder and node_modules to fix GitHub Pages 404s const config = { entry: { 'bundle.js': [