34:null 35:["$","title",null,{"children":"Giving the shape of the building to the piano | Antonin KLOPP-TOSSER | Observable"}] 3b:T586,async function registerNoteComponent() { aframe.registerComponent(`note`, { schema: schema, /** * Initial creation and setting of the mesh. */ init: function() { var data = this.data; var el = this.el; let height = 5; let width = 1; if (data.noteType == "sharp") { height = 2.5; width = 0.35; } // Create geometry. this.geometry = new THREE.BoxBufferGeometry(width, height, 0.5); let color = data.noteType == "sharp" ? "#000000" : "#FFFFFF"; if (data.noteType == "sharp") { this.material = new THREE.MeshStandardMaterial({ color: "#000000" }); } if (data.noteType == "sharp") { // Create mesh. this.mesh = new THREE.Mesh(this.geometry, this.material); } else { this.mesh = model.scene.clone(); this.mesh.scale.set(0.11, 0.11, 0.11); this.mesh.rotation.set(0, -Math.PI / 2, 0); this.mesh.position.set(0, -0.2, -0.23); } // Set mesh on entity. el.setObject3D('mesh', this.mesh); let self = this; this.el.addEventListener('generateNote', function(event) { self.el.emit("animate"); setTimeout(function() { self.el.emit("animate_back"); }, animationDuration); }); }, remove: function() { this.el.removeObject3D('mesh'); } }); }3c:[{"id":"6c382e3766e6b7012c1fe9a16916b67d0a14d2a2173dee308c75aa77922942d0436c83ecdc578dfc2451927b16a16cc2f02c0dc89e97342b2e5e1b13e8af8416","href":"https://static.observableusercontent.com/files/6c382e3766e6b7012c1fe9a16916b67d0a14d2a2173dee308c75aa77922942d0436c83ecdc578dfc2451927b16a16cc2f02c0dc89e97342b2e5e1b13e8af8416","name":"invalides.jpg","type":"image/jpeg","lastModified":1597947188515.732,"size":41455},{"id":"812004496b5d7a64b7606f2fee8b93c1f1074c4baa0f9326ee4741ffe92bad2588ca8ac7b1d6aee2d58fa56af2cfbc3339e366402bc9ea09087cd04912394f0d","href":"https://static.observableusercontent.com/files/812004496b5d7a64b7606f2fee8b93c1f1074c4baa0f9326ee4741ffe92bad2588ca8ac7b1d6aee2d58fa56af2cfbc3339e366402bc9ea09087cd04912394f0d","name":"invalides_texture_high_res@2.glb","type":"model/gltf-binary","lastModified":1598708757181.326,"size":469016},{"id":"d5a96791af88a25d213d6a4bd7dd7ee2a98342695816db7361e74f3903ccf4599a0eefad7f7b92d9a85de91ef9061312264412478d85f076ed2fa302a1ea98f9","href":"https://static.observableusercontent.com/files/d5a96791af88a25d213d6a4bd7dd7ee2a98342695816db7361e74f3903ccf4599a0eefad7f7b92d9a85de91ef9061312264412478d85f076ed2fa302a1ea98f9","name":"render.png","type":"image/png","lastModified":1598708784552.699,"size":1415977}] 39:{"id":"a882ec9a8ad69e8e","slug":"giving-the-shape-of-the-building-to-the-piano","title":"Giving the shape of the building to the piano","thumbnail":null,"access_level":"public","create_time":"$D2020-08-20T17:33:19.499Z","update_time":"$D2020-09-06T21:55:01.432Z","view_time":null,"first_public_time":"$D2020-08-29T13:57:28.733Z","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":254,"publish_version":254,"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":"Giving the shape of the building to the piano","cells":[{"id":0,"value":"md`# 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":144,"value":"readTime()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`Now that we have our main components we can give the piano the same shape as the building`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"invalides = md`

Cour d'honneur des invalides (http://paris1900.lartnouveau.com/paris07/invalides/cour/inval_cour7.jpg)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`## Building the environment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`We will split the piano into 4 parts, scales 1-2 on the left, scales 3-4 in the center, scales 5-6 on the right`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`To give the same impression as the night during the show, we add the preset environment *starry* from aframe environments. Also added some stone textures.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`### Building one arch or the building in Blender`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`The goal is to recreate the building as *precisely* as possible, however we have two main problems : \n- Limited blender capacities and incredibly complex building architecture (if you go to the Invalides, which I highly recommend of course, you will see how precise and refined is the architecture)\n- Performances : it is very important that this article can run on every computer and on VR headsets. Since the model is present 7 * 6 = 42 times, it should really have a light weight (600KB for this one). This leads to a small amount of vertices and not too complexe textures. \n\nThe idea was to recreate what was *defining* the building : \n- The blue roof\n- The bricks\n- The arch\n- The stair railing\n\nThese four elements should give the reader enough elements to see the invalides court.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"blenderRender = await FileAttachment(\"render.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`*Render from inside blender*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`### Final aframe scene`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"aframeFinalPiano = {\n registerNoteComponent;\n aframe;\n THREE;\n return html`\n

\n \n \n \n \n ${generateScale(\"-2.8 0 8.7\", 1, \"0 90 0\")}\n ${generateScale(\"-2.8 0 1.7\", 2, \"0 90 0\")}\n ${generateScale(\"-7 0 0\", 3)}\n ${generateScale(\"0 0 0\", 4)}\n ${generateScale(\"1.5 0 -4.1\", 5, \"0 -90 0\")}\n ${generateScale(\"1.5 0 2.9\", 6, \"0 -90 0\")}\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":152,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`Importing the model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"model = new Promise((resolve, reject) => {\n // instantiate a loader\n var loader = new THREE.GLTFLoader();\n\n // load a resource\n loader.load(\n obj_url,\n function(object) {\n resolve(object);\n },\n // called when loading is in progresses\n function(xhr) {\n console.log((xhr.loaded / xhr.total) * 100 + '% loaded');\n },\n // called when loading has errors\n function(error) {\n reject(\"Error\");\n }\n );\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"registerNoteComponent()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {\n aframe,\n THREE,\n schema,\n generateScale\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":80,"value":"import { animationDuration } from \"@antoninklopp/animate-the-piano-notes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"import { readTime } from \"@antoninklopp/estimating-the-read-time-of-an-observable-notebook\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"obj_url = {\n const blob = await FileAttachment(\"invalides_texture_high_res@2.glb\").blob();\n return URL.createObjectURL(blob);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 3a:"$39:body"