2c:null 2d:["$","title",null,{"children":"Generated Pixel Art Clouds | Tobias Bocanegra | Observable"}] 32:T542,display((() => { const WIDTH = 680, HEIGHT = 320, px = pixelSize; const W = Math.floor(WIDTH/px), H = Math.floor(HEIGHT/px); const clouds = cloudKit.generate(W, H, puffCount, 42 + regenerate*7919); const img = cloudKit.render(W, H, clouds, paletteName, {dither: options.includes("Dither"), outline: options.includes("Outline")}); const off = document.createElement("canvas"); off.width = W; off.height = H; off.getContext("2d").putImageData(img, 0, 0); const canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; canvas.style.maxWidth = "100%"; canvas.style.borderRadius = "12px"; canvas.style.imageRendering = "pixelated"; const ctx = canvas.getContext("2d"); ctx.imageSmoothingEnabled = false; ctx.drawImage(off, 0, 0, W*px, H*px); if (options.includes("Show circles")) { // overlay the underlying shapes ctx.lineWidth = 1.5; for (const {circles, base} of clouds) { ctx.strokeStyle = "rgba(255,40,90,0.85)"; for (const c of circles) { ctx.beginPath(); ctx.arc(c.x*px, c.y*px, c.r*px, 0, Math.PI*2); ctx.stroke(); } ctx.strokeStyle = "rgba(255,220,0,0.9)"; ctx.setLineDash([6, 4]); ctx.beginPath(); ctx.moveTo(0, base*px); ctx.lineTo(WIDTH, base*px); ctx.stroke(); ctx.setLineDash([]); } } return canvas; })());33:Tee9,const pixelSize = view(Inputs.range([2, 8], {label: "Pixel size", step: 1, value: 4})); const puffCount = view(Inputs.range([3, 9], {label: "Puffs", step: 1, value: 5})); const paletteName = view(Inputs.select(["Day", "Sunset", "Night", "Game Boy"], {label: "Palette"})); const options = view(Inputs.checkbox(["Dither", "Outline", "Show circles"], {label: "Options", value: ["Dither"]})); const regenerate = view(Inputs.button("New clouds")); const cloudKit = (() => { const PALETTES = { "Day": {sky: "#6cb4ee", o: "#3d6e9e", s: "#a9c4de", m: "#dbe8f4", h: "#ffffff"}, "Sunset": {sky: "#e9875a", o: "#7a3b4f", s: "#c46a7a", m: "#f2a99a", h: "#ffe3c4"}, "Night": {sky: "#1b2340", o: "#0d1226", s: "#3b4670", m: "#5d6b9c", h: "#9aa8d4"}, "Game Boy": {sky: "#8bac0f", o: "#0f380f", s: "#306230", m: "#8bac0f", h: "#9bbc0f"}}; const BAYER = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]]; const hex = h => [parseInt(h.slice(1,3),16), parseInt(h.slice(3,5),16), parseInt(h.slice(5,7),16)]; // Seeded random numbers, so the same seed always gives the same clouds const rng = seed => { let s = seed % 2147483647 || 1; return () => (s = s * 16807 % 2147483647) / 2147483647; }; // Shape: each cloud is a cluster of circles plus a flat baseline function generate(W, H, puffs, seed) { const rnd = rng(seed), clouds = []; for (const [fx, fy, sc] of [[0.25, 0.32, 1], [0.72, 0.5, 0.8], [0.42, 0.82, 0.6]]) { const R = H*0.16*sc*(0.85 + rnd()*0.3), cx = W*fx, base = H*fy, span = R*puffs*0.75, circles = []; for (let i = 0; i < puffs; i++) { // hump-shaped puffs, tallest in the middle const t = (i + 0.5)/puffs, r = R*(0.45 + 0.6*Math.sin(Math.PI*t))*(0.8 + rnd()*0.4); circles.push({x: cx - span/2 + t*span + (rnd() - 0.5)*R*0.3, y: base - r*(0.35 + rnd()*0.35), r}); } for (let i = 0; i <= puffs; i++) // small circles filling the bottom circles.push({x: cx - span/2 + i/puffs*span, y: base - R*0.3, r: R*0.4}); clouds.push({circles, base}); } return clouds; } // Rasterize, shade into three bands, dither, outline function render(W, H, clouds, paletteName, {dither, outline}) { const pal = PALETTES[paletteName], img = new ImageData(W, H), D = img.data; const put = (x, y, c) => { const i = (y*W + x)*4; D[i] = c[0]; D[i+1] = c[1]; D[i+2] = c[2]; D[i+3] = 255; }; const grid = new Int8Array(W*H).fill(-1); for (const {circles, base} of clouds) for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) { const X = x + 0.5, Y = y + 0.5; if (Y > base) continue; // flat bottom let inside = false, v = -9; for (const c of circles) { const dx = X - c.x, dy = Y - c.y; if (dx*dx + dy*dy < c.r*c.r) inside = true; const lx = X - (c.x - c.r*0.35), ly = Y - (c.y - c.r*0.4); // light from up-left v = Math.max(v, 1 - Math.sqrt(lx*lx + ly*ly)/(c.r*1.25)); } if (!inside) continue; v -= Math.max(0, (Y - (base - 3))*0.12); // darker near the bottom if (dither) v += (BAYER[y%4][x%4]/16 - 0.47)*0.18; grid[y*W + x] = v < 0.18 ? 0 : v < 0.42 ? 1 : 2; } const sky = hex(pal.sky), out = hex(pal.o), bands = [hex(pal.s), hex(pal.m), hex(pal.h)]; for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) { const g = grid[y*W + x]; if (g >= 0) { put(x, y, bands[g]); continue; } const edge = outline && [[1,0],[-1,0],[0,1],[0,-1]].some(([a, b]) => { const xx = x + a, yy = y + b; return xx >= 0 && yy >= 0 && xx < W && yy < H && grid[yy*W + xx] >= 0; }); put(x, y, edge ? out : sky); } return img; } return {generate, render, PALETTES}; })();34:T5ad,display((() => { const PX = 4, {W, H} = clouds; const {img, label, circles} = clouds.render(altitude / 100, { dither: altOptions.includes("Dither"), outline: altOptions.includes("Outline")}); const off = document.createElement("canvas"); off.width = W; off.height = H; off.getContext("2d").putImageData(img, 0, 0); const canvas = document.createElement("canvas"); canvas.width = W * PX; canvas.height = H * PX; canvas.style.maxWidth = "100%"; canvas.style.borderRadius = "12px"; canvas.style.imageRendering = "pixelated"; const ctx = canvas.getContext("2d"); ctx.imageSmoothingEnabled = false; ctx.drawImage(off, 0, 0, W * PX, H * PX); if (altOptions.includes("Show circles")) { // overlay the underlying shapes ctx.lineWidth = 1.5; for (const {ellipses, base, x0, x1} of circles) { ctx.strokeStyle = "rgba(255,40,90,0.85)"; for (const e of ellipses) { ctx.beginPath(); ctx.ellipse(e.x*PX, e.y*PX, e.rx*PX, e.ry*PX, 0, 0, Math.PI*2); ctx.stroke(); } if (base !== null) { // flat-bottom cut, only below the deck ctx.strokeStyle = "rgba(255,220,0,0.9)"; ctx.setLineDash([6, 4]); ctx.beginPath(); ctx.moveTo(x0*PX, base*PX); ctx.lineTo(x1*PX, base*PX); ctx.stroke(); ctx.setLineDash([]); } } } return html`

${canvas}

Layer: ${label}

`; })());35:T26ae,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}; })(); 36:T436,## Using it in a game The demos redraw every pixel on each frame, which is fine for a small canvas but too slow for a real game. In practice, most of the work can happen once per cloud instead of once per frame: - **Generate at spawn.** When a cloud enters the screen, roll its random values (position, depth, puff jitter) and look up its shape and colors from the altitude where it spawns. Then freeze those parameters, so the cloud doesn't morph while the player watches it. - **Pre-render to a sprite.** Rasterize the cloud once into a small offscreen image and draw that image every frame. You can also cache a handful of variants per altitude band and reuse them. - **Scroll with parallax.** Move each sprite at a speed set by its depth, so distant clouds drift slower than near ones. - **Keep the cheap effects live.** The sky color, stars and the fog flash at the cloud deck cost little and can stay per-frame, or move to a shader. Tuning stays in the two keyframe tables: change `PAL` for colors and `SHAPE` for cloud types, and every altitude band updates with them.37:T763,## Related work Most procedural pixel-art clouds are built from noise rather than shapes: fractal noise is thresholded into a few color bands, then pixelated and dithered. That gives natural-looking, ever-changing cloud layers, while the circle clusters in this notebook give distinct, cartoon-style cumulus with clean silhouettes. The two combine well, for example noise for a distant cloud layer and circle clusters for the foreground. **Noise-based pixel clouds** - [Pixelated animated water/clouds](https://godotshaders.com/shader/pixelated-animated-water/) – a Godot shader that maps fractal noise to a four-color palette with adjustable pixel size and dithering. - [Pixelated, radial 2D-Clouds](https://godotshaders.com/shader/pixelated-radial-2d-clouds/) – scrolling noise textures bent around a point, with a constant-interpolation gradient for hard pixel bands. **Pixel planets with cloud layers** - [Pixel Planet Generator by Deep-Fold](https://deep-fold.itch.io/pixel-planet-generator) – an open-source generator whose banded-noise-plus-palette approach is a good reference for animated pixel clouds. - [Animated Pixel Art Planet](https://godotshaders.com/shader/animated-pixel-art-planet/) – a Godot shader with several noise layers for clouds, each with its own palette and drift speed. - [Pixel Planet Generator](https://tekengine-audio.itch.io/pixel-planet-creator) – a commercial tool with up to three cloud layers and selectable Bayer dithering matrices. **Background on procedural clouds** - [Simple Clouds](https://www.gamedev.net/reference/articles/article2085.asp) – a classic tutorial on building clouds from Perlin noise. - [Clouds and Stars: Efficient Real-Time Procedural Sky](https://ianparberry.com/pubs/clouds_and_stars.pdf) – Ian Parberry's paper, which distinguishes planar from volumetric cloud methods; everything in this notebook is planar.38:[] 30:{"id":"4d0dc0dbaec1a303","slug":"pixel-art-clouds","title":"Generated Pixel Art Clouds","thumbnail":"5b1cd35afac3c31a3d473d758eeabe4eb9fc2dd2872229b0de99e2cec988191d","access_level":"public","create_time":"$D2026-10-11T10:33:54.510Z","update_time":"$D2026-10-11T13:08:02.090Z","view_time":null,"first_public_time":"$D2026-10-11T10:55:53.870Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"69786a014b2e2017","login":"tripodsan","name":"Tobias Bocanegra","avatar_url":"https://avatars.githubusercontent.com/u/917628?v=4","tier":"starter_2024","bio":""},"version":124,"publish_version":124,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b9df98810708e13","login":"tripodsan","name":"Tobias Bocanegra","avatar_url":"https://avatars.githubusercontent.com/u/917628?v=4","tier":null,"bio":""}],"members":[{"type":"team","id":"69786a014b2e2017","login":"tripodsan","name":"Tobias Bocanegra","avatar_url":"https://avatars.githubusercontent.com/u/917628?v=4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Generated Pixel Art Clouds","cells":[{"id":1,"value":"# Generated Pixel Art Clouds\n\nProcedurally generate pixel-art clouds for a vertical game, where the cloud type and sky change as the player climbs from the ground to space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## Basic cumulus clouds\nEach cloud is a cluster of circles (ellipses when stretched). The puff radii follow a hump so the middle is tallest, a row of small circles fills the bottom, and everything below a baseline is cut off for a flat bottom. A pixel is part of the cloud if it falls inside any circle (Turn on **`Show circles`** to see the underlying shapes.)\n\nFor **shading**, copy each circle's center, shifted toward the light (up-left). A pixel's brightness is its distance to the nearest shifted center. That brightness is cut into three palette bands: _shadow_, _mid_ and _highlight_.\n\nAdd a **Pixel-art finish.** Before banding, a 4×4 Bayer matrix nudges each pixel's brightness to create dithered edges between bands. Optionally, empty pixels touching the cloud get an outline color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Higher altitude clouds\n\nA single 0–1 **altitude** value drives two keyframe tables, one for colors and one for shape (puff count, aspect, size, density, chance of being a streak). Values are interpolated between rows.\n - Low: cumulus, tall puffy clouds.\n - Lower-mid: stratocumulus, wide flat rows.\n - Middle: a cloud deck the player flies through, shown as a dithered fog flash.\n - Above the deck: altocumulus, small scattered puffs, now seen from above (no flat bottom, brighter tops).\n - High: cirrus, thin tilted streaks drawn semi-transparent with dithering.\n - Top: noctilucent streaks, then stars fading in as the sky goes black.\n\nEach cloud has a **depth** value that sets its scroll speed (parallax), its size, and how much its colors fade toward the sky.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$35","pinned":false,"hidden":true,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"2"}} 31:"$30:body"