2d:null 2e:["$","title",null,{"children":"Data-driven particle animation 💫 | Yaryna Serkez | Observable"}] 33:T664,particleSystem = { const geometry = new THREE.BufferGeometry(); const vertices = []; const targetVertices = []; const colors = []; const sizes = []; const t = []; // create array for animation values let color = new THREE.Color(0xffffff); data.forEach((el, idx) => { vertices.push(0, 0, 0); // all satellites start from 0, 0, 0 for simplicity targetVertices.push(el.tY, el.tZ, el.tX); // final position as calculated with satellite.js color = color.setStyle(colorScale(el.country)); colors.push(color.r, color.g, color.b); sizes.push(2.5); t.push(1.0); // start with 1.0 so we can see the satellites when the page is loaded, reset to 0 with animate button }); geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); geometry.addAttribute('targetPosition', new THREE.Float32BufferAttribute(targetVertices, 3)); geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); geometry.addAttribute('size', new THREE.Float32BufferAttribute(sizes, 1).setDynamic(true)); geometry.addAttribute('t', new THREE.Float32BufferAttribute(t, 1).setDynamic(true)); const material = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true, blending: THREE.NormalBlending, vertexColors: true }); const particleSystem = new THREE.Points(geometry, material); return particleSystem; }34:T421,vertexShader = ` attribute vec3 targetPosition; attribute float size; attribute float t; varying vec3 vColor; float exponentialInOut(float k) { if (k <= 0.0) { return 0.0; } else if (k >= 1.0) { return 1.0; } else if ((k *= 2.0) < 1.0) { return 0.5 * pow(1024.0, k - 1.0); } return 0.5 * (-pow(2.0, - 10.0 * (k - 1.0)) + 2.0); } void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size; float progress = exponentialInOut(t); vec3 delta = targetPosition - position; vec3 newPosition = position + delta * progress; gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); } `;35:[] 31:{"id":"5a753aef77ca92ae","slug":"webgl-data-driven-particle-animation","title":"Data-driven particle animation 💫","thumbnail":"46e7036f22a13f0b30fdc699ead0d04e37220973f1b454febee94ff7ea223831","access_level":"public","create_time":"$D2019-06-26T07:55:08.717Z","update_time":"$D2023-08-30T10:33:00.355Z","view_time":null,"first_public_time":"$D2019-07-01T09:49:25.543Z","has_unpublished_edits":null,"fork":false,"stars":68,"starred":false,"owner":{"type":"team","id":"111af24f94d7b023","login":"yarynam","name":"Yaryna Serkez","avatar_url":"https://avatars-next.observableusercontent.com/bca6d96df7f3fc600b0aad634ef487d7b82b5fbfdc296d9eb6079a26072d9b30","tier":"starter_2024"},"version":535,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"768e5a1d5023a4e2","login":"yarynam","name":"Yaryna Serkez","avatar_url":"https://avatars-next.observableusercontent.com/bca6d96df7f3fc600b0aad634ef487d7b82b5fbfdc296d9eb6079a26072d9b30","tier":null}],"members":[{"type":"individual","id":"768e5a1d5023a4e2","login":"yarynam","name":"Yaryna Serkez","avatar_url":"https://avatars-next.observableusercontent.com/bca6d96df7f3fc600b0aad634ef487d7b82b5fbfdc296d9eb6079a26072d9b30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":30,"collection":null,"type":"notebook","body":{"title":"Data-driven particle animation 💫","cells":[{"id":0,"value":"md`# Data-driven particle animation 💫`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`For our recent [space story](https://www.wsj.com/graphics/new-space-race/), we planned to build an animated timeline of satellite launches. Seems like a good opportunity for GLSL shaders, right? But how about tweening? Assigning each particle a tween would be a performance nightmare. Luckily I've stumbled upon this great StackOverflow [post](https://stackoverflow.com/questions/35328937/how-to-tween-10-000-particles-in-three-js) and learned that it's fairly easy to implement [Tween.js](https://github.com/tweenjs/tween.js/blob/master/src/Tween.js) logic within the vertex shader. The idea is so simple, it blew my mind. Tweening function is moved within vertex shader so all calculations are handled by GPU and data needed for animation is stored in BufferGeometry attributes 🎉🎉🎉`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"container = {\n const title = DOM.element('h2');\n title.id = \"chart-title\";\n title.innerHTML = \"Launches by country\"\n return title\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"{ \n const div = DOM.element('div');\n countries.forEach((el, idx) => {\n const html = `

\n ${el}\n

`;\n div.innerHTML += html;\n });\n yield div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"{\n const button = html``\n button.onclick = function(event) {\n let year = 1957;\n updateArray();\n var t = d3.interval(() => {\n ++ year \n particleAnimation(year)\n if ( year > 2018) t.stop();\n }, 100);\n }\n return button\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"renderer = { \n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, height);\n \n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.minDistance = 50000;\n controls.maxDistance = 150000;\n controls.enablePan = false;\n \n while (true) {\n \n const ts = particleSystem.geometry.attributes.t.array;\n for (var i = 0; i < ts.length; i++) {\n ts[i] = ts[i] > 0 && ts[i] < 1 ? ts[i] + 0.01 : \n ts[i] >= 1 ? 1 :\n 0;\n }\n particleSystem.geometry.attributes.t.needsUpdate = true; \n \n \n renderer.render(scene, camera);\n renderer.domElement.id = 'sceneCanvas'\n yield renderer.domElement\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":" \n// reset t attribute to 0\nfunction updateArray() {\n const a = particleSystem.geometry.attributes.t;\n a.array.forEach((el, idx) => {\n a.array[idx] = 0;\n });\n a.needsUpdate = true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"\n// trigger t update based on launch date \nfunction particleAnimation(year) {\n document.getElementById('chart-title').innerHTML = `Launches in ${year} by country` //update title\n data.forEach((k, idx) => {\n if (parseInt(k.launch) <= year && particleSystem.geometry.attributes.t.array[idx] == 0) {\n particleSystem.geometry.attributes.t.array[idx] = 0.001;\n }\n });\n particleSystem.geometry.attributes.t.needsUpdate = true;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"fragmentShader = `\n varying vec3 vColor;\n\n void main() {\n gl_FragColor = vec4(vColor, 1.0); \n }\n\n `;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function createPlanet (r, img) {\n const geometry = new THREE.SphereGeometry(r, 70, 70);\n const material = new THREE.MeshStandardMaterial({\n map: new THREE.TextureLoader().load(img),\n roughness: 1,\n metalness: 0\n });\n const mesh = new THREE.Mesh(geometry, material);\n return mesh\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"camera = {\n const fov = 45;\n const aspect = width/height;\n const near = 1000;\n const far = 200000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(0, 70000, 110000)\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color('#020202');\n \n const ambientLight = new THREE.AmbientLight('white', 0.25);\n const spotLight = new THREE.SpotLight('white');\n spotLight.position.set(75000, 75000, 75000);\n \n const earth = createPlanet(6378, \"https://i.ibb.co/R7bpCNz/earth-dark.jpg\");\n earth.position.set(0, 0, 0);\n \n scene.add(earth);\n scene.add(ambientLight);\n scene.add(spotLight);\n scene.add(particleSystem);\n \n return scene\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"colorScale = d3.scaleOrdinal().range(colorList).domain(countries);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"countries = {\n const countryCount = d3.nest()\n .key(d => d.country)\n .rollup(a => a.length)\n .entries(data)\n .sort((a, b) => d3.descending(a.value, b.value));\n \n // Move 'Others' to the end of the list\n const cleanList = [...new Set(countryCount.map(item => item.key))]\n cleanList.push(cleanList.splice(cleanList.indexOf(\"Others\"), 1)[0]);\n \n return cleanList\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"colorList = ['#13F2DC', '#7A79E8', '#9B3E75', '#bdbdbd'];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`### Dependencies & Data`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`Well, recreating the exact orbits for all 8k+ satellites for the last 60+ years seems like overkill for this project. It would require loading lots of data (TLE data is being updated on a regular basis and satellites change their orbital paths quite often) and introducing needless visual complexity which has nothing to do with our initial goal. Some level of abstraction was essential. Since we are using a simple linear interpolation, we are interested only in the 'final' (static for a certain moment in time) position which was calculated based on the latest [TLE data](https://www.space-track.org/documentation#/api) with the super handy [Satellite.js](https://github.com/shashwatak/satellite-js) library. In cases when TLE data was not available (decayed satellites), the approximate position was calculated based on the satellite's inclination and apogee.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"data = d3.csv('https://gist.githubusercontent.com/yarynam/fced8b86b800b2ee1de3352bafbf9458/raw/e07803b2fdf81b7befb82ec1c8d2f2e3a20f71cd/precleaned-sats.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"