Merge pull request #3 from sjcobb/develop

v4 bolero - Flame class to create fire animation triggered from Transport

src/js/Fire.js

@@ -40,6 +40,21 @@ export default class Fire {
         // THREE.Fire.prototype.constructor = THREE.Fire;
     }
 
+    create() {
+        const fireTex = globals.loader.load("assets/flame/FireOrig.png");
+        volumetricFire = new THREE.Fire(fireTex);
+        volumetricFire.scale.set(6, 6.8, 6.0); //width, height, z
+        volumetricFire.position.set(globals.posBehindX + 30, 3.5, globals.posBehindZ);
+        var wireframeMat = new THREE.MeshBasicMaterial({
+            color : new THREE.Color(0xffffff),
+            wireframe : true
+        });
+        var wireframe = new THREE.Mesh(volumetricFire.geometry, wireframeMat.clone());
+        volumetricFire.add(wireframe);
+        wireframe.visible = false;
+        globals.scene.add(volumetricFire);
+    }
+
     // update = function ( time ) {
     //     var invModelMatrix = this.material.uniforms.invModelMatrix.value;
     //     this.updateMatrixWorld();

src/js/Flame.js

@@ -12,20 +12,36 @@ import globals from './globals.js';
 
 export default class Flame {
 
-    constructor(fireParam) {
-        this.triggerTime = fireParam;
+    // constructor(fireParam) {
+    constructor() {
+        // this.triggerTime = fireParam;
     }
 
-    initFire() {
-        globals.loader.crossOrigin = '';
-        var fireTex = globals.loader.load("./assets/flame/FireOrig.png");
+    create(pos) {
+        // console.log(pos);
+        console.log(globals);
+        // console.log(globals.flameArr);
 
-        // const volumetricFire = new THREE.Fire(fireTex);
-        const volumetricFire = new Fire(fireTex);
-        volumetricFire.position.set(globals.posBehindX + 22, 0, globals.posBehindZ);
+        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.position.set(globals.posBehindX + 30, 3.5, globals.posBehindZ);
+        // volumetricFire.position.set(pos.x, 3.5, globals.posBehindZ);
+        volumetricFire.position.set(pos.x, globals.posBehindY, globals.posBehindZ);
+
+        var wireframeMat = new THREE.MeshBasicMaterial({
+            color : new THREE.Color(0xffffff),
+            wireframe : true
+        });
+        var wireframe = new THREE.Mesh(volumetricFire.geometry, wireframeMat.clone());
         volumetricFire.add(wireframe);
-        globals.scene.add(volumetricFire);
+        wireframe.visible = false;
+
+        // globals.flameArr.push(volumetricFire)
+        globals.flameArr = [volumetricFire];
+        // globals.scene.add(volumetricFire);
+        globals.scene.add(globals.flameArr[0]);
     }
 
     addFire(posX = globals.posBehindX + 22, currentTime) {

src/js/InstrumentMappings.js

@@ -15,6 +15,12 @@ export default class InstrumentMappings {
     getInstrumentMappingTemplate(movement = 'physics') {
         //const instrumentMapping = {
         return {
+            flameCenter: {
+                type: 'animation',
+                triggerOn: 2,
+                timesTriggered: 0,
+                originalPosition: { x: 0, y: 0, z: -5 }
+            },
             //TODO: originalPosition and offsetMultiplier should have an effect on where ball (or other shapes) are dropped
             hiHatClosed: {
                 ballDesc: 'H',

src/js/Trigger.js

@@ -7,6 +7,7 @@ import { Transport, Player, Players, Part, Time, Volume } from 'tone';
 import globals from './globals.js';
 import InstrumentMappings from './InstrumentMappings.js';
 import Physics from './Physics.js';
+import Flame from './Flame.js';
 
 //-----TONE------//
 Tone.Transport.bpm.value = 200;
@@ -86,12 +87,15 @@ const playerTomHigh = new Player("./assets/sounds/drum-kits/electronic/tom-high.
 const playerTomMid = new Player("./assets/sounds/drum-kits/electronic/tom-mid.mp3").toMaster();
 const playerTomLow = new Player("./assets/sounds/drum-kits/electronic/tom-low.mp3").toMaster();
 
+let flameFirst = new Flame();
+
 export default class Trigger {
     constructor() {
         // super();
     }
 
     triggerNote(obj) {
+        // console.log({obj});
 
         const physics = new Physics();
 
@@ -122,8 +126,8 @@ export default class Trigger {
             } else if (triggerObj.variation === 'ride') {
                 playerRide.start();
             } else if (triggerObj.variation === 'tom-high') {
-                playerTomHigh.start();
-                // flameFirst.addFire(globals.ticks);
+                playerTomHigh.start(); // key: 7
+                // flameFirst.create(obj.initPosition);
             } else {
                 console.log('UNDEF variation - triggerNote() -> triggerObj (drum): ', triggerObj);
                 playerHiHat.start();

src/js/app.js

@@ -3,7 +3,7 @@ import globals from './globals.js';
 import InstrumentMappings from './InstrumentMappings.js';
 import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js';
 import Light from './Light.js';
-// import Flame from './Flame.js';
+import Flame from './Flame.js';
 import Physics from './Physics.js';
 import Helpers from './THREEx.js';
 import Pool from './Pool.js';
@@ -103,6 +103,7 @@ const globalSkyboxTheme = 'mercury';
 var geometry = new THREE.CubeGeometry(1200, 1200, 1200); //prev
 
 var cubeMaterials = [
+    // new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(`assets/flame/FireOrig.png`), side: THREE.DoubleSide }), //front side
     new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(`assets/skybox/${globalSkyboxTheme}/ft.png`), side: THREE.DoubleSide }), //front side
     new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(`assets/skybox/${globalSkyboxTheme}/bk.png`), side: THREE.DoubleSide }), //back side
     new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(`assets/skybox/${globalSkyboxTheme}/up.png`), side: THREE.DoubleSide }), //up side
@@ -288,19 +289,12 @@ function addThickStaffLines() {
 
 
 //-----Static Fire Example------//
-let flameActive = false;
-let volumetricFire; //TODO: remove after Flame class methods working
-// let flameFirst = new Flame(globals.triggerAnimationTime);
-// flameFirst.initFire();
-
 globals.loader.crossOrigin = '';
-const fireTex = globals.loader.load("./assets/flame/FireOrig.png");
-volumetricFire = new THREE.Fire(fireTex);
-volumetricFire.position.set(globals.posBehindX + 22, 0, globals.posBehindZ);
-volumetricFire.scale.set(6, 6.8, 6.0); //width, height, z
-volumetricFire.position.set(globals.posBehindX + 20, 0, globals.posBehindZ);
-console.log(volumetricFire);
-globals.scene.add(volumetricFire);
+
+let flameActive = false;
+// // let flameFirst = new Flame(globals.triggerAnimationTime);
+// let flameFirst = new Flame();
+// // flameFirst.create();
 
 //-----POOL BALLS (STATIC ROW)------//
 const poolBalls = {};
@@ -390,7 +384,7 @@ function moveObject(object, motionActive, positionUp, threshold) {
 // var toneClock = new Tone.Clock(function(time) {
 //     console.log(time);
 // }, 1);
-var clock = new THREE.Clock();
+// var clock = new THREE.Clock();
 
 //-----ANIMATION------//
 let animate = () => {
@@ -402,6 +396,7 @@ let animate = () => {
     // console.log('ticks: ', Tone.Transport.ticks); //ex. 10 
     // console.log('position: ', Tone.Transport.position); //ex: 0:0:0.124
     // console.log('seconds: ', Tone.Transport.seconds);
+    // console.log(globals.ticks);
 
     if (globals.showStaticRows === true) {
         for (var key in poolBalls) {
@@ -454,9 +449,12 @@ let animate = () => {
     }
 
     // TODO: readd after webpack setup
-    // var flameRate = clock.getElapsedTime() * 2.0;
+    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);
 

src/js/audio.js

@@ -1,6 +1,10 @@
 import globals from './globals.js';
 import Tone from 'tone';
 import Physics from './Physics.js';
+import Flame from './Flame.js';
+
+let flameAudio = new Flame();
+
 /*
  *** AUDIO ***
  */
@@ -91,31 +95,56 @@ const boleroFireChords = [
     ["0:7:0", globals.instr.sphereChordF],
     ["0:9:0", globals.instr.sphereChordA3],
     ["0:10:0", globals.instr.sphereChordF],
+    // ["0:11:0", globals.instr.flameCenter],
 ];
 
+let flameActive = false;
 const pianoChordsFirstPart = new Tone.Part(function(time, instr) {
     physics.addBody(true, time * globals.multiplierPosX, instr);
-    // addFire(globalTicks); //old
-    // flameFirst.addFire(globalTicks);
-    // flameActive = false;
 }, boleroFireChords);
 
+// boleroFireChords.push(["0:11:0", globals.instr.flameCenter]);
 const pianoChordsSecondPart = new Tone.Part(function(time, instr) {
     physics.addBody(true, time * globals.multiplierPosX, instr);
 }, boleroFireChords);
 
 pianoChordsFirstPart.loop = 2;
 // pianoChordsFirstPart.start("1:0:0");
 // pianoChordsFirstPart.start("4:0:0");
-pianoChordsFirstPart.start(globals.triggerAnimationTime);
+pianoChordsFirstPart.start(globals.triggerAnimationTime); //"4:0:0"
 
 pianoChordsSecondPart.loop = 2;
 // pianoChordsSecondPart.start("6:0:0");
 pianoChordsSecondPart.start("9:0:0");
 
+var animationPart = new Tone.Part(function(time, instr) {
+    physics.addBody(true, time * globals.multiplierPosX, instr);
+}, [
+    // ["0:0:0", globals.instr.flameCenter],
+    ["0:0:0", globals.instr.flameCenter],
+]);
+animationPart.start("6:5:0");
+
+var animationPart2 = new Tone.Part(function(time, instr) {
+    physics.addBody(true, time * globals.multiplierPosX, instr);
+}, [
+    ["0:0:0", globals.instr.flameCenter],
+]);
+// animationPart2.start("10:5:0"); //TODO: add second animation part for fire
+animationPart2.start("11:5:0"); //TODO: add second animation part for fire
+
+// animationPart.start("5:10:0");
+// animationPart.start("6:0:0");
+// var animationEvent = new Tone.Event(function(time, instr){
+// 	physics.addBody(true, time * globals.multiplierPosX, instr);
+// //}, ["0:0:0", globals.instr.flameCenter]);
+// }, [["0:0:0", globals.instr.flameCenter]]); //err: TypeError: Failed to execute 'setValueAtTime' on 'AudioParam': The provided float value is non-finite.
+// animationEvent.start("5:11:0");
+
 var pianoChordsFinalPart = new Tone.Part(function(time, instr) {
     physics.addBody(true, time * globals.multiplierPosX, instr);
 }, [
+    // ["0:0:0", globals.instr.flameCenter], //too soon
     ["0:0:0", globals.instr.sphereChordE],
     ["0:2:0", globals.instr.sphereChordG],
     ["0:4:0", globals.instr.sphereChordA3],

src/js/globals.js

@@ -17,6 +17,8 @@ export default {
     damping: 0.01,
     dropPosX: 5.5,
     fixedTimeStep: 1.0 / 60.0,
+    flameArr: [],
+    flameCounter: 0,
     instr: {},
     instrumentCounter: 0,
     lastColor: '#000000',
@@ -32,6 +34,7 @@ export default {
     showStaticRows: false,
     ticks: 0,
     triggerAnimationTime: '4:0:0',
+    // Transport: Tone.Transport, //TODO: add Transport here for logging ticks and position
     world: new CANNON.World(),
 };