2d:null 2e:["$","title",null,{"children":"Civil Engineering vis demo: Playing with Traffic | Devin Bayly | Observable"}] 33:T9e9,{ aframe; if (aframe.components['cars'] != undefined) { delete aframe.components['cars']; } aframe.registerComponent('cars', { init() { // get our cleanedData, and create box elements for each item this.data = data; this.step = 0; this.scale = .12; this.entities = this.data[this.step].map(e => { let entity = document.createElement("a-entity"); entity.setAttribute("movingModel", ""); return entity; }); // add them to the scene by appendng to scene ele let starting_data = this.data[this.step]; this.entities.map((e, i) => { let data = starting_data[i]; e.object3D.position.set(data.x * this.scale, 0, data.y * this.scale); e.object3D.rotation.y = 2 * Math.PI - data.rotation; this.el.sceneEl.append(e); }); let run = () => { this.step = (this.step + 1) % data.length; let last_step = data[this.step - 1]; let next_step = data[this.step]; if (last_step == undefined || next_step == undefined) { console.log("continuing"); } else { // add more entities if (last_step.length < next_step.length) { let new_boxes = Array(next_step.length - last_step.length) .fill(0) .map(e => { { let entity = document.createElement("a-entity"); entity.setAttribute("movingModel", ""); return entity; } }); new_boxes.map(e => { this.el.sceneEl.append(e); }); this.entities = [...this.entities, ...new_boxes]; } else if (last_step.length > next_step.length) { // remove some entities let remove_ind = last_step.length - next_step.length; let to_remove = this.entities.slice(0, remove_ind); to_remove.map(e => e.remove()); this.entities = this.entities.slice(remove_ind); } // if the new data is longer add boxes at the end of our this entities, if its shorter, remove from the front this.entities.map((e, i) => { let new_data = next_step[i]; e.object3D.position.set( new_data.x * this.scale, 0, new_data.y * this.scale ); e.object3D.rotation.y = 2 * Math.PI - new_data.rotation; }); } setTimeout(run, 500); }; run(); } }); }34:[{"id":"bc793b59de0443915cc731b844faece2356511aee127c8129fbbef5c800f00fba5e34a03690bd18b494cbed9bd8bbaf8fa4cc84e76e41b24d9075db6d85aa46b","href":"https://static.observableusercontent.com/files/bc793b59de0443915cc731b844faece2356511aee127c8129fbbef5c800f00fba5e34a03690bd18b494cbed9bd8bbaf8fa4cc84e76e41b24d9075db6d85aa46b","name":"data_with_rotation","type":"application/octet-stream","lastModified":1614363575944.683,"size":7274118},{"id":"a4fdea2aa4a4b81f0420d2c418de3bca6d498eadbb38bd567986b4917a85fb9828e18be11bf109d496dc3898bead363096b0151661bdda6ac80d99d171116663","href":"https://static.observableusercontent.com/files/a4fdea2aa4a4b81f0420d2c418de3bca6d498eadbb38bd567986b4917a85fb9828e18be11bf109d496dc3898bead363096b0151661bdda6ac80d99d171116663","name":"intersection@2.glb","type":"model/gltf-binary","lastModified":1614363575944.683,"size":70456}] 31:{"id":"e09e32c1992ce15e","slug":"civil-engineering-vis-demo-playing-with-traffic","title":"Civil Engineering vis demo: Playing with Traffic","thumbnail":"23c6031f5b9d36ca7076002d6a1c7a196fd98eada2f9908974284d3f6589d3e5","access_level":"public","create_time":"$D2021-02-26T18:19:35.944Z","update_time":"$D2021-02-27T23:46:18.375Z","view_time":null,"first_public_time":"$D2021-02-26T18:31:12.528Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a160e29293f9b8d0","login":"devinbayly","name":"Devin Bayly","avatar_url":"https://avatars-next.observableusercontent.com/298031e6b8303c3e444bab1c4012a47a7678618423f5f86b941ff634ea65a5b0","tier":"pro_2024","bio":""},"version":591,"publish_version":591,"role":null,"authored":false,"authors":[{"type":"individual","id":"f10b672ee4126523","login":"devinbayly","name":"Devin Bayly","avatar_url":"https://avatars-next.observableusercontent.com/298031e6b8303c3e444bab1c4012a47a7678618423f5f86b941ff634ea65a5b0","tier":null,"bio":""}],"members":[{"type":"individual","id":"f10b672ee4126523","login":"devinbayly","name":"Devin Bayly","avatar_url":"https://avatars-next.observableusercontent.com/298031e6b8303c3e444bab1c4012a47a7678618423f5f86b941ff634ea65a5b0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Civil Engineering vis demo: Playing with Traffic","cells":[{"id":0,"value":"md`# Civil Engineering vis demo: Playing with Traffic\ndata from https://github.com/cityflow-project/CityFlow\n\nmodel from https://sketchfab.com/3d-models/low-poly-car-fcdb0c27f7d04d47a518a249ae7093a2\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"{\n let ctx = DOM.context2d(width, height);\n let { scalex, scaley } = scales;\n console.log(scalex(-200), scaley(200));\n let i = 0;\n while (true) {\n i = (i + 1) % data.length;\n let stepdata = data[i];\n ctx.clearRect(0, 0, width, height);\n for (let car of stepdata) {\n ctx.fillRect(scalex(car.x), scaley(car.y), 5, 5);\n }\n\n yield new Promise(resolve => {\n setTimeout(() => resolve(ctx.canvas), 100);\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"//presentScene()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"// {\n// if (aframe.components['intersection'] != undefined) {\n// delete aframe.components['intersection'];\n// }\n// aframe.registerComponent('intersection', {\n// async update() {\n// let intersectionURL = await FileAttachment(\"restart@3.glb\").url();\n// let loader = new THREE.GLTFLoader();\n// var self = this;\n// var el = this.el;\n// loader.load(intersectionURL, gltf => {\n// self.model = gltf.scene || gltf.scenes[0];\n// el.setObject3D('mesh', self.model);\n// el.emit('model-loaded', { format: 'gltf', model: self.model });\n// });\n// },\n// remove() {\n// this.el.removeObject3D('mesh');\n// }\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"// {\n// if (aframe.components['movingmodel'] != undefined) {\n// delete aframe.components['movingmodel'];\n// }\n// aframe.registerComponent('movingmodel', {\n// async update() {\n// // const geo = new THREE.BoxGeometry();\n// // const material = new THREE.MeshBasicMaterial({ color: \"red\" });\n// // const cube = new THREE.Mesh(geo, material);\n// // //cube.scale.set(.1, .1, .1);\n// // this.el.setObject3D('mesh', cube);\n// let modelURL;\n// modelURL = await FileAttachment(\"car.glb\").url();\n// let loader = new THREE.GLTFLoader();\n// var self = this;\n// var el = this.el;\n// loader.load(modelURL, gltf => {\n// self.model = gltf.scene || gltf.scenes[0];\n// el.setObject3D('mesh', self.model);\n// el.emit('model-loaded', { format: 'gltf', model: self.model });\n// });\n// },\n// remove() {\n// this.el.removeObject3D('mesh');\n// }\n// });\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"dataText = FileAttachment(\"data_with_rotation\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"data = {\n let dataArray = dataText\n .split(\"\\\\n\")\n .map(line =>\n line\n .split(',')\n .map(posPair =>\n posPair.split(' ').map(pos => parseFloat(pos.replace(/\"/g, \"\")))\n )\n );\n let dataObs = dataArray.map(cars =>\n cars.map(car => ({ x: car[0], y: car[1], rotation: car[2] }))\n );\n return dataObs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"inf = 10000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"scales = {\n let xextent = [inf, -inf];\n let yextent = [inf, -inf];\n for (let step = 0; step < data.length; step++) {\n let cars = data[step];\n for (let car of cars) {\n xextent[0] = car.x < xextent[0] ? car.x : xextent[0];\n xextent[1] = car.x > xextent[1] ? car.x : xextent[1];\n yextent[0] = car.y < yextent[0] ? car.y : yextent[0];\n yextent[1] = car.y > yextent[1] ? car.y : yextent[1];\n }\n }\n let scalex = d3\n .scaleLinear()\n .domain(xextent)\n .range([0, width]);\n let scaley = d3\n .scaleLinear()\n .domain(yextent)\n .range([height, 0]);\n return { scalex, scaley };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"intersectionModel = URL.createObjectURL(\n await FileAttachment(\"intersection@2.glb\").blob()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"//https://drive.google.com/file/d/1sbboSuMz8BdqdFUBqL_zCf9L3Hq21pNe/view?usp=sharing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"scales.scalex.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function presentScene() {\n return html`

\n\n \n \n \n\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"aframe = {\n const aframe = (window.aframe = await require(\"aframe\"));\n await import('https://unpkg.com/aframe-htmlembed-component@1.0.0/dist/build.js');\n return aframe;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`the stuff down here is from back when the data had to be read from a file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"input = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"result = {\n let data = [];\n input.onchange = async e => {\n let name = e.target.files[0];\n let res = await fetch(URL.createObjectURL(name)).then(res => res.text());\n console.log(res.length);\n data.push(res);\n };\n return { data };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"result.data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// cleanedData = {\n// let sim_data = result.data[0];\n// let logs = sim_data.split(\"\\n\");\n// let justPoints = [];\n// let i = 0;\n// for (let step of logs) {\n// let stepInfo = { time: i, cars: [] };\n// let [carLog, tlLog] = step.split(\";\");\n// let cars = carLog.split(\",\");\n// for (let car of cars) {\n// let pts = car.split(\" \").slice(0, 3);\n// let carPoint = {\n// x: parseFloat(pts[0]),\n// y: parseFloat(pts[1]),\n// rotation: parseFloat(pts[2])\n// };\n// stepInfo.cars.push(carPoint);\n// }\n// justPoints.push(stepInfo);\n// i++;\n// }\n// return justPoints;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// converted = {\n// return cleanedData\n// .map(e =>\n// e.cars\n// .map(\n// car =>\n// `${car.x.toPrecision(2)} ${car.y.toPrecision(\n// 2\n// )} ${car.rotation.toPrecision(2)}`\n// )\n// .join(',')\n// )\n// .join('\\n');\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// {\n// let a = document.createElement(\"a\");\n// a.download = \"just_pos.txt\";\n// a.innerHTML = \"download cleaned\";\n// a.href = URL.createObjectURL(new Blob([JSON.stringify(converted)]));\n// return a;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 32:"$31:body"