Final Project – INSIDE OUT
INSIDE OUT
Process
Import Tone.js:
I initially tried to import through downloading the tone.js module and “import tone.js”/requiring in the server.js by “Tone = require(“tone”);” I upload the tone.js as a file and successfully import the tone.
I made 4 flute samples using Musescore and tried to load and trigger them on web:
I did trigger the console message, but I didn’t get the sound.
I then added a p5 sound function in the p5 sketch to get the audio started:
function touchStarted() {
getAudioContext().resume();
}
But I get an error about Tone.js file:
I found that it’s due to adding the p5 sound library the index.html file using cdn.
I looked back at the documentation and found that the audio will only start after the Tone.start() is called. And I have to add an event listener for the click to start.
Reflections
In this project, I explored posenet, 3D scene&animation construction, lighting, postprocessing, socket.io, and so on.
I didn’t plan out well for the project. I spent most of my time implementing machine learning to the gate and the postprocessing effect, which, in the end, are not crucial to the concept of my project. I also didn’t expect that, during the development of the gate and postprocessing effect, I would mess up my code and create a barrier for later development.😠After recovering from covid, I will start to develop the rest of the project immediately. I have to tackle my problem of “planning big and doing small” and learn to develop an executable, reasonable project plan in a fixed amount of time.
I also find that it is important to organize the code as early as possible. I spent a lot of time navigating through my messy, lengthy code and only started to organize it after meeting with Prof Moon and hearing his advice. Although my code became messy sometime after organizing, I greatly improve my efficiency of coding.
Reference
Materials of the light cube:
StandardMaterial and how to update
set lightColor=materialColor for better effect
postprocessing: