const altitudeInput = Inputs.range([0, 100], {label: "Altitude (km)", step: 0.1, value: 0}); const altitude = view(altitudeInput); const altOptions = view(Inputs.checkbox(["Dither", "Outline", "Show circles"], {label: "Options", value: ["Dither"]})); const ascendButton = html``; display(ascendButton); // ascend button let frame = null; function stopAscent() { cancelAnimationFrame(frame); frame = null; ascendButton.textContent = "Ascend"; } ascendButton.onclick = () => { if (frame) return stopAscent(); // second click pauses if (altitudeInput.value >= 100) altitudeInput.value = 0; // restart from the ground ascendButton.textContent = "Pause"; const tick = () => { const v = Math.min(100, altitudeInput.value + 0.2); // km per frame: raise to climb faster altitudeInput.value = v; altitudeInput.dispatchEvent(new Event("input", {bubbles: true})); if (v >= 100) stopAscent(); else frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); }; invalidation.then(stopAscent); // stop the loop if the cell re-runs const clouds = (() => { const W = 170, H = 90; const B = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]]; const mb = a => () => { a |= 0; a = a + 0x6D2B79F5 | 0; let t = Math.imul(a ^ a >>> 15, 1 | a); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; }; const R = mb(7); const hex = h => [parseInt(h.slice(1,3),16), parseInt(h.slice(3,5),16), parseInt(h.slice(5,7),16)]; const mix = (a, b, t) => [a[0]+(b[0]-a[0])*t, a[1]+(b[1]-a[1])*t, a[2]+(b[2]-a[2])*t]; const sm = (a, b, x) => { const t = Math.min(1, Math.max(0, (x-a)/(b-a))); return t*t*(3-2*t); }; const kf = (list, a, key) => { for (let i = 0; i < list.length - 1; i++) { const p = list[i], q = list[i+1]; if (a <= q.alt) { const t = (a-p.alt)/(q.alt-p.alt), u = p[key], v = q[key]; return Array.isArray(u) ? mix(u, v, t) : u + (v-u)*t; } } return list[list.length-1][key]; }; // Colors per altitude (o = outline) const PAL = [ {alt:0, sky:hex('#7ec0f0'), h:hex('#ffffff'), m:hex('#dce9f5'), s:hex('#a7c3de'), o:hex('#3d6e9e')}, {alt:0.4, sky:hex('#5a9fe4'), h:hex('#ffffff'), m:hex('#d2e2f3'), s:hex('#94b3d6'), o:hex('#2f5f96')}, {alt:0.68, sky:hex('#2d5aa8'), h:hex('#f0f5ff'), m:hex('#b4c5e8'), s:hex('#7a8ec2'), o:hex('#1a346e')}, {alt:0.86, sky:hex('#132252'), h:hex('#d6def5'), m:hex('#98a6d2'), s:hex('#606ea2'), o:hex('#0a1433')}, {alt:1, sky:hex('#04050d'), h:hex('#aab4d8'), m:hex('#76829f'), s:hex('#4a5270'), o:hex('#02030a')}]; // Cloud shape per altitude const SHAPE = [ {alt:0, puffs:5, asp:1, size:1, dens:0.5, streak:0}, {alt:0.28, puffs:8, asp:2.2, size:0.7, dens:0.85, streak:0}, {alt:0.52, puffs:10, asp:1.3, size:0.32, dens:0.75, streak:0.05}, {alt:0.7, puffs:7, asp:1.5, size:0.24, dens:0.45, streak:0.85}, {alt:0.88, puffs:5, asp:1.5, size:0.2, dens:0.3, streak:1}, {alt:1, puffs:5, asp:1.5, size:0.2, dens:0, streak:1}]; // Fixed random "slots" so clouds morph smoothly as altitude changes const slots = []; for (let i = 0; i < 16; i++) { const s = {x:R(), y:(i+R())/16, d:R(), v:R(), k:R(), j:[]}; for (let q = 0; q < 45; q++) s.j.push(R()); slots.push(s); } slots.sort((a, b) => a.d - b.d); const stars = Array.from({length: 140}, () => [Math.floor(R()*W), Math.floor(R()*H), R()]); const nlc = hex('#7fe6ff'); function render(alt, {dither: dith = true, outline = false} = {}) { const img = new ImageData(W, H), D = img.data; const put = (x, y, c) => { if (x<0||y<0||x>=W||y>=H) return; const i=(y*W+x)*4; D[i]=c[0]; D[i+1]=c[1]; D[i+2]=c[2]; D[i+3]=255; }; // mask: which pixels belong to a solid cloud, and how far that cloud is faded toward the sky const mask = new Float32Array(W*H).fill(-1); const putCloud = (x, y, c, fade) => { if (x<0||y<0||x>=W||y>=H) return; put(x, y, c); mask[y*W+x] = fade; }; const bay = (x, y) => B[((y%4)+4)%4][((x%4)+4)%4] / 16; const sky = kf(PAL,alt,'sky'), ch = kf(PAL,alt,'h'), cm = kf(PAL,alt,'m'), cs = kf(PAL,alt,'s'), co = kf(PAL,alt,'o'); const puffs = Math.round(kf(SHAPE,alt,'puffs')), asp = kf(SHAPE,alt,'asp'), size = kf(SHAPE,alt,'size'), dens = kf(SHAPE,alt,'dens'), streak = kf(SHAPE,alt,'streak'); const above = sm(0.4, 0.46, alt), nl = sm(0.84, 0.92, alt) * (1 - sm(0.95, 1, alt)); const circles = []; // for the "Show circles" overlay // Sky and stars for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) put(x, y, sky); const sa = sm(0.64, 0.95, alt); for (const [x, y, b] of stars) { const a = sa*(0.4+0.6*b); if (a > bay(x, y)) put(x, y, mix(sky, b > 0.85 ? [255,240,200] : [255,255,255], Math.min(1, 0.5+a*0.5))); } // Cloud deck the player passes through const deckY = H*0.5 + (alt-0.42)*H*7, th = H*0.38; const drawDeck = () => { if (deckY+th < -5 || deckY-th > H+5) return; for (let x = 0; x < W; x++) { const top = deckY - th/2 + Math.sin(x*0.13)*3 + Math.sin(x*0.41+1)*1.6; const bot = deckY + th/2 + Math.sin(x*0.09+2)*2.5; for (let y = Math.max(0, Math.floor(top)); y < Math.min(H, Math.ceil(bot)); y++) { let v = 1 - (y-top)/(bot-top); v = above ? v*1.2 : v*0.9; if (dith) v += (bay(x, y) - 0.47) * 0.2; putCloud(x, y, v < 0.3 ? cs : v < 0.62 ? cm : ch, 0); } } }; let deckDrawn = false; for (const s of slots) { if (!deckDrawn && s.d > 0.5) { drawDeck(); deckDrawn = true; } if (s.v >= dens) continue; const depth = 0.5 + 0.5*s.d, fade = (1 - s.d)*0.45; const H2 = mix(ch,sky,fade), M2 = mix(cm,sky,fade), S2 = mix(cs,sky,fade); const cx = s.x*W*1.2 - W*0.1; const cy = (((s.y + alt*3*(0.4+0.6*s.d)) % 1)*1.4 - 0.2)*H; // parallax scroll if (s.k < streak) { // Cirrus / noctilucent streak (translucent, so no outline) const L = W*0.17*depth*(0.7+0.6*s.j[0]), T = 1 + s.j[1]*1.2*depth, ang = -0.22 + (s.j[2]-0.5)*0.2; const cosA = Math.cos(ang), sinA = Math.sin(ang); const c1 = mix(H2, nlc, nl), c2 = mix(M2, mix(nlc, sky, 0.4), nl); for (let y = Math.floor(cy-L*0.4-4); y < cy+L*0.4+4; y++) for (let x = Math.floor(cx-L-2); x < cx+L+2; x++) { const dx = x+0.5-cx, dy = y+0.5-cy, u = dx*cosA + dy*sinA, w = -dx*sinA + dy*cosA; if (Math.abs(u) > L) continue; const t = u/L, bow = Math.sin((t+1)*Math.PI*0.5)*2.5; const wid = T*(t < 0 ? 1 : 1 - t*0.8) + (t < -0.7 ? (-0.7-t)*6 : 0); const ww = Math.abs(w - bow + (t < -0.7 ? (-0.7-t)*5 : 0)); if (ww > wid) continue; const a = (1 - Math.abs(t))*0.95*(1 - ww/(wid+0.5)); if (a > (dith ? bay(x, y) : 0.4)) put(x, y, ww < wid*0.45 ? c1 : c2); } continue; } // Puffy cloud: cluster of ellipses const Rr = H*0.11*size*depth, span = Rr*puffs*0.7*asp, base = cy + Rr*0.4, cl = []; for (let i = 0; i < puffs; i++) { const t = (i+0.5)/puffs, j = s.j.slice(i*3, i*3+3); const r = Rr*(0.45 + 0.6*Math.sin(Math.PI*t))*(0.8 + 0.4*j[0]); cl.push({x: cx - span/2 + t*span + (j[1]-0.5)*Rr*0.3, y: base - r*(0.35 + 0.35*j[2]), r}); } for (let i = 0; i <= puffs; i++) cl.push({x: cx - span/2 + i/puffs*span, y: base - Rr*0.3, r: Rr*0.4}); circles.push({ellipses: cl.map(c => ({x: c.x, y: c.y, rx: c.r*asp, ry: c.r})), base: above < 0.5 ? base : null, x0: cx - span/2 - Rr*asp, x1: cx + span/2 + Rr*asp}); const x0 = Math.floor(cx - span/2 - Rr*asp*1.3), x1 = Math.ceil(cx + span/2 + Rr*asp*1.3); const y0 = Math.floor(base - Rr*2.4), y1 = Math.ceil(base + Rr*1.1); for (let y = Math.max(0, y0); y < Math.min(H, y1); y++) for (let x = Math.max(0, x0); x < Math.min(W, x1); x++) { const X = x+0.5, Y = y+0.5; if (above < 0.5 && Y > base) continue; // flat bottom when seen from below let inside = false, v = -9; for (const c of cl) { const rx = c.r*asp, dx = (X-c.x)/rx, dy = (Y-c.y)/c.r; if (dx*dx + dy*dy < 1) inside = true; const lx = (X - (c.x - rx*0.35))/rx, ly = (Y - (c.y - c.r*0.4))/c.r; // light from up-left v = Math.max(v, 1 - Math.sqrt(lx*lx + ly*ly)/1.25); } if (!inside) continue; if (above < 0.5) v -= Math.max(0, (Y - (base-3))*0.12); else v += 0.12; if (dith) v += (bay(x, y) - 0.47)*0.18; putCloud(x, y, v < 0.18 ? S2 : v < 0.42 ? M2 : H2, fade); } } if (!deckDrawn) drawDeck(); // Outline: empty pixels next to a solid cloud, faded like the cloud they border if (outline) { const edge = []; for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) { if (mask[y*W+x] >= 0) continue; let f = -1; for (const [a, b] of [[1,0],[-1,0],[0,1],[0,-1]]) { const xx = x+a, yy = y+b; if (xx >= 0 && yy >= 0 && xx < W && yy < H && mask[yy*W+xx] >= 0) f = Math.max(f, mask[yy*W+xx]); } if (f >= 0) edge.push([x, y, f]); } for (const [x, y, f] of edge) put(x, y, mix(co, sky, f)); } // Fog flash while inside the deck const fog = Math.exp(-Math.pow((alt-0.42)/0.025, 2)); if (fog > 0.02) for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) if (fog*0.95 > (dith ? bay(x, y) : 0.5)) put(x, y, cm); const label = alt < 0.2 ? 'Cumulus' : alt < 0.37 ? 'Stratocumulus' : alt < 0.47 ? 'Cloud deck' : alt < 0.62 ? 'Altocumulus' : alt < 0.82 ? 'Cirrus' : alt < 0.94 ? 'Noctilucent' : 'Space'; return {img, label, circles}; } return {render, PAL, SHAPE, W, H}; })();