SEM — Fibroblasto humano · Microscopía electrónica de barrido

The user wrote in Spanish: "View of a human cell through scanning electron microscope, great detail, organic textures, monochrome gray, cinematic lighting." This looks like an image generation prompt — but I don't generate images. However, the user might be asking me to create something. Given I'm a front-end engineer, the most delightful interpretation is: they want me to render this as a web experience — a simulated SEM (scanning electron microscope) view of a human cell, rendered in high detail with organic textures, monochrome gray, cinematic lighting, all in code (Canvas/WebGL). This is a fantastic creative brief. I should build an interactive, canvas-based "scanning electron microscope" visualization of a human cell. Let me think about what would make this truly memorable: **Concept**: A full-screen simulation of an SEM viewport — like looking through the instrument's display. The cell is rendered procedurally with organic detail: the cell membrane with microvilli, the nucleus, mitochondria, vesicles, endoplasmic reticulum — all in grayscale with that characteristic SEM look: high depth-of-field grain, edge illumination, scanning lines. **Signature moment**: The SEM scan effect — an electron beam line sweeping across the image, revealing detail, with live noise/grain, and the ability to zoom in progressively (from whole cell → membrane surface → microvilli detail). Interactive: mouse acts as the beam focus point, dragging pans, scroll zooms through magnification levels with the magnification readout updating (like "×5,000", "×25,000"). That's the memorable interaction — it feels like operating a real microscope. **Technical approach**: - Procedural generation with Canvas 2D. I could use WebGL shaders for the best quality — a fragment shader that renders the cell using FBM noise, SDF-like structures, with specular-ish rim lighting, grain, scanlines, vignette. WebGL would give me the richest organic textures at 60fps. - Actually, a hybrid: render the "cell image" once to an offscreen canvas at high resolution (procedurally drawn: membrane, organelles with shading), then apply a shader-like post-processing in real-time (grain, scan sweep, vignette, chromatic-free grayscale). But for zooming into fine detail, a static image will pixelate. Better: render everything in a fragment shader (WebGL). The shader computes the cell procedurally per-pixel, so zooming reveals infinite detail (FBM with domain warping is scale-adaptive if I feed zoom into the noise coordinates). This gives genuinely "gran detalle, texturas orgánicas". Let me design the shader: 1. **Coordinate system**: uv centered, scaled by zoom, offset by pan. Magnification readout derived from zoom. 2. **Cell structure** (top-down view of a cell on a substrate, like classic SEM images): - Cell body: a blobby shape — radius modulated by low-frequency FBM around the angle → organic irregular outline. - Membrane ruffle / edge: bright rim where the membrane curls (SEM images show bright edges due to edge detection behavior of secondary electrons — edges glow). This is KEY for the SEM look: edges are brighter. - Microvilli / filopodia: small finger protrusions around the perimeter — can do with high-frequency noise on the radius, plus small bumps. - Nucleus: slightly elevated dome in center-ish, itself irregular, with a subtle nuclear envelope ridge. - Mitochondria: several elongated capsule shapes scattered in cytoplasm, rendered as raised bumps with bright rims. - Vesicles: small circles. - Cytoplasm texture: FBM-based organic mottling. - Background substrate: fine particulate texture (like the coated substrate in SEM), darker, with its own grain. 3. **Height field approach**: Compute a pseudo-height h(x,y), then shade it like SEM: brightness ≈ combination of height gradient toward a "detector" direction (SEM signal depends on surface orientation relative to detector) + edge enhancement (magnitude of gradient) + height itself. This gives that dramatic cinematic lighting with bright ridges and dark valleys. Then add: - Grain/noise per pixel (film-like, animated subtly). - Scanning beam: a horizontal bright line sweeping periodically; also the image could have slight horizontal line noise/displacement (like CRT/SEM displays). - Vignette. - Depth of field-ish blur? Hard in a single-pass shader without multiple taps — could do a cheap blur based on distance from focal plane... Actually simpler: skip DOF, rely on scale-adaptive noise attenuation (fade noise as it gets too small relative to pixels to avoid aliasing). 4. **Zoom levels with structure LOD**: As you zoom, organelles should scale with world coordinates (they're physical features). Noise octaves should be in world space, so zooming reveals finer texture naturally. I'll fade octave contributions based on pixel footprint to prevent aliasing shimmer. 5. **The scan reveal**: On load, the image "builds up" line by line like a real SEM raster acquisition — a bright scan line sweeps down, and behind it the image appears, ahead of it is dark/noise. That's a beautiful opening: the microscope is "acquiring" the image over ~2 seconds. Then subsequent scans sweep subtly for ambience. Actually a persistent slow sweeping line that brightens locally is nice ambience. And a "New scan / Re-acquire" button to redo the acquisition animation. Also random line glitches occasionally. 6. **UI chrome**: SEM instrument interface — monospace/technical font (I'll use something like "IBM Plex Mono" or "Space Grotesk"... for technical instrument feel, a mono font is right — "IBM Plex Mono" via Google Fonts, or "JetBrains Mono". I want to avoid overused fonts; IBM Plex Mono is distinctive enough for an instrument). HUD elements at corners: - Top-left: instrument name (e.g., "SEM-HELIOS / MODO: SE (secundarios)"), sample ID. - Bottom: magnification readout "×1,200", scale bar that recalculates (e.g., "10 µm" bar with dynamic width), beam voltage "5.0 kV", WD (working distance) "10.2 mm", detector "SE1". - Right or bottom-right: crosshair / beam indicator following mouse. - Controls hint: scroll = zoom, drag = pan, click or button = re-scan. - A few toggles: detector mode (SE / BSE — BSE could invert/soften shading for compositional contrast — nice interactive extra), scan speed?, freeze frame? Keep it restrained: thin lines, tiny uppercase labels, precise. The HUD in light gray on black, matching monochrome aesthetic. All in Spanish since the user wrote in Spanish. 7. **Interactions**: - Scroll to zoom (smooth, eased, toward cursor point). - Drag to pan. - Mouse position = stigmator/beam focus? Maybe subtle local brightness boost where cursor is (like the beam interacting). Subtle. - Keyboard or buttons: preset magnifications (overview, membrane, microvilli, nucleus). - "Capturar" button → flash + fake save (toast "Imagen capturada — 0012.tif")? Could do actual canvas download via `canvas.toDataURL` — render a clean frame and download as PNG. That's real functionality! A "Capturar imagen" button that downloads the current view as PNG with HUD burned in? At least downloads the raw image. That's genuinely useful and real. I'll implement: temporarily disable scanline effects? Simpler: just capture current canvas via toDataURL after rendering a frame without the animated grain? WebGL canvas toDataURL needs preserveDrawingBuffer or capture right after render — I'll set preserveDrawingBuffer: true (minor perf cost, fine). - Detector toggle SE/BSE. - Maybe "auto-scan" pulse: press space to re-run acquisition sweep. 8. **Magnification ↔ zoom mapping**: Define world units where the cell is ~60 µm across (a human cell, e.g., epithelial ~30–60 µm; let's say cell diameter ≈ 50 µm). View width maps to some physical width: at zoom=1, view width = 150 µm → mag ≈ (screen width px / 150µm)... SEM magnification = screen size / field of view. For a nominal display, I'll just compute mag = baseMag * zoom, with baseMag such that overview ≈ ×800 and full zoom ≈ ×50,000. Scale bar: pick a nice round length (1, 2, 5, 10, 20, 50, 100 µm or nm) that fits ~15–25% of screen width. Show units switching to nm at high mag. 9. **Shader detail plan**: Let me write the fragment shader carefully. World coordinates p in micrometers (µm). Cell centered at origin, radius R ≈ 26 µm. ```glsl // hash & noise (value noise) & fbm with domain warping ``` Height function h(p): - r = length(p), a = atan(p.y, p.x). - Base outline: R(a) = R0 * (1 + 0.08*fbm1(a*freq, seed) + lobes). Use noise over angle: to keep continuous, sample 2D noise at (cos a, sin a)*k. e.g. outline(a) = R0 * (1 + 0.10*n2(vec2(cos(a),sin(a))*1.8) + 0.05*n2(vec2(cos(a),sin(a))*4.0+7.3)). - Body height: smoothstep from edge: h_body = smoothstep(R_edge(a)+2.0, R_edge(a)-6.0, r) → cell rises from substrate with a rounded rim. Add rim curl: gaussian bump near r ≈ R_edge(a): h += 1.2 * exp(-((r - R_edge(a))/1.5)^2) * edgeMask — but that bright rim will also come from gradient shading. - Microvilli: only on the outer band & around: small fingers. Procedural microvilli: in region r ∈ [R_edge-1, R_edge+3], add high-frequency bumps: mv = n2(p*3.0) thresholded... Better: microvilli as regular-ish dots: use a voronoi-ish or sin-packed pattern in polar coordinates: fingers at angular frequency: mv(a) with n2 to randomize presence/length: len(a) = R_edge(a) + 0.8 + 1.6*pow(n2(...),2). Then h += smooth thin bumps between r and len... Hmm, simpler visual trick: add striated high-frequency noise masked near the rim, which reads as membrane ruffles/microvilli in SEM. Plus at very high zoom near the rim, the FBM provides fine texture. I think a combination: - ruffles: h += 0.35 * ridgedNoise(p*2.5) * band(r, R_edge(a)-4, R_edge(a)) — ruffled membrane edge (very characteristic in SEM: the cell edge looks bright and ruffled). - Nucleus: off-center at np = (3,-2), radius ~9 µm, irregular: nR = 9*(1+0.06*fbm). Dome: h += 2.2 * smoothstep(nR, nR*0.4, r_n) with slight saddle at nuclear envelope: subtract thin ring at r_n ≈ nR to crease the boundary: h -= 0.4*exp(-((r_n-nR)/0.5)^2). Inside nucleus, chromatin texture: granular FBM at two scales. - Mitochondria: N=7, fixed pseudo-random positions/rotations (computed in shader via loop with hash, or hardcoded array). Each: elongated capsule: transform p into mito local frame, d = sdCapsule; h += 1.0 * smoothstep(width, 0, d) with worm-like internal texture: ridged noise along the long axis (cristae). At high zoom, cristae texture appears (scale-adaptive). Mitochondria shouldn't overlap the nucleus; choose positions in a ring around nucleus. I can hardcode positions computed by me mentally, or generate procedurally with a loop and hash with radius between nucleus R+3 and cell R-6. Procedural loop with hash(i) is elegant and detail-rich. Say 9 mitochondria. - Vesicles: loop of 14 small circles radius 0.4–1.2 µm, dome bumps, bright rims. Positions hashed, avoiding nucleus region roughly. - ER network: thin winding ridges: h += 0.25 * (1 - abs(n2(p*1.2 + warp)))^k masked to cytoplasm — creates tubular network look. Use ridged noise: er = 1 - abs(2*fbm-1)... thin lines where noise crosses 0.5. With domain warp to make it winding. Mask: only where cell body, outside nucleus, weight fading with distance. - Fine surface texture: cytoplasm granularity: h += 0.08 * fbm(p*8) + 0.03*fbm(p*30) (scale-faded). - Substrate (outside cell): h_sub = -0.5 with particle texture: small bright specks: sp = pow(n2(p*25), 20) type sparkle, plus fine dust n2(p*60). SEM background looks dark with scattered bright nanoparticles. Shading (SEM-like): - Compute gradient of h numerically (4 taps, eps relative to pixel footprint: eps = max(0.02, pixelSize*0.5)). - Light/detector direction: SEM detector top-left typically: shading = dot(normalize(vec3(-g.x, -g.y, z)), L). With strong exponent for drama: diff = clamp(dot(n, normalize(vec3(-0.5,0.7,0.6))),0,1)... Actually for the "secondary electron" look, the classic approximation: brightness increases with surface slope facing detector + edge effect. I'll do: lambert-ish with a headlight + edge term: - slopeMag = length(vec2(dhdx, dhdy)) - facing = dot(normalize(vec2 gradient)), direction toward light. - col = base * (0.35 + 0.65 * (facingLight)) + edgeGlow * slopeMag * k. - Also height-based ambient occlusion: lower areas darker (valleys): col *= 0.7 + 0.3*smoothstep(-0.5, 2.0, h). - Tone map + slight contrast S-curve. Gamma. - Grain: hash(uv + t) * amount (~0.06), plus larger-scale blotchy noise (fixed pattern per frame —SEM noise is per-frame temporal; animated grain at ~ grain changes each frame, subtle). - Scanlines: very subtle horizontal line modulation: 1 + 0.03*sin(y*π*lines)... maybe skip CRT scanlines on the image itself (SEM images don't have CRT lines in saved form) — but the live view has the sweeping acquisition line. I'll keep a faint horizontal line structure that's part of the noise: line noise: occasional horizontal streak displacement: offset.x += (hash(lineIndex + t) - 0.5) * glitch for random lines. That reads very "electron microscope live". - Acquisition sweep: uniform u_scan (0..1 progress). Pixels below scanline (y > scanY) are revealed; above = dark with sparse noise ("not yet acquired"). During sweep, at scanY there's a bright band. After acquisition completes, the sweep line becomes a subtle refresh line that continues sweeping with very low opacity? I'll make repeated slow sweeps that only add a faint bright line traveling, not re-darkening. Actually simpler and elegant: initial acquisition once (image appears progressively top→bottom over ~1.8s), then idle: a faint scan line continues sweeping every ~7s just as a highlight (multiply small brightness bump), plus sporadic line glitches. - Vignette: smooth darkening at corners, plus a faint circular "viewport" mask? Full-bleed is more cinematic. I'll do full-bleed with vignette. - Cursor beam: uniform u_mouse (in world coords) + u_mouseActive: add a soft circular intensity bump (beam interaction) radius ~ few px, very subtle (like +8% brightness), plus a crosshair drawn in HUD overlay (DOM) instead. Nice. - BSE mode: uniform u_mode: BSE = less edge emphasis, more flat material contrast (nucleus slightly brighter avg-Z, mitochondria darker), softer shading, less grain. That gives a visible, meaningful toggle difference. Aliasing control: fade noise octaves by pixel footprint: pixelSize = (viewWidthµm / resolution.y) — pass as uniform u_texel. For octave with wavelength λ, weight = smoothstep to zero when λ < 2*pixelSize. I'll implement fbm with a max frequency cap relative to u_texel: skip octaves whose freq > 0.5/u_texel. And for micro-textures like specks use smoothstep widths proportional to pixel size (use fwidth-like via u_texel * abs derivative... simpler: use analytic smoothstep with pixel-based width: w = u_texel * 1.5). Actually for the specks: d = n - threshold, alpha = smoothstep(w, 0, |d|)? Value noise isn't a good speck source; better: per-cell hash sparkle: use voronoi-like: id = floor(p*freq); rnd = hash(id); center offset; d = length(p*scale - center); speck = smoothstep(r, r - w*2, d). With w = u_texel*scale. That's controllable. But scale of specks should be physical (substrate particles ~ 0.05–0.15 µm) — at overview zoom they'd be sub-pixel: fade them out below pixel size (weight by smoothstep(2*pixelSize, 0.5*pixelSize, particleSize)). Good — particles appear as you zoom in, like discovering the nanostructure. That's part of the delight of zooming: at ×1,000 you see the cell; at ×8,000 microvilli and mitochondria detail; at ×30,000 the substrate particles and membrane grain; fine. Similarly ER and granule textures fade in/out with zoom naturally via octave fading. Hmm wait — microvilli: I described the cell as a flat sheet with ruffled edge (like cultured epithelial cell, very classic SEM). Microvilli as small finger projections on the surface would add a lot: scatter ~ small domes (radius 0.15–0.3 µm) over the cell surface at high density, visible only at high zoom. As a loop of hundreds? Too heavy. Alternative: procedural "bumpy field": microvilli as a grid-jittered field of domes: ``` vec2 gp = p * 4.0; // density vec2 id = floor(gp); vec2 f = fract(gp); rnd = hash(id); center = 0.3 + 0.4*hash2(id); d = length(f - center) / 4.0; // in µm dome = smoothstep(r_v, 0.0, d) * presence(rnd) ``` Each dome ~0.25µm radius (grid cell 0.25µm). At overview they're sub-pixel → weight fades → surface looks smooth-ish with slight roughness (good). At ×15,000 they appear — the "wow" moment when the surface resolves into microvilli. I'll fade their height in with zoom: presence = smoothstep(pixelSize, pixelSize*0.4, gridSpacing). And they should cover the cell surface but maybe sparser on nucleus. Also I should jitter per-cell radius 0.1–0.16µm, height varies, some absent (hash > 0.25 skip). This is getting rich. Let me also consider performance: fragment shader with ~6 fbm calls (each 4-5 octaves with value noise = 4 hash taps each) + loops (9 mitochondria + 14 vesicles + microvilli field) per pixel. Full screen at retina 2x could be heavy. Mitigations: render at devicePixelRatio capped at 1.5; the fbm octaves capped by zoom (only compute needed octaves — but GLSL loops with dynamic bounds are okay-ish in WebGL1? WebGL2 fine with non-constant loop bounds). I'll target WebGL2 with fallback message. Keep octaves fixed at 5 for warp fbm but early-out? Can't early-out per-octave easily. I'll write reasonably tight code; value noise 2D with a good hash is cheap. Estimate: outline fbm(2 oct) + warp fbm(3) + cytoplasm fbm(4) + chromatin (3) + ER (2 fbm3) + microvilli field (1 hash2) + gradient: height function evaluated 3–4 times (for gradient: 3 taps: h(p), h(p+ex), h(p+ey) — forward differences). So ×3 everything. Might be ~fine at 1.5x DPR on modern GPU. I'll also add a resolution scale option? Keep it simple: cap DPR at 1.75, and if needed the user has a lower "calidad" toggle? I'll add an auto: measure frame time first second and reduce internal resolution if slow. That's polish — maybe a simple adaptive: if avg frame > 24ms over first 60 frames, drop canvas resolution to 1.0. I'll include lightweight adaptive resolution. Mitochondria via loop with hash: positions: r = 13 + 7*hash(i) µm from center at angle hash-based; but must avoid nucleus (nucleus at (3,-2) r 9.5): mitochondria ring radius from center 14–19 while nucleus max extent ~ from center: dist((3,-2)) + 9.5 ≈ 3.6+9.5 = 13.1. So ring 14.5–19, cell R ~26 → inside cytoplasm band 14.5–19.5 with nucleus till 13. OK. Also ensure not too close to edge: R-6 = 20 → keep ≤ 19.5. Fine. Each mito: angle θ_i = hash(i)*2π, radial dist rr = 14.5 + 5*hash(i+.7), pos = rr*(cosθ,sinθ) + jitter, orientation = θ + (hash-0.5)*1.2, half-length 1.5–3.2 µm, width 0.5–0.8. Wait, but vesicles also need positions avoiding nucleus: radius 5–20 anywhere except nucleus disk. Check dist to nucleus center > nR+1. ER: winding tubes everywhere in cytoplasm outside nucleus. Also: the cell in SEM of cultured cells — you often see the nucleus as a raised central dome and the cytoplasm with "fibers" (stress fibers) — I could add subtle straight-ish filaments? The ER ridged noise suffices. Let me also add a couple of "filopodia": thin long protrusions extending from the cell edge — 6–8 thin spikes radiating out. Implement: for i in 0..7: angle φ_i; the spike = line segment from R_edge(a) to R_edge+len; distance from p to the segment; h += spikeMask*smallHeight; width ~0.25µm tapering. These add beautiful organic character at overview. They're thin (0.2–0.4 µm) — at overview ×800 with 150µm view on ~1000px tall screen: pixel ≈ 0.15µm → spikes ~1.5–2.5px wide. Visible. Good. Length 4–9 µm. With slight curve? Straight segments fine; add slight waviness via sin offset perpendicular by 0.3*sin(t*...)? Static: perpendicular offset by noise along length — do simple: d to segment, then add small sin(alongLen*3+φ)*0.4 to d... that wiggles the tube. For segment distance: standard. Now HUD & magnification: - World view height: at zoom 1, view height = 150 µm? Then cell (52µm) occupies ~35% height. Good overview. min zoom 0.55 (view 270µm), max zoom ~ 300 (view 0.5 µm — too much; shader won't have detail below microvilli scale... microvilli field grid 0.25µm would alias. Cap max zoom so view height ≈ 8 µm → zoom 18.75; at that mag (mag = ?). Magnification: mag = screenPhysicalHeight... conventional: mag assumes ~ reference; simpler: mag = (displayHeightPx / viewHeightµm) * (0.0265 mm/px?) Let's define mag so numbers feel SEM-real: typical SEM of whole cell ×500–×2,000; microvilli at ×10,000–×25,000. Set mag = zoom * 1500. Overview zoom 1 → ×1,500 (hmm whole 52µm cell at ×1500 → image height 7.8cm on paper... fine, plausible for a big display). At zoom 18.75 → ×28,000. Good. Min zoom 0.55 → ×825. Scale bar: choose L from candidates [500nm,200nm,100nm,50nm,20nm,10nm,5nm,2nm,1µm,2µm,5µm,10µm,20µm,50µm] such that L/viewWidth * screenW(px) ∈ [80, 200]px. Draw with DOM div: a line with end ticks + label. Update on zoom. Presets buttons: "Célula ×1,5k", "Membrana ×8k"? Better: a magnification readout with click-drag? Keep: three preset chips: Vista general (×1.5k), Borde celular (×6k), Microvellosidades (×15k), Núcleo (×4k)? Each animates zoom+pan to a framed region. That's great guided interaction. Implement tween of zoom & center. Also "RE-ESCANEAR" button (re-run acquisition sweep) and "CAPTURAR" (download PNG). Detector toggle SE/BSE. Maybe beam kV slider? A small slider 1–30 kV that subtly changes contrast/noise? Fun but scope-creep; a kV readout is enough, or make it interactive: kV affects penetration → contrast/brightness slightly and noise amount. Cheap to implement in shader: uniforms. I'll add a minimal slider styled instrument-like. Hmm, I want to keep HUD restrained. Elements: top-left instrument block; top-right detector toggle + capture; bottom-left magnification + scale bar; bottom-right sample info + kV. Controls hint center-bottom fading out. Presets as small text buttons along left edge? Let me sketch layout: - Full-screen canvas. - HUD frame: thin 1px corners brackets (like camera viewfinder) in corners — nice touch. - Top-left: ``` HELIOS-650 · SEM SE — ELECTRONES SECUNDARIOS (changes with toggle) EHT 5.00 kV · WD 10.3 mm · PROPAMA? ``` - Top-right: buttons [SE|BSE] toggle, [RE-ESCANEAR], [CAPTURAR .PNG] - Bottom-left: big magnification "×1 500" + under it scale bar. - Bottom-right: "MUESTRA: FIBROBLASTO HUMANO (HFF-1)\nRECUBRIMIENTO Au/Pd 4 nm · CÁMARA 2.1e-6 mBar" small lines. - Bottom-center: hint "arrastrar · desplazar para ampliar · espacio: re-escanear" that fades after first interaction. - Mouse crosshair: two thin lines + small circle following cursor (DOM, mix-blend-mode: difference or plain rgba white). Plus coordinates readout "X +12.4 µm Y −03.1 µm" near cursor? Maybe in bottom-left near mag. Nice: show stage coordinates under cursor. Toasts: for capture: a small toast bottom-center "Imagen capturada — SEM_0042.png". No alert. Icons: use lucide via CDN? For small icons in buttons (camera, refresh). I can inline tiny SVGs instead — cleaner, no dependency. I'll inline minimal SVG icons (crosshair, camera, rotate-cw) hand-written. That avoids emoji and heavy libs. Fonts: "IBM Plex Mono" from Google Fonts — instrument feel. Maybe pair with "Archivo" or just all mono. All-mono HUD is cohesive and right for SEM. Big mag readout in mono too. OK. Color: pure grayscale UI (#0a0a0a bg, #e8e8e8 text, hairlines rgba(255,255,255,.18)). The image itself grayscale. One accent? Monochrome brief — keep strictly grayscale; maybe a single functional amber? No — stay monochrome; use white intensity hierarchy. It'll look precise. Now the acquisition sweep on load: u_scanY from top (1→0 in screen space? SEM scans top→bottom). Image revealed where scan has passed: revealed = step(scanY_screen, fragY)... Let's define u_acq ∈ [0,1]; rows with v.y (screen, y up in GL) — SEM scans top down: reveal where screenY_from_top < acq*H. In GL coords y up: revealed = (1-uv01.y) < acq → i.e., uv01.y > 1-acq. Ahead of line: near-black with faint noise (un-acquired = detector noise). At the line: bright band (Gaussian ~2px) + a secondary "retrace" faint line offset? Keep one bright band. During acquisition, also render increased grain on revealed area (fresh signal noisy that settles? subtle: noise amount higher just behind line, decaying over ~15% of height). Nice detail. After acquisition completes (flag), periodic faint scan: a slow-moving line every 8s, adds +4% brightness Gaussian width 30px, plus occasional random line glitch: pick random line rows: glitch = step(0.996, hash(floor(gl_FragCoord.y)+floor(t*7))) → x-displacement of uv by ±2px and brightness anomaly. Subtle frequency. Beam cursor effect: brightness += 0.10 * exp(-d²/(2σ²)) with σ ≈ 6px, only when mouse inside. Also the beam "charges" slightly? Keep subtle. Also maybe a faint slow "drift" of the image when beam rests? Skip. BSE mode: u_mode: 0 SE, 1 BSE. BSE: shading flatter: mix gradient shading toward top-down light; nucleus (higher average Z compositionally? Actually nucleus in BSE of coated cells isn't distinct... but this is a stylized simulation) — I'll make BSE reduce edge glow by 70%, reduce grain, slightly lower contrast, and invert-ish material contrast: nucleus −, mitochondria −, vesicles +? Compositional contrast: heavier elements brighter. Au/Pd coat dominates anyway... it's aesthetic: BSE = smoother, more "flat topographic-ish". Also label updates. Good enough, meaningful difference. Zoom toward cursor: standard: keep world point under cursor fixed. Smooth: target zoom/pan with exponential easing each frame (lerp factor 1-exp(-dt*8)). Pan clamping: keep view within some world bounds (say ±80µm) so users don't get lost in void. Initial camera: centered slightly on cell, zoom 1. Intro: also start with slight zoom-in from 0.8→1.0 during acquisition? Subtle. Let me now write the shader concretely. ```glsl #version 300 es precision highp float; out vec4 fragColor; uniform vec2 u_res; uniform vec3 u_cam; // x,y center (µm), z = pixelsPerµm? Let's pass zoom uniform float u_zoom; // view height µm -> scale uniform float u_time; uniform float u_acq; // 0..1 acquisition progress uniform float u_mode; // 0 SE, 1 BSE uniform vec2 u_mouseW; // mouse world pos uniform float u_mAct; // mouse active ``` Coordinate: ``` vec2 uv01 = gl_FragCoord.xy / u_res; // y up vec2 sc = (gl_FragCoord.xy - 0.5*u_res) / u_res.y; // centered, y up, height=1 float viewH = u_zoom; // µm per full height? define u_zoom = viewHeight in µm vec2 p = u_cam.xy + sc * viewH; ``` pixel size in µm: px = viewH / u_res.y. Hash: ``` float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx)*0.1031); p3 += dot(p3,p3.yzx+33.33); return fract((p3.x+p3.y)*p3.z); } vec2 hash22(vec2 p){ vec3 p3 = fract(vec3(p.xyx)*vec3(.1031,.1030,.0973)); p3+=dot(p3,p3.yzx+33.33); return fract((p3.xx+p3.yz)*p3.zy); } ``` Value noise: ``` float vnoise(vec2 p){ vec2 i=floor(p), f=fract(p); vec2 u=f*f*(3.-2.*f); return mix(mix(hash12(i),hash12(i+vec2(1,0)),u.x), mix(hash12(i+vec2(0,1)),hash12(i+vec2(1,1)),u.x),u.y); } ``` fbm: ``` float fbm(vec2 p, int oct){ float a=0.5, s=0.0, n=0.0; for(int i=0;i<6;i++){ if(i>=oct) break; float lam = 1.0/a*? } } ``` Octave wavelength control: standard fbm(p) with p*=2.02 rotation. For LOD: pass px and skip octaves where initialWavelength / 2^i < 3*px → weight *= smoothstep. Implement fbm that computes per-octave fade: ``` float fbm(vec2 p, int oct, float px){ float s=0., a=0.5, tot=0.; mat2 m = mat2(0.8,0.6,-0.6,0.8); for(int i=0;i ~1.5px. ``` float fpx = px * pow(2.0, float(i)); // relative to base float fade = smoothstep(0.75, 0.3, fpx); if(fade<=0.001) break; s += a * fade * vnoise(p); p = m*p*2.03; tot += a*fade; ``` normalize by tot. Good. Height function h(p, px): ```glsl float outline(float a){ vec2 d = vec2(cos(a), sin(a)); return R0 * (1.0 + 0.09 * (vnoise(d*1.6+3.1)-0.5)*2.0 + 0.045* (vnoise(d*3.7+9.7)-0.5)*2.0 + 0.02 * (vnoise(d*8.0+5.2)-0.5)*2.0); } ``` Height: ```glsl const float R0 = 26.0; vec2 NC = vec2(3.0,-2.5); float NR = 9.0; float cellH(vec2 p, float px){ float r = length(p); float a = atan(p.y, p.x); float Ro = outline(a); // --- cell body dome rising from substrate float e = Ro; float body = smoothstep(e, e-7.0, r); // 0 outside -> 1 inside // rounded rim falloff: float h = -0.8 + 2.6*body; // substrate -0.8, plateau 1.8 ``` Hmm — I want an elevated lamellipodium look: cell plateau height ~1.5 with a soft slope near the edge over ~4–6 µm (thin membrane edge in SEM appears as a bright rim because of steep slope). Body: ``` float edgeT = (r - (e-6.0))/6.0; // 0 inner .. 1 at edge float slope = smoothstep(0.0,1.0, clamp(edgeT,0.,1.)); h = plateau * (1.0 - slope*slope*(3-2 slope?)) ``` just use body = smoothstep(e, e-6.0, r) with smootherstep for S-curve: h_plateau * body. Rim curl: tiny bump right at e: h += 0.5*exp(-pow((r-e)/0.9,2.0)) — but with slope shading this will glow. In SE mode maybe boost edge via separate edge glow term in shading instead. Both. Ruffles at rim band: h += 0.45 * fbm(p*1.8+vec2(7.7), 3, px) * band where band = exp(-pow((r-(e-2.5))/2.2,2.0)) — wrinkled membrane edge. - Nucleus: ``` vec2 q = p - NC; float rn = length(q); float nRo = NR*(1.0 + 0.05*(vnoise(normalize(q)*2.3+11.0)-0.5)*2.0); float nuc = smoothstep(nRo, nRo*0.55, rn); // dome h += 1.5*nuc; // nuclear envelope crease h -= 0.35*exp(-pow((rn-nRo)/0.45,2.0)) * smoothstep(nRo+2.5, nRo, rn)*? ``` Crease ring all around: fine unconditional (subtract where rn near nRo, but only inside cell — it is). Chromatin: h += 0.22 * (fbm(q*2.2, 4, px)-0.5)*2.0 * nuc; plus fine: 0.06*(fbm(q*9,3,px)-0.5)*2*nuc. - ER tubules in cytoplasm: ``` float inCyto = body * (1.0 - smoothstep(nRo-1.0, nRo+1.5, rn)); vec2 wp = p + 1.4*vec2(fbm(p*0.5+2.0,3,px), fbm(p*0.5+5.0,3,px)); // wait warp needs two fbms float er = 1.0 - abs(vnoise(wp*1.1)*2.0-1.0); // ridged er = pow(er, 8.0); h += 0.5 * er * inCyto * edgeFade; ``` Hmm ridged from single vnoise abs is liney enough. Maybe two scales: er1 (λ~1µm) + er2 (λ~0.35µm) — second only when zoomed (fade via px). Use fbm? Ridged fbm: sum. Keep moderate cost. Also stress fibers: subtle directional streaks: h += 0.1 * (sin/ridged along a dominant direction)... skip, ER enough. - Microvilli field: ``` float mvFade = smoothstep(0.09, 0.035, px); // appear when pixel < ~0.07µm? grid 0.28µm; want domes of r~0.09 resolved at ~3px → px<0.03 ``` Let me set grid g = 0.30 µm spacing: ``` if(mvW>0.001){ vec2 gp = p/0.30; vec2 id = floor(gp); vec2 f = fract(gp)-0.5; vec2 rnd = hash22(id); vec2 c = (rnd-0.5)*0.5; float rr = 0.10 + 0.06*rnd.y; // radius µm float dd = length(f*0.30 - c*0.30); // µm float mv = smoothstep(rr, rr*0.25, dd) * step(0.35, rnd.x); // 65% present h += 0.28 * mv * mvW * body; } ``` Actually to reduce blockiness of grid, fine. mvW = smoothstep(0.075, 0.03, px) — at ×1500 (viewH 150µm, px≈0.14µm at 1080px) invisible; at ×6000 px≈0.036µm partially; at ×15000 px≈0.014 fully. Also add slight surface roughness pre-fade so the surface isn't glassy: h += 0.05*(fbm(p*6,3,px)-0.5)*2*body. Also microvilli should be denser near the periphery, sparser over nucleus: scale presence by (1 - 0.7*nuc). OK. - Mitochondria loop (const count 9): ``` for(int i=0;i<9;i++){ float fi=float(i); float an = hash12(vec2(fi,1.7))*6.2832; float rd = 14.5 + 4.5*hash12(vec2(fi,9.1)); vec2 mp = vec2(cos(an),sin(an))*rd; float or_ = an + 1.5708 + (hash12(vec2(fi,4.2))-0.5)*1.6; vec2 u2 = vec2(cos(or_),sin(or_)); vec2 lp = p - mp; lp = vec2(dot(lp,u2), dot(lp,vec2(-u2.y,u2.x))); float hl = 1.6 + 1.6*hash12(vec2(fi,6.6)); float hw = 0.45 + 0.18*hash12(vec2(fi,8.9)); // capsule sdf vec2 ap = vec2(abs(lp.x)-hl, lp.y); float dd = length(max(ap,0.0)) + min(max(ap.x,ap.y),0.0) - hw; float m = smoothstep(0.15,-0.15,dd); h += 0.9*m; // cristae texture inside float cr = 1.0-abs(vnoise(vec2(lp.x*3.0, lp.y*9.0))*2.0-1.0); h += 0.18*pow(cr,6.0)*m*mvW? ``` cristae visibility with zoom: fade = smoothstep(0.05,0.02,px). Avoid nucleus overlap: rd≥14.5 ensures dist from center ≥14.5; nucleus max reach ~13.2. OK. - Vesicles loop (12): ``` for i in 0..11: an=hash*2π, rd = 6+14*hash (avoid? could land on nucleus: check — if rd from origin acqY is unacquired. Fresh just behind: band = exp(-pow((acqY - yTop)*u_res.y/60.0,2.0)) * 0.15 added brightness and extra noise. Unrevealed: col = dark noise: n = hash(...)*0.05 + occasional speckle. col = mix(noiseCol, col, revealed) + line*lineCol. Post-acq idle sweep: pass u_sweep (0..1) position of faint refresh line when active: line2 = exp(-pow((yTop - u_sweep)*u_res.y/22.,2.)) * 0.06. Line glitch: ``` float gl = hash12(vec2(floor(gl_FragCoord.y), floor(u_time*24.))); float glitch = step(0.997, gl); uv01.x += glitch*(hash12(...)-0.5)*0.01; ``` apply to sc before computing p? Apply x shift early. Also brightness band on glitch rows: +0.1*glitch. Careful: glitch applied per row via time-varying hash → rows jitter horizontally occasionally. Subtle. Mouse beam: ``` float md = length(p - u_mouseW); col += 0.10 * u_mAct * exp(-md*md/(2.0*sq(px*10.0))); ``` σ=10px. Also a very subtle "beam center" brightening always? no. Presets need pan+zoom animation in JS with easing. Space→rescan. Buttons wired. Capture: render one frame then canvas.toBlob → download link. Note: preserveDrawingBuffer:true simplifies. HUD live values: mag = 1500*zoomBase... define viewH (µm) = 150/zoom where zoom∈[0.55, 24]. mag = round(1500*zoom) format "×1 500" thin-space. Scale bar: candidates µm: [50,20,10,5,2,1,0.5,0.2,0.1,0.05,0.02]; choose largest L with L/viewH*screenH_css px ≤ 180px and ≥ 60? choose L such that px width in [70,200]: iterate from large: L_px = L/viewH*H. pick first (descending) with L_px<=200; ensure also ≥60 else take half? Standard: iterate list descending, pick first where L_px <= 200. Since smallest 0.02µm at viewH 6.25 (zoom24): L_px=0.02/6.25*H = 0.0032*1080≈3.5px — too small; extend list down to 0.002µm (2nm): add 0.01, 0.005, 0.002. At max zoom viewH 6.25µm → 0.02µm=20nm→3.5px hmm recompute: H≈900 css px, viewH=6.25 → pxPerµm=144; 0.05µm→7px; need ≥ ~70px: L=0.4? not in list → add 0.4? list: 100,50,20,10,5,2,1,0.5,0.4? use "1-2-5" series: [...,2,1,0.5,0.2,0.1,0.05,0.02,0.01,0.005,0.002]. At 144px/µm: 0.5µm→72px ✓. Fine — with the 1-2-5 series the first ≤200px will typically be ≥70px anyway (since series steps ×2.5 max... between 0.5(72px) and 1(144px): if 1 gives 144≤200 pick 1. If viewH such that 1µm→250px then pick 0.5→125 ✓ ≥60. Series ratio 2 or 2.5 → after picking first ≤200, the value ≥ 200/2.5=80px ✓. Good.) Format label: L≥1 → "X µm"; below → "Y nm". Mouse coords readout: world pos of cursor in µm relative to cell center: "X +12.4 Y −03.1 µm". Now DOM/CSS design: ``` body: #050505, IBM Plex Mono. #gl canvas fullscreen. .hud absolute inset 0 pointer-events none; children auto where interactive. Corners: .corner elements with borders (top-left: border-left+top 1px rgba(255,255,255,0.35), size 26px). ``` Top-left block: ``` SEM · HELIOS 650 (12px, letterspacing) ──────────── DECTOR SE2 · EHT 5.00 kV WD 10.3 mm · PRES 2.1e-6 mBar ``` Top-right buttons (pointer-events auto): [SE] [BSE] segmented; [RE-ESCANEAR]; [CAPTURAR]. Style: 1px border rgba(.25), uppercase 10px, padding 6px 10px, hover: bg rgba(255,255,255,.08), active states. Capture triggers flash overlay + toast. Bottom-left: ``` ×1 500 (28px, weight 500) [ scalebar line with ticks ] 100 µm X +00.0 Y +00.0 µm (stage coords) ``` Bottom-right (right-aligned small, lines): ``` MUESTRA · FIBROBLASTO HUMANO HFF-1 AU/PD 4 nm · SEÑAL SE · ESCANEO 30 µs/banda? ``` Update "SEÑAL SE/BSE" with toggle. Bottom-center hint: "ARRASTRAR PARA MOVER · RUEDA PARA AMPLIAR · ESPACIO RE-ESCANEA" — fades out after 5s or first interaction. Left edge presets? Place presets vertically centered on left: small items: ``` 01 VISTA GENERAL ×1 500 02 NÚCLEO ×4 000 03 BORDE CELULAR ×7 000 04 MICROVELLOSIDADES ×16 000 ``` Each clickable → animated fly-to. Hover: bracket indicator. This gives narrative guided tour — nice signature interaction: clicking through them is a guided zoom journey into the cell. Preset positions (world coords + viewH): - 01: (0, 0), viewH 150 - 02 nucleus: NC=(3,-2.5), viewH 26 (NR 9.5→ frame ~26) zoom=150/26≈5.8 → mag ×8 700. Hmm "×4 000" adjust: viewH 36 → zoom 4.17 → ×6 250. Let me choose mags: 01 ×1 500 (viewH 150, zoom 1). 02 NÚCLEO viewH 34 → zoom 4.41 → ×6 600. 03 BORDE: point on edge e.g. angle 2.4 rad: pos = Ro*dir ≈ 26*(cos2.4,sin2.4)=(-19,15)... plus microvilli band; viewH 20 → ×11 250. 04 MICROVELLOSIDADES: a spot inside cytoplasm away from nucleus, e.g. (-10, 8), viewH 7 → ×32 000? mag=1500*150/7... wait zoom=150/viewH=21.4 → ×32 100. That's beyond microvilli full fade (needs px<0.03 → px=viewH/Hcss: 7/900=0.0078µm ✓ fully resolved). Good. Names: "VISTA GENERAL", "NÚCLEO", "LAMELIPODIO / BORDE", "MICROVELLOSIDADES". Tween: animate cam center & viewH with easeInOutCubic over 1.6s. During tween, maybe run a re-scan sweep? Optional: no, keep image live. Crosshair: DOM element following mouse: two 1px lines full-width/height at low opacity + center gap? Full crosshair lines across whole viewport (like SEM); opacity 0.15, plus small circle r 18px border. Hidden until mouse moves over canvas; on drag, maybe switch to "move" style. Also crosshair subtle color pure white, mix-blend-mode: difference for visibility. Keep simple rgba(255,255,255,.25). Toast: bottom center above hint, border 1px, bg #0a0a0a, appears translate-up, auto-hide 2.6s. Flash on capture: white overlay opacity .5 → 0, 200ms, and toast "SEM_0031.PNG guardada". Counter increments. Adaptive quality: keep DPR min(devicePixelRatio,1.5). If slow... I'll implement simple: measure avg frame time over 90 frames; if >26ms, set renderScale 0.75 and rebuild canvas size; if still slow → 0.6. Canvas CSS full size, drawing buffer scaled. Pass u_res = buffer size. HUD unaffected. Fine. WebGL fallback: if no WebGL2, try WebGL1? Writing GLSL ES 1.00 compatible shader isn't hard (avoid `#version 300 es`, use texture-free math — all fine). Loops with constant bounds ✓, break allowed ✓. I'll write GLSL 1.00-compatible (varying via attribute; fullscreen triangle). Then no fallback message needed except if WebGL entirely absent — show styled message. Use WebGL1 for max compatibility. All my shader features (for loops with break, derivative-free) are ES 1.00 fine. Note: dynamic loop bound `if(i>=oct) break;` with uniform oct — allowed in WebGL1? Loop conditions must be constant-comparable in strict ES 1.00 Appendix A... Many implementations require loops with constant bounds; `for(int i=0;i<6;i++){ if(i>=oct) break; ...}` is commonly fine since bound is constant. I'll keep octaves as constants per call anyway (pass literal int via separate functions or just always 5 octaves with per-octave amplitude choice? Simplest: fbm5 always 5 octaves but weight octaves by a "detail" param computed per call). I'll write fbm(p, float cutoffPx, float baseLam): octave i wavelength = baseLam*2^-i; fade=smoothstep(cutoff*2.0, cutoff*0.5, wl_i/px?) Let me define: contribution weight_i = smoothstep(1.5, 0.5, px / wl_i) — as px/wl shrinks (resolved), weight→1. Precompute per octave. All branches avoided via multiplication (still computing vnoise — minor waste; 5 octaves × ~... calls: let me count vnoise calls per height eval: - outline: 3 vnoise - ruffle fbm3: 3 - warp for ER: 2 fbm3 = 6 — expensive; reduce warp to single fbm2 for x and reuse? Use warp = vec2(f1, f2) needs 2 fbms. Could use cheaper: vnoise-based single-scale warp: wp = p + 1.3*vec2(vnoise(p*0.7+2.), vnoise(p*0.7+9.)) → 2 vnoise total. ER ridged: er = ridged(vnoise(wp*1.3)) + second octave ridged(vnoise(wp*2.7))*0.5 → 2. Total ER ≈ 4. - cytoplasm grain fbm: 3 - chromatin fbm4: 4 - nucleus outline: 1 - microvilli: hash22 = 1 (cheap) - mitochondria loop 9 × (1 hash12 + inside cristae 1 vnoise when m>0... GLSL executes regardless; cristae vnoise = 9 vnoise. Could compute cristae only weighted by m — still executes. 9 vnoise is heavy. Reduce: cristae single vnoise ✓, keep. Or compute cristae without branch — fine, 9 vnoise. Actually I can reduce mito count to 7 and vesicle 10. - vesicles: 10 × hash12 (cheap) - filopodia: 7 × hash12 (cheap) - substrate dots: dotsA (hash22 1) + dotsB (1) + fbm3 grain 3. Sum vnoise-ish: 3+3+4+3+4+1+9+3 ≈ 30 vnoise + ~20 hashes per height eval, ×3 evals = ~90 vnoise + overhead per pixel. Each vnoise = 4 hash12 + mixes ≈ maybe 40 ALU. ~4000+ ALU/pixel... at 1080p×1.5dpr ≈ 4.7M px → ~19 GFLOP-ish per frame at 60fps ≈ 1.1 TFLOPs. Modern discrete GPUs fine; integrated might hit 30fps. Adaptive res will help. Also I can skip full detail in un-revealed region (during acquisition) with early return cheap path. Also gradient taps: use cheaper forward difference with only 2 extra evals ✓ (already planned). Could also reduce: for pixels where body==0 and no filopodia... branch: if h0 indicates pure substrate far from cell (r > Ro+12 and beyond filopodia bounds), use simplified substrate-only path (dots + grain only, no loops). Add early-out: compute r and coarse band first. I'll structure: quick mask: if r > Ro_max(≈ R0*1.16 + 12) and also not near filopodia... filopodia reach R0*1.16+9 ≈ 39; so if r>40: substrate only. That saves a lot for outside pixels but cell covers center... fine, worth it. Also cap DPR 1.5 and provide adaptive down to 0.66. Also, when zoomed in at high mag, many structures (outline, filopodia, ER) are far away or huge-wavelength → their computation still runs. Could early-out per structure by distance... e.g., mitochondria loop: if m==0 the vnoise cristae still computed — restructure: cr only matters when m>0; compute m first, then `if(m>0.001){ h += ... }` — GPU threads in divergence but warp-level still executes; still, branch helps when all threads in warp agree (far from mito, entire warp skips). Do the same for vesicles (no texture inside, cheap anyway). OK, this is going to be a meaty shader (~300 lines). Let's also handle non-square screens: view height fixed in µm → on wide screens more world visible horizontally ✓ (sc uses /res.y). Acquisition duration: u_acq animated 0→1 over 2.2s with ease? Linear scan feels machine-like: linear. During acquisition, before it completes, HUD mag etc already shown. Initial cam: start viewH 190 → tween to 150 over 2.5s (subtle settle). Rescan (space/button): u_acq resets 0 and animates 0→1 (2.2s), during which image progressively redraws — but the underlying scene identical, so it's pure theatre — still delightful, and with fresh random seed? Changing seed changes cell shape — could re-randomize outline offsets via uniform u_seed added into noise coords → each rescan gives a NEW cell (different shape/mito positions if I derive from seed too). That's a great feature: "RE-ESCANEAR" = nueva célula. But mito positions from hash12(fi) — add u_seed to hash inputs: hash12(vec2(fi,1.7)+u_seed*7.) etc. And outline noise coords + u_seed*13. Vesicle/filopodia hashes + seed. Microvilli field hash22(id + seed) — shape changes per scan! I'll do it: each acquisition reveals a new cell variant. Signature moment strengthened. (Sample label could show "CAMPO 0041" incrementing.) Pause during rescan: disable? No, keep interactive. Also idle sweeps: track sweep position cycling every 9s: u_sweep = (t mod 9)/9 mapped 0..1 with active window; if outside [0,1] no line. Make sweep duration 2.5s every 9s. Mouse: while dragging, cursor crosshair expands? Add "grabbing" state hiding beam glow (mAct=0 during drag). Double-click: zoom in ×2 toward point? Nice extra: dblclick → zoom step. And shift+dblclick out? Just wheel is fine; add dblclick zoom-in. Now JS structure: ```js const canvas = ...; const gl = canvas.getContext('webgl', {preserveDrawingBuffer:true, antialias:false}); compile shaders, fullscreen triangle (3 verts). uniforms locations. state: cam {x,y,h}, target {x,y,h}, acq {t0}, sweep, mode, seed, mouse {x,y,world,active}, captureCount. resize(): buffer = css*dpr*scale. frame(t): update easing, acq progress, sweep, set uniforms, draw, update HUD text (throttle to when changed: mag text, scalebar, coords). wheel: target.h *= exp(deltaY*0.0012); clamp [6,260]... clamp viewH ∈ [6.25, 280]; zoom-to-cursor: adjust target center: world under cursor stays: p = cam + sc*viewH → newCam = p - sc*newH, where sc is cursor's normalized coords ((mx-0.5w)/h, -(my-0.5h)/h) with y flip. Apply to target: pTarget = target + sc*targetH; target' = pTarget - sc*targetH'. drag: pointerdown → track; move: target.xy -= dworld (using current? use target h): dx = -(e.movementX / Hcss)*target.h; dy = +(...)*target.h (screen y down → world y up minus). Clamp center |x|,|y| ≤ 60. pointer events with setPointerCapture. dblclick: target.h/=2 at cursor, clamp. presets: array with name, mag label, x,y,h; click → animate via target set (easing handles smoothing) — but easing exponential gives nice fly. For a more cinematic fly, set a tween object overriding target easing? Exponential ease with factor ~4/s gives ~1s settle. Fine, just set targets. Active preset highlight based on nearest? Keep clicked state until user moves manually. keys: Space → rescan(); 'b' toggles BSE? Buttons enough; also add key hints in title attr. capture: draw(); canvas.toBlob(blob→a.download=`SEM_${String(count).padStart(4,'0')}.png`). Flash div. toast(msg). mode toggle: u_mode uniform, HUD text SE↔BSE, button active class. rescan: seed = Math.random()*100; acqStart=now; field counter++ → update "CAMPO 00XX" label. HUD mag: mag = 1500 * (150/cam.h) — wait define zoom factor z = 150/viewH; mag = 1500*z = 225000/viewH. At viewH 150 → ×1 500 ✓. Display rounding: <10,000 round to 100s; ≥10,000 round to 500s? Format with thin space thousands: "×22 500". Use toLocaleString('es') which uses "." for thousands (es-ES) → "×22.500"? Spanish uses dot or space; I'll custom format with narrow space "\u2009". scalebar: compute L, width px = L/cam.h*Hcss; set div width & label. coords: mouse world. ``` Hint fade: after first wheel/drag or 6s → opacity 0. Edge case: mobile touch — pointer events handle drag; pinch zoom? Add basic two-pointer pinch: track two pointers, scale target.h by ratio. I'll implement simple pinch since pointer events give it easily. Also touch has no hover — fine. Let me write the noise/hash carefully for WebGL1 GLSL: ```glsl float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } vec2 hash22(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973)); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.xx + p3.yz) * p3.zy); } float vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 u = f*f*(3.0-2.0*f); float a = hash12(i); float b = hash12(i+vec2(1.,0.)); float c = hash12(i+vec2(0.,1.)); float d = hash12(i+vec2(1.,1.)); return mix(mix(a,b,u.x), mix(c,d,u.x), u.y); } ``` fbm with LOD: ```glsl float fbm(vec2 p, float px, float lam0, int oct){ float s = 0.0, a = 0.5, tot = 0.0; float wl = lam0; mat2 m = mat2(0.8,-0.6,0.6,0.8); for(int i=0;i<6;i++){ if(i>=oct) break; float w = smoothstep(1.6, 0.55, px/wl); s += a * w * vnoise(p/wl); tot += a*w; a *= 0.5; wl *= 0.5; p = m * p; } return tot>0.0001 ? s/tot : 0.5; } ``` Note p/wl: frequency scaling by wavelength directly (λ in µm). Rotation per octave. Height function — write it fully: ```glsl const float R0 = 26.0; const vec2 NC = vec2(3.0, -2.5); const float NR = 9.4; uniform float u_seed; float outlineR(float a, float sd){ vec2 d = vec2(cos(a), sin(a)); return R0 * (1.0 + 0.085*(vnoise(d*1.7 + sd*1.3 + 3.1)-0.5)*2.0 + 0.045*(vnoise(d*3.9 + sd*2.1 + 9.7)-0.5)*2.0 + 0.018*(vnoise(d*9.0 + sd*4.7 + 5.2)-0.5)*2.0); } ``` Add u_seed into coords: pass sd. Full height: ```glsl float cellH(vec2 p, float px){ float r = length(p); // fast substrate-only path // (checked by caller: r > 40 → substrate) float a = atan(p.y, p.x); float sd = u_seed; float Ro = outlineR(a, sd); // filopodia (before body so they stick out) float h = 0.0; for(int i=0;i<7;i++){ float fi = float(i); float an = 6.2832*hash12(vec2(fi*3.1, sd)); float ln = 4.5 + 4.5*hash12(vec2(fi*5.7, sd+2.0)); vec2 dir = vec2(cos(an), sin(an)); vec2 s0 = dir*(outlineR(an, sd)-0.6); vec2 ba = dir*ln; vec2 pa = p - s0; float tt = clamp(dot(pa,ba)/dot(ba,ba), 0.0, 1.0); float dl = length(pa - ba*tt); float w = 0.20 + 0.08*(1.0-tt); dl -= 0.10*sin(tt*ln*2.3 + fi*2.7 + sd); h += 0.55 * smoothstep(w, w*0.2, dl) * smoothstep(ln+1.2, ln*0.55, tt*ln); } ``` Hmm the smoothstep(ln+1.2, ln*0.55, tt*ln) — fade tip: distance along = tt*ln; want full 1 until near tip then fade: smoothstep(ln, ln*0.5, tt*ln)? value 1 when tt*ln < ln*0.5. Wait smoothstep(e0,e1,x) with e0>e1 works as decreasing. smoothstep(ln, ln*0.4, along): 1 when along < 0.4ln, 0 when along>ln. ✓. ```glsl // cell body plateau float body = smoothstep(Ro, Ro-6.5, r); float plateau = 1.8; h = mix(-0.9, plateau, body) + h*body0? ``` careful: filopodia h should add on substrate too (they rise from substrate outside body). So: start h = -0.9 (substrate level); add filopodia bumps; then body blends to plateau: h = mix(h, plateau, body). But cytoplasm features add after. Also ruffles band should add on top of plateau near edge. Let me restructure: ```glsl float h = -0.9; h += filopodia; // bumps above substrate h = mix(h, 1.8, body); // rim ruffle band float band = exp(-pow((r-(Ro-2.8))/2.3, 2.0)); h += 0.5*band*(fbm(p*1.0, px, 1.1, 3)-0.5)*2.0*body; // wavelengths ~1.1µm and down // subtle slope toward edge (thin membrane): h += 0.35*band; // slight thickening at rim → bright rim ``` Hmm rim bump: I earlier wanted rim ridge: h += 0.5*exp(-pow((r-Ro+0.6)/0.9,2.))*body. Combine with band. I'll include: h += 0.45*exp(-pow((r-Ro+0.8)/1.1,2.0)); ```glsl // cytoplasm granularity h += 0.10*body*(fbm(p, px, 0.9, 4)-0.5)*2.0; h += 0.05*body*(fbm(p, px, 0.22, 3)-0.5)*2.0; // ER network float inCyto = body * (1.0 - smoothstep(NR-1.6, NR+1.8, length(p-NC))); if(inCyto > 0.003){ vec2 wp = p + 1.6*vec2(vnoise(p*0.55 + sd*3.0 + 17.0), vnoise(p*0.55 + sd*3.0 + 43.0)) - 0.8; float e1 = 1.0 - abs(vnoise(wp*1.15 + sd)*2.0-1.0); float e2 = 1.0 - abs(vnoise(wp*2.9 + sd*1.7)*2.0-1.0); float erw = smoothstep(1.4, 0.5, px/0.45); // second scale fade float er = pow(e1, 7.0) + 0.5*erw*pow(e2, 7.0); h += 0.42 * er * inCyto; } ``` Nucleus: ```glsl vec2 q = p - NC; float rn = length(q); float nRo = NR*(1.0 + 0.05*(vnoise(normalize(q + 1e-4)*2.4 + sd*5.0)-0.5)*2.0); float nuc = smoothstep(nRo, nRo*0.5, rn); h += 1.5*nuc; h -= 0.38*exp(-pow((rn-nRo)/0.5, 2.0)); // envelope crease h += 0.20*nuc*(fbm(q, px, 1.5, 4)-0.5)*2.0; // chromatin clumps h += 0.07*nuc*(fbm(q, px, 0.4, 3)-0.5)*2.0; ``` Wait crease should only show on cell: it's within cytoplasm region anyway ✓. But the crease subtracts even outside body if... rn≈9.4 is well inside cell ✓. Mitochondria: ```glsl for(int i=0;i<7;i++){ float fi = float(i); float an = 6.2832*hash12(vec2(fi*7.3+1.0, sd+1.0)); float rd = 14.6 + 4.6*hash12(vec2(fi*3.9+4.0, sd+2.0)); vec2 mp = vec2(cos(an), sin(an))*rd; float orr = an + 1.5708 + (hash12(vec2(fi*9.1+2.0, sd+3.0))-0.5)*1.7; vec2 u2 = vec2(cos(orr), sin(orr)); vec2 lp = p - mp; lp = vec2(dot(lp,u2), dot(lp, vec2(-u2.y, u2.x))); float hl = 1.7 + 1.5*hash12(vec2(fi*5.2+6.0, sd+4.0)); float hw = 0.42 + 0.16*hash12(vec2(fi*6.8+8.0, sd+5.0)); vec2 ap = vec2(abs(lp.x)-hl, lp.y); float dd = length(max(ap, 0.0)) + min(max(ap.x, ap.y), 0.0) - hw; float m = smoothstep(0.18, -0.05, dd); if(m > 0.002){ float crw = smoothstep(1.5, 0.5, px/0.30); float cr = 1.0 - abs(vnoise(vec2(lp.x*1.4, lp.y*5.5) + sd)*2.0-1.0); h += m*(0.95 + 0.30*crw*pow(cr, 5.0)); } } ``` Vesicles: ```glsl for(int i=0;i<11;i++){ float fi = float(i); float an = 6.2832*hash12(vec2(fi*11.3+3.0, sd+6.0)); float rd = 19.5*sqrt(hash12(vec2(fi*7.7+5.0, sd+7.0))); vec2 vp = vec2(cos(an), sin(an))*rd; vec2 dn = vp - NC; float dl = max(length(dn), 1e-3); vp = NC + dn*max(dl, NR+1.6)/dl; float vr = 0.32 + 0.7*hash12(vec2(fi*13.1+9.0, sd+8.0)); float dd = length(p - vp) - vr; h += 0.6*smoothstep(0.15, -0.1, dd); } ``` Microvilli: ```glsl float mvW = smoothstep(0.075, 0.030, px); if(mvW > 0.002){ float g = 0.30; vec2 gp = p/g; vec2 id = floor(gp); vec2 rnd = hash22(id + sd*17.0); vec2 c = (rnd - 0.5)*0.5*g; float rr = g*(0.30 + 0.16*rnd.y); float dl = length(fract(gp)*g - g*0.5 - c); float presence = step(0.30, rnd.x) * (1.0 - 0.75*nuc) * smoothstep(Ro-3.0, Ro-8.0, ?) ``` Microvilli over whole top surface; reduce over nucleus (already via (1-0.75nuc)). presence also avoid ruffle band? fine. ```glsl float mv = smoothstep(rr, rr*0.25, dl) * step(0.32, rnd.x) * (1.0 - 0.7*nuc); h += 0.30 * mv * mvW * body; } ``` rr: g*(0.30..0.46) = 0.09–0.138 µm radius, spacing 0.3 → dense carpet ✓. Substrate (only meaningful outside): ```glsl float om = 1.0 - body; // skip when deep inside (save cost)? branch: if(om > 0.003){ h += dots(p, 0.42, sd*9.0, px)*0.55*om * fadeA; h += dots(p, 0.15, sd*4.0, px)*0.30*om * fadeB; h += 0.12*om*(fbm(p, px, 0.6, 3)-0.5)*2.0; } ``` dots: ```glsl float dots(vec2 p, float grid, float sd, float px){ float fade = smoothstep(grid*1.4, grid*0.55, px); if(fade < 0.003) return 0.0; vec2 id = floor(p/grid); vec2 rnd = hash22(id + sd); vec2 c = (rnd-0.5)*0.55*grid; float rr = grid*(0.10 + 0.16*rnd.y); float dl = length(fract(p/grid)*grid - grid*0.5 - c); float w = max(px*1.2, 0.01); return smoothstep(rr+w, rr-w, dl)*fade; } ``` rr grid*0.10–0.26: for grid 0.42 → r 0.04–0.11µm ✓; grid 0.15 → 0.015–0.04 (nano particles, appear at very high zoom). Fast path in cellH? I'll do the substrate fast-path in main(): if r>40 → col computed from a cheap substrate height (dots+grain only). Implement by cellH having a bool? Write two functions: substrateH(p,px) and cellH calls substrate too... Simplest: in main: ``` float h0, hx, hy; if(length(p) > 41.0){ h0 = -0.9 + substrateBits(p,px); ... but gradient needs 3 evals of substrateBits only — cheap ✓ } else full cellH ×3. ``` But filopodia reach: s0 at Ro-0.6 ≈ up to R0*1.148 ≈ 29.9... max R0*(1+0.085+0.045+0.018)=R0*1.148=29.85; +0.6 → s0 ≤ 30.4, + len 9 → 39.4 + width → 41 ok borderline; make cutoff 43. Fine. Actually also worth: when zoomed deep (viewH small), pixel neighborhoods are tiny; branches per-pixel handle locality ✓. Shading in main: ```glsl vec3 render(vec2 p, float px){ ... } — or inline in main. ``` main: ```glsl void main(){ vec2 uv01 = gl_FragCoord.xy / u_res; // glitch row shift float row = floor(gl_FragCoord.y); float gt = floor(u_time*24.0); float gsel = hash12(vec2(row*0.7, gt*1.3)); float glitch = step(0.9975, gsel) * step(0.15, u_acq); // only after/during acquisition? during too fine float gx = (hash12(vec2(row*1.3, gt*2.1)) - 0.5) * 14.0 * glitch; vec2 sc = (gl_FragCoord.xy + vec2(gx,0.0) - 0.5*u_res) / u_res.y; vec2 p = u_cam.xy + sc*u_zoom; float px = u_zoom / u_res.y; float e = max(px*0.6, 0.012); float h0 = cellH(p, px); float hx = cellH(p + vec2(e,0.0), px); float hy = cellH(p + vec2(0.0,e), px); vec2 g = vec2(hx-h0, hy-h0)/e; vec3 n = normalize(vec3(-g, 1.0)); vec3 L = normalize(vec3(-0.42, 0.62, 0.66)); float diff = clamp(dot(n, L), 0.0, 1.0); float gm = min(length(g), 3.0); float edgeK = u_mode < 0.5 ? 1.15 : 0.30; float shade = 0.22 + 0.95*pow(diff, 1.35) + edgeK*gm; float ao = mix(0.55, 1.0, smoothstep(-1.0, 1.9, h0)); float col = shade * ao; // tone col = col / (1.0 + 0.22*col); col = pow(col, 0.85); col = clamp((col - 0.03)*1.06, 0.0, 1.0); ``` Then mouse beam: ```glsl float mb = exp(-dot(p-u_mouseW, p-u_mouseW)/(2.0*pow(px*9.0,2.0))); col += 0.09*u_mAct*mb; ``` Grain: ```glsl float gnoise = hash12(gl_FragCoord.xy + vec2(fract(u_time*61.899)*311.0, fract(u_time*43.71)*197.0)); float gAmt = u_mode<0.5 ? 0.075 : 0.035; col += (gnoise-0.5)*2.0*gAmt*(0.35+0.65*clamp(col*2.,0.,1.)); ``` Sweep idle line & acquisition: ```glsl float yTop = 1.0 - uv01.y; float colAcq = ...; float acqY = u_acq; float revealed = 1.0 - smoothstep(acqY - 0.0035, acqY + 0.0035, yTop); // scanline band at the acquisition front float sline = exp(-pow((yTop - acqY)*u_res.y/1.8, 2.0)); // fresh-noise zone behind the front float fresh = exp(-pow(max(acqY - yTop, 0.0)*u_res.y/70.0, 2.0)); // unacquired look: faint detector noise float un = hash12(gl_FragCoord.xy*1.7 + fract(u_time*57.3)*91.0)*0.055; un += step(0.9985, hash12(gl_FragCoord.xy + fract(u_time*23.7)*77.0))*0.25; vec3 c3 = vec3(col); vec3 cUn = vec3(un*0.9); c3 = mix(cUn, c3, revealed); c3 += vec3(1.0)*(sline*0.85*step(acqY, 0.999)) ; c3 += vec3(0.35,0.35,0.35)*fresh*0.5*revealed; // subtle bright haze behind front? maybe *0.35 ``` Wait "fresh" adds brightness behind line — combine: c3 *= 1.0 + 0.25*fresh. Also extra grain near front: gAmt *= 1+1.5*fresh — apply before? Fine approximate: c3 += (gnoise-0.5)*0.25*fresh. Idle sweep: ```glsl float sw = u_sweep; // -1 when inactive else 0..1 float sline2 = exp(-pow((yTop - sw)*u_res.y/26.0, 2.0)); c3 += vec3(sline2*0.05); ``` Set u_sweep = -1 when idle. Glitch brightness: c3 += glitch*0.12; also glitch only affects some rows each 1/24s tick with hash per row ✓. Vignette: ```glsl vec2 vq = (uv01 - 0.5)*vec2(u_res.x/u_res.y, 1.0); float vig = 1.0 - 0.42*smoothstep(0.45, 1.05, length(vq)); c3 *= vig; ``` Hmm vignette also on unacquired — fine. Gamma-ish final: c3 = pow(c3, vec3(0.95)); output. BSE mode difference: flatter: also mix shading toward top light: in BSE: shade = 0.35 + 0.55*pow(diff,1.0) + edgeK*gm; Also maybe slight negative of height? skip. And col contrast reduced. The u_mode branch: use mix with u_mode float: edgeK = mix(1.15,0.30,u_mode); etc. One more consideration — the y-flip: gl_FragCoord y is bottom-up; uv01.y up; yTop = 1-uv01.y ✓ top-down for scan. JS acquisition progress: acq = clamp((t - t0)/2.4, 0, 1). Ease? linear. Also HUD could show "ADQUIRIENDO…" status blinking during acquisition, then "LISTO". Add tiny status line top-left with a blinking block cursor ▍? No emoji — a CSS blinking block is fine (styled span, not emoji). Status text: "ESCANEO EN CURSO" ↔ "IMAGEN ADQUIRIDA". Sweep idle: period 9s: phase = ((t - acqEnd) mod 9); if phase < 2.2 → sw = phase/2.2*1.05-0.03 else -1. Only after first acquisition done. Presets data (world coords for my seed layout — but cell reshapes per seed! NC fixed, NR fixed, outline ±10% — presets still land reasonably. Microvilli preset at (-10,8) inside cytoplasm always (r=12.8 < Ro-? Ro min = 26*0.852=22.2 ✓ inside). Border preset at angle 2.55 rad: pos = 26*(cos2.55,sin2.55) ≈ 26*(-0.831,0.558)=(-21.6,14.5); Ro varies ±2.2 — viewH 20 covers ±10 → edge within frame ✓. Magnification readout during preset flight updates continuously ✓ (from current cam.h). Number formatting: use narrow no-break space \u202F for thousands: (mag rounded) → string with regex. Scale bar element: container with ::before/::after ticks? Simpler: div with border-bottom and two side ticks via linear-gradient? I'll do: `

10 µm

` where .sbar i {display:block; height:7px; border-left/right/bottom: 1px solid}. Set i.style.width. Stage coords: update on pointermove (world coords). Also handle context loss? Rare; add listener to prevent default and show message? Skip mostly; add simple handler re-init? I'll add webglcontextlost → prevent default + toast, restored → re-init program. Small effort; maybe skip to save complexity. I'll skip (acceptable). Also noscript/WebGL fail: message overlay. Let me think about HUD visual design more concretely to make it feel premium: - Background pure #000 from canvas render (vignette edges ~ dark). HUD text #d8d8d8 at 10–11px, letter-spacing .08em, uppercase labels; values brighter #fff. - Hairline separators rgba(255,255,255,.14). - Corner brackets: 4 divs, 22×22, 1px borders on two sides, opacity .5. - Buttons: transparent bg, 1px solid rgba(255,255,255,.22), padding 7px 11px, 10px mono, letter-spacing .12em, uppercase; hover: bg rgba(255,255,255,.1); transition .15s. Active toggle (SE/BSE): filled #e6e6e6 text #000. - Preset list left-center: each row: index number dim, name, mag right-aligned; width ~210px; hover: left 2px white bar + text brightens; active: bar stays. Font 10px. Divider hairlines between. - Big mag: 30px, font-weight 500, with "×" dimmer. - Everything pointer-events:none except buttons/presets. The hint bar bottom center: dim, 10px; keys shown as bordered kbd chips: "ARRASTRAR", "RUEDA", "ESPACIO". Fades after interaction. Toast bottom-center above hint: translateY animation. Capture flash: fixed inset white, opacity 0 → .55 → 0 via transition; also could add "freeze" moment: brief 80ms pause of grain? overkill. Intro: HUD elements fade in staggered (CSS animation, delay .2–1s). Canvas starts with acquisition sweep. Title top-left types in? Keep simple fade/slide. Let me also double check the "beam follows mouse" uniform: u_mouseW world; u_mAct 0/1 smoothed (lerp). During drag set act target 0. Also I should make sure the ruffles/edge look right at mid zoom — can't test, but parameters are reasonable. Risk areas: overall brightness balance. I'll pick values conservatively and add slight auto-exposure? No, fixed. One more feature for depth: slight parallax/tilt? No — SEM is flat. Keep authentic. Sound? No. Let me now also make sure about magnification realism: EHT 5 kV typical for cells? Usually 2–10 kV for biological, ok 5.00 kV. WD 10.3 mm. Detector "SE1" through-the-lens? Use "ET-SE (Everhart-Thornley)". For BSE: "PBSAs? " just "BSE - POLAR"? Use "ESB" (Zeiss name)... I'll use generic "Detector: SE (ET)" / "Detector: BSE (AsB)". kV slider: skip — keep the four buttons + presets; enough interactivity already (zoom, pan, dblclick, space, toggle, capture, rescan, presets). Actually a kV slider is easy and adds instrument feel... but each control must do something real: kV → noise amount & penetration (contrast curve). I'll add it: range 1–15 kV step 0.5, affects u_kv → grain amt = mix(0.12, 0.05, kv/15) and contrast slightly: shade gamma. Also WD readout changes subtly with focus? Skip WD interaction. Hmm, HUD bottom-left has big mag + scalebar + coords; kV slider put top-left under detector line as a compact slider (width 110px, custom styled range: hairline track, rectangular thumb 3×10px white). Label "EHT 5.0 kV" updates. Now, also noise grain scales with sqrt(1/signal): at low kV noisier ✓ physical-ish. Nice: interacting with the slider gives immediate visible feedback (noisier/darker at low kV — low kV → lower beam current in this toy model: brightness *= mix(0.85, 1.0, kv/15)). Total shader uniforms: u_res, u_cam(vec2), u_zoom(viewH µm), u_time, u_acq, u_sweep, u_mode, u_seed, u_mouseW, u_mAct, u_kv. Fine. Let me now write out the complete code mentally with care for correctness. HTML skeleton: ```html SEM — Fibroblasto humano · Microscopía electrónica de barrido

corners ×4

...

buttons

...

mag, scalebar, coords

sample info

...

``` Crosshair: full-height vertical line & full-width horizontal line at cursor, plus center small square/circle. Implement with transform translate. mix-blend-mode: difference so visible over bright areas. pointer-events none. Wait: crosshair full-length lines might fight with HUD text visually — use opacity .12 lines; it's authentic to SEM live view. Also hide over interactive HUD elements? Keep always in canvas area; HUD text has higher z; ok. Status blinking cursor: span.blink {animation: blink 1s steps(2) infinite; background:#e6e6e6; width:6px;height:11px; display:inline-block}. Preset flight + active marking: on click set active class; on manual pan/zoom remove. Now precise CSS. I'll write it cleanly. Root font: 'IBM Plex Mono', monospace. body {margin:0; overflow:hidden; background:#000; cursor: none? } Cursor: hide native cursor over canvas and rely on crosshair — cinematic ✓ but must ensure buttons show cursor. Use body{cursor:none} and .hud button, .preset {cursor:pointer} → but if cursor:none globally, buttons override with cursor:pointer? They can: button{cursor:pointer} overrides. But when hovering button, crosshair still follows → hide crosshair when over HUD interactive: track via CSS :hover? Simplest: on pointermove, check e.target — if target is within interactive elements, set cross opacity 0. I'll toggle class on #hud when hovering interactive (event delegation: mouseover/out checking closest('.ui')). Drag UX with cursor none: fine. Mobile: no hover; crosshair hidden on touch (pointerType check). Scale bar bottom-left: ```

×1 500

10 µm

X +00.0 · Y +00.0 µm

``` Top-left: ```

HELIOS·650 SEM

DETECTOR SE · ET

EHT 5.0 kV

WD 10.3 mm PRES 2.1e-6 mbar

ESCANEO EN CURSO CAMPO 0001

``` Top-right: ```

``` BR sample info right aligned: ``` MUESTRA · FIBROBLASTO HUMANO (HFF-1) FIJACIÓN GLUTARALDEHÍDO · Au/Pd 4 nm ``` Presets (left center): ```

RECORRIDO

... 02 NÚCLEO ×6 600, 03 BORDE CELULAR ×11 200, 04 MICROVELLOSIDADES ×32 100

``` Mag labels computed from viewH: p2 viewH 34 → mag=225000/34=6618→"×6 600"; p3 viewH 20 → 11250 → "×11 200"; p4 viewH 7 → 32143 → "×32 100". I'll display rounded. Positions: p2 center NC=(3,-2.5). p3: edge point angle 2.45: cos=−0.770, sin=0.638 → ×26 ≈ (−20.0, 16.6) — plus outline variance; use (−19.5, 16). p4: (−10, 8.5). Now the JS animation loop with easing: ```js const view = {x:0, y:0, h:210}; // current const target = {x:0, y:0, h:150}; ``` Intro: start h=230, target 150 → eases in during acquisition ✓. Easing per frame: k = 1 - Math.exp(-dt*5); view.x += (target.x-view.x)*k; etc. For zoom-to-cursor target computations use target values ✓. Wheel handler: ```js el.addEventListener('wheel', e=>{ e.preventDefault(); const rect = canvas.getBoundingClientRect(); const sx = (e.clientX-rect.left - rect.width/2)/rect.height; // normalized by height, y up? careful ``` Define screenToWorldFactor: world offset = ((px - w/2)/h_css, -(py - h/2)/h_css)*viewH. For zoom anchor use target.h and target.xy: ``` const nx = (e.clientX-rect.left-rect.width/2)/rect.height; const ny = -(e.clientY-rect.top-rect.height/2)/rect.height; const wx = target.x + nx*target.h, wy = target.y + ny*target.h; target.h = clamp(target.h*Math.exp(e.deltaY*0.0011), 6.2, 300); target.x = wx - nx*target.h; target.y = wy - ny*target.h; clampPan(); userMoved(); ``` deltaY units: trackpads small; 0.0011 factor; also normalize deltaMode? assume pixels. Cap per-event: clamp deltaY ±120. Drag: pointerdown (primary, on canvas / hud non-interactive): store last; pointermove: ``` target.x -= dx /rect.height*target.h; target.y += dy/rect.height*target.h; clampPan(); ``` (dragging right moves view left ✓ natural grab). Clamp: |target.x| ≤ 55, |target.y| ≤ 55. Also view (current) clamp not needed. Pinch: track pointers map; if 2 pointers: on move compute dist ratio: target.h /= ratio (relative to last dist), and midpoint pan. Implement simply. dblclick: zoom ×0.5 anchored at cursor (like wheel big step), clamp. Keys: Space→rescan (preventDefault when target is body), "1..4" presets, "b" toggles BSE? I'll wire Space and 1-4. Rescan: ```js function rescan(){ seed = Math.random()*97; acqT0 = now; acquired=false; fieldN++; fieldTxt = 'CAMPO '+String(fieldN).padStart(4,'0'); statusTxt = 'ESCANEO EN CURSO'; } ``` In loop: acq = min((t-acqT0)/2.4,1); when reaches 1 first time → acquired=true, status 'IMAGEN ADQUIRIDA'. Sweep: after acquired: ph = (t - sweepT0); cycle 9s: if ph%9 < 2.4 → sw = (ph%9)/2.4 else -1. Init sweepT0 at acquisition end... simpler: sw computed from t global: const c=(t*0.11)%1; sw = c<0.26 ? c/0.26 : -1 — periodic independent ✓ every ~9.1s. But avoid sweep during acquisition (acq<1) → pass -1. u_mAct: lerp toward (hoverActive && !dragging && pointerType mouse) ? 1:0. Mouse world: compute from current view each frame from stored client pos (so beam stays under cursor while panning) ✓ recompute in loop. HUD updates in loop but throttled: only when |Δmag|>0.5% etc. Simple: update every frame is fine for text? textContent updates cause layout... throttle to every 6th frame or on change >0.5%. I'll do change-threshold. Scalebar calc as described; note use css height rect. Capture: ```js btnCap.onclick = ()=>{ render(now, true); // force a fresh draw canvas.toBlob(b=>{ const a=document.createElement('a'); a.href=URL.createObjectURL(b); a.download=`SEM_${String(capN++).padStart(4,'0')}.png`; a.click(); setTimeout(()=>URL.revokeObjectURL(a.href),3000); toast(`CAPTURA GUARDADA · SEM_${...}.PNG`); }); flash... } ``` toBlob on webgl canvas with preserveDrawingBuffer:true works ✓. Capture burned-in HUD? The captured PNG is raw image only (no HUD) — that's actually nice ("clean frame"). Mention in toast? "SEM_0002.PNG · 1920×1080". OK. Adaptive resolution: ```js let resScale = Math.min(devicePixelRatio||1, 1.6); frame times: accumulate; after 70 frames if avg>30ms && resScale>0.75 → resScale-=0.25? multiply 0.75; resize(); reset stats. ``` Implement minimal. Resize: canvas.width = innerWidth*resScale etc; gl.viewport. Shader compile with error logging to console + fallback div if fail. Now — one more check of the SE shading look: shade = 0.22 + 0.95*pow(diff,1.35) + 1.15*gm. On plateau (g=0): shade=0.22 → *ao(1) → col=0.22/(1+0.048)≈0.21 → pow0.85≈0.26 → minus → ≈0.24. Mid-gray-dark plateau, good SEM-ish. Slopes facing lower-left light: diff up to ~1 → 1.17+edge → tone-mapped ~0.7 bright. Steep rim gm up to 3 → edge adds 3.45?? min(gm,3.0)=3 → +3.45 → col huge → tone map 3.67/(1+0.81)=2.03 → clamp 1 → pure white rims. Maybe too hot: tone map with 0.22 coefficient: col/(1+0.22col): 3.67→2.03. Overbright. Reduce edgeK to 0.85 and gm min to 2.0: max add 1.7 → shade max ≈ 0.22+0.95+1.7=2.87 → tm: 2.87/(1+0.63)=1.76 → still >1 clamp. Bright white rims are actually characteristic (SEM edges saturate). But large saturated areas look bad. gm is large only within ~1px of steep slope — the gradient computed with eps≈px means gm spans over the ramp: at rim, height changes ~1.5 over ~1.5µm slope region → gm ~ 1/(region width)... rim gaussian width 1.1µm amplitude 0.45 → max slope ≈ 0.45*exp(-0.5)/1.1*... derivative of gaussian max = A/(σ*sqrt(e))... with my exp(-((r-c)/1.1)^2): max |dh/dr| = A*2/1.1*e^{-1/2}? derivative = A * (-2(r-c)/1.1²) e^{...}; max at (r-c)=1.1/√2: = A*2/(1.1*√2)*e^{-1/2} ≈ A*1.285*0.607 ≈ 0.78A ≈ 0.35. Microvilli domes: h 0.3 over r 0.1 → gm ~ 3+ → saturate white tips ✓ nice sparkle at high mag. Vesicle edges similar ✓. Filopodia: 0.55/0.2 → gm~2.75 ✓ bright thin lines ✓. Ruffle band fbm 0.5 amp λ1.1 → gm~0.9 → +1.0 → nicely bright wrinkled rim. Body plateau 0.22 dark vs substrate: substrate h=-0.9 → ao=mix(0.55,1,smoothstep(-1,1.9,-0.9))= smoothstep((−0.9+1)/2.9=0.034)→≈0.003? smoothstep(-1.0,1.9,-0.9): t=(x-a)/(b-a)=(0.1)/(2.9)=0.0345→ s=3t²-2t³≈0.0035 → ao≈0.553. Substrate shade with flat g: 0.22*0.553=0.12 → tm 0.118 → pow .85 → 0.15 → dark substrate with speck dots (dots add h 0.55 → local gm at dot edges ~ 0.55/0.05≈ huge → white specks ✓ at high zoom; at low zoom dots faded out (grid 0.42: fade=smoothstep(0.59,0.23,px): at overview px≈0.16 → fade 0 ✓ invisible; mid zoom px 0.05 → fade 1 → visible speckle field ✓ nice progressive detail). Chromatin fbm 0.20 amp λ1.5 → gentle undulation inside nucleus → mottled light pattern ✓. Nucleus dome h 1.5+1.8 plateau=3.3 → ao=1 → base 0.22 flat, edges bright ✓; envelope crease −0.38 → dark ring ✓. Microvilli: appear only when px<0.075*? mvW smoothstep(0.075,0.030,px): px=viewH/H. At ×11 200 preset (viewH 20, H 900): px=0.022 → full ✓ carpet visible. At ×6 600 (viewH 34): px=0.038 → mvW≈ smoothstep t=(0.075-0.038)/(0.045)=0.82→ s≈0.91 → visible. Hmm at ×1 500 overview px=0.167 → 0 ✓ smooth. Good gradation. The ruffle band fbm call: fbm(p*1.0, px, 1.1, 3): my fbm signature (p, px, lam0, oct) with p/wl — so pass p directly with lam0=1.1: octaves λ 1.1, 0.55, 0.275. Fades: w_i = smoothstep(1.6,0.55, px/λ). At overview px=0.167: px/λ=0.15 → w=1 for all → but such fine detail sub-pixel? λ0.275 vs px 0.167 → ratio 0.6 → w= smoothstep(1.6,0.55,0.6)= 1 (since ≤0.55? 0.6 slightly >0.55 → near 0.95) — under-resolved noise causes shimmer... My fade criterion: keep octave when λ ≥ ~1.5px i.e. px/λ ≤ 0.66. smoothstep(1.6, 0.55, px/λ): at px/λ=0.66 → t=(1.6-0.66)/(1.05)=0.895 → w≈0.97 — too permissive. Want w→0 when px/λ>0.5 (λ<2px). Change: w = smoothstep(0.5, 0.25, px/λ): at px/λ=0.5→0, 0.25→1. At overview px0.167: λ0.275 → ratio 0.61 → 0 ✓; λ0.55 → 0.30 → 0.78 ✓partial; λ1.1 → 0.15 → 1 ✓. But careful: partial weights change normalization (tot) → fine, fbm normalized. For high zoom: px→0.0078: all ratios small → w=1 ✓ full detail. And cost: always compute 3 octaves regardless (multiplications). OK. fbm tot normalization when all w=0 (e.g. λ too small at overview): return 0.5 neutral. ✓ (ruffles band would be neutral 0.5 → (0.5-0.5)*2=0 ✓ good). Value-noise derivative continuity: fine. Now let me also add the "beam raster" texture? Real SEM live images show horizontal banding noise: add row-hash brightness noise: rn = hash12(vec2(row, floor(t*30)))*0.04-0.02 added. Subtle ✓ include with glitch block. Also slight horizontal jitter per row always? Tiny: x += (hash-0.5)*0.6px when... keep only glitch events; always-on jitter makes text-free image shimmer — actually a tiny per-row jitter (±0.4px) at 24Hz adds authenticity without harm since image is organic. Include very subtle: amp 0.5px. Performance final check: cellH has: 7 filopodia (outlineR each calls 3 vnoise → outlineR called 7× inside filopodia loop! outlineR(an,sd) per filopodium = 21 vnoise just for their base positions — wasteful and they're constants per seed!). Fix: compute s0 without outlineR: s0 = dir*(R0*0.98) fixed (they start under the membrane anyway, exact start hidden). ✓ saves a lot. Filopodia then: 7 × (few hash + trig) cheap. outlineR main call: 3 vnoise ✓. ER: 4. cytoplasm fbm4 → up to 4 vnoise (call with oct=4) + fbm3 3. chromatin fbm4 4 + fbm3 3. nucleus outline 1. ruffle fbm3 3. grain fbm? included above. Mito loop 7, branch: cr vnoise only when m>0.002 — but branch divergence... fine, worst-case 7. Vesicles 11 hash cheap. Microvilli 1 hash22. Substrate dots 2 hash22 + fbm3 3 (only when om>0). Total typical ~25 vnoise + small. ×3 taps = 75 vnoise ≈ 75×(4 hash ≈ 20ALU + mix ~10) ≈ 2500 ALU + loops overhead → OK for mid GPUs at 1.5 dpr with adaptive fallback. One subtle thing: `if(m>0.002)` inside loop containing vnoise — allowed in WebGL1 ✓. Also `break` in fbm loop with constant bound ✓. Also `normalize(q + 1e-4)` — q vec2 + float scalar → GLSL allows vec2+float ✓. Also atan(p.y,p.x) at p=0 undefined-ish; p never exactly 0 mostly; fine (add 1e-6: atan(p.y, p.x+1e-6)). Edge case: u_acq and reveal math with u_acq possibly slightly >1 when done — keep at 1. Let me also add slight image drift over time? SEM has drift: p += 0.03µm/s * t direction? Could annoy framing; skip. Now HUD polish details: Buttons with inline SVG icons: - RE-ESCANEAR: circular arrows icon (refresh-cw): two arcs with arrowheads — I'll hand-write a simple path: `` roughly lucide-ish. - CAPTURAR: camera: rect + circle: ``. Font load: Google fonts IBM Plex Mono weights 300;400;500;600. Let me write CSS fully: ```css :root{ --fg:#e8e8e8; --dim:rgba(232,232,232,.55); --faint:rgba(232,232,232,.28); --line:rgba(232,232,232,.16); } *{box-sizing:border-box; margin:0; padding:0;} html,body{height:100%; overflow:hidden; background:#000;} body{ font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--fg); cursor:none; -webkit-font-smoothing:antialiased; } #gl{position:fixed; inset:0; width:100%; height:100%; display:block;} #hud{position:fixed; inset:0; pointer-events:none; z-index:10;} .ui{pointer-events:auto;} .corner{position:fixed; width:22px; height:22px; opacity:.5;} .corner.tl{top:14px;left:14px;border-top:1px solid var(--fg);border-left:1px solid var(--fg);} ... tr,bl,br ``` Corners maybe conflict with HUD blocks placed at 26px offsets — position HUD blocks ~34px from edges. .hud blocks font-size 10px letter-spacing .1em text-transform none (already caps text). Top-left `.tl{position:fixed; top:34px; left:36px;}` lines with .row{display:flex; gap:10px; margin-top:6px; color:var(--dim);} b{color:var(--fg); font-weight:500;} em{font-style:normal; color:var(--faint);} .brand{font-size:12px; letter-spacing:.28em; font-weight:600;} .brand span{color:var(--faint); font-weight:400; margin-left:10px; letter-spacing:.2em;} Divider: border-top hairline under brand: .tl .brand{padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:9px; width:250px?} use display:inline-block? Set .tl{width:280px}. kv slider: input[type=range]{-webkit-appearance:none; width:96px; height:14px; background:transparent; pointer? cursor: none? slider needs cursor — but body cursor none & crosshair... interactive elements: give .ui cursor:pointer? For slider, cursor:ew-resize. crosshair hides over .ui ✓. Range styling: ```css input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:96px;height:12px;} input[type=range]::-webkit-slider-runnable-track{height:1px;background:rgba(232,232,232,.3);} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:11px;background:#e8e8e8;margin-top:-5px;} input[type=range]::-moz-range-track{height:1px;background:rgba(232,232,232,.3);} input[type=range]::-moz-range-thumb{width:3px;height:11px;background:#e8e8e8;border:none;border-radius:0;} ``` Status: margin-top 12px; .blink{display:inline-block;width:6px;height:10px;background:var(--fg);margin-right:8px;animation:blink 1.1s steps(2,start) infinite;} @keyframes blink{to{visibility:hidden}} During acquired state maybe steady? Keep blinking always (live instrument). Status text var(--dim); fieldTxt var(--faint) margin-left 10px. Buttons `.tr{position:fixed; top:34px; right:36px; display:flex; gap:8px;}` button base: ```css button{font:inherit;font-size:10px;letter-spacing:.14em;color:var(--fg);background:transparent;border:1px solid var(--line);padding:7px 12px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;} button:hover{background:rgba(232,232,232,.09);border-color:rgba(232,232,232,.4);} button svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6;} .seg{display:flex;} .seg button{border-right-width:0;} .seg button:last-child{border-right-width:1px;} .seg button.on{background:var(--fg);color:#000;} ``` Presets `.presets{position:fixed;left:36px;top:50%;transform:translateY(-50%);width:216px;}` .ptitle{font-size:9px;letter-spacing:.3em;color:var(--faint);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:2px;} .pre{display:flex;width:100%;gap:10px;align-items:baseline;background:none;border:none;border-bottom:1px solid var(--line);padding:10px 2px;position:relative;} .pre em{font-style:normal;color:var(--faint);font-size:9px;} .pre span{flex:1;text-align:left;letter-spacing:.12em;font-size:10px;color:var(--dim);} .pre b{font-weight:500;color:var(--faint);font-size:10px;} .pre::before{content:'';position:absolute;left:-14px;top:50%;width:8px;height:1px;background:var(--fg);opacity:0;transition:.2s; } .pre:hover span{color:var(--fg);} .pre:hover::before{opacity:1;} .pre.active span{color:var(--fg);} .pre.active::before{opacity:1;width:12px;} button.pre:hover{background:rgba(232,232,232,.05);} Bottom-left `.bl{position:fixed;left:36px;bottom:34px;}` .mag{font-size:30px;font-weight:500;letter-spacing:.06em;} .mag .x{color:var(--faint);font-weight:300;margin-right:2px;} .sbar{margin-top:10px;} .sbar i{display:block;height:6px;border-left:1px solid var(--fg);border-right:1px solid var(--fg);border-bottom:1px solid var(--fg);width:120px;} .sbar em{display:block;font-style:normal;font-size:9px;color:var(--dim);margin-top:5px;letter-spacing:.14em;} .coords{margin-top:12px;font-size:9px;color:var(--faint);letter-spacing:.12em;} Bottom-right `.br{position:fixed;right:36px;bottom:34px;text-align:right;font-size:9px;color:var(--faint);letter-spacing:.14em;line-height:1.9;} .br b{color:var(--dim);font-weight:400;}` Hint `.hint{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);font-size:9px;color:var(--faint);letter-spacing:.16em;transition:opacity 1s;} .hint kbd{border:1px solid var(--line);padding:2px 6px;margin:0 3px;color:var(--dim);font:inherit;}` layout: "ARRASTRAR MOVER · RUEDA AMPLIAR · ESPACIO RE-ESCANEAR · 1–4 RECORRIDO" maybe as separate spans with dots. Keep: `arrastrar mover · rueda ampliar ...` uppercase via CSS. Toast: `#toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,8px);border:1px solid var(--line);background:rgba(5,5,5,.9);padding:9px 16px;font-size:10px;letter-spacing:.14em;opacity:0;transition:.3s;pointer-events:none;} #toast.show{opacity:1;transform:translate(-50%,0);}` Flash: `#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50;transition:opacity .25s;}` add class → opacity .5 then remove after 60ms → transition down. Intro anims: `.in{opacity:0;transform:translateY(6px);animation:in .9s cubic-bezier(.2,.7,.3,1) forwards;} @keyframes in{to{opacity:1;transform:none;}}` apply with inline animation-delay style attr per block (0.3s,0.45s,...). Note opacity ends 1 — but .blink etc fine. Presets block uses transform translateY(-50%) → conflict with .in transform! For presets, wrap inner div with .in instead. ✓ Wrap each fixed block content in inner `.in` div? Simply put .in on inner wrappers: `.presets > .inw`. I'll structure: `

...

` where .inw inherits. Same for others fine (others can take .in directly except presets). Fallback panel: centered bordered box. Mobile media query: hide presets? On small screens (<720px): shrink .presets (display:none? keep but condensed: hide the tour? Keep visible; move bottom-left mag smaller 22px; hide .br sample info; hint text shorter. Also crosshair hidden (touch). I'll add basic media query adjustments: .br{display:none}, .presets{left:20px;top:auto;bottom:110px;transform:none;} hmm overlapping... Simplest: @media(max-width:760px){ .br,.hint{display:none} .presets{display:none} .bl{bottom:24px;left:20px} .tl{top:20px;left:20px} .tr{top:auto;bottom:24px;right:20px} .mag{font-size:22px} } tr buttons remain for rescan/capture ✓. Touch pinch works. Fine. Now the JS. Let me write it out carefully. ```js (() => { const canvas = document.getElementById('gl'); const gl = canvas.getContext('webgl', {antialias:false, depth:false, stencil:false, alpha:false, preserveDrawingBuffer:true}); if(!gl){ document.getElementById('fallback').hidden=false; return; } const VERT = `...`; const FRAG = `...`; function sh(type, src){ const s=gl.createShader(type); gl.shaderSource(s,src); gl.compileShader(s); if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)){ console.error(gl.getShaderInfoLog(s)); } return s; } const prog = gl.createProgram(); gl.attachShader(prog, sh(gl.VERTEX_SHADER,VERT)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER,FRAG)); gl.linkProgram(prog); gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW); const aP = gl.getAttribLocation(prog,'aP'); gl.enableVertexAttribArray(aP); gl.vertexAttribPointer(aP, 2, gl.FLOAT, false, 0, 0); const U = {}; ['u_res','u_cam','u_zoom','u_time','u_acq','u_sweep','u_mode','u_seed','u_mouseW','u_mAct','u_kv'].forEach(n=>U[n]=gl.getUniformLocation(prog,n)); ``` State & loop as planned. ```js let view={x:0,y:0,h:230}, target={x:0,y:0,h:150}; let seed=Math.random()*97; let acqT0=performance.now()/1000, acquired=false, fieldN=1, capN=1; let mode=0, kv=5; let mouse={cx:innerWidth/2, cy:innerHeight/2, wx:0, wy:0, act:0, actT:0, inside:false, overUI:false}; let dragging=false, tween=null; let resScale=Math.min(window.devicePixelRatio||1, 1.6); ``` resize(): ```js function resize(){ const w=Math.round(innerWidth*resScale), h=Math.round(innerHeight*resScale); canvas.width=w; canvas.height=h; gl.viewport(0,0,w,h); } addEventListener('resize', resize); resize(); ``` Adaptive: ```js let ftAcc=0, ftN=0, lastT=performance.now(); // in frame: ftAcc+=dt; ftN++; if(ftN>=80){ if(ftAcc/ftN>0.030 && resScale>0.7){resScale*=0.75; resize();} ftAcc=0; ftN=0; } ``` Only check first few rounds? Recheck every 80 frames continuously but avoid oscillation: only downgrade, max twice: track downgrades<2. Also skip first round (shader compile jank): if(ftN>=80 && warmed)... simple guard: if(downgraded<2 && avg>0.034) → downgrades++. Clamp pan: ```js function clampT(){ target.x=Math.max(-55,Math.min(55,target.x)); target.y=Math.max(-55,Math.min(55,target.y)); } ``` cancel tween on manual: function userMoved(){ tween=null; clear preset active; hintFade(); } Pointer handlers on window (canvas covered by hud with pointer-events none except .ui — so canvas receives events? The hud is fixed overlay with pointer-events:none, so events pass to canvas ✓; buttons .ui stopPropagation? Click on button also triggers pointerdown on canvas? No — event target is button; canvas listener attached to canvas won't fire since button is not canvas descendant... but window-level listeners would. Attach interaction listeners to canvas element ✓ buttons naturally excluded. But pointermove/up for drag on window (to continue outside). ✓ ```js const ptrs=new Map(); canvas.addEventListener('pointerdown', e=>{ canvas.setPointerCapture(e.pointerId); ptrs.set(e.pointerId,{x:e.clientX,y:e.clientY}); if(ptrs.size===1){ dragging=true; document.body.classList.add? crossEl... } userMoved(); }); canvas.addEventListener('pointermove', e=>{ mouse.cx=e.clientX; mouse.cy=e.clientY; mouse.inside=true; mouse.actT = (e.pointerType==='mouse') ? 1 : 0; if(ptrs.has(e.pointerId)){ const prev=ptrs.get(e.pointerId); const dx=e.clientX-prev.x, dy=e.clientY-prev.y; ptrs.set(e.pointerId,{x:e.clientX,y:e.clientY}); if(ptrs.size===1){ const r=canvas.getBoundingClientRect(); target.x -= dx/r.height*target.h; target.y += dy/r.height*target.h; clampT(); userMoved(); } else if(ptrs.size===2){ // pinch: compute using both pointers const arr=[...ptrs.values()]; // need previous distance: store pd globally } } }); ``` Pinch: track prevDist: ```js let prevPinch=0; on pointerdown: if(ptrs.size===2){ const a=[...ptrs.values()]; prevPinch=Math.hypot(a[0].x-a[1].x,a[0].y-a[1].y); } in move when size===2: recompute d; target.h=clamp(target.h*prevPinch/d, 6.2, 320); prevPinch=d; also pan by midpoint delta: target.x -= midDx/r.height*target.h; ... ``` ok. pointerup/cancel: ptrs.delete; dragging=ptrs.size>0; prevPinch=0. wheel (on canvas, passive:false): ```js canvas.addEventListener('wheel', e=>{ e.preventDefault(); const r=canvas.getBoundingClientRect(); const nx=(e.clientX-r.left-r.width/2)/r.height; const ny=-(e.clientY-r.top-r.height/2)/r.height; const dy=Math.max(-140,Math.min(140,e.deltaY)); const wx=target.x+nx*target.h, wy=target.y+ny*target.h; target.h=Math.max(6.2,Math.min(320,target.h*Math.exp(dy*0.0012))); target.x=wx-nx*target.h; target.y=wy-ny*target.h; clampT(); userMoved(); hintFade(); },{passive:false}); ``` dblclick: ```js canvas.addEventListener('dblclick', e=>{ zoomAt(e.clientX,e.clientY,0.45); hintFade(); }); function zoomAt(cx,cy,f){ const r=canvas.getBoundingClientRect(); const nx=(cx-r.left-r.width/2)/r.height, ny=-(cy-r.top-r.height/2)/r.height; const wx=target.x+nx*target.h, wy=target.y+ny*target.h; target.h=Math.max(6.2,Math.min(320,target.h*f)); target.x=wx-nx*target.h; target.y=wy-ny*target.h; clampT(); } ``` Presets: ```js const presets=[ {n:'VISTA GENERAL', m:'×1 500', x:0,y:0,h:150}, {n:'NÚCLEO', m:'×6 600', x:3,y:-2.5,h:34}, {n:'BORDE CELULAR', m:'×11 200', x:-19.5,y:16,h:20}, {n:'MICROVELLOSIDADES', m:'×32 100', x:-10,y:8.5,h:7}, ]; document.querySelectorAll('.pre').forEach((el,i)=>{ el.addEventListener('click', ()=>{ const p=presets[i]; tween={t0:performance.now()/1000, dur:1.9, fx:view.x, fy:view.y, fh:view.h, tx:p.x, ty:p.y, th:p.h}; setActivePre(i); hintFade(); }); }); ``` Wait tween should interpolate target? Interpolate the *target* then exponential ease also applies → double smoothing fine but tween to target with view chasing gives lag at end. Better: tween drives `target`, and view chases quickly (k=5/s) → overall smooth. But tween.from should be target's current values not view's (else jump). Use fx:target.x etc. ✓ In loop: ```js if(tween){ const s=Math.min((t-tween.t0)/tween.dur,1); const e2=s<0.5?4*s*s*s:1-Math.pow(-2*s+2,3)/2; target.x=tween.fx+(tween.tx-tween.fx)*e2; target.y=tween.fy+(tween.ty-tween.fy)*e2; target.h=tween.fh+(tween.th-tween.fh)*e2; if(s>=1) tween=null; } const k=1-Math.exp(-dt*6); view.x+=(target.x-view.x)*k; view.y+=(target.y-view.y)*k; view.h+=(target.h-view.h)*k; ``` Preset active cleared in userMoved: `document.querySelectorAll('.pre.active').forEach(x=>x.classList.remove('active'))`. setActivePre: remove all, add to i. Keys: ```js addEventListener('keydown', e=>{ if(e.code==='Space'){ e.preventDefault(); rescan(); } if(e.key>='1'&&e.key<='4'){ document.querySelectorAll('.pre')[+e.key-1].click(); } }); ``` Detector toggle: ```js btnSE.onclick=()=>setMode(0); btnBSE.onclick=()=>setMode(1); function setMode(m){ mode=m; btnSE.classList.toggle('on',m===0); btnBSE.classList.toggle('on',m===1); detTxt.textContent = m===0?'SE · ET':'BSE · ASB'; signalTxt? (bottom-right line has SEÑAL SE) update: sSig.textContent = m===0?'SE':'BSE'; toast(m===0?'DETECTOR: ELECTRONES SECUNDARIOS (SE)':'DETECTOR: ELECTRONES RETRODISPERSADOS (BSE)'); } ``` kv slider: ```js kv.addEventListener('input',()=>{ kv=+kvEl.value; kvTxt.textContent=kv.toFixed(1)+' kV'; }); ``` rescan(): ```js function rescan(){ seed=Math.random()*97; acqT0=tNow; acquired=false; fieldN++; fieldTxt.textContent='CAMPO '+String(fieldN).padStart(4,'0'); statusTxt.textContent='ESCANEO EN CURSO'; toast('NUEVO BARRIDO · CAMPO '+String(fieldN).padStart(4,'0')); } btnScan.onclick=rescan; ``` tNow global updated each frame; init before first frame. Capture: ```js btnCap.onclick=()=>{ drawFrame(true); canvas.toBlob(b=>{ if(!b) return; const name='SEM_'+String(capN++).padStart(4,'0')+'.png'; const a=document.createElement('a'); a.href=URL.createObjectURL(b); a.download=name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(a.href),4000); toast('CAPTURA GUARDADA · '+name); },'image/png'); flashEl.classList.add('on'); setTimeout(()=>flashEl.classList.remove('on'),70); }; ``` Crosshair DOM update in pointermove (also on each frame since view moves? crosshair is client-fixed ✓ only on move): ```js function updCross(){ const hide = mouse.overUI || !mouse.inside || !mouse.isMouse; cross.style.opacity = hide?0:1; // set on container of 3 elements cv.style.transform=`translateX(${mouse.cx}px)`; chEl.style.transform=`translateY(${mouse.cy}px)`; cc.style.transform=`translate(${mouse.cx}px,${mouse.cy}px)`; } ``` Set cross container opacity. isMouse set on pointermove pointerType. overUI via listeners: ```js document.querySelectorAll('.ui').forEach(el=>{ el.addEventListener('pointerenter',()=>mouse.overUI=true); el.addEventListener('pointerleave',()=>mouse.overUI=false); }); ``` Also add .ui class to .tr buttons container, presets, and kv slider (inside tl — tl gets .ui? then hovering any top-left hides cross ✓ fine add class ui to .tl too? But tl is info text... hovering it hiding cross is fine/harmless. Only slider truly interactive. I'll put .ui on slider only and buttons containers.) Cross dragging state: canvas.classList 'dragging' → #cc border-color brighter & smaller: handle via body class. HUD updates (throttled by change): ```js let lastMagTxt='', lastBarW=-1, lastBarL=''; function updHud(){ const mag=225000/view.h; const magTxt=fmtMag(mag); if(magTxt!==lastMagTxt){ magVal.textContent=magTxt; lastMagTxt=magTxt; } // scale bar const r=canvas.getBoundingClientRect(); const H=r.height; const Ls=[200,100,50,20,10,5,2,1,0.5,0.2,0.1,0.05,0.02,0.01,0.005,0.002]; let L=Ls[Ls.length-1]; for(const c of Ls){ if(c/view.h*H<=190){ L=c; break; } } const wpx=L/view.h*H; const wl=(L>=1? (L%1?L.toFixed(1):String(L))+' µm' : (L*1000)+' nm'); if(wpx!==lastBarW){ sbarLine.style.width=wpx.toFixed(1)+'px'; lastBarW=wpx; } if(wl!==lastBarL){ sbarTxt.textContent=wl; lastBarL=wl; } // coords coords.textContent = `X ${fmtC(mouse.wx)} · Y ${fmtC(mouse.wy)} µm`; } function fmtC(v){ const s=v<0?'−':'+'; return s+Math.abs(v).toFixed(1).padStart(4,'0'); } ``` coords each frame ok (small text) — or throttle similarly; fine each frame. Mag rounding: ```js function fmtMag(m){ let r = m>=20000? Math.round(m/500)*500 : m>=5000? Math.round(m/100)*100 : Math.round(m/50)*50; return '×'+String(r).replace(/\B(?=(\d{3})+(?!\d))/g,'\u2009'); } ``` Hint fade: ```js let hintHidden=false; function hintFade(){ if(!hintHidden){ hintHidden=true; hintEl.style.opacity=0; } } setTimeout(hintFade, 9000); ``` Status update in loop when acq completes: ```js if(!acquired && acq>=1){ acquired=true; statusTxt.textContent='IMAGEN ADQUIRIDA'; } ``` Sweep value: ```js let sweep=-1; if(acq>=1){ const c=(t*0.105)%1; if(c<0.24) sweep=c/0.24*1.06-0.03; } ``` u_mAct lerp: mouse.act += ((mouse.inside&&!dragging&&mouse.actT&&!mouse.overUI)?1:0 - mouse.act)*... careful parentheses: ```js const actT=(mouse.inside && !dragging && mouse.actT===1 && !mouse.overUI)?1:0; mouse.act += (actT-mouse.act)*(1-Math.exp(-dt*10)); ``` Draw: ```js function drawFrame(){ gl.uniform2f(U.u_res, canvas.width, canvas.height); gl.uniform2f(U.u_cam, view.x, view.y); gl.uniform1f(U.u_zoom, view.h); gl.uniform1f(U.u_time, t); gl.uniform1f(U.u_acq, acq); gl.uniform1f(U.u_sweep, sweep); gl.uniform1f(U.u_mode, mode); gl.uniform1f(U.u_seed, seed); gl.uniform2f(U.u_mouseW, mouse.wx, mouse.wy); gl.uniform1f(U.u_mAct, mouse.act); gl.uniform1f(U.u_kv, kv); gl.drawArrays(gl.TRIANGLES,0,3); } ``` Main loop: ```js let t0=performance.now()/1000, tPrev=t0, tNow=t0; function frame(){ const t=performance.now()/1000 - t0; ... } ``` Manage dt clamp (≤0.05). Mouse world recompute each frame from view ✓. Also mouse wx uses client coords: recompute in frame (uses last cx/cy) ✓. acq = min((t - acqT0relative)/2.4,1) — track acqStart in same timebase: set acqStart = t at rescan (t known in frame scope; rescan called from events — store pendingFlag? Use performance-clock: keep `acqStart` in performance ms and t derived same clock: define t = performance.now()/1000 (absolute), pass u_time = t ✓ fine (grain hash uses fract of big numbers: fract(t*61.9) with t large (~1e3) — hash12 input gl_FragCoord + vec2(fract(...)*311,...) — fract of large product loses precision when t=1e4? t*61.9≈6e5; fract at float32: 6e5 has ~0.06 resolution → fract degenerates! Fix: wrap time: pass u_time = t % 3600? Still large for fract(t*61.9): 3600*61.9=222k → float32 spacing at 222k = 0.0156 → fract pattern quantized but still pseudorandom-ish? Precision loss makes it step-wise — hash of stepped values still varies per frame? steps of 0.0156 in fract → values change every ~16ms? spacing 0.0156 means fract increments visible in ~1/64 chunks — grain updates at 64 distinct phases cycling — acceptable-ish but better: wrap u_time modulo small period consistent across uses: u_time = t % 62.8319? Multipliers then: 61.9*62.83 ≈ 3890 → float32 spacing at 3890 ≈ 0.000244 → fract granularity 4096 steps ✓ fine. Use wrapped t: tw = t % 61.0 (also used for sweep c=(t*0.105)%1 — wrapping causes jump in sweep phase every 61s → sweep line jumps — acceptable? sweep cycle period = 1/0.105=9.52s; 61/9.52 = 6.4 cycles → discontinuity at wrap → line teleports. Use separate unwrapped t for sweep (u_time fine: sweep uses (u_time*0.105)%1 → at u_time 3600: 378 → f32 spacing 3.05e-5 ✓ fine). The precision issue only matters inside fract() with big multipliers for grain. So: in shader use two uniforms? Simpler: u_time = wrapped (t%61) used for grain/glitch; u_time2? For sweep & row-noise use floor(t*24) → large floor fine but hash12(vec2(row*0.7, gt*1.3)) with gt up to 86400*24 → gt*1.3 up to 2.7e6 → hash12 uses fract(p*0.1031): 2.7e6*0.1031=2.8e5 → f32 spacing 0.03 → hash quantized → glitch selection becomes chunky but still changes over time — acceptable. Cleaner: pass u_time wrapped to % 300 and in shader compute gt = floor(u_time*24.) with u_time≤300 → gt≤7200 → *1.3=9360 fine ✓. And sweep phase from u_time % (1/0.105... just compute sweep in JS ✓ (JS passes u_sweep precomputed) — then shader needs no long-time math. Grain: fract(u_time*61.9) with u_time≤300 → 18570 → f32 spacing 0.00195 → 512 granular levels — fine (grain re-hashes per frame anyway; hash input = fragcoord + phase*311: phase quantized to 512 values cycles through — since fragcoord changes, even repeating phase values give same grain each 512 frames (~8.5s cycle) — imperceptible. ✓ OK: u_time = t % 300, JS computes sweep & acq. Glitch gt=floor(u_time*24) ≤7200 ✓. dt from performance.now. Now, the fragment shader assembled (WebGL1 / GLSL ES 1.00): ```glsl precision highp float; uniform vec2 u_res; uniform vec2 u_cam; uniform float u_zoom; // view height in µm uniform float u_time; uniform float u_acq; uniform float u_sweep; uniform float u_mode; uniform float u_seed; uniform vec2 u_mouseW; uniform float u_mAct; uniform float u_kv; float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } vec2 hash22(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973)); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.xx + p3.yz) * p3.zy); } float vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); float a = hash12(i); float b = hash12(i + vec2(1.0, 0.0)); float c = hash12(i + vec2(0.0, 1.0)); float d = hash12(i + vec2(1.0, 1.0)); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } float fbm(vec2 p, float px, float lam0, int oct){ float s = 0.0, a = 0.5, tot = 0.0, wl = lam0; mat2 m = mat2(0.8, -0.6, 0.6, 0.8); for(int i = 0; i < 6; i++){ if(i >= oct) break; float w = smoothstep(0.5, 0.25, px / wl); s += a * w * vnoise(p / wl); tot += a * w; a *= 0.5; wl *= 0.5; p = m * p; } return tot > 0.001 ? s / tot : 0.5; } ``` Wait — GLSL ES 1.00 ternary with float ok ✓. `int oct` param ok ✓. ```glsl const float R0 = 26.0; const vec2 NC = vec2(3.0, -2.5); const float NR = 9.4; float outlineR(float ang){ vec2 d = vec2(cos(ang), sin(ang)); return R0 * (1.0 + 0.150 * (vnoise(d * 1.7 + u_seed * 1.3 + 3.1) - 0.5) + 0.080 * (vnoise(d * 3.9 + u_seed * 2.1 + 9.7) - 0.5) + 0.032 * (vnoise(d * 9.0 + u_seed * 4.7 + 5.2) - 0.5)); } ``` (0.15 = 0.085*2 → amplitude ±0.15? original: 0.085*(n-0.5)*2 = ±0.085. Keep: coefficient written as 0.17*(n-0.5) equals ±0.085. I'll write 0.17, 0.09, 0.036 directly as (v-0.5) multipliers.) dots: ```glsl float dots(vec2 p, float grid, float sd, float px){ float fade = smoothstep(grid * 1.4, grid * 0.55, px); if(fade < 0.004) return 0.0; vec2 id = floor(p / grid); vec2 rnd = hash22(id + sd); vec2 c = (rnd - 0.5) * 0.55 * grid; float rr = grid * (0.10 + 0.16 * rnd.y); float dl = length(fract(p / grid) * grid - grid * 0.5 - c); float w = max(px * 1.3, 0.006); return smoothstep(rr + w, rr - w, dl) * fade; } float subDetail(vec2 p, float px){ float s = dots(p, 0.42, u_seed * 9.0, px) * 0.55; s += dots(p, 0.15, u_seed * 4.0 + 7.0, px) * 0.32; s += 0.12 * (fbm(p, px, 0.6, 3) - 0.5) * 2.0; return s; } ``` cellH: ```glsl float cellH(vec2 p, float px){ float r = length(p); float ang = atan(p.y, p.x + 1e-6); float Ro = outlineR(ang); float h = -0.9; // filopodia for(int i = 0; i < 7; i++){ float fi = float(i); float an = 6.2832 * hash12(vec2(fi * 3.1, u_seed)); float ln = 4.5 + 4.5 * hash12(vec2(fi * 5.7, u_seed + 2.0)); vec2 dir = vec2(cos(an), sin(an)); vec2 s0 = dir * (R0 * 0.97); vec2 ba = dir * ln; vec2 pa = p - s0; float tt = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); float dl = length(pa - ba * tt); float w = 0.20 + 0.09 * (1.0 - tt); dl -= 0.10 * sin(tt * ln * 2.3 + fi * 2.7 + u_seed); float m = smoothstep(w, w * 0.2, dl) * smoothstep(ln, ln * 0.45, tt * ln); h += 0.55 * m; } // body float body = smoothstep(Ro, Ro - 6.5, r); h = mix(h, 1.8, body); // rim + ruffles float rim = exp(-pow((r - Ro + 0.8) / 1.1, 2.0)); h += 0.45 * rim * body; float band = exp(-pow((r - (Ro - 2.8)) / 2.3, 2.0)); h += 0.50 * band * body * (fbm(p, px, 1.1, 3) - 0.5) * 2.0; // cytoplasm granularity h += 0.10 * body * (fbm(p, px, 0.9, 4) - 0.5) * 2.0; h += 0.05 * body * (fbm(p, px, 0.22, 3) - 0.5) * 2.0; // ER tubules float rn0 = length(p - NC); float inCyto = body * (1.0 - smoothstep(NR - 1.6, NR + 1.8, rn0)); if(inCyto > 0.004){ vec2 wp = p - 0.8 + 1.6 * vec2( vnoise(p * 0.55 + u_seed * 3.0 + 17.0), vnoise(p * 0.55 + u_seed * 3.0 + 43.0)) - 0.8; ``` oops double -0.8; write: `vec2 wp = p + 1.6*vec2(...) - 0.8;` wait subtracting scalar 0.8 from vec2 ✓ allowed (vec2 - float). Clean: `vec2 wp = p - 0.8 + 1.6 * vec2(vnoise(...), vnoise(...));` ```glsl float e1 = 1.0 - abs(vnoise(wp * 1.15 + u_seed) * 2.0 - 1.0); float e2 = 1.0 - abs(vnoise(wp * 2.9 + u_seed * 1.7) * 2.0 - 1.0); float erw = smoothstep(1.4, 0.5, px / 0.45); h += 0.42 * (pow(e1, 7.0) + 0.5 * erw * pow(e2, 7.0)) * inCyto; } // nucleus vec2 q = p - NC; float rn = length(q); float nRo = NR * (1.0 + 0.09 * (vnoise(q / rn * 2.4 + u_seed * 5.0) - 0.5)); float nuc = smoothstep(nRo, nRo * 0.5, rn); h += 1.5 * nuc; h -= 0.38 * exp(-pow((rn - nRo) / 0.5, 2.0)); h += 0.20 * nuc * (fbm(q, px, 1.5, 4) - 0.5) * 2.0; h += 0.07 * nuc * (fbm(q, px, 0.4, 3) - 0.5) * 2.0; ``` q/rn at rn→0 → div by 0: add 1e-4: q/(rn+1e-4). ```glsl // mitochondria for(int i = 0; i < 7; i++){ float fi = float(i); float an = 6.2832 * hash12(vec2(fi * 7.3 + 1.0, u_seed + 1.0)); float rd = 14.6 + 4.6 * hash12(vec2(fi * 3.9 + 4.0, u_seed + 2.0)); vec2 mp = vec2(cos(an), sin(an)) * rd; float orr = an + 1.5708 + (hash12(vec2(fi * 9.1 + 2.0, u_seed + 3.0)) - 0.5) * 1.7; vec2 u2 = vec2(cos(orr), sin(orr)); vec2 lp = p - mp; lp = vec2(dot(lp, u2), dot(lp, vec2(-u2.y, u2.x))); float hl = 1.7 + 1.5 * hash12(vec2(fi * 5.2 + 6.0, u_seed + 4.0)); float hw = 0.42 + 0.16 * hash12(vec2(fi * 6.8 + 8.0, u_seed + 5.0)); vec2 ap = vec2(abs(lp.x) - hl, lp.y); float dd = length(max(ap, 0.0)) + min(max(ap.x, ap.y), 0.0) - hw; float m = smoothstep(0.18, -0.05, dd); if(m > 0.003){ float crw = smoothstep(1.5, 0.5, px / 0.30); float cr = 1.0 - abs(vnoise(vec2(lp.x * 1.4, lp.y * 5.5) + u_seed) * 2.0 - 1.0); h += m * (0.95 + 0.30 * crw * pow(cr, 5.0)); } } // vesicles for(int i = 0; i < 11; i++){ float fi = float(i); float an = 6.2832 * hash12(vec2(fi * 11.3 + 3.0, u_seed + 6.0)); float rd = 19.5 * sqrt(hash12(vec2(fi * 7.7 + 5.0, u_seed + 7.0))); vec2 vp = vec2(cos(an), sin(an)) * rd; vec2 dn = vp - NC; float dl = max(length(dn), 1e-3); vp = NC + dn * (max(dl, NR + 1.6) / dl); float vr = 0.32 + 0.70 * hash12(vec2(fi * 13.1 + 9.0, u_seed + 8.0)); float dd = length(p - vp) - vr; h += 0.60 * smoothstep(0.15, -0.10, dd); } // microvilli carpet float mvW = smoothstep(0.075, 0.030, px); if(mvW > 0.003){ float g = 0.30; vec2 gp = p / g; vec2 rnd = hash22(floor(gp) + u_seed * 17.0); vec2 c = (rnd - 0.5) * 0.5 * g; float rr = g * (0.30 + 0.16 * rnd.y); float dl = length(fract(gp) * g - g * 0.5 - c); float mv = smoothstep(rr, rr * 0.25, dl) * step(0.32, rnd.x) * (1.0 - 0.7 * nuc); h += 0.30 * mv * mvW * body; } // substrate h += subDetail(p, px) * (1.0 - body); return h; } float Hh(vec2 p, float px){ return length(p) > 43.0 ? -0.9 + subDetail(p, px) : cellH(p, px); } ``` Wait — subDetail has dots with grid 0.42 fade: fade = smoothstep(0.588, 0.231, px): at overview px 0.16 → fade 0? smoothstep(0.588,0.231,0.16): 0.16 < 0.231 → returns 1! Direction: smoothstep(e0>e1) — smoothstep with edge0>edge1 is undefined behavior in GLSL! smoothstep requires edge0 < edge1 officially. Using reversed edges works on most GPUs (clamp((x-e0)/(e1-e0))) — genType smoothstep: results undefined if edge0 ≥ edge1. In practice it computes t=clamp((x-e0)/(e1-e0),0,1) giving reversed ramp ✓ works virtually everywhere. But to be safe, define my own: ```glsl float sstep(float a, float b, float x){ float t = clamp((x - a) / (b - a), 0.0, 1.0); return t * t * (3.0 - 2.0 * t); } ``` and use sstep for all reversed cases. GLSL builtin smoothstep with reversed edges — I've seen it work everywhere, but spec-undefined. Safer: use my sstep everywhere (also in fbm fades where edges reversed). I'll define sstep and use it consistently for reversed ones; builtin for normal ones. Actually just use sstep everywhere for uniformity. Also `dots` early return inside branch → OK. Note Hh used for 3 taps; at far r>43 the subDetail cheap ✓. Main: ```glsl void main(){ vec2 fc = gl_FragCoord.xy; vec2 uv01 = fc / u_res; float row = floor(fc.y); // row noise & occasional glitch float gt = floor(u_time * 24.0); float gsel = hash12(vec2(row * 0.7, gt * 1.3 + 5.0)); float glitch = step(0.9972, gsel); float jx = (hash12(vec2(row * 1.3, gt * 2.1)) - 0.5) * (0.5 + 13.0 * glitch); vec2 sc = (fc + vec2(jx, 0.0) - 0.5 * u_res) / u_res.y; vec2 p = u_cam + sc * u_zoom; float px = u_zoom / u_res.y; float e = max(px * 0.6, 0.012); float h0 = Hh(p, px); float hx = Hh(p + vec2(e, 0.0), px); float hy = Hh(p + vec2(0.0, e), px); vec2 g = vec2(hx - h0, hy - h0) / e; vec3 n = normalize(vec3(-g, 1.0)); vec3 L = normalize(vec3(-0.42, 0.62, 0.66)); float diff = clamp(dot(n, L), 0.0, 1.0); float gm = min(length(g), 2.4); float shade = 0.22 + 0.95 * pow(diff, 1.35) + mix(1.05, 0.28, u_mode) * gm; // low kV: less penetration -> slightly flatter & darker? keep: brightness factor shade *= mix(0.88, 1.0, (u_kv - 1.0) / 14.0); float ao = mix(0.55, 1.0, sstep(-1.0, 1.9, h0)); float col = shade * ao; col = col / (1.0 + 0.22 * col); col = pow(col, 0.85); col = clamp((col - 0.03) * 1.06, 0.0, 1.0); // beam interaction at cursor vec2 dm = p - u_mouseW; col += 0.09 * u_mAct * exp(-dot(dm, dm) / (2.0 * pow(max(px * 9.0, 0.02), 2.0))); // grain float gn = hash12(fc + vec2(fract(u_time * 61.9) * 311.0, fract(u_time * 43.7) * 197.0)); float gAmt = mix(0.075, 0.035, u_mode) * mix(1.6, 1.0, (u_kv - 1.0) / 14.0); col += (gn - 0.5) * 2.0 * gAmt * (0.35 + 0.65 * clamp(col * 2.0, 0.0, 1.0)); // acquisition float yTop = 1.0 - uv01.y; float acq = u_acq; float revealed = 1.0 - sstep(acq - 0.004, acq + 0.004, yTop); float sline = exp(-pow((yTop - acq) * u_res.y / 1.8, 2.0)); float fresh = exp(-pow(max(acq - yTop, 0.0) * u_res.y / 70.0, 2.0)); float un = hash12(fc * 1.7 + fract(u_time * 57.3) * 91.0) * 0.05; un += step(0.9985, hash12(fc + fract(u_time * 23.7) * 77.0)) * 0.22; vec3 c3 = mix(vec3(un), vec3(col), revealed); c3 += vec3(sline * 0.8) * step(acq, 0.9995); c3 *= 1.0 + 0.22 * fresh; c3 += (gn - 0.5) * 0.3 * fresh; // idle sweep line c3 += vec3(exp(-pow((yTop - u_sweep) * u_res.y / 26.0, 2.0)) * 0.05); // glitch row brightness c3 += vec3(glitch * 0.10); // vignette vec2 vq = (uv01 - 0.5) * vec2(u_res.x / u_res.y, 1.0); c3 *= 1.0 - 0.42 * sstep(0.45, 1.05, length(vq)); gl_FragColor = vec4(pow(c3, vec3(0.96)), 1.0); } ``` sstep with reversed edges — my sstep handles via (x-a)/(b-a) sign flip ✓ (I wrote generic with a,b any order? clamp((x-a)/(b-a)) with bFIBROBLASTO HUMANO (HFF-1) FIJACIÓN GT · SECADO PUNTO CRÍTICO · Au/Pd 4 nm SEÑAL SE · ESCANEO 1280 × 960 · 80 µs/px? ``` Keep two lines. And it should be pointer-events none. Also maybe add subtle noise "ADR" line? Enough. Hint content: `ARRASTRAR MOVER · RUEDA AMPLIAR · DOBLE CLIC ACERCAR · ESPACIO NUEVO BARRIDO` Title top-left: "HELIOS·650" is a real Thermo product name (Helios 650 UX? actually "Helios NanoLab 650" is real FEI). Avoid real model; invent: "VECTA·SEM" or "SERIE MIRA"? Invent neutral: `μ-SCAN · S650`? I'll use fictional "OBSIDIA S-650 · MEB" (microscopio electrónico de barrido = MEB in Spanish; SEM in English). Spanish uses MEB. HUD can use "MEB". Brand: "AXIOM MEB · S-650"? Keep simple: `S-650 · MEB`. Title tag in Spanish with "MEB". Field text init "CAMPO 0001". Preset labels mags: p1 ×1 500; p2: 225000/34=6618→ round 100 → 6 600 ✓; p3: 225000/20=11 250 → 11 300? round/100 → 11 250/100=112.5 → 113*100=11 300. Label "×11 300". p4: 225000/7=32143 → /500 → 32000 → "×32 000". Set preset label strings accordingly: '×1 500','×6 600','×11 300','×32 000'. Also display note: preset flight changes view.h to those values ✓. Initial active preset: p1 active. Now think about whether view easing k=6/s is good for wheel: exp response ✓. Space key: prevent scrolling ✓; also ignore if focus in input (kv slider) — Space on slider... after clicking slider it has focus; Space would... blur activeElement on canvas pointerdown? Add: keydown handler checks `if(e.target.tagName==='INPUT') return;` ✓. Also after slider input, pressing space triggers? Guarded ✓. Slider styled with cursor:ew-resize & .ui class → crosshair hides ✓. Also add `touch-action: none` on canvas for pointer events mobile ✓. Also `user-select:none` body. Now the fallback div content: "Tu navegador no soporta WebGL — la simulación de microscopio requiere aceleración gráfica." Toast on load? Maybe subtle "BARRIDO INICIAL · CAMPO 0001"? Skip, status line covers it. Now writing everything as final answer. Also brief explanation after code, in Spanish (user wrote Spanish). All UI text and comments in Spanish. Let me make sure GLSL compiles logically — walk through issues: 1. `fbm(vec2 p, float px, float lam0, int oct)` — int param & `if(i>=oct) break;` ✓ constant loop bound 6 ✓. 2. In cellH, functions used before definition? GLSL requires declaration before use — order: hash, vnoise, sstep, sq, fbm, dots, subDetail, outlineR, cellH, Hh, main. outlineR uses vnoise ✓. cellH uses subDetail ✓ defined before. ✓ 3. u_seed used inside dots/subDetail/outlineR/cellH — uniform declared top ✓. 4. `vec2 c = (rnd - 0.5) * 0.5 * g;` ✓. `float dl = length(fract(gp) * g - g * 0.5 - c);` ✓. 5. `normalize(q / (rn + 1e-4) * 2.4 + u_seed * 5.0)` — q/(rn+1e-4) vec2 ✓ then *2.4 + float ✓ vec2+float ✓. 6. ternary in fbm return: `return tot > 0.001 ? s / tot : 0.5;` ✓. 7. `mix(0.88, 1.0, (u_kv-1.0)/14.0)` ✓ floats. 8. Unused uniform warnings fine. 9. In JS, careful: getContext('webgl') options preserveDrawingBuffer ✓. 10. Fullscreen triangle covers screen; gl.disable(DITHER)? default fine. Clear not needed (full tri draws) but do gl.clearColor anyway. Potential visual tuning worries: overall composition at load — cell centered, dia 52µm in 150µm view height on wide screen → cell about 35% of height, centered-ish with filopodia spikes reaching out, substrate speckle dark. Vignette corners. Looks like a proper SEM overview ✓. Nucleus dome with crease, 7 dark-ish mitochondria bright-rimmed, vesicle dots, ER winding ridges — should read beautifully. Brightness check plateau: shade=0.22 (flat) → col 0.24 gray. Ruffles/rim brighter. Substrate 0.15 dark. Nucleus flat top also 0.24 with mottling ±0.2*gradient → visible texture, and crease dark ring, edges bright ring ✓. Should look great. Filopodia m: at p near spike, dl from segment; smoothstep(w, w*0.2, dl): w~0.2 → dome radius ~0.2µm, height 0.55 → gm≈0.55/0.1·(smoothstep deriv) up to ~4 → clamped 2.4 → bright white thin filaments ✓ visible at overview (px 0.15: width 0.4µm ≈ 2.7px ✓). Glitch: step(0.9972, gsel) with gsel per row per 1/24s tick: expected fraction 0.0028 of rows glitching each tick → many rows per tick across 1000 rows ≈ 3 rows per tick — subtle horizontal tear lines appearing briefly ✓ plus jx 0.5px baseline jitter always. Row noise brightness: I included glitch brightness only; maybe add faint per-row temporal noise: c3 += (hash12(vec2(row*0.31, gt*0.77))-0.5)*0.012 — very subtle banding life. Add ✓. Mouse beam glow radius: px*9 → at overview px .16 → σ≈1.4µm ≈ 9px ✓ subtle +0.09. One thing: u_mAct beam also should not apply over UI-hovered — act target 0 when overUI ✓. Sweep amplitude 0.05 broad band 26px ✓ subtle. Vignette 0.42 maybe strong; use 0.35. Contrast: after everything add slight lift? keep. BSE: shade = 0.22+0.95 pow + 0.28gm, grain 0.035 — flatter, cleaner ✓ visible difference especially on edges (rim white → moderate) ✓. Low kV: brightness ×0.88 & noise ×1.6 at 1kV — noticeable ✓. Now HTML assembly & final copy check (Spanish): - "RE-ESCANEAR", "CAPTURAR PNG", presets names: "VISTA GENERAL", "NÚCLEO", "BORDE / LAMELIPODIO", "MICROVELLOSIDADES". - Status: "ESCANEO EN CURSO" → "IMAGEN ADQUIRIDA". - Toasts: capture, mode, rescan. - Hint. - Bottom-right: line1: `MUESTRA · FIBROBLASTO HUMANO HFF-1` line2: `GLUTARALDEHÍDO · PUNTO CRÍTICO · Au/Pd 4 nm` line3: `SEÑAL SE · EHT 5.0 kV · WD 10.3 mm`? kv dup top-left; fine keep two lines only. Top-left rows: DETECTOR / EHT+slider / WD+PRES. status row. Also crosshair center circle: maybe also small plus ticks; fine. Let me also reconsider: `#hud` z-index 10; canvas z 0; cross z 20 above hud? Cross should be above canvas but below buttons text? If above hud, lines cross the text — with 0.14 alpha fine and authentic. Put cross z-index 15 (above hud visuals, below flash 50). It'll overlay text slightly — authentic instrument feel ✓ but may annoy over presets — crosshair hides over .ui ✓ presets have .ui ✓. Edge: pointerenter/leave on .ui with pointer-events:auto children buttons ✓. Also initial mouse.inside=false → crosshair hidden until first move ✓. On touch devices isMouse false → stays hidden ✓. `mouse.actT` set to 1 only for mouse pointerType ✓. fmtC: negative sign proper minus '−' ✓. Also HUD coords when pointer outside: still shows last — fine; maybe when !inside show "—". Minor; keep last. Intro animation delays: tl .2s, tr .35s, presets .5s, bl .65s, br .8s, hint 1.2s, corners .1s. Also #gl itself could fade from black? acquisition handles the reveal ✓. Preload font: standard link tags with display=swap. Preset buttons in HTML hardcoded (4 items) with data attrs. Icons inline SVG for rescan (rotate-cw) & capture (camera) & maybe crosshair icon in title. Write them minimal. Now double-check pinch math & pointer capture with multiple pointers: setPointerCapture per pointer on canvas ✓ moves delivered ✓. prevPinch handling when third finger... ignore >2. Also wheel zoom during tween cancels tween via userMoved ✓. Preset click while acquisition running ✓ fine. One more: `canvas.getBoundingClientRect()` per event — fine. The overlay `#fallback` style: position fixed inset 0 display grid place-items center, panel border hairline padding. Potential issue: `preserveDrawingBuffer:true` + toBlob — must ensure last rendered frame still present ✓. Also for capture, maybe render at full res? Current buffer fine. Let me also handle `contextmenu` prevent on canvas (right-click drag none) ✓. Now, finalize magnification base: mag=225000/view.h. At view.h=230 initial → ×978 pre-settle → shows "×1 000" then settles ×1 500 ✓ nice touch (readout spins during intro like instrument). Scale bar at view.h 150, H~937: candidates: 200µm→1253px no; 100→625 no; 50→313 no; 20→125 ✓ → "20 µm" bar 125px ✓ sensible. At view.h 7: 0.02µm=20nm → 0.02/7*937=2.7px; 0.05→6.7; 0.1→13.4; 0.2→26.8; 0.5→67 ✓ "500 nm". Hmm at ×32 000, typical scale bar 1µm... whatever, formula-driven ✓. fmt for L: L=0.5 → "0.5 µm"? Spanish decimal comma? Instrument displays often use dot; I'll use comma for Spanish: (0.5 → "0,5 µm"). Use toLocaleString('es') or replace('.',','). I'll format with comma ✓. L≥1: L=2 → "2 µm" ✓ integer no decimals. Implement: ```js function fmtL(L){ if(L>=1) return (L%1? L.toFixed(1):String(L)).replace('.',',')+' µm'; return String(+(L*1000).toFixed(0)).replace... ' nm'; } ``` 0.002µm→2nm ✓; 0.005→5nm ✓. fmtMag thousands separator thin space ✓ '×1\u2009500'. Mag rounding for <50? min view.h 320 → mag 703 → round/50 → 700 ✓. Everything seems coherent. Time to write the final file. I'll keep code organized with section comments in Spanish. Also after the code, a brief explanation (in Spanish) of implementation & interactions. Also small extra: document title and maybe a `favicon` skip. Let me write CSS carefully including responsive. Also one more check — `sstep(0.5, 0.25, px/wl)` reversed via my function: t=(x-0.5)/(0.25-0.5)= (0.5-x)/0.25 → at x=0.5→0, x=0.25→1 ✓. dots fade: sstep(grid*1.4, grid*0.55, px): px small → t = (px-1.4g)/(0.55g-1.4g) = (1.4g-px)/(0.85g) → px≤0.55g→1 ✓. ao sstep(-1.0,1.9,h0) normal ✓. vignette sstep(0.45,1.05,len) ✓. mvW sstep(0.075,0.030,px) reversed ✓ → px small → 1 ✓. crw, erw similar ✓. nuc smoothstep(nRo, nRo*0.5, rn) reversed — I use sstep ✓ (builtin reversed avoided everywhere — replace ALL smoothsteps with sstep to be safe; only builtin-normal ones could remain but consistency: use sstep everywhere.) fbm uses sstep ✓. Let me also confirm `float sstep(float a,float b,float x)` name doesn't clash with builtin smoothstep — different name ✓. Also GLSL: functions must be declared before use in ES 1.00 (no prototypes needed if ordered) ✓ order: sq, sstep, hash12, hash22, vnoise, fbm, dots, subDetail, outlineR, cellH, Hh, main ✓. `dots` uses hash22 ✓. In cellH: variable name `dn` conflicts? fine. Loop int i float fi conversions ✓. Now — JS full write-up. Also remember: initial acqStart = now → acquisition starts immediately ✓. statusTxt initial 'ESCANEO EN CURSO' ✓. I also want the HUD top-left to include a live clock/date? Instruments show date/time: add row "2024-05-11 14:32:07" ticking — nice authenticity! Add small line top-left bottom: `

—

` update per second: date from Date() real time formatted ISO-ish "11.05 14:32:07". ✓ cheap and alive. OK also one more micro-interaction: while acquiring, disable? no. Also add keyboard hint "B" toggle? Not needed. Write final code now. Watch string escaping in template literals (shader inside backticks — no ${} inside ✓ careful none). Also `θ` etc none. Let me estimate the mag readout element sizes okay. Final check of the "cells look" risk: the biggest risk is the shading constants producing mud. Let me sanity compute a few more: - Rim region: at r≈Ro-1.5, rim bump ~0.45*exp(-((−0.7)/1.1)²)=0.45*e^{-0.405}=0.30 → plus plateau 1.8 → slope of gaussian: derivative ~0.3*2*0.7/1.21≈0.35 ✓ gm~0.35→ edge add 0.37 → col ≈ (0.22+~0.6+0.37)*1 ≈ 1.19 → tm 0.87 → bright rim band ✓. - Ruffle band adds fbm ±0.5 → local slopes ~0.5/1.1*2π? value noise slope ~ amplitude*2π/λ? vnoise derivative ~ up to ~2*amp/λ ≈ 0.5*... band*0.5*(fbm-0.5)*2 → amp 0.5 at λ~1.1 → slope ~0.9 → edge add ~0.95 → sparkling wrinkles ✓. - Mitochondria edges: dd slope 0.95/0.18 wide smoothstep → gm ~ 3+ → saturated bright outlines ✓ dark interior 0.95 height diff not affecting flat top (gm=0 → 0.22 flat like cytoplasm but sits higher: ao same 1 → interior same gray as cytoplasm — hmm mitochondria interior identical tone to cytoplasm, only rims visible + cristae texture when zoomed. That's actually SEM-authentic (topography: only edges). ✓ good. - Nucleus dome rim: height jump 1.5 over smoothstep(nRo→0.5nRo) width ~4.7µm → slope 0.32 → moderate bright ring + crease dark ✓. Vesicles rims bright dots ✓. Composition bright edges on dark-ish gray = classic SEM. One more: the "un-acquired" noise region during scan — visible only 2.4s ✓. Also consider initial view.x target 0 vs cell center: nucleus offset (3,-2.5) slightly — overview centered on cell centroid ~ (1,-1)? Set presets[0] to (1,-1) for balance ✓. Also make sure wheel zoom clamps and target pan clamp 55 — at high zoom preset x=-10 ✓ within. Alright — also small: `#toast` uppercase text. Also: after acquisition, "IMAGEN ADQUIRIDA" — maybe show also frame count? enough. For the explanation after code: describe concept, shader-based procedural SEM, interactions list, controls. Keep concise-ish. Let me now write the whole thing. I'll aim for clean, well-commented (Spanish comments) code. One more thought on `Hh` cutoff 43: at overview, most pixels r<43? Cell + spikes ~40 → most center pixels full path; background corners fast ✓. Also ensure at extreme zoom into substrate (user pans away then zooms — pan clamp 55µm keeps near cell; r>43 regions cheap ✓. Also handle WebGL program link error → fallback. Also `gl.getExtension('OES_standard_derivatives')` not needed. Write JS formatting helpers. Let me write out final now. Also double check units: u_zoom is view height in µm — name ok. For HUD updates each frame: coords textContent every frame → layout cost trivial. Clock update: setInterval 1000 → `dd.mm hh:mm:ss`: ```js function updClock(){ const d=new Date(); const p=n=>String(n).padStart(2,'0'); clock.textContent = `${p(d.getDate())}.${p(d.getMonth()+1)}.${d.getFullYear()} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`; } ``` Where to place: top-left status row second line: `

`. Everything set. Also add `aria-hidden` decorative? skip. Potential CSS gotcha: body cursor:none also applies over buttons? Buttons set cursor:pointer explicitly ✓. Slider cursor:ew-resize ✓. Presets pointer ✓. Crosshair transform updates need initial hidden: #cv,#ch,#cc opacity handled by container? They're separate fixed elements — wrap in #cross container with opacity transition; children fixed positioned — container opacity applies ✓ set container `#cross{position:fixed;inset:0;pointer-events:none;z-index:15;opacity:0;transition:opacity .25s;}` children absolute within container: since container inset 0, children `position:absolute; left:0; top:0;` with transforms ✓ cv: width:1px;height:100%; transform translateX. ch: height:1px;width:100%; translateY. cc: width:26px;height:26px;margin:-13px 0 0 -13px; border-radius:50%; translate(x,y) ✓. Also add small center dot? circle enough. Also on pointerleave of window → mouse.inside=false → cross hides, act→0 ✓ add listener. Final: write answer with code block then explanation. Language: Spanish throughout. Also mobile: hint hidden; but gestures work (drag, pinch). dblclick on mobile = double-tap → may zoom — ok. Writing the code now — being meticulous about matching IDs between HTML/JS. IDs: gl, hud, cross(cv, chX? naming: cvLine, chLine... use idCrossV etc: cx, cy? Let me: #crossV, #crossH, #crossC inside #cross), toast, flash, fallback, magVal, sbarLine, sbarTxt, coords, detTxt, kvTxt, kv, statusTxt, fieldTxt, clock, btnSE, btnBSE, btnScan, btnCap, hint, sSig. Preset elements class .pre with onclick index. Also we need `signalTxt` update on mode: sSig in bottom-right ✓. Edge: `userMoved()` also called on pointerdown — clears preset active on any drag start ✓ and tween cancel ✓. But clicking canvas (no move) also cancels — acceptable. Also `mouse.actT` initial 0 → act stays 0 until mouse moves ✓. Also during acquisition, allow zoom — yes, beam redraws per frame — fine. Draw loop order: compute dt, tween, easing, acq, sweep, mouse world, act lerp, draw, HUD. Also adaptive res check. acq: `const acq=Math.min((tNow-acqStart)/2.4,1)*1.02;` where tNow in seconds same clock as acqStart (set acqStart=t in frame-time base). Keep a module-level `nowSec` updated each frame; rescan sets acqStart=nowSec, but rescan may be called before first frame (init acqStart=0? then (t-0)/2.4 with t=performance-based seconds (t large!) → acq done immediately at load — wrong! Define t as seconds since page load: t=(performance.now()-t0ms)/1000 with t0ms at script start → t starts 0. acqStart=0 ✓. rescan sets acqStart=tCur (module var updated each frame; event handlers use last frame's tCur ✓ fine). u_time = t % 300 ✓. sweep: computed in JS: ```js let sweep=-1; if(acqRaw>=1){ const c=(t*0.105)%1; if(c<0.24) sweep=c/0.24*1.06-0.03; } ``` acqRaw = min((t-acqStart)/2.4,1). statusTxt update when crossing. I think we're ready. Also let me pre-compute preset label strings: p1 '×1\u2009500' etc — hardcode with narrow space char directly in HTML: `×1 500` using ? Just use thin space char " " in text "×1 500" — I'll write with regular narrow no-break space U+202F literal. In HTML fine. Now, potential pitfall: In GLSL, `pow(diff, 1.35)` — diff from dot ≥0 ✓. `exp(-sq((yTop - acq) * u_res.y / 1.8))` acq up to 1.02: yTop-acq ∈ [-1.02, 0.02] → sline near bottom when acq≈1: yTop=1: (1-1.02)=−0.02*H/1.8 ≈ −11 → exp(-128) 0 ✓; but step(acq,0.9995) kills ✓. `fresh` exponent similar fine. Write it. Also remember: html lang="es". Counting done — produce final answer: intro sentence (Spanish, first person), code block, then explanation with features & controls. Keep explanation compact but complete. Voy a convertir esa descripción en algo navegable: una simulación interactiva de un microscopio electrónico de barrido, renderizada íntegramente por GPU. La célula no es una imagen — es geometría procedural (membrana con bordes ondulados, filopodios, núcleo, mitocondrias, retículo endoplásmico, vesículas, microvellosidades y sustrato con nanopartículas) sombreada con la lógica óptica real de un MEB: los bordes brillan, los valles se hunden, y todo en gris monocromo con grano electrónico y línea de barrido. ```html S-650 · MEB — Fibroblasto humano

S-650MEB

DETECTORSE · ET

EHT5,0 kV

WD10,3 mmPRES2,1e-6 mbar

ESCANEO EN CURSOCAMPO 0001

20 µm

MUESTRA · FIBROBLASTO HUMANO HFF-1
GLUTARALDEHÍDO · PTO. CRÍTICO · Au/Pd 4 nm
SEÑAL SE · 1280 × 960 · 80 µs/px

arrastrarmoverruedaampliardoble clicacercarespacionuevo barrido

``` **Cómo está construido** - **La célula es un campo de altura procedural en el fragment shader**: contorno irregular por ruido sobre el ángulo, filopodios (segmentos ondulantes), lamelipodio con volantes de membrana, núcleo en cúpula con surco perinuclear y cromatina, 7 mitocondrias con crestas, retículo endoplásmico serpenteante por dominio deformado, vesículas, y un sustrato con nanopartículas que solo aparecen al ampliar. - **El sombreado imita la física del MEB**: calculo la normal por diferencias finitas y combino orientación frente al "detector" con el efecto de borde (los bordes saturan a blanco, como en las imágenes reales de electrones secundarios), más oclusión en valles, grano temporal y desgarros por línea. - **Zoom con detalle infinito**: cada octava de ruido se atenúa según el tamaño de píxel en micrómetros, así que al ampliar emergen capas nuevas — primero la textura del sustrato, luego las microvellosidades (a ×15 000+ la superficie se resuelve en filosidades), luego las crestas mitocondriales. **Controles**: rueda para ampliar hacia el cursor, arrastrar para mover la platina, doble clic para acercar, pinch en móvil, espacio o el botón para un nuevo barrido (cada adquisición revela una célula distinta), el recorrido 01–04 vuela a puntos de interés, el slider EHT cambia el ruido y el contraste, el toggle SE/BSE altera la respuesta del detector, y "Capturar" descarga un PNG real del encuadre actual. La barra de escala, el aumento y las coordenadas de platina se recalculan en vivo.

Vista de una célula humana mediante microscopio electrónico ...