30:T136e,visualize = { // Initialize the drawing canvas. const context = DOM.context2d(width, height); const twopi = 2*Math.PI; return Object.assign(context.canvas, { update(frame) { // Clear. context.globalAlpha = 1; context.setLineDash([]); context.fillStyle = 'white'; context.fillRect(0, 0, width-1, height-1); // Draw pixel grids superimposed on the sky in red while collecting charge // or gray after digitzation. context.lineWidth = 0.5; const dy = pixelShift[frame]; if(displayOptions.includes("rows")) { for(let irow=0; irow <= nrows; irow++) { // Sky position of irow relative to ymid. let y = rowsize*irow + dy; if(y < 0) { // Row has not shifted onto the sky yet during clear. continue; } else if(y < ymid) { // Row is on sky and collecting charge. context.strokeStyle = 'red'; } else { // Row is digitized so draw it in gray wrapped around. context.strokeStyle = 'gray'; y -= ymid; } context.beginPath(); // Upper sensor. context.moveTo(0, ymid-y); context.lineTo(width, ymid-y); // Lower sensor. context.moveTo(0, ymid+y); context.lineTo(width, ymid+y); context.stroke(); } } // Draw outlines of upper & lower sensor on-sky regions. context.lineWidth = 2; context.strokeStyle = 'green'; context.strokeRect(1, 1, width-2, height-2); context.beginPath(); context.moveTo(0, height/2); context.lineTo(width, height/2); context.strokeStyle = 'green'; context.stroke(); if(displayOptions.includes("source") && trajectory.length) { // Draw an arrow showing on-sky trajectory while charge is being acummulated. const [start,stop] = [trajectory[0],trajectory[trajectory.length-1]]; const [x1,y1] = [start["x"],start["y"]]; const [x2,y2] = [stop["x"], stop["y"]]; const [dx,dy] = [x2-x1,y2-y1]; const angle = Math.atan2(dy,dx); const length = Math.sqrt(dx*dx+dy*dy); context.save(); context.lineWidth = 1; context.beginPath(); context.strokeStyle='blue'; context.setLineDash([2,2]); context.translate(x1,y1); context.rotate(angle); context.moveTo(0,0); context.lineTo(length,0); context.stroke(); context.setLineDash([]); const arrowSize=8; for(const frac of [0.2,0.4,0.6,0.8,1]) { context.beginPath(); context.moveTo(frac*length-arrowSize,-arrowSize); context.lineTo(frac*length,0); context.lineTo(frac*length-arrowSize,+arrowSize); context.stroke(); } context.restore(); // Draw source at its current on-sky location. for(const T of trajectory) { if(T["frame"] == frame) { context.strokeStyle='blue'; context.beginPath(); context.arc(T["x"],T["y"],6,0,twopi); context.stroke(); break; } } } // Draw accumulated charge. if(displayOptions.includes("charge")) { const dotsize=2; context.lineWidth=1; context.globalAlpha=0.25; for(const oldT of trajectory) { const f=oldT['frame']; if(f > frame) break; // charge has not been deposited yet const x=oldT['x']; let y=oldT['y']; if(y= ymid)) continue; // charge not recorded y -= dy; // adjust to location in current frame if(y < 0) { // already read out context.strokeStyle = 'black'; y += ymid; } else if(y < ymid) { // deposited in pixels that are still accumulating on sky context.strokeStyle = 'red'; } else continue; } else { // Charge was deposited in the lower sensor. y -= pixelShift[f]; // location of original deposit if((y < ymid) || (y >= height)) continue; // charge not recorded y += dy; // adjust to location in current frame if(y >= height) { // already read out context.strokeStyle = 'black'; y -= ymid; } else if(y > ymid) { // deposited in pixels that are still accumulating on sky context.strokeStyle = 'red'; } else continue; } context.beginPath(); context.arc(x, y, dotsize, 0, twopi); context.stroke(); } } } }); }31:T6af,md`## Details [DESI](https://desi.lbl.gov) is the Dark Energy Spectroscopic Instrument, which captures most of its data with 5000 robotically positioned optical fibers. However, it also has six small conventional "guiding" cameras around the edge of its field of view. A satellite trail usually appears as a bright straight line across the image but, sometimes these features result in surprising images, as seen in these examples (where the dark blobs are stars and galaxies):

The particular features of these guiding cameras that relevant here are: - The top- and bottom-halves of the CCD sensor are cleared and readout simultaneously, with the upper pixel rows shifting updwards and the lower pixel rows shifting downwards. - An image is recorded in 3 phases, which are indicated next to the "PLAY" slider above: - CLEARING: pixels are shifted out quickly to reset their contents before collecting a new image. - INTEGRATING: pixels collect the light from astronomical sources. - READING: pixels are shifted out quickly again, this time to digitize their values. - The cameras have no shutter, so light is recorded during all 3 phases. During the INTEGRATING phase, the pixel x and y directions correspond directly to positions on the sky. However, during the brief CLEARING and READING phases, the pixel y direction mixes time and vertical position on the sky, leading to kinks in the recorded image of a straight trajectory. When a trail crosses the midline during these phases, the recorded image shows separated lines.`32:[{"id":"d66b545cd57456b0762592bd8cb61722739cec3338a2f95069d0881afeb4c864c0a3ebf8f0c7053dc2762a959256c473740dde22f9884b61ce51b9690c539660","href":"https://static.observableusercontent.com/files/d66b545cd57456b0762592bd8cb61722739cec3338a2f95069d0881afeb4c864c0a3ebf8f0c7053dc2762a959256c473740dde22f9884b61ce51b9690c539660","name":"demo1.jpg","type":"image/jpeg","lastModified":1618673826777.326,"size":17329},{"id":"ecf9efc8a7a6cb261cb30c39b511c75992376f98f1238266a3f037217cf07cb8bafa55b677a7ef1775eab86103ef67f8900e61b4c60d6f89d76efb8b7888fcfe","href":"https://static.observableusercontent.com/files/ecf9efc8a7a6cb261cb30c39b511c75992376f98f1238266a3f037217cf07cb8bafa55b677a7ef1775eab86103ef67f8900e61b4c60d6f89d76efb8b7888fcfe","name":"demo2.jpg","type":"image/jpeg","lastModified":1618673999440.274,"size":51214},{"id":"fe62ee1fe84f69f6cbafa9dda2b655a56992150ba9f957f4d48b57c10178465d6acda0bb43d213869cbb21b1aee4283ab96b1455345daaa6889d713c593722b1","href":"https://static.observableusercontent.com/files/fe62ee1fe84f69f6cbafa9dda2b655a56992150ba9f957f4d48b57c10178465d6acda0bb43d213869cbb21b1aee4283ab96b1455345daaa6889d713c593722b1","name":"demo3.jpg","type":"image/jpeg","lastModified":1618674082440.743,"size":51793}] 2e:{"title":"CCD Trails","cells":[{"id":0,"value":"md`# CCD Trails`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`An interactive visualization of the trails left by satellites in astronomical images recorded by the [DESI](https://desi.lbl.gov) guiding cameras. Experiment with the sliders to change how the satellite passes over the telescope. You can bookmark the current settings using [this URL](${bookmark}). See below for more details.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof frame=Scrubber(arange(nframes), {\n loop: false,\n autoplay: params[\"autoplay\"],\n format: i => phase[i]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof displayOptions = {\n let value=[\"source\",\"rows\",\"charge\"];\n if(\"autoplay\" in params) value.push(\"autoplay\");\n return Checkbox([\"source\",\"rows\",\"charge\",\"autoplay\"],{label:\"Display Options\", value:value});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`Parameters that specify the geometry and timing of the source trajectory. Try varying each one to see how it works.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof enterAt = Range([0,1], {value:params[\"enter\"], step:0.01, label:\"Source entry point along perimeter\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof exitAt = Range([0,1], {value:params[\"exit\"], step:0.01, label:\"Source exit point along the perimeter\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof tenter = Range([-1,1], {value:params[\"initial\"], step:0.01, label:\"Source position when exposure starts\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof texit = Range([0,2], {value:params[\"final\"], step:0.01, label:\"Source position when exposure stops\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`URL for the current settings:
${bookmark}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`Sensor width/height aspect ratio:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"aspect_ratio = 1024 / 516","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`Number of rows to display for visualization:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"nrows = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`Number of parallel-shift cycles used for the initial clear and final readout:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"nread = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`Number of cycles used to integrate charge:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"nintegrate = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`### HTML Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"params = {\n const search=new URLSearchParams(location.search);\n let p = {enter:0, exit:0.5, initial:0, final:1};\n for(const key in p) {\n if(!search.has(key)) continue;\n p[key] = parseFloat(search.get(key));\n }\n p[\"autoplay\"]=search.has(\"autoplay\");\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"bookmark={\n const url=new URL(document.baseURI);\n let search=new URLSearchParams();\n search.set(\"enter\", enterAt.toFixed(4));\n search.set(\"exit\", exitAt.toFixed(4));\n search.set(\"initial\", tenter.toFixed(4));\n search.set(\"final\", texit.toFixed(4));\n if(displayOptions.includes(\"autoplay\")) search.append(\"autoplay\",true);\n url.search=search;\n return url.toString();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`### Geometry`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = Math.round(width / aspect_ratio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"rowsize = height / (2 * nrows)","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"ymid = rowsize*nrows","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`### Timing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"nframes = 2*nread+nintegrate+1","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"vread = 0.5 * height / nread","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"frames = arange(nframes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"phase = Array.from(\n frames, i => {\n if(i k / (nframes - 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"pixelShift = frames.map((f,i) => {\n if(f < nread) return nrows*rowsize*(f/nread - 1);\n f -= nread;\n if(f < nintegrate) return 0;\n f -= nintegrate;\n return nrows*rowsize*f/nread;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`### Source Trajectory`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"perimeterXY = function(s) {\n s = s * 2 * (width + height);\n if(s < width) {\n return [s, 0]; // top edge\n }\n else if(s < width + height) {\n return [width, s-width]; // right edge\n }\n else if(s < 2*width + height) {\n return [2*width+height-s, height];\n }\n else {\n return [0, 2*(width+height)-s];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"trajectory = {\n const [x1,y1] = perimeterXY(enterAt);\n const [x2,y2] = perimeterXY(exitAt);\n const s = time.map(t => (t - tenter)/(texit - tenter));\n const x = s.map(s => x1*(1-s) + x2*s);\n const y = s.map(s => y1*(1-s) + y2*s);\n const inside = Array.from(\n {length:nframes},\n (_,i) => (x[i] >= 0) && (x[i] < width) && (y[i] >= 0) && (y[i] < height)\n );\n //return inside;\n return tidy({frame:frames, x:x, y:y}).filter(({f,x,y})=>(x>=0) && (x=0) && (y