Add fluid support

Author: Brackets-Coder

fluid.js

@@ -12,8 +12,9 @@ export const fluid = new FluidDynamics(canvas, {
   height: canvas.height,
   curl: 0,
   // See src/fluid-dynamics.js for all options.
-  dyeDissipation: 0.75,
-  pressureDissipation: 0.5,
+  dyeDissipation: 0.5,
+  velocityDissipation: 0.9,
+  pressureDissipation: 0.9,
   autoUpdate: true, 
   paused: false,
 });

functions.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import * as Fluid from './fluid.js';
 import { globalColor } from './main.js';
 
 let WhiteKeyWidth  = 0.025;
@@ -108,6 +109,16 @@ export function lightKeyOff(midiNote) {
   }
 }
 
+export function spawnFluid(midi, velocity) {
+  Fluid.addEmitter(
+    noteTransform(midi).position.x * (Fluid.canvas.width / (WhiteKeyWidth * 52)) + (Fluid.canvas.width / 2), 
+    Fluid.canvas.height / 2, 
+    20 + (velocity / 127) * 30, 
+    (velocity / 127) * 0.5, 
+    { x: 0, y: 500 + (velocity / 127) * 500 }
+  );
+}
+
 export function createNote(MIDI) {
   const { position, scale } = noteTransform(MIDI);
   const geometry = new THREE.PlaneGeometry(1, 1, 1);

index.html

@@ -6,7 +6,7 @@
   <title>MIDI Visualizer</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-  <base href="/THREE-MIDI-Visualizer/">
+  <base href="./">
   <script type="importmap">
     {
       "imports": {

main.js

@@ -1,6 +1,5 @@
 import * as THREE from 'three';
 import * as Functions from './functions.js';
-import * as Shaders from './shaders.js';
 import * as UI from './ui.js';
 import * as Fluid from './fluid.js';
 import { PostProcessing, WebGPURenderer } from 'three/webgpu';
@@ -192,13 +191,13 @@ if ( WebGL.isWebGL2Available() ) {
     }
   });
 
-  window.addEventListener("keydown", (e) => {
-    if (e.key === " ") {
-      if (UI.inProject) {
-        Fluid.addEmitter(Fluid.canvas.width / 2, Fluid.canvas.height /2, 20, 0.2, {x: 0, y: 500});
-      }
-    }
-  });
+  // window.addEventListener("keydown", (e) => {
+  //   if (e.key === " ") {
+  //     if (UI.inProject) {
+  //       Fluid.addEmitter(Fluid.canvas.width / 2, Fluid.canvas.height /2, 20, 0.2, {x: 0, y: 500});
+  //     }
+  //   }
+  // });
 
   //* =-=-=-=-=-=| GEOMETRY SETUP |=-=-=-=-=-=
 
@@ -215,8 +214,8 @@ if ( WebGL.isWebGL2Available() ) {
   scene.add(laser);
 
   const fluidTexture = new THREE.CanvasTexture(document.getElementById("fluid-canvas"));
-  const planeGeometry = new THREE.PlaneGeometry(1 * Fluid.fluid._aspectRatio, 1); // adjust size to fit keyboard
-  const planeMaterial = new THREE.MeshBasicMaterial({ map: fluidTexture, transparent: true, side: THREE.DoubleSide, alphaMap: fluidTexture, });
+  const planeGeometry = new THREE.PlaneGeometry(0.025 * 52, 1 / Fluid.fluid._aspectRatio, 1); // adjust size to fit keyboard
+  const planeMaterial = new THREE.MeshBasicMaterial({ color: globalColor, map: fluidTexture, transparent: true, side: THREE.DoubleSide, alphaMap: fluidTexture, });
   const fluidPlane = new THREE.Mesh(planeGeometry, planeMaterial);
 
   // position it slightly above the keyboard
@@ -229,6 +228,7 @@ if ( WebGL.isWebGL2Available() ) {
     const { note, velocity } = e.detail;
 
     Functions.lightKeyOn(note);
+    Functions.spawnFluid(note, velocity);
 
     const newnote = Functions.createNote(note);
     activeNotes.push(newnote);