2d:null 2e:["$","title",null,{"children":"Antarctica V1.3 | Particles | Add the basemap | JB Barré | Observable"}] 33:T51b,{ let display = html`

`; let map = html`

`; //let mesh = buildMeshes(topo); let mapSvg = svg``; map.appendChild(mapSvg); 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", "#d3d8e0"); // plot graticule var graticule = d3.geoGraticule10(); d3.select(mapSvg) .append("path") .datum(graticule) .attr("stroke", "black") .attr("fill", "none") .attr("d", path); let overlay = html`

`; display.appendChild(map); overlay.appendChild(context.canvas); display.appendChild(overlay); return display; } // viewof canvas = context.canvas34:T98a,context = { const context = DOM.context2d(width, height); context.canvas.width = width; context.canvas.height = height; function draw() { let prev = context.globalCompositeOperation; context.globalCompositeOperation = "destination-in"; context.fillRect(0, 0, width, height); context.globalCompositeOperation = prev; context.beginPath(); context.strokeStyle = settings.fadeFillStyle; particles.forEach((p, index) => { //if particle distance > distMin ( to avoid very short path and stuck particles) if (p.age < settings.maxParticleAge) { if ((p.visible = 1)) { let x = p.x0; let y = p.y0; context.moveTo(x, y); x = p.x1; y = p.y1; context.lineTo(x, y); p.x0 = p.x1; p.y0 = p.y1; p.lon0 = p.lon1; p.lat0 = p.lat1; } else { p.visible = 1; } } else { if (Math.sqrt((p.xinit - p.x1) ** 2 + (p.yinit - p.y1) ** 2 > 20)) { p.age = 0; p.x0 = p.xinit; p.y0 = p.yinit; p.lon0 = p.loninit; p.lat0 = p.latinit; } else { particles.splice(index, 1); } } }); context.stroke(); } //context.lineWidth = 1.0; context.fillStyle = settings.fadeFillStyle; var stop = false; var frameCount = 0; var fps, fpsInterval, startTime, now, then, elapsed; function startAnimating(fps) { fpsInterval = 1000 / fps; then = window.performance.now(); startTime = then; console.log(startTime); animate(); } function animate(newtime) { // stop if (stop) { return; } // request another frame requestAnimationFrame(animate); // calc elapsed time since last loop now = newtime; elapsed = now - then; // if enough time has elapsed, draw the next frame if (elapsed > fpsInterval) { // Get ready for next frame by setting then=now, but... // Also, adjust for fpsInterval not being multiple of 16.67 then = now - (elapsed % fpsInterval); // draw stuff here evolve(); draw(); // TESTING...Report #seconds since start and achieved fps. var sinceStart = now - startTime; var currentFps = Math.round((1000 / (sinceStart / ++frameCount)) * 100) / 100; } } startAnimating(settings.frameRate); context.canvas.id = "canvas"; return context; }35:T426,function evolve() { R.forEach((p) => { let xinit = p.xinit; let yinit = p.yinit; let loninit = p.loninit; let latinit = p.latinit; let x0 = p.x0; let y0 = p.y0; let lon0 = p.lon0; let lat0 = p.lat0; let visible = p.visible; let v = vector(x0, y0, lon0, lat0, visible); if (v.vis == 1 ) { p.x1 = v.x1; p.y1 = v.y1; p.lon1 = v.lon1; p.lat1 = v.lat1; p.age = p.age + 1; } else { p.x0 = p.xinit; p.y0 = p.yinit; p.lon0 = p.loninit; p.lat0 = p.latinit; p.x1 = p.xinit; p.y1 = p.yinit; p.lon1 = p.loninit; p.lat1 = p.latinit; } console.log("age:" + p.age); console.log( "segment length:" + Math.sqrt((p.x1 - p.x0) ** 2 + (p.y1 - p.y0) ** 2) ); //console.log("number of particles: " + particles.length); console.log("lon0:" + p.lon0 + ", lat0:" + p.lat0); console.log("x0:" + p.x0 + ", y0:" + p.y0); console.log(p.lon1 + ";" + p.lat1); console.log("x1:" + p.x1 + ", y1:" + p.y1); }, particles); }36:T5ec,vector = { return function (x0, y0, lon0, lat0, visible) { let x1, y1, lon1, lat1, dx, dy; let u1, vis; let u0 = data[lon0][lat0]["u"]; //bilinearInterpolator(lon0, lat0, "u")//data[lon0][lat0]["u"]; let v0 = -data[lon0][lat0]["v"]; //-bilinearInterpolator(lon0, lat0, "v")//data[lon0][lat0]["v"]; dx = u0 * settings.velocityScale; dy = v0 * settings.velocityScale; x1 = x0 + dx; y1 = y0 + dy; if ( NearestLonLat( Math.round(projection.invert([x1, y1])[0]), Math.round(projection.invert([x1, y1])[1]) ) != "outofrange" && Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2) !== 0 ) { lon1 = NearestLonLat( Math.round(projection.invert([x1, y1])[0]), Math.round(projection.invert([x1, y1])[1]) ).lon; lat1 = NearestLonLat( Math.round(projection.invert([x1, y1])[0]), Math.round(projection.invert([x1, y1])[1]) ).lat; let u1 = data[lon1][lat1]["u"]; //bilinearInterpolator(lon1, lat1, "u"); let v1 = -data[lon1][lat1]["v"]; //-bilinearInterpolator(lon1, lat1, "v"); let ut = u0; //(u0 + u1) / 2; let vt = v0; // (v0 + v1) / 2; let dxt = ut * settings.velocityScale; let dyt = vt * settings.velocityScale; x1 = x0 + dxt; y1 = y0 + dyt; return { x1: x1, y1: y1, lon1: lon1, lat1: lat1, dxt: dxt, dyt: dyt, vis: 1 }; } else { return { vis: 0 }; } }; }37:T443,generate_particles = function (particles, n) { // Create particles let lonlatitude, xinit, yinit, x0, y0, x1, y1, loninit, latinit, lon0, lat0, lat1, lon1, visible, age; for (let i = 0; i < n; i++) { loninit = longitude[Math.floor(Math.random() * longitude.length)]; lonlatitude = Object.keys(data[loninit]).map((i) => Number(i)); latinit = lonlatitude[Math.floor(Math.random() * lonlatitude.length)]; age = rand(10, settings.maxParticleAge); particles.push({ xinit: Math.round(projection([loninit, latinit])[0]), yinit: Math.round(projection([loninit, latinit])[1]), loninit: loninit, latinit: latinit, x0: Math.round(projection([loninit, latinit])[0]), y0: Math.round(projection([loninit, latinit])[1]), lon0: loninit, lat0: latinit, x1: Math.round(projection([loninit, latinit])[0]), y1: Math.round(projection([loninit, latinit])[1]), lon1: loninit, lat1: latinit, visible: 1, age: age }); } return particles; }38:[{"id":"3a059662a165f063bb84bab4babe0983ad67d8c4bda59fe0424ebebb1a7489f94f861a1cbcbda5fdbf988fcffcdf1c897ad60d1217e352d1430e63b21d3ad274","href":"https://static.observableusercontent.com/files/3a059662a165f063bb84bab4babe0983ad67d8c4bda59fe0424ebebb1a7489f94f861a1cbcbda5fdbf988fcffcdf1c897ad60d1217e352d1430e63b21d3ad274","name":"antarctica_light.json","type":"application/json","lastModified":1638784905891.498,"size":13692},{"id":"f6e3a2990addd8c54a047957f91edce0b98d4034f81dc03af6abc0449d151106a66866583db1350d9ed85e1fbd1c813d70e2c8186057e561b241d10b48ebdf9c","href":"https://static.observableusercontent.com/files/f6e3a2990addd8c54a047957f91edce0b98d4034f81dc03af6abc0449d151106a66866583db1350d9ed85e1fbd1c813d70e2c8186057e561b241d10b48ebdf9c","name":"antarctic_ice_vel_notnull_9.json","type":"application/json","lastModified":1641830685604.838,"size":9147958}] 31:{"id":"ab7704c7248a4094","slug":"antarctica_ice_flow","title":"Antarctica V1.3 | Particles | Add the basemap","thumbnail":"2ec18394d0d65e606887d2683a877915434640aaa6e8dd540cd1d6092c08e699","access_level":"public","create_time":"$D2021-12-06T10:01:45.891Z","update_time":"$D2022-02-15T08:29:52.405Z","view_time":null,"first_public_time":"$D2022-01-14T10:50:55.988Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"fa9117f31871f44e","login":"jbaba","name":"JB Barré","avatar_url":"https://avatars-next.observableusercontent.com/6201aa9b338dd8290dc0bbb294ce0cde3f25f843a64b0011acfcb88165e1c6a0","tier":"starter_2024"},"version":5023,"publish_version":5023,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Antarctica V1.3 | Particles | Add the basemap","cells":[{"id":0,"value":"# Antarctica V1.3 | Particles | Add the basemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"{\n let canvas = context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"// number of particles\nn = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"settings = ({\n particleCount: 100,\n maxParticleAge: 50,\n animate: true,\n frameRate: 20,\n velocityScale: 0.03, //0.02\n fadeFillStyle: \"rgba(57,61,71, 0.92)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"## Particles\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2408,"value":"### Particles animation","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":2404,"value":"### Particles displacement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4949,"value":"Object.keys(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4229,"value":"// read the data object and return u/v component or outofrange if lon/lat outside\ngetValue = (lon, lat, composante) => {\n if (longitude.includes(lon)) {\n //get the nearest longitude in the dataset\n let nearLon = longitude.reduce(function (prev, next) {\n return Math.abs(next - lon) < Math.abs(prev - lon) ? next : prev;\n });\n // get the latitude values at the nearLon longitude in the dataset\n let latitude = Object.keys(data[nearLon]).map((i) => Number(i));\n\n let latMin = latitude.reduce(function (a, b) {\n return Math.min(a, b);\n });\n let latMax = latitude.reduce(function (a, b) {\n return Math.max(a, b);\n });\n\n if (latitude.includes(lat)) {\n return data[lon][lat][composante];\n } else {\n return \"outofrange\";\n }\n } else {\n return \"outofrange\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4225,"value":"bilinearInterpolator = (x, y, composante) => {\n const x1 = x - resolution;\n const x2 = x + resolution;\n const y1 = y - resolution;\n const y2 = y + resolution;\n\n // else: x1 != x2 and y1 != y2\n if (\n getValue(x1, y1, composante) != \"outofrange\" &&\n getValue(x1, y2, composante) != \"outofrange\" &&\n getValue(x2, y1, composante) != \"outofrange\" &&\n getValue(x2, y2, composante) != \"outofrange\"\n ) {\n return (\n (getValue(x1, y1, composante) * (x2 - x) * (y2 - y) +\n getValue(x2, y1, composante) * (x - x1) * (y2 - y) +\n getValue(x1, y2, composante) * (x2 - x) * (y - y1) +\n getValue(x2, y2, composante) * (x - x1) * (y - y1)) /\n ((x2 - x1) * (y2 - y1))\n );\n } else {\n return getValue(x, y, composante);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4827,"value":"projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4660,"value":"// find the nearest lon,lat of a point.\nfunction NearestLonLat(lon, lat) {\n let nearLon = longitude.reduce(function (prev, next) {\n return Math.abs(next - lon) < Math.abs(prev - lon) ? next : prev;\n });\n // get the latitude values at the nearLon longitude in the dataset\n let nearLat = latitude.reduce(function (prev, next) {\n return Math.abs(next - lat) < Math.abs(prev - lat) ? next : prev;\n });\n\n if (typeof data[nearLon][nearLat] != \"undefined\") {\n return {\n lon: nearLon,\n lat: nearLat\n };\n } else {\n return \"outofrange\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2419,"value":"### Particles creation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4794,"value":"particles = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"generate_particles(particles, n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4867,"value":"NearestLonLat(-2492094, 1570000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4757,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3893,"value":"rand = (min, max) => min + (max - min)*Math.random()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"Size of the canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"# Utile","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"### Define projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3214,"value":"projection = createProjection(bbox[0], bbox[1], bbox[2], bbox[3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3183,"value":"function createProjection(lng0, lat0, lng1, lat1) {\n let projection = d3.geoIdentity().reflectY(true);\n let p0 = projection([lng0, lat0]);\n let p1 = projection([lng1, lat1]);\n let s = 1 / ((p1[0] - p0[0]) / width);\n let t = [-lng0 * s, lat1 * s];\n return projection.scale(s).translate(t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4035,"value":"projectiontemp = d3.geoIdentity().reflectY(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3188,"value":"// bouding box of the Layer Lat/Lon at 4500m resolution :-2800225,-2802275,2802275,2800225\nbbox = [-2802275, -2800225, 2800225, 2802275]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3696,"value":"lonMax = longitude.reduce(function (a, b) {\n return Math.max(a, b);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3701,"value":"lonMin = longitude.reduce(function (a, b) {\n return Math.min(a, b);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3690,"value":"// get the longitude values in the dataset\n//longitude = Object.keys(data).map((i) => Number(i))\nlongitude = [...new Set(Object.values(raw_data.data).map((i) => i[\"lon\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4707,"value":"//longitude = d3.range(bbox[0], bbox[2], resolution)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4716,"value":"//latitude = d3.range(bbox[1], bbox[3], resolution)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4601,"value":"// get the latitude values and remote duplicates: uniq = [...new Set(array)]\nlatitude = [...new Set(Object.values(raw_data.data).map((i) => i[\"lat\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"// get the pixel size of source data\nresolution = Object.keys(data)[1] - Object.keys(data)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5017,"value":"Object.values(raw_data.data)","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":1357,"value":"Antarctica coastline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4486,"value":"antarcticaGeo = topojson.feature(\n antarctica_json,\n antarctica_json.objects.coastline\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2130,"value":"antarctica_json = FileAttachment(\"antarctica_light.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"Formatting the data in an appropriate form :","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":57,"value":"raw_data = FileAttachment(\"antarctic_ice_vel_notnull_9.json\").json()","pinned":true,"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":2296,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","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":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"