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; }