34:null 35:["$","title",null,{"children":"Recreating the piano animation of the Nuit aux invalides in Virtual Reality | Antonin KLOPP-TOSSER | Observable"}] 3b:[] 39:{"id":"cb341bfdcf9ac06d","slug":"recreating-the-piano-animation-of-the-nuit-aux-invalides-in","title":"Recreating the piano animation of the Nuit aux invalides in Virtual Reality","thumbnail":"2686d746008f09265e36895b0e06a4c8b0074f7bcefb894f0255d5d516ac204b","access_level":"public","create_time":"$D2020-08-20T19:24:28.543Z","update_time":"$D2020-09-06T21:59:11.879Z","view_time":null,"first_public_time":"$D2020-08-29T14:35:07.382Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f968ee8357418900","login":"antoninklopp","name":"Antonin KLOPP-TOSSER","avatar_url":"https://avatars-next.observableusercontent.com/3e825b8a770309e2d48cf6715cf0bba18f99e3b8164d2e051723075f3ac89b0c","tier":"starter_2024","bio":"French developer @ Uptale.\nMachine learning, data,VR and 3D rendering. Sometimes front end when it's needed ","following":false},"version":229,"publish_version":229,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce35321e588f38e4","login":"antoninklopp","name":"Antonin KLOPP-TOSSER","avatar_url":"https://avatars-next.observableusercontent.com/3e825b8a770309e2d48cf6715cf0bba18f99e3b8164d2e051723075f3ac89b0c","tier":null,"bio":"French developer @ Uptale.\nMachine learning, data,VR and 3D rendering. Sometimes front end when it's needed ","following":false}],"members":[{"type":"individual","id":"ce35321e588f38e4","login":"antoninklopp","name":"Antonin KLOPP-TOSSER","avatar_url":"https://avatars-next.observableusercontent.com/3e825b8a770309e2d48cf6715cf0bba18f99e3b8164d2e051723075f3ac89b0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1a5f018c432d8887","slug":"nuit-aux-invalides-vr","title":"Nuit aux invalides - VR","owner":{"id":"f968ee8357418900","login":"antoninklopp","name":"Antonin KLOPP-TOSSER"}},"type":"notebook","body":{"titling":"auto","title":"Recreating the piano animation of the Nuit aux invalides in Virtual Reality","cells":[{"id":0,"value":"md`# Recreating the piano animation of the *Nuit aux invalides* in Virtual Reality`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`*This article is the final point of a serie of notebooks aiming to create this final animation, you can find all the notebooks [here](https://observablehq.com/collection/@antoninklopp/nuit-aux-invalides-vr) \nThe animation is at the [end of the article](https://observablehq.com/@antoninklopp/recreating-the-piano-animation-of-the-nuit-aux-invalides-in#finalAnimation)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"invalides","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`During a week-end, mid August, I went to the [*Nuit aux invalides* show](https://lanuitauxinvalides.fr/) ([video](https://www.youtube.com/watch?v=lC8WIpdCARU)), which is a music and light show with illuminations on the *Invalides* building in Paris. I was really impressed by a piano animation where the projected light was synchonized with the music, recreating a piano feeling.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`I decided to try to recreate this animation in observables notebooks, using the ability to import your own work into other notebooks to be able to build, little by little, the final animation. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"finalAnimation = md`## Final animation !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"viewof music = createMusicSelect()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof play = button({\n value: \"Play\",\n description: \"Play music and animation, loading can take a few seconds\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"aframeFinalPiano","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`

Go into VR mode (VR headset) or full screen (PC) by clicking on the VR icon above ${String.fromCodePoint(\n 0x1f851\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"registerNoteComponent()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function generateNaturalNote(x, y, z, noteName) {\n console.log(\"Generating note\");\n return `\n\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function generateSharpNote(x, y, z, noteName) {\n return `\n\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function generateScale(\n positionOffset = \"0 0 0\",\n scale = 4,\n rotationOffset = \"0 0 0\"\n) {\n let nonSharpNotes = 1;\n let notesArray = [];\n for (const note of simpleScale) {\n if (note.isSharp) {\n notesArray.push(\n generateSharpNote(-1 + nonSharpNotes, 1, -5, `${note.note}${scale}`)\n );\n } else {\n notesArray.push(\n generateNaturalNote(-1 + nonSharpNotes, 1, -5, `${note.note}${scale}`)\n );\n nonSharpNotes++;\n }\n }\n return `${notesArray.join()}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {\n aframe,\n THREE,\n schema,\n simpleScale\n} from \"@antoninklopp/create-a-first-piano-scale\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { aframeFinalPiano, registerNoteComponent, invalides } with {\n generateScale,\n animationDuration,\n animationBackDuration\n} from \"@antoninklopp/giving-the-shape-of-the-building-to-the-piano\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import { playMidiFileAndEmitEvents } with {\n musicFile as theme\n} from \"@antoninklopp/play-midi-sounds-from-file\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {\n animationDuration,\n animationBackDuration\n} from \"@antoninklopp/linking-music-input-and-vr-piano\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$$ = require(\"jquery\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"import {\n createMusicSelect,\n getFile\n} from \"@antoninklopp/creating-a-music-select-from-mutliple-files\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"mutable numberTimesPlayed = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"{\n play;\n mutable numberTimesPlayed = mutable numberTimesPlayed + 1;\n if (mutable numberTimesPlayed == 2) {\n var emitNotes = noteName => {\n if ($(`#${noteName}`)[0]) {\n $(`#${noteName}`)[0].emit(\"generateNote\");\n }\n };\n playMidiFileAndEmitEvents(emitNotes);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"musicFile = getFile(music).arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 3a:"$39:body"