2d:null 2e:["$","title",null,{"children":"Antarctica | Particles | glaciers velocity | JB Barré | Observable"}] 33:T6c5,{ let display = html`

`; let map = html`

`; //let mesh = buildMeshes(topo); let mapSvg = svg``; map.appendChild(mapSvg); // load and display Antarctica var projection = d3 .geoIdentity() .reflectY(true) .fitSize( [width, height], topojson.feature(antarctica_json, antarctica_json.objects.coastline) ); var path = d3.geoPath().projection(projection); // Use the path to plot the US map based on the geometry data. d3.select(mapSvg) .append("g") .selectAll("path") .data( topojson.feature(antarctica_json, antarctica_json.objects.coastline) .features ) .enter() .append("path") .attr("d", path) .style("fill", "#333740"); let overlay = html`

`; display.appendChild(map); overlay.appendChild(context.canvas); display.appendChild(overlay); return display; } // viewof canvas = context.canvas34:T464,context = { const context = DOM.context2d(width, height); context.canvas.width = width; context.canvas.height = height; context.setTransform(1, 0, 0, 1, -7, 12); window.t = 0; function draw() { let prev = context.globalCompositeOperation; context.globalCompositeOperation = "destination-in"; context.fillRect(0, 0, width, height); context.globalCompositeOperation = prev; context.beginPath(); particles.forEach((p) => { if ((p.visible = 1)) { let x = p.x0 + 0.5; let y = p.y0 + 0.5; context.moveTo(x, y); x = p.x1 + 0.5; y = p.y1 + 0.5; context.lineTo(x, y); p.x0 = p.x1; p.y0 = p.y1; p.lon0 = p.lon1; p.lat0 = p.lat1; } else { p.visible = 1; } }); // particles color context.strokeStyle = "rgb(224, 239, 255)"; context.stroke(); } //context.lineWidth = 1.0; context.fillStyle = settings.fadeFillStyle; function animate() { requestAnimationFrame(animate); evolve(); draw(); } animate(); context.canvas.id = "canvas"; return context; }35:T463,generate_particles = function (particles, n) { // Create n particles on an almost uniform grid let Iinit, xinit, yinit, x0, y0, x1, y1, loninit, latinit, lon0, lat0, lat1, lon1, visible, age; // particles.length = 0; for (let i = 0; i < n; i++) { Iinit = Math.round(Math.random() * notnull_vel.length); //Iinit = 63341; age = 0; particles.push({ xinit: lon2pixel(Number(notnull_vel[Iinit]["lon"])), yinit: lat2pixel(Number(notnull_vel[Iinit]["lat"])), loninit: Number(notnull_vel[Iinit]["lon"]), latinit: Number(notnull_vel[Iinit]["lat"]), x0: lon2pixel(Number(notnull_vel[Iinit]["lon"])), y0: lat2pixel(Number(notnull_vel[Iinit]["lat"])), lon0: Number(notnull_vel[Iinit]["lon"]), lat0: Number(notnull_vel[Iinit]["lat"]), x1: lon2pixel(Number(notnull_vel[Iinit]["lon"])), y1: lat2pixel(Number(notnull_vel[Iinit]["lat"])), lon1: Number(notnull_vel[Iinit]["lon"]), lat1: Number(notnull_vel[Iinit]["lat"]), visible: 1, age: age }); } return particles; }36:[{"id":"3a059662a165f063bb84bab4babe0983ad67d8c4bda59fe0424ebebb1a7489f94f861a1cbcbda5fdbf988fcffcdf1c897ad60d1217e352d1430e63b21d3ad274","href":"https://static.observableusercontent.com/files/3a059662a165f063bb84bab4babe0983ad67d8c4bda59fe0424ebebb1a7489f94f861a1cbcbda5fdbf988fcffcdf1c897ad60d1217e352d1430e63b21d3ad274","name":"antarctica_light.json","type":"application/json","lastModified":1637138088852.118,"size":13692},{"id":"cfc51c6340ae3f1aa5626e327e94c31f178de0ff46cbd7a023513de2e980ec72e84d7f00f844130f1603ee7a310d06256e9e61924b4abf1a567726693b09ab18","href":"https://static.observableusercontent.com/files/cfc51c6340ae3f1aa5626e327e94c31f178de0ff46cbd7a023513de2e980ec72e84d7f00f844130f1603ee7a310d06256e9e61924b4abf1a567726693b09ab18","name":"antarctic_ice_vel_notnull_9.csv","type":"text/csv","lastModified":1637070505942.54,"size":5299268},{"id":"f6e3a2990addd8c54a047957f91edce0b98d4034f81dc03af6abc0449d151106a66866583db1350d9ed85e1fbd1c813d70e2c8186057e561b241d10b48ebdf9c","href":"https://static.observableusercontent.com/files/f6e3a2990addd8c54a047957f91edce0b98d4034f81dc03af6abc0449d151106a66866583db1350d9ed85e1fbd1c813d70e2c8186057e561b241d10b48ebdf9c","name":"antarctic_ice_vel_notnull_9.json","type":"application/json","lastModified":1637070023169.555,"size":9147958}] 31:{"id":"2ebd629ce6c9de10","slug":"antarctica-particles-glaciers-velocity","title":"Antarctica | Particles | glaciers velocity","thumbnail":"deac0c9c15e749fbe46302485fbc660c0bdf33558d4f689abaca7bfbac2f500c","access_level":"public","create_time":"$D2021-10-20T09:49:44.329Z","update_time":"$D2022-08-04T13:06:11.374Z","view_time":null,"first_public_time":"$D2022-08-01T14:37:55.846Z","has_unpublished_edits":null,"fork":{"id":"588e80df1b09ca8c","slug":"simple-html-canvas","title":"Simple HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"fa9117f31871f44e","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":"starter_2024"},"version":2348,"publish_version":2348,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f264b403736fe26","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":null}],"members":[{"type":"individual","id":"1f264b403736fe26","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Antarctica | Particles | glaciers velocity","cells":[{"id":0,"value":"# Antarctica | Particles | glaciers velocity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2343,"value":"The particles flow represents the displacement of ice on the Antarctic ice sheet. The path is computed from the Ice velocity dataset [MEaSUREs InSAR-Based Antarctica Ice Velocity Map](https://nsidc.org/data/nsidc-0484/versions/2). The trajectory of the particles corresponds to the flow lines of the glaciers. The trajectory of an ice particle is much more complex.\n\nThe animation is inspired from the [animated wind map notebook](https://observablehq.com/@oskarkocol/animated-wind-map) of @oskarkocol. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"{\n // window.t = window.t +1;\n let canvas = context.canvas;\n //context.clearRect(0, 0, canvas.width, canvas.height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"settings = ({\n particleCount: 550,\n maxParticleAge: 80,\n animate: true,\n frameRate: 20,\n velocityScale: 0.018,\n fadeFillStyle: \"rgba(134, 217, 252, 0.95)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"## Animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"function evolve() {\n R.forEach((p) => {\n let xinit = p.xinit;\n let yinit = p.yinit;\n let loninit = p.loninit;\n let latinit = p.latinit;\n let x0 = p.x0;\n let y0 = p.y0;\n let lon0 = p.lon0;\n let lat0 = p.lat0;\n let visible = p.visible;\n let v = vector(x0, y0, lon0, lat0, visible);\n if (v.vis == 1) {\n //console.log(\"Particle in!\");\n p.x1 = v.x1;\n p.y1 = v.y1;\n p.lon1 = v.lon1;\n p.lat1 = v.lat1;\n } else {\n //console.log(\"Particle out!\");\n p.x0 = p.xinit;\n p.y0 = p.yinit;\n p.lon0 = p.loninit;\n p.lat0 = p.latinit;\n p.x1 = p.xinit;\n p.y1 = p.yinit;\n p.lon1 = p.loninit;\n p.lat1 = p.latinit;\n }\n console.log(\"x0:\" + p.x0 + \",y0:\" + p.y0);\n console.log(\"lon0:\" + p.lon0 + \",lat0:\" + p.lat0);\n console.log(\"x1:\" + p.x1 + \",y1:\" + p.y1);\n console.log(\"lon1:\" + p.lon1 + \",lat1:\" + p.lat1);\n console.log(\"dx:\" + v.dx + \",dy:\" + v.dy);\n console.log(\"u1: \" + v.u1);\n }, particles);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"vector = {\n return function (x0, y0, lon0, lat0, visible) {\n //t = R.clamp(0, Time - 0.01, t);\n //let i = Math.floor(t);\n let x1, y1, lon1, lat1, dx, dy;\n let u1, vis;\n let u = data[lon0][lat0][\"u\"];\n let v = -data[lon0][lat0][\"v\"];\n dx = u * settings.velocityScale;\n dy = v * settings.velocityScale;\n x1 = Math.round(x0 + dx);\n y1 = Math.round(y0 + dy);\n lon1 = pixel2lon(x1);\n lat1 = pixel2lat(y1);\n // t = t - i;\n if (typeof data[lon1][lat1] === \"object\") {\n return {\n x1: x1,\n y1: y1,\n lon1: lon1,\n lat1: lat1,\n dx: dx,\n dy: dy,\n vis: 1,\n u1: data[lon1][lat1][\"u\"]\n };\n } else {\n return {\n vis: 0\n };\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"generate_particles(particles, settings.particleCount)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"particles = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"## Utilities: Variables, functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"### generate a set of particles\ncreate an array with coordinates in longitude, latitude or in pixels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"Size of the canvas - Multiple of 622","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"width = 622","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"pixel2lat = function (y) {\n return latOffset + resolution * (height - 1) - resolution * y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"lat2pixel = function (y) {\n return (\n height - 1 - canvas_resolution * Math.round((y - latOffset) / resolution)\n );\n}\n//.interpolate(d3.interpolateRound);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"pixel2lon = function (x) {\n return resolution * Math.floor(x / canvas_resolution) + lonOffset;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"lon2pixel = function (y) {\n return canvas_resolution * Math.round((y - lonOffset) / resolution);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"NearestCoords = function (x, resolution, type) {\n if (type == \"lon\") {\n return x - ((-ZeroLon + x) % resolution);\n } else {\n return x - ((-ZeroLat + x) % resolution);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1805,"value":"ZeroLat = 5725","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"ZeroLon = 3275","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"latOffset = -2793275","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"lonOffset = -2795725","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"// get the pixel size\nresolution = Object.keys(data)[1] - Object.keys(data)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"canvas_resolution = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1437,"value":"notnull_vel = FileAttachment(\"antarctic_ice_vel_notnull_9.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2308,"value":"### Antarctica coastline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2130,"value":"antarctica_json = FileAttachment(\"antarctica_light.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"### Velocities data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"Format the data into an adapted shape:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"data = {\n var data_object = new Object();\n let data_size = Object.keys(raw_data.data).length;\n\n for (var i = 0; i < data_size; i++) {\n var u = raw_data.data[i][\"VX\"];\n var v = raw_data.data[i][\"VY\"];\n if (!(raw_data.data[i][\"lon\"] in data_object)) {\n data_object[raw_data.data[i][\"lon\"]] = new Object();\n }\n data_object[raw_data.data[i][\"lon\"]][raw_data.data[i][\"lat\"]] = {\n u: u,\n v: v\n };\n }\n return data_object;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2315,"value":"Load data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"raw_data = FileAttachment(\"antarctic_ice_vel_notnull_9.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"## Librairies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"R = require(\"ramda@0.25\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"