3f:null 40:["$","title",null,{"children":"Create a first piano scale | Antonin KLOPP-TOSSER | Observable"}] 46:[] 44:{"id":"f716b46d3704389f","slug":"create-a-first-piano-scale","title":"Create a first piano scale","thumbnail":"71059718f9865658ddc8ab9f69840f4ee6827fbd542078bcf0ec0fed973c064e","access_level":"public","create_time":"$D2020-08-18T18:26:07.483Z","update_time":"$D2020-08-20T20:08:37.236Z","view_time":null,"first_public_time":"$D2020-08-26T05:55:12.731Z","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":211,"publish_version":211,"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":false,"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":"Create a first piano scale","cells":[{"id":0,"value":"md`# 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":155,"value":"md`The goal is to create a simple piano scale to be able to have a first render of what a piano will look like in VR`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"aframePiano = {\n aframe;\n THREE;\n return html`\n

\n \n ${generateScale(\"-14 0 0\", 2)}\n ${generateScale(\"-7 0 0\", 3)}\n ${generateScale(\"0 0 0\", 4)}\n ${generateScale(\"7 0 0\", 5)}\n \n

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function generateNaturalNote(x, y, z, noteName) {\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"function generateSharpNote(x, y, z, noteName) {\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"function generateScale(\n positionOffset = \"0 0 0\",\n scale = 4,\n rotationOffset = \"0 0 0\"\n) {\n let nonSharpNotes = 0;\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 nonSharpNotes++;\n notesArray.push(\n generateNaturalNote(-1 + nonSharpNotes, 1, -5, `${note.note}${scale}`)\n );\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":134,"value":"simpleScale = [\n {\n note: \"C\",\n isSharp: false\n },\n {\n note: \"Db\",\n isSharp: true\n },\n {\n note: \"D\",\n isSharp: false\n },\n {\n note: \"Eb\",\n isSharp: true\n },\n {\n note: \"E\",\n isSharp: false\n },\n {\n note: \"F\",\n isSharp: false\n },\n {\n note: \"Gb\",\n isSharp: true\n },\n {\n note: \"G\",\n isSharp: false\n },\n {\n note: \"Ab\",\n isSharp: true\n },\n {\n note: \"A\",\n isSharp: false\n },\n {\n note: \"Bb\",\n isSharp: true\n },\n {\n note: \"B\",\n isSharp: false\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`## Aframe note component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"schema = ({\n noteType: { type: 'string', default: 'natural' },\n noteName: { type: 'string', default: 'C4' }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"registerAnimation = aframe.registerComponent(`note`, {\n schema: schema,\n\n /**\n * Initial creation and setting of the mesh.\n */\n init: function() {\n var data = this.data;\n var el = this.el;\n\n let height = 5;\n if (data.noteType == \"sharp\") {\n height = 3;\n }\n\n // Create geometry.\n this.geometry = new THREE.BoxBufferGeometry(0.95, height, 0.5);\n\n // Create material.\n this.material = new THREE.MeshStandardMaterial({\n color: data.noteType == \"sharp\" ? \"#000000\" : \"#FFFFFF\"\n });\n\n // Create mesh.\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n\n // Set mesh on entity.\n el.setObject3D('mesh', this.mesh);\n },\n\n remove: function() {\n this.el.removeObject3D('mesh');\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"aframe = {\n const aframe = (window.aframe = await require(\"aframe\")); \n await require(\"aframe-environment-component\").catch(() => {});\n return aframe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"THREE = aframe.THREE","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"