2d:null 2e:["$","title",null,{"children":"Ray Diagrams | Georgios Varnavides | Observable"}] 33:T12f6,viewof rayDiagram = { const condenser01 = Inputs.range([0.025, 0.5], { value: 0.05, step: 0.005, label: "C1 focal length" }); const aperture01 = Inputs.range([0.025, 0.2], { value: 0.05, step: 0.005, label: "spray aperture" }); const condenser02 = Inputs.range([0.025, 0.5], { value: 0.15, step: 0.005, label: "C2 focal length" }); const aperture02 = Inputs.range([0.025, 0.2], { value: 0.05, step: 0.005, label: "obj aperture" }); const objective = Inputs.range([0.025, 0.5], { value: 0.35, step: 0.005, label: "obj focal length" }); const plotDiv = htl.html`

`; const plotHeight = 550, plotMarginTop = 10, plotMarginBottom = 10; const zStart = 0, zEnd = 1.7; const zToY = (z) => plotMarginTop + ((z - zStart) / (zEnd - zStart)) * (plotHeight - plotMarginTop - plotMarginBottom); const positions = { condenser01: 0.225, aperture01: 0.5125, condenser02: 0.7125, aperture02: 1.2, objective: 1.3 }; const allInputs = [ condenser01, aperture01, condenser02, aperture02, objective ]; 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, aperture01: aperture01.value, condenser02: condenser02.value, aperture02: aperture02.value, objective: objective.value }; const components = electroOpticalComponents( [condenser01.value, condenser02.value, objective.value], [aperture01.value, aperture02.value] ); const rays = traceRays(components, 0, 1.7, 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 } ); plotDiv.innerHTML = ""; plotDiv.append( Plot.plot({ width: 275, height: 550, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0, x: { domain: [-0.25, 0.25], axis: null }, y: { domain: [-0.05, 1.75], 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 ] }) ); form.dispatchEvent(new Event("input", { bubbles: true })); }; allInputs.forEach((el) => el.addEventListener("input", update)); update(); return form; }34:[] 31:{"id":"2702eefeaf19dc23","slug":"ray-diagrams","title":"Ray Diagrams","thumbnail":"69e314385b78359ce795f16c61a9fc73312ce85ed3f789b5758284f31a91d7c0","access_level":"public","create_time":"$D2026-03-01T18:48:29.326Z","update_time":"$D2026-09-08T12:10:12.917Z","view_time":null,"first_public_time":"$D2026-03-01T18:48:29.326Z","has_unpublished_edits":null,"fork":false,"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":144,"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":3,"collection":{"id":"6db7434308c8dfb6","slug":"curious-beams-lab","title":"Curious-Beams-Lab","owner":{"id":"69c521ca096fbf54","login":"gvarnavi","name":"Georgios Varnavides"}},"type":"notebook","body":{"title":"Ray Diagrams","cells":[{"id":0,"value":"# Ray Diagrams","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"electroOpticalComponents = ([f1, f2, f3], [ap1, ap2]) => [\n {\n type: \"lens\",\n name: \"1st condenser lens\",\n axial_position: 0.2,\n focal_length: f1\n },\n {\n type: \"aperture\",\n name: \"spray aperture\",\n axial_position: 0.5,\n aperture_radius: ap1\n },\n {\n type: \"lens\",\n name: \"2nd condenser lens\",\n axial_position: 0.7,\n focal_length: f2\n },\n {\n type: \"aperture\",\n name: \"objective aperture\",\n axial_position: 1.2,\n aperture_radius: ap2\n },\n {\n type: \"lens\",\n name: \"objective lens\",\n axial_position: 1.3,\n focal_length: f3\n },\n { type: \"sample\", name: \"sample\", axial_position: 1.5 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"