31: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); } }32:Tb17,//import {Scrubber} from "@mbostock/scrubber" // Function adapted to add a title function Scrubber( values, { title = "", width = 500, format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {} ) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }33:[{"id":"9844e8ff2b7164b2d1c7a7c16accc4b25c10d1a5f028616ec4ae5f3c9585be2bf94457eb26fb7469283112e21fbacbd32d51713fbdd9f27c4a475e7f81f2e803","href":"https://static.observableusercontent.com/files/9844e8ff2b7164b2d1c7a7c16accc4b25c10d1a5f028616ec4ae5f3c9585be2bf94457eb26fb7469283112e21fbacbd32d51713fbdd9f27c4a475e7f81f2e803","name":"winds.mp4","type":"video/mp4","lastModified":1705355847358.333,"size":6289856},{"id":"9572d1392974b38582b443aead9bc97f587a90d28ffcb4d39a0ae072b41ef0582b8056d34cc7cb44ec2f4c1d2a2db189799166d59220bda888ed80ebcb4b5bf4","href":"https://static.observableusercontent.com/files/9572d1392974b38582b443aead9bc97f587a90d28ffcb4d39a0ae072b41ef0582b8056d34cc7cb44ec2f4c1d2a2db189799166d59220bda888ed80ebcb4b5bf4","name":"Clouds.mp4","type":"video/mp4","lastModified":1705256018216.047,"size":11759377},{"id":"8cbb24fe2c2f7a79aabc8b5a4508562fbfe2d647bce92c9232efdc8503c2b233054111f5d9f1520afab94ba9ffa770776b1f4822bcd2ddf5fa3e1d5edf13cf72","href":"https://static.observableusercontent.com/files/8cbb24fe2c2f7a79aabc8b5a4508562fbfe2d647bce92c9232efdc8503c2b233054111f5d9f1520afab94ba9ffa770776b1f4822bcd2ddf5fa3e1d5edf13cf72","name":"vivid-info-0.1.7.js","type":"application/javascript","lastModified":1705239599297.437,"size":1566},{"id":"e66d65dc5aa3af073935a62b393a926141c7c6b0e3fbe74185a5bd9a1dda4e9396afc7f27bfe2f7e3e5b5e17b9dec4aae9bd681d07364de2b8a646c8f6243d00","href":"https://static.observableusercontent.com/files/e66d65dc5aa3af073935a62b393a926141c7c6b0e3fbe74185a5bd9a1dda4e9396afc7f27bfe2f7e3e5b5e17b9dec4aae9bd681d07364de2b8a646c8f6243d00","name":"biosphere@2.mp4","type":"video/mp4","lastModified":1705245339894.12,"size":5174583},{"id":"024dde93670b8cde955df41bd32bb114384dd3b09f82a32bde0cfb04b507b2a0f011255f6b9681f28b7509777544807860f78a15709336eb2485206a11072428","href":"https://static.observableusercontent.com/files/024dde93670b8cde955df41bd32bb114384dd3b09f82a32bde0cfb04b507b2a0f011255f6b9681f28b7509777544807860f78a15709336eb2485206a11072428","name":"perpetual_ocean.mp4","type":"video/mp4","lastModified":1705248846347.29,"size":6952646},{"id":"7e769d571102a5498335891775f8be71085d14a17979232ffa666ceb4fa37757c13fed66383abce51711dad6303ceefe3ad4b7639e755ebbbb09632a3ce06a64","href":"https://static.observableusercontent.com/files/7e769d571102a5498335891775f8be71085d14a17979232ffa666ceb4fa37757c13fed66383abce51711dad6303ceefe3ad4b7639e755ebbbb09632a3ce06a64","name":"Sea_surface_temperature.mp4","type":"video/mp4","lastModified":1705250664795.717,"size":5121331},{"id":"3630fe9db2b785fddcb89c3cc69a0284101f8ff4d0c1ef1ec37617fdf95fa08e16547eb3989421a66875fe714fe1bcb0db8be62f1dcaae456f1821913a35fc9a","href":"https://static.observableusercontent.com/files/3630fe9db2b785fddcb89c3cc69a0284101f8ff4d0c1ef1ec37617fdf95fa08e16547eb3989421a66875fe714fe1bcb0db8be62f1dcaae456f1821913a35fc9a","name":"Earth_1year_CO2.mp4","type":"video/mp4","lastModified":1705251775281.909,"size":6342865}] 2f:{"title":"Breathing Earth 🌍","cells":[{"id":0,"value":"md`# Breathing Earth 🌍\n## Biosphere, Perpetual Ocean, Clouds, CO₂, ...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2155,"value":" viewof src = Inputs.select(new Map([[\"Biosphere\", biosphere], [\"Perpetual Ocean\", perpetual_ocean], [\"Sea Surface Temperature\", sea_surface_temperature], [\"A year of Earth's CO₂\",earth_1year_co2], [\"Swirling clouds\", clouds], [\"Winds\", winds]]), {value: \"Biosphere\", label: \"Video source\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof frameIdx = Scrubber(framesMap.keys(), {\n loop: true,\n autoplay: true,\n loopDelay: 3000,\n title: \"Video played in loop\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"map = {\n\n const context = this ? this.getContext(\"2d\") : DOM.context2d(width, height),\n canvas = context.canvas;\n \n const render = function() { \n\n context.fillStyle = \"rgba(10,30,50)\";\n context.fillRect(0, 0, width, height)\n\n const warp = geoWarp(projection, context);\n warp(projection_equirectangular, image);\n\n const path = d3.geoPath(projection, context);\n \n context.beginPath();\n path(land);\n \n context.fillStyle = \"rgba(100,100,200,0.2)\";\n context.filter = \"blur(15px)\";\n context.fill(\"evenodd\");\n \n context.beginPath();\n path(land);\n context.lineWidth = 2; \n context.strokeStyle = \"rgba(0,0,0,0.3)\";\n context.filter = \"blur(6px)\";\n context.stroke();\n context.filter = \"blur(0px)\";\n\n }\n \n render(); \n\treturn canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"// viewof lambda = Inputs.range([-180, 180], {value: -35, step: 0.5, label: \"lambda, λ (°)\"})\nviewof lambda = Scrubber(Array.from({length: 720}, (_, i) => 0.5*i), {title:\"lambda, λ (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"viewof phi = Inputs.range([-90, 90], {value: -25, step: 1, label: \"phi, φ (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"viewof gamma = Inputs.range([-90, 90], {value: 0, step: 1, label: \"gamma, γ (°)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"
\n⮦ Original video [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":911,"value":"md`-----\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"video_src = src.url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"biosphere = FileAttachment(\"biosphere@2.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2146,"value":"perpetual_ocean = FileAttachment(\"perpetual_ocean.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2194,"value":"sea_surface_temperature = FileAttachment(\"Sea_surface_temperature.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2198,"value":"earth_1year_co2 = FileAttachment(\"Earth_1year_CO2.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"clouds = FileAttachment(\"Clouds.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2312,"value":"winds = FileAttachment(\"winds.mp4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"factor = 0.35","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([[2, 2], [width-2, height-2]], sphere);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"projection = d3.geoOrthographic()\n .rotate([lambda, phi, gamma])\n .fitExtent([[2, 2], [width-2, height-2]], sphere).scale(130);","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"$31","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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"disposal = Inputs.disposal","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`