31:T587,map = { const context = this ? this.getContext("2d") : DOM.context2d(width, height), canvas = context.canvas; // Sky background const bkg_image = new Image() bkg_image.src = sky_image.src bkg_image.onload = () => { context.fillRect(0, 0, width, height) context.drawImage(sky_image, 0, 0, width, height) } const warp = geoWarp(projection, context); warp(projection_equirectangular, image); const path = d3.geoPath(projection, context); const render = function() { context.beginPath(); path(land); context.fillStyle = "rgba(100,100,255,0.2)"; context.filter = "blur(15px)"; context.fill("evenodd"); context.beginPath(); path(land); context.lineWidth = 10; context.strokeStyle = "rgba(100,100,255,0.2)"; context.filter = "blur(5px)"; context.stroke(); context.beginPath(); path(land); context.lineWidth = 2; context.strokeStyle = "rgba(150,150,150,0.8)"; context.filter = "blur(0.1px)"; context.stroke(); } // Activate for inertia /* if (d3.geoInertiaDrag) { canvas.inertia = d3.geoInertiaDrag( d3.select(context.canvas).style('cursor', 'move'), render, projection ); } invalidation.then(() => d3.select(canvas).on(".drag", null)); */ render(); return canvas; }32:T4ed,

Swirling flows of the ocean by C. Yamahata on Sketchfab

33:T9f7,function geoWarp(targetProjection, context) { /* * geoWarp is designed to have a similar interface to geoPath -- it takes a * projection and a context, and returns a function. The function can be used * to paint an image onto a canvas context, much like how a path function can * be used to paint GeoJSON geometries. */ return function(sourceProjection, image) { const bounds = d3.geoPath(targetProjection).bounds(sphere); const sourceContext = DOM.canvas(width, height).getContext("2d"); sourceContext.drawImage(image, 0, 0, width, height); const source = sourceContext.getImageData(0, 0, image.width, image.height) const sourceData = source.data; // TODO the dimensions of the target are hardcoded; can we get them from the context instead? const target = context.getImageData(0, 0, width, height); const targetData = target.data; // make a "cheat sheet" by projecting the sphere and filling it; we can use the resulting image data // to decide whether to invert or not. const cheatSheetContext = DOM.context2d(width, height); cheatSheetContext.beginPath(); d3.geoPath(targetProjection, cheatSheetContext)(sphere); cheatSheetContext.fill(); const cheatSheetImageData = cheatSheetContext.getImageData(0, 0, width, height); const cheatSheetData = cheatSheetImageData.data; for (var y = 0; y < target.height; y += 1) { for (var x = 0; x < target.width; x += 1) { let i = (y * target.width + x) * 4; // compute `i` early so we can use it for the cheat sheet const cheatPixelAlpha = cheatSheetData[i + 3]; // if any cheat pixel isn't black, it hasn't been filled when we projected the sphere, so skip it. if (cheatPixelAlpha === 0) { continue; } const p = [x, y]; const s = targetProjection.invert(p); if (!s) continue; const [λ, φ] = s; if (λ > 180 || λ < -180 || φ > 90 || φ < -90) continue; const q = sourceProjection([λ, φ]); const u = Math.round(q[0]), v = Math.round(q[1]); let now = performance.now(); // let i = (y * target.width + x) * 4; let j = (v * image.width + u) * 4; targetData[i] = sourceData[j]; targetData[++i] = sourceData[++j]; targetData[++i] = sourceData[++j]; targetData[++i] = 255; } } context.putImageData(target, 0, 0); } }34:[{"id":"f492c830aaf22f06154994f63d59f3cb3c0d6c255442b8754c75f6240c4e66c047f70b44148e99d4a550cf70d8eab75babedcd02ff62787b15560f19455287e1","href":"https://static.observableusercontent.com/files/f492c830aaf22f06154994f63d59f3cb3c0d6c255442b8754c75f6240c4e66c047f70b44148e99d4a550cf70d8eab75babedcd02ff62787b15560f19455287e1","name":"sky_bkg.jpg","type":"image/jpeg","lastModified":1705230428392.055,"size":130495},{"id":"8cbb24fe2c2f7a79aabc8b5a4508562fbfe2d647bce92c9232efdc8503c2b233054111f5d9f1520afab94ba9ffa770776b1f4822bcd2ddf5fa3e1d5edf13cf72","href":"https://static.observableusercontent.com/files/8cbb24fe2c2f7a79aabc8b5a4508562fbfe2d647bce92c9232efdc8503c2b233054111f5d9f1520afab94ba9ffa770776b1f4822bcd2ddf5fa3e1d5edf13cf72","name":"vivid-info-0.1.7.js","type":"application/javascript","lastModified":1705156803494.655,"size":1566},{"id":"9c00a9f346667a6fb71b4fbf131cf9996560a94bbcbead3b725f5220b0f2e8ff261ed58fc6ebe5ff1ee884d48e96c51947f7b652a78d7834d7e160ee060a59c6","href":"https://static.observableusercontent.com/files/9c00a9f346667a6fb71b4fbf131cf9996560a94bbcbead3b725f5220b0f2e8ff261ed58fc6ebe5ff1ee884d48e96c51947f7b652a78d7834d7e160ee060a59c6","name":"Perpetual__Ocean_Equirectangular@2.mp4","type":"video/mp4","lastModified":1705181961348.013,"size":12121178}] 2f:{"title":"Video reprojection on a map","cells":[{"id":0,"value":"md`# Video reprojection on a map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1651,"value":"

\n This notebook reuses Théo Jaunet's code (From video to frames) to extract video frames and reproject them onto a globe.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":602,"value":"viewof frameIdx = Scrubber(framesMap.keys(), {\n loop: true,\n autoplay: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"viewof lambda = Inputs.range([-180, 180], {value: -125, step: 0.5, label: \"lambda, λ (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"viewof phi = Inputs.range([-90, 90], {value: -5, step: 0.5, label: \"phi, φ (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"viewof gamma = Inputs.range([-90, 90], {value: -23, step: 0.5, label: \"gamma, γ (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"
\n⮦ Original video (Perpetual Ocean) [Source: NASA Scientific Visualization Studio].","pinned":false,"hidden":false,"mode":"html"},{"id":604,"value":"image = framesMap.get(frameIdx)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"
\n⮦ Starry night used as background image.","pinned":false,"hidden":false,"mode":"html"},{"id":1879,"value":"sky_image = await FileAttachment('sky_bkg.jpg').image();","pinned":false,"hidden":false,"mode":"ojs"},{"id":2022,"value":"---\n## Other model\n\nThe version below is an animated 3D model of the “swirling flows of the ocean” viewable on Sketchfab.","pinned":false,"hidden":false,"mode":"md"},{"id":2017,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":911,"value":"md`-----\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"video_src = FileAttachment(\"Perpetual__Ocean_Equirectangular@2.mp4\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"factor = 0.55","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"width = factor*image.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"height = factor*image.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"framerate = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"projection_equirectangular = d3.geoEquirectangular()\n .fitExtent([[1, 1], [width-1, height-1]], sphere);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"projection = d3.geoOrthographic()\n .rotate([lambda, phi, gamma])\n .fitExtent([[1, 1], [width-1, height-1]], sphere).scale(220);","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"framesMap = eachFrame(video_src, framerate, -1, 0, {\n crossOrigin: 'anonymous',\n debug: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"eachFrame = async (video_src, framerate, limit = -1, start = 0, options = {}) => {\n const debugLabel = `eachFrame on ${JSON.stringify({\n video_src,\n framerate,\n limit,\n start,\n options\n })}`;\n if (options.debug) console.time(debugLabel);\n // To gain some time, the duration can be passed in the options\n const duration =\n options.duration === undefined\n ? await vidvid.info(video_src, options).then(info => info.duration)\n : options.duration;\n const numFrames = limit == -1 ? duration * framerate - start : limit;\n const framesArray = new Map();\n for (let i = start; i < numFrames; i++) {\n const t = i / framerate;\n framesArray.set(i, await frameAt(video_src, t, options));\n }\n if (options.debug) console.timeEnd(debugLabel);\n return framesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"async function eachFrameArray(video_src, framerate, indexesArray, options = {}) {\n const debugLabel = `eachFrameArray on ${JSON.stringify({\n video_src,\n framerate,\n indexesArray,\n options\n })}`;\n if (options.debug) console.time(debugLabel);\n\n const framesArray = new Map();\n for (let i = 0; i < indexesArray.length; i++) {\n framesArray.set(\n indexesArray[i],\n await frameAt(video_src, indexesArray[i] / framerate, options)\n );\n }\n if (options.debug) console.timeEnd(debugLabel);\n return framesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"every5FramesMap = eachFrameArray(video_src, framerate, [0, 5, 10, 15], {\n crossOrigin: 'anonymous'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"//vidvid = import('https://unpkg.com/vidvid-info?module')\nvidvid = import(await FileAttachment(\"vivid-info-0.1.7.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"import { frameAt } from \"@severo/frameat\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\",\"d3-fetch\", \"d3-geo\", \"d3-geo-projection\", \"d3-geo-polygon\", \"d3-inertia@^0.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"stylesheet = html`\n(restyle images to be no wider than the main text)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"html`