32:T506,fragmentShader = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(shader, ` precision highp float; uniform sampler2D u_image; uniform vec2 u_translate; uniform float u_scale; uniform vec2 u_rotate; const float c_pi = 3.14159265358979323846264; const float c_halfPi = c_pi * 0.5; const float c_twoPi = c_pi * 2.0; float cosphi0 = cos(u_rotate.y); float sinphi0 = sin(u_rotate.y); void main(void) { float x = (gl_FragCoord.x - u_translate.x) / u_scale; float y = (u_translate.y - gl_FragCoord.y) / u_scale; // inverse orthographic projection float rho = sqrt(x * x + y * y); if (rho > 1.0) return; float c = asin(rho); float sinc = sin(c); float cosc = cos(c); float lambda = atan(x * sinc, rho * cosc); float phi = asin(y * sinc / rho); // inverse rotation float cosphi = cos(phi); float x1 = cos(lambda) * cosphi; float y1 = sin(lambda) * cosphi; float z1 = sin(phi); lambda = atan(y1, x1 * cosphi0 + z1 * sinphi0) + u_rotate.x; phi = asin(z1 * cosphi0 - x1 * sinphi0); gl_FragColor = texture2D(u_image, vec2((lambda + c_pi) / c_twoPi, (phi + c_halfPi) / c_pi)); } `); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader)); return shader; }33:[] 30:{"title":"Watch the Smoke from Australia’s Bushfires Swirl Across the Globe","cells":[{"id":0,"value":"md`# Watch the Smoke from Australia’s Bushfires Swirl Across the Globe\n\nLast week, NASA published a mesmerizing video of several different types of particulates whirling across the atmosphere. The Terra/Aqua satellites captured the smoke from Australia’s bushfires crossing the South Pacific, smog emissions in Europe, hurricanes lifting sea salt into the atmosphere, and dust blowing off the Sahara Desert.\n\n*Source: [NASA Global Modeling and Assimilation Office](https://gmao.gsfc.nasa.gov/research/science_snapshots/2020/Australia_fires_smoke.php)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"viewof spin = checkbox({ options: [\"Spin the world\"], value: \"Spin the world\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"viewof aus = button(\"Jump to Australia\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"viewof restart = button(\"Reset to Nov. 1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"displayTime = html`

${formatTime(time)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof gl = {\n const canvas = document.createElement(\"canvas\");\n canvas.width = width * devicePixelRatio;\n canvas.height = height * devicePixelRatio;\n canvas.style = `width: ${w}px; height: auto; margin: 10px 0 10px 50%; position: relative; left: -${w /\n 2}px;`;\n canvas.value = canvas.getContext(\"webgl\");\n d3.select(canvas).call(drag(projection));\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"html`

${[\n aerosolLegend(\"Carbon (Fires)\", \"#400703\", \"#d75826\", \"#fbedd8\"),\n aerosolLegend(\n \"Nitrates (Exhaust, industry)\",\n \"#69112a\",\n \"#c36faf\",\n \"#f5f3f8\"\n ),\n aerosolLegend(\n \"Sulfates (Diesel, volcanoes)\",\n \"#1d4921\",\n \"#9acc8f\",\n \"#f4faf3\"\n ),\n aerosolLegend(\"Dust (Deserts)\", \"#6b2e12\", \"#f1aa4f\", \"#feffe3\"),\n aerosolLegend(\"Salt spray (The sea)\", \"#1d4582\", \"#98cec0\", \"#f5faed\", true)\n]}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`

\n\n## Appendix\n\n*The implementation of this notebook lies below. It is not yet organized or commented.*\n\n---\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"videoElement = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"function aerosolLegend(title, c0, c1, c2, ticks) {\n return legend({\n color: d3.scaleSequential(\n d3\n .scaleLinear()\n .domain([0, 0.5, 1])\n .range([c0, c1, c2])\n .interpolate(d3.interpolateHcl)\n ),\n ticks: ticks ? 1 : 0,\n tickSize: 0,\n title,\n tickFormat: d => (d ? \"More\" : \"Less\")\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"timeScale = d3.scaleLinear()\n .domain([0, video.duration])\n .range([new Date(\"2019-11-01T12:00:00Z\"), new Date(\"2020-01-14T16:00:00Z\")])","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"jumpToAustralia = {\n aus;\n if (this) {\n mutable rotation = [4.3, -0.27];\n viewof spin.input.checked = false;\n viewof spin.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n }\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"time = {\n while (true) {\n yield timeScale(video.currentTime);\n await Promises.tick(200);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"formatTime = d3.timeFormat(\"%B %d, %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"spinner = {\n spin;\n if (viewof spin.input.checked) {\n while (true) {\n const [x, y] = mutable rotation;\n yield (mutable rotation = [x - 0.003, y]);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"restarter = {\n restart;\n video.currentTime = 0;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"totalFrames = Math.ceil(video.duration * 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"video = {\n let resolve;\n const promise = new Promise(_ => (resolve = _)).then(() => {\n videoElement.play();\n return videoElement;\n });\n videoElement.addEventListener(\"canplay\", resolve);\n return promise;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"mutable rotation = [-10.1, 0.13]","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"w = Math.min(width, 720)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"init = {\n gl.useProgram(program);\n gl.enableVertexAttribArray(a_vertex);\n gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);\n gl.uniform2f(u_translate, viewof gl.width / 2, viewof gl.height / 2);\n gl.uniform1f(u_scale, viewof gl.height / 2 - 1);\n gl.viewport(0, 0, viewof gl.width, viewof gl.height);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"videoWidth = 1920","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"videoHeight = 960","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"videoCanvas = {\n const ctx = DOM.context2d(2048, 1024);\n ctx.canvas.style.width = \"1px\";\n while (true) {\n ctx.drawImage(video, 0, 0, 2048, 1024);\n yield ctx.canvas;\n await Promises.delay(33.3);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"draw = {\n init;\n gl.uniform2fv(u_rotate, rotation);\n const tex = texture(videoCanvas);\n gl.bindTexture(gl.TEXTURE_2D, tex);\n gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n invalidation.then(() => gl.deleteTexture(tex));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"projection = d3.geoOrthographic().precision(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"projection","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"function drag(projection) {\n let x0, y0;\n \n function dragstarted() {\n x0 = d3.event.x;\n y0 = d3.event.y;\n }\n \n function dragged() {\n const dx = (d3.event.x - x0) / 500;\n const dy = (d3.event.y - y0) / 500;\n const [x, y] = mutable rotation;\n mutable rotation = [x - dx, y + dy];\n x0 = d3.event.x;\n y0 = d3.event.y;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"vertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, `\nattribute vec2 a_vertex;\n\nvoid main(void) {\n gl_Position = vec4(a_vertex, 0.0, 1.0);\n}\n`);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"vertexBuffer = {\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"function texture(canvas) {\n const texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);\n return texture;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"program = {\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));\n return program;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"a_vertex = gl.getAttribLocation(program, \"a_vertex\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"u_translate = gl.getUniformLocation(program, \"u_translate\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"u_scale = gl.getUniformLocation(program, \"u_scale\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"u_rotate = gl.getUniformLocation(program, \"u_rotate\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"import { slider, button, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}