2d:null 2e:["$","title",null,{"children":"S/TEM Ray Diagrams | Georgios Varnavides | Observable"}] 33:T1804,viewof rayDiagram = { const condenser01 = Inputs.range([0.025, 0.5], { value: 0.11, step: 0.005, label: "C1 focal length" }); const condenser02 = Inputs.range([0.025, 0.5], { value: 0.21, step: 0.005, label: "C2 focal length" }); const aperture01 = Inputs.range([0.025, 0.2], { value: 0.05, step: 0.005, label: "C2 aperture" }); const condenser03 = Inputs.range([0.025, 1.0], { value: preset[0] == "T" ? 0.07 : 1.0, step: 0.005, label: "C3 focal length" }); const objective01 = Inputs.range([0.025, 0.5], { value: 0.15, step: 0.005, label: "pre objective" }); const objective02 = Inputs.range([0.025, 0.5], { value: 0.15, step: 0.005, label: "post objective" }); const aperture02 = Inputs.range([0.005, 0.2], { value: preset[0] == "T" ? 0.01 : 0.15, step: 0.005, label: "obj aperture" }); const intermediate = Inputs.range([0.025, 0.5], { value: preset[0] == "B" ? 0.295 : preset[4] == "d" ? 0.26 : 0.16, step: 0.005, label: "int. focal length" }); const proj = Inputs.range([0.025, 0.5], { value: 0.165, step: 0.005, label: "proj. focal length" }); const plotDiv = htl.html`

`; const plotHeight = 750, plotMarginTop = 10, plotMarginBottom = 10; const zStart = 0, zEnd = 4.3; const zToY = (z) => plotMarginTop + ((z - zStart) / (zEnd - zStart)) * (plotHeight - plotMarginTop - plotMarginBottom); const positions = { condenser01: 0.35, condenser02: 0.85, aperture01: 1.0, condenser03: 1.55, objective01: 1.83, objective02: 2.28, aperture02: 2.5, intermediate: 2.96, proj: 3.7 }; const allInputs = [ condenser01, condenser02, aperture01, condenser03, objective01, objective02, aperture02, intermediate, proj ]; const keys = Object.keys(positions); const BREAKPOINT = 550; const wide = viz_width >= BREAKPOINT; let form; if (wide) { allInputs.forEach((el, i) => { el.style.position = "absolute"; el.style.top = `${zToY(positions[keys[i]]) - 16}px`; el.style.width = "275px"; }); const inputColumn = htl.html`

${allInputs}

`; form = htl.html`

${inputColumn}${plotDiv}

`; } else { const inputColumn = htl.html`

${allInputs}

`; form = htl.html`

${inputColumn}${plotDiv}

`; } const update = () => { form.value = { condenser01: condenser01.value, condenser02: condenser02.value, aperture01: aperture01.value, condenser03: condenser03.value, objective01: objective01.value, objective02: objective02.value, aperture02: aperture02.value, intermediate: intermediate.value, proj: proj.value }; const components = electroOpticalComponents( [ condenser01.value, condenser02.value, condenser03.value, objective01.value, objective02.value, intermediate.value, proj.value ], [aperture01.value, aperture02.value] ); const rays = traceRays(components, 0, zEnd, 0.15, 256); const lines = rays.flatMap((traj, i) => traj.map(({ z, r }) => ({ z, r, ray: i })) ); const lensMarks = components .filter((c) => c.type === "lens") .map((c) => Plot.marks( Plot.ruleY([c.axial_position], { x1: -0.18, x2: 0.18, strokeWidth: 1, strokeOpacity: 0.5 }), Plot.line( Array.from({ length: 61 }, (_, i) => { const t = (i / 60) * 2 * Math.PI; return { x: 0.18 * Math.cos(t), y: c.axial_position + 0.018 * Math.sin(t) }; }), { x: "x", y: "y", strokeWidth: 1.5, fillOpacity: 0.1 } ) ) ); const apertureMarks = components .filter((c) => c.type === "aperture") .flatMap((c) => [ Plot.rect([c], { x1: () => -0.2, x2: (d) => -d.aperture_radius, y1: (d) => d.axial_position - 0.005, y2: (d) => d.axial_position + 0.005, fill: "#aaa" }), Plot.rect([c], { x1: (d) => d.aperture_radius, x2: () => 0.2, y1: (d) => d.axial_position - 0.005, y2: (d) => d.axial_position + 0.005, fill: "#aaa" }) ]); const sampleMark = Plot.rect( components.filter((c) => c.type === "sample"), { x1: -0.1, x2: 0.1, y1: (d) => d.axial_position - 0.005, y2: (d) => d.axial_position + 0.005 } ); const detectorMark = Plot.rect( components.filter((c) => c.type === "detector"), { x1: -0.25, x2: 0.25, y1: (d) => d.axial_position - 0.005, y2: (d) => d.axial_position + 0.005 } ); plotDiv.innerHTML = ""; plotDiv.append( Plot.plot({ width: 275, height: plotHeight, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0, x: { domain: [-0.25, 0.25], axis: null }, y: { domain: [zStart - 0.05, zEnd + 0.05], reverse: true, axis: null }, marks: [ Plot.line(lines, { x: "r", y: "z", z: "ray", stroke: "rgba(0,140,0,0.35)", strokeWidth: 0.8 }), ...lensMarks, ...apertureMarks, sampleMark, detectorMark ] }) ); form.dispatchEvent(new Event("input", { bubbles: true })); }; allInputs.forEach((el) => el.addEventListener("input", update)); update(); return form; }34:T4a1,electroOpticalComponents = ([f1, f2, f3, f4, f5, f6, f7], [ap1, ap2]) => [ { type: "lens", name: "1st condenser lens", axial_position: 0.35, focal_length: f1 }, { type: "lens", name: "2nd condenser lens", axial_position: 0.85, focal_length: f2 }, { type: "aperture", name: "C2 aperture", axial_position: 1.0, aperture_radius: ap1 }, { type: "lens", name: "3rd condenser lens", axial_position: 1.55, focal_length: f3 }, { type: "lens", name: "objective lens pre-field", axial_position: 1.83, focal_length: f4 }, { type: "sample", name: "sample", axial_position: (2.28 + 1.83) / 2 }, { type: "lens", name: "objective lens post-field", axial_position: 2.28, focal_length: f5 }, { type: "aperture", name: "objective aperture", axial_position: 2.28 + f5, aperture_radius: ap2 }, { type: "lens", name: "intermediate lens", axial_position: 2.96, focal_length: f6 }, { type: "lens", name: "projector lens", axial_position: 3.7, focal_length: f7 }, { type: "detector", name: "detector", axial_position: 4.3 } ]35:[] 31:{"id":"78b31822e6532060","slug":"stem-ray-diagrams","title":"S/TEM Ray Diagrams","thumbnail":"d2d673ec74653ecab33a1d7bfa352b765f9cc965be13a5f8b4bfe8ec589dcf24","access_level":"public","create_time":"$D2026-03-11T16:03:23.446Z","update_time":"$D2026-03-12T09:44:15.478Z","view_time":null,"first_public_time":"$D2026-03-11T16:03:23.446Z","has_unpublished_edits":null,"fork":{"id":"2702eefeaf19dc23","slug":"ray-diagrams","title":"Ray Diagrams","owner":{"id":"69c521ca096fbf54","login":"gvarnavi","name":"Georgios Varnavides"}},"stars":0,"starred":false,"owner":{"type":"team","id":"69c521ca096fbf54","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/57bb5cf1c4a2d1352d2dcf9f07e535f6e39eb182bbe2295099a4f46fdde5f613","tier":"starter_2024"},"version":210,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6649dc029d167559","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/4c6924e984dc3d1f89f81dee4e6fc0ca3ab63880a01338b6b6f64d28bc7321e5","tier":null}],"members":[{"type":"individual","id":"6649dc029d167559","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/4c6924e984dc3d1f89f81dee4e6fc0ca3ab63880a01338b6b6f64d28bc7321e5","tier":null,"role":"editor"},{"type":"team","id":"69c521ca096fbf54","login":"gvarnavi","name":"Georgios Varnavides","avatar_url":"https://avatars-next.observableusercontent.com/57bb5cf1c4a2d1352d2dcf9f07e535f6e39eb182bbe2295099a4f46fdde5f613","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"S/TEM Ray Diagrams","cells":[{"id":0,"value":"# S/TEM Ray Diagrams\n\nInspired by https://www.epfl.ch/labs/lsme/tem-ray-diagrams/, which are licensed as:\n> TEM Ray Diagrams @ 2025 by Duncan T.L. Alexander are licensed under CC-BY 4.0.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"viewof preset = Inputs.radio([\"TEM imaging\", \"TEM diffraction\", \"BF STEM\"], {\n label: \"Preset modes\",\n value: \"TEM imaging\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"---\n### Imports / Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"viz_width = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"transferMatrix = ({\n propagation: (d) => [\n [1, d],\n [0, 1]\n ],\n lens: (f) => [\n [1, 0],\n [-1 / f, 1]\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"applyTransferMatrix = (M, ray) => [\n M[0][0] * ray[0] + M[0][1] * ray[1],\n M[1][0] * ray[0] + M[1][1] * ray[1]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"postprocessOpticalSequence = (components, zStart, zEnd) => {\n const sorted = [...components].sort(\n (a, b) => a.axial_position - b.axial_position\n );\n const seq = [];\n let zPrev = zStart;\n for (const comp of sorted) {\n if (comp.axial_position > zPrev) {\n seq.push({ type: \"propagation\", dz: comp.axial_position - zPrev });\n }\n seq.push(comp);\n zPrev = comp.axial_position;\n }\n if (zPrev < zEnd) seq.push({ type: \"propagation\", dz: zEnd - zPrev });\n return seq;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"traceRaySequence = (ray0, sequence) => {\n let ray = [...ray0];\n let z = 0;\n const traj = [{ z, r: ray[0] }];\n\n for (const elem of sequence) {\n switch (elem.type) {\n case \"propagation\":\n z += elem.dz;\n ray = applyTransferMatrix(transferMatrix.propagation(elem.dz), ray);\n traj.push({ z, r: ray[0] });\n break;\n case \"lens\":\n ray = applyTransferMatrix(transferMatrix.lens(elem.focal_length), ray);\n traj.push({ z, r: ray[0] });\n break;\n case \"aperture\":\n if (Math.abs(ray[0]) > elem.aperture_radius) return traj; // blocked\n break;\n }\n }\n return traj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"traceRays = (components, zStart, zEnd, semiangle, numRays = 128) => {\n const seq = postprocessOpticalSequence(components, zStart, zEnd);\n const angles = Array.from(\n { length: numRays + 1 },\n (_, i) => -semiangle + (2 * semiangle * i) / numRays\n );\n return angles.map((alpha) => traceRaySequence([0, Math.tan(alpha)], seq));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"