31:T67a,spaceDomain = { let plot = Plot.plot({ marginLeft: 50, marginRight: 15, marginTop: 40, marginBottom: 60, style: { fontSize: 14 }, marks: [ // Axes Plot.ruleX([0, averagePixelValues.length], { stroke: 'gray', strokeWidth: 1 }), Plot.ruleY([0, 255], { stroke: 'gray', strokeWidth: 1 }), // Average pixel values Plot.line(averagePixelValues.map((value, index) => ({ x: index, y: value })), { x: 'x', y: 'y', stroke: 'steelblue' }), Plot.dot(averagePixelValues.map((value, index) => ({ x: index, y: value })), { x: 'x', y: 'y', fill: 'steelblue' }), // Dominant signal using FFT Plot.line(fft_signal.map((value, index) => ({ x: index, y: value })), { x: 'x', y: 'y', stroke: '#777', strokeDasharray: '8, 6', strokeWidth: 1.5 }), // Dominant signal using Goertzel algorithm Plot.line(goertzel_signal.map((value, index) => ({ x: index, y: value })), { x: 'x', y: 'y', stroke: 'black', strokeWidth: 1 }), ], x: { label: 'X Coordinate \n(Rectangular Area)', domain: [0, averagePixelValues.length], }, y: { label: 'Average Pixel Value (8-bit)', domain: [0, 255], nice: false }, width: 600, height: 380 }); // Update font styles for axis labels const updateAxisLabels = (axisLabel) => { d3.select(plot) .selectAll(`g[aria-label='${axisLabel}'] text`) .style("font-weight", "bold") .style("font-size", "14px"); }; updateAxisLabels('x-axis label'); updateAxisLabels('y-axis label'); return plot; } 32:T594,displacement = { frame; const phase_to_amplitude = pattern_pitch_cm / (2 * Math.PI); // A displacement by 2π corresponds to a displacement of pattern_pitch_cm const measurements = phases.map(value => value * phase_to_amplitude); let displacement_graph = Plot.plot({ marginLeft: 50, marginRight: 15, marginTop: 40, marginBottom: 50, style: { fontSize: 14 }, marks: [ Plot.ruleX([0, Math.ceil(measurements.length / 10) * 10], { stroke: 'gray', strokeWidth: 1 }), Plot.ruleY([0, Math.ceil(Math.max(...measurements) / 10) * 10], { stroke: 'gray', strokeWidth: 1 }), Plot.line( measurements.map((phase, i) => ({ x: i, y: phase })), // Mapping indices to x values { x: "x", y: "y", curve: "basis", stroke: "steelblue", strokeWidth: 2 } ), Plot.dot( measurements.map((phase, i) => ({ x: i, y: phase })), { x: "x", y: "y", fill: "steelblue" } ) ], x: { label: "Frame Index" }, y: { label: "Displacement (cm)" }, width: 600, height: 390 }); // Update font styles for axis labels const updateAxisLabels = (axisLabel) => { d3.select(displacement_graph) .selectAll(`g[aria-label='${axisLabel}'] text`) .style("font-weight", "bold") .style("font-size", "15px"); }; updateAxisLabels('x-axis label'); updateAxisLabels('y-axis label'); return displacement_graph; }; 33:T4d9,### Multimedia * YouTube Video **①**: Modern Times: A Sequence with Many Many Gears
➜ The video shows the **frame-by-frame analysis** of the iconic factory scene, with a bonus reveal of a movie mistake. ⚙️ * YouTube Video **②**: Demonstration on a silicon micromotor
➜ This video demonstrates how DFT is used to perform precision motion analysis of a silicon-based linear **stepper micromotor**. * YouTube Video **③**: Push-pull electrostatic microactuator
➜ In this video, the displacements of a **linear microactuator** are measured using DFT image analysis, utilizing 6 µm-pitch micropatterns. * YouTube Video **④**: Tuned Mass Damper: Characterisation using Discrete Fourier Image Analysis * Matlab GUI: Metrology software for MEMS characterization
➜ Matlab original source code and executable file (released in 2010). 34:Tc7e,frameCapture = { // Get the extracted frame from framesMap const extractedFrame = framesMap.get(frame); // Create a 2D context with the specified width and height const context = DOM.context2d(extractedFrame.width, extractedFrame.height); // Draw the extracted frame onto the canvas context.drawImage(extractedFrame, 0, 0, context.canvas.width, context.canvas.height); // Set the fill style for the rectangle (semi-transparent red) context.fillStyle = 'rgba(0, 0, 255, 0.4)'; // Draw the initial rectangle const { topLeft, bottomRight } = rectangleCoordinates; const widthRectangle = bottomRight.x - topLeft.x; const heightRectangle = bottomRight.y - topLeft.y; // Check if width or height is null or zero if (widthRectangle <= 0 || heightRectangle <= 0) { initializeRectangle(); // Call to initialize if necessary // Recalculate after initialization const { topLeft, bottomRight } = rectangleCoordinates; const widthRectangle = bottomRight.x - topLeft.x; const heightRectangle = bottomRight.y - topLeft.y; } // Draw the rectangle context.fillRect(topLeft.x, topLeft.y, widthRectangle, heightRectangle); // Variables to store rectangle coordinates let startX, startY, endX, endY, isDrawing = false; // Function to handle mouse down events context.canvas.addEventListener('mousedown', (event) => { const rect = context.canvas.getBoundingClientRect(); startX = Math.floor(event.clientX - rect.left); startY = Math.floor(event.clientY - rect.top); isDrawing = true; }); // Function to handle mouse move events context.canvas.addEventListener('mousemove', (event) => { if (isDrawing) { context.clearRect(0, 0, context.canvas.width, context.canvas.height); context.drawImage(extractedFrame, 0, 0, context.canvas.width, context.canvas.height); const rect = context.canvas.getBoundingClientRect(); endX = Math.floor(event.clientX - rect.left); endY = Math.floor(event.clientY - rect.top); const widthRectangle = endX - startX; const heightRectangle = endY - startY; context.fillRect(startX, startY, widthRectangle, heightRectangle); } }); // Function to handle mouse up events context.canvas.addEventListener('mouseup', () => { isDrawing = false; // Only update rectangleCoordinates if endX and endY are defined if (endX !== undefined && endY !== undefined) { // Ensure topLeft and bottomRight are correctly assigned const topLeft = { x: Math.min(startX, endX), y: Math.min(startY, endY), }; const bottomRight = { x: Math.max(startX, endX), y: Math.max(startY, endY), }; mutable rectangleCoordinates = { topLeft, bottomRight }; // Redraw the final rectangle after the mouse is released const widthRectangle = bottomRight.x - topLeft.x; const heightRectangle = bottomRight.y - topLeft.y; context.fillRect(topLeft.x, topLeft.y, widthRectangle, heightRectangle); } }); mutable imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height); // Return the canvas element return context.canvas; }; 35:T618,mutable phases = [0,0.568774102555002,2.8822223230519985,4.710002178026331,6.769299754097753,9.280389508886469,11.819513016544388,14.499860956684714,17.35136501826609,20.275926102505643,23.16559999982964,25.639793664363044,27.322496825987553,29.099934915743624,30.967814964765132,31.6976761425699,31.354674444839816,31.103956444396335,30.847675548625887,30.2984034707663,29.441108006626184,28.558373865477673,28.2056859368485,28.154832755752732,28.115575789864533,28.078001799475327,27.956739744889468,27.95725238277737,27.82934413265362,27.57142051441522,27.28052251440875,27.147747894564986,27.089855661210507,27.01252506215684,27.031397450986,27.042548397528318,27.041070212090904,27.040401348064947,26.97071217247543,26.900802269871498,26.948830457948908,26.995681843000643,26.995423593533637,26.99496821191877,26.94050102088218,26.92142712626451,26.929070930099112,26.934274006488,26.899482305203467,26.87945936467925,26.907075690243545,26.911581230795075,26.92068068203276,26.935117053030506,26.940572263972264,26.95116229031009,26.96396412293975,26.949655018491423,26.93133748115264,26.876368561635253,26.77270455441895,26.493230646172954,26.0672431179198,25.640522609328034,25.395080631110087,25.113655217951372,24.848935211810005,24.504972929557805,24.26202264056248,24.06970876847921,23.913930246238298,23.69585430934027,23.454409279148507,23.260536622966473,23.043021636942992,22.794071376238175,22.459867020595617,22.455285498267486,22.254671892797134,22.020230719589094,21.916344326703395,21.922051596812594,21.915496832484685,21.947959324480188]36:Tb8b,// Function adapted from https://observablehq.com/@mbostock/scrubber // Modified for notebook https://observablehq.com/@christophe-yamahata/dft-video-analysis // import {Scrubber} from "@mbostock/scrubber" function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let resetTimeout = null; function start() { form.b.textContent = "Pause"; mutable ScrubberPlay = true; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; mutable ScrubberPlay = false; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = 0; // form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }37:T6a4,// This script is run each time the user clicks on the "Play" button { if (ScrubberPlay === true) { // Scaling factor const phase_to_amplitude = pattern_pitch_cm / (2 * Math.PI); // A displacement by 2π corresponds to a displacement of pattern_pitch_cm // Clear phases at the start if it's the first frame if (frame === 0) { phases.length = 0; // Clear the phases array } // Calculate with Goertzel const goertzel_result = goertzel(signal, Math.round(signal.length / pattern_pitch_px)); let current_phase = -goertzel_result.phase_rad; // Current phase from Goertzel // Unwrap the current phase based on the previous phase if (phases.length > 0) { let prev_phase = phases[phases.length-1]; // Calculate the direct distance and normalized phase let delta = current_phase - prev_phase; // Normalize the delta to be within the range of [-π, π] while (delta > Math.PI) delta -= 2 * Math.PI; while (delta < -Math.PI) delta += 2 * Math.PI; // Update the current phase based on the normalized delta current_phase = prev_phase + delta; // Keep current_phase as close as possible to prev_phase } // Update the phase at the specific frame index phases[phases.length] = current_phase; // Subtract phases[0] from the entire phases array if phases is not empty if (phases.length > 0) { const first_phase = phases[0]; for (let i = 0; i < phases.length; i++) { phases[i] -= first_phase; // Subtract the first phase from each element } } } } 38:T1373,// https://observablehq.com/@severo/extract-a-frame-from-a-video async function fetchExtracterFromVideo(video, options = {}) { // video is an HTMLVideoElement if (!(video instanceof HTMLVideoElement)) { throw new Error('First argument must be an HTMLVideoElement'); } const debug = getDebug(options.debug); const cache = new Map(); const queue = new Queue(); // TODO: use a Set instead of an Array? const dispatch = d3.dispatch('jobdone', 'newjob', 'canvasadded'); let lock = false; // lock, because the current time in the video is a shared resource const setCurrentTimeAndWait = t => { // Note that video.duration might change if the video is a livestream (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event) if (t >= 0 && t <= video.duration) { return new Promise((resolve3, reject3) => { // suscribe to the canvasadded channel dispatch.on('canvasadded.worker', detail => { if (detail.t !== t) { if (Math.abs(detail.t - t) > 0.01) { console.error( `Asked for the frame at time t=${t}, got frame at time t=${detail.t}, which is more than 10ms and should not have happened.` ); } if (debug === true) { console.warn( `Asked for the frame at time t=${t}, got frame at time t=${detail.t} due to browser adjustment. The canvas is also set in the cache to time t=${t}` ); } cache.set(t, cache.get(detail.t)); } dispatch.on('canvasadded.worker', null); resolve3(); }); // Set the video's current time, and wait... // Note: currently, the promise might never resolve, in particular in the case // the video.currentTime is adjusted by the browser to a value different from t // (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime#Usage_notes) video.currentTime = t; }); } else { throw new Error(`Time t must be set between 0 and video.duration`); } }; const processNextJob = async () => { if (!lock) { // lock lock = true; // dequeue const t = queue.dequeue(); if (t !== undefined) { if (!cache.has(t)) { // we should set a race with a timeout Promise to avoid being locked forever // if something goes wrong await setCurrentTimeAndWait(t); } // publish the result dispatch.call("jobdone", null, { t, canvas: cache.get(t) }); } // release the lock lock = false; if (!queue.isEmpty()) { processNextJob(); } } }; // Worker dispatch.on('newjob.worker', detail => { queue.enqueue(detail.t); processNextJob(); }); video.addEventListener('timeupdate', () => { // The following is dangerous. We set the cache key to video.currentTime, but // it's not reliable: // > To offer protection against timing attacks and fingerprinting, browsers may // > round or otherwise adjust the value returned by currentTime. // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime#Usage_notes const t = video.currentTime; if (!cache.has(t)) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); cache.set(t, canvas); } dispatch.call("canvasadded", null, { t }); }); function createExtracter() { return { _video: video, _cache: cache, fetchFrame: t => { const quantizeAndClamp = getQuantizeAndClamp( video.duration, options.timeResolution, options.clamp ); const quantizedT = quantizeAndClamp(t || 0); if (cache.has(quantizedT)) { return cache.get(quantizedT); } else { return new Promise((resolve2, reject2) => { // We want to be sure the listener name is unique! const name = `jobdone.${Date.now()}-${quantizedT}-${Math.random()}`; dispatch.on(name, detail => { if (detail.t === quantizedT) { dispatch.on(name, null); resolve2(detail.canvas); } }); dispatch.call("newjob", null, { t: quantizedT }); }); } // Add a timeout ? } }; } if (video.readyState >= 2) { // already loaded return createExtracter(); } else { // the video is not ready return new Promise(async (resolve, reject) => { video.addEventListener('error', () => { reject(new Error('Could not fetch the video')); }); video.addEventListener('loadeddata', () => resolve(createExtracter())); }); } }39:[{"id":"652a29abc9fd94e111e2e9456cdb38e2757b0e5cb55f3d754d9f4b389b9099191baff8ae6d046dd52c5fe7aad5e99d389fb24ed01ea9a103ea12fcca34d4c56b","href":"https://static.observableusercontent.com/files/652a29abc9fd94e111e2e9456cdb38e2757b0e5cb55f3d754d9f4b389b9099191baff8ae6d046dd52c5fe7aad5e99d389fb24ed01ea9a103ea12fcca34d4c56b","name":"nayuki_fft.js","type":"application/javascript","lastModified":1729865652766.812,"size":7779},{"id":"dec6cfa5aca8b5fb98cebd7021cda5335d850ee0981ce29cfbfc375052faa509930da2d66c4ba6f6c3c3be87143725617b611d2b3b98a1aba153635077498963","href":"https://static.observableusercontent.com/files/dec6cfa5aca8b5fb98cebd7021cda5335d850ee0981ce29cfbfc375052faa509930da2d66c4ba6f6c3c3be87143725617b611d2b3b98a1aba153635077498963","name":"Modern_Times_gear.mp4","type":"video/mp4","lastModified":1729866872092.854,"size":2774968},{"id":"a22f738a431dc51e6b413906ea10c93dc6ced6c774722e6afbb58140224abf567eb50d4c565b4763afeb37d82369ef6b15394a3556e9b6d03465cd95caeb565f","href":"https://static.observableusercontent.com/files/a22f738a431dc51e6b413906ea10c93dc6ced6c774722e6afbb58140224abf567eb50d4c565b4763afeb37d82369ef6b15394a3556e9b6d03465cd95caeb565f","name":"vidvid.js","type":"application/javascript","lastModified":1729870064863.085,"size":1545}] 2f:{"title":"Video with Periodic Pattern: Phase Detection with DFT","cells":[{"id":0,"value":"# Video with Periodic Pattern: Phase Detection with DFT\n## Sample video: **Modern Times** by Charlie Chaplin (Scene with Teethed Gear)","pinned":false,"hidden":false,"mode":"md"},{"id":1016,"value":"The **Discrete Fourier Transform (DFT)** is a mathematical technique that analyzes the frequency components of a discrete signal, transforming it from the time or spatial domain into the frequency domain.\nThe **Fast Fourier Transform (FFT)** is an efficient algorithm for computing the DFT and its inverse, routinely used for real-time signal processing.\n\nIn contrast, the **Goertzel algorithm** efficiently calculates individual DFT terms, making it particularly suitable for applications that require evaluation at specific frequencies, such as analyzing periodic patterns, as demonstrated in the following example.\n\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":506,"value":"🖱️ Using your mouse, click and drag over the image to adjust the rectangular area used for DFT analysis of the video.\nThen, press the “Play” button to perform a real-time measurement.","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"viewof frame = Scrubber(framesMap.keys(), {\n autoplay: false,\n loop: false,\n initial: 20,\n format: (f) => {\n return `${f}`;\n },\n delay: null,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"

\n ${frameCapture}\n

\n ${spaceDomain.cloneNode(true)}\n

\n ${displacement.cloneNode(true)}\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":554,"value":"---\n### Spatial Domain\n\nGiven Charlie Chaplin’s height of 1.65 m, we can estimate that the pitch between the teeth of the gigantic gear is approximately ${pattern_pitch_cm} cm. This spatial period is used for DFT analysis and estimation of the displacements. \n","pinned":false,"hidden":false,"mode":"md"},{"id":1137,"value":"The graph below displays the average pixel values (8-bit grayscale, averaged along the *y*-axis) for the selected rectangular area (${averagePixelValues.length} pixels wide). The dashed curve represents the dominant signal, comprising both the DC component (the average grayscale level) and the sine wave representing the gear teeth, as derived from the FFT. Similarly, the solid black curve represents the dominant signal calculated with the Goertzel algorithm.","pinned":false,"hidden":false,"mode":"md"},{"id":537,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"
\nHere is the input signal used for the calculations discussed hereafter:","pinned":false,"hidden":false,"mode":"md"},{"id":899,"value":"signal = averagePixelValues","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"### FFT Analysis\nDue to the simplicity of the input signal, FFT calculations can be performed quickly. The results are stored in the fft_result object:","pinned":false,"hidden":false,"mode":"md"},{"id":901,"value":"fft_result = {\n const N = signal.length;\n const n = Math.round(N / pattern_pitch_px);\n\n const real = signal.slice();\n const imag = new Array(N).fill(0);\n\n // Perform FFT\n fft.transform(real, imag);\n\n const magnitude = [], amplitude = [], phase_deg = [];\n let specific_phase_rad = null;\n\n for (let k = 0; k < N / 2; k++) {\n const re = real[k];\n const im = imag[k];\n magnitude[k] = Math.sqrt(re * re + im * im);\n amplitude[k] = k === 0 ? magnitude[k] / N : (2 * magnitude[k]) / N;\n phase_deg[k] = Math.atan2(im, re) * (180 / Math.PI);\n }\n\n // Phase unwrapping\n for (let k = 1; k < N / 2; k++) {\n let delta = phase_deg[k] - phase_deg[k - 1];\n if (delta > 180) delta -= 360;\n else if (delta < -180) delta += 360;\n phase_deg[k] = phase_deg[k - 1] + delta;\n\n // Capture the specific phase for n\n if (k === n) specific_phase_rad = phase_deg[k] * (Math.PI / 180);\n }\n\n return { real, imag, magnitude, amplitude, phase_deg, specific_phase_rad, n };\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"From these FFT results, extracting the dominant signal is straightforward (refer to the dashed curve displayed above):","pinned":false,"hidden":false,"mode":"md"},{"id":1083,"value":"fft_signal = {\n const N = signal.length;\n const n = fft_result.n;\n const DC = fft_result.amplitude[0]; // Average grayscale level (DC component)\n const amplitude = fft_result.amplitude[n];\n const phase = fft_result.specific_phase_rad;\n \n const reconstructed_signal = Array.from({ length: N }, (_, i) =>\n DC + amplitude * Math.cos((2 * Math.PI * n / N) * i + phase)\n );\n\n return reconstructed_signal;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"### Goertzel Algorithm\nThe essential information for estimating displacement lies in the phase of the dominant signal. We use the Goertzel algorithm for its efficiency in targeting this specific component. The results are stored in the goertzel_result object:","pinned":false,"hidden":false,"mode":"md"},{"id":1171,"value":"goertzel_result = goertzel(signal, Math.round(signal.length/pattern_pitch_px))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"From the Goertzel algorithm, extracting the dominant signal is straightforward:","pinned":false,"hidden":false,"mode":"md"},{"id":1192,"value":"goertzel_signal = {\n const N = signal.length;\n const n = Math.round(N / pattern_pitch_px);\n const DC = signal.reduce((acc, val) => acc + val, 0) / N; // DC signal level\n const amplitude = goertzel_result.amplitude;\n const phase = goertzel_result.phase_rad;\n\n const reconstructed_signal = Array.from({ length: N }, (_, i) =>\n DC + amplitude * Math.cos((2 * Math.PI * n / N) * i + phase)\n );\n\n return reconstructed_signal;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"As shown in the graph above, while the Goertzel algorithm yields slightly different results from those of the FFT, the overall accuracy remains very close and suitable for our analysis.","pinned":false,"hidden":false,"mode":"md"},{"id":1248,"value":"### Displacement Calculation\nTo calculate the displacement (*i.e.*, horizontal movement), we utilize the phase values obtained from the Goertzel algorithm. The relationship between phase shift and physical distance is directly proportional: for example, a phase shift of 2π corresponds to a displacement of ${pattern_pitch_cm} cm (the pitch of the teeth).\n\nDisplacement for each frame is measured relative to the first frame. \nTo perform a new measurement, please click the “Play” button located next to the video.","pinned":false,"hidden":false,"mode":"md"},{"id":1260,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"---\n## Multimedia and Research References","pinned":false,"hidden":false,"mode":"md"},{"id":1657,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":1764,"value":"### Publications\n* C. Yamahata *et al.*, “Subnanometer Translation of Microelectromechanical Systems Measured by Discrete Fourier Analysis of CCD Images,” *J. Microelectromechanical Systems* **19** (5), October 2010.\n
➜ This paper presents a detailed method for measuring **subpixel displacements** by applying discrete Fourier analysis on images.\n \n* C. Yamahata *et al.*, “Temporally Aliased Video Microscopy: An Undersampling Method for In-Plane Modal Analysis of Microelectromechanical Systems,” *J. Microelectromechanical Systems* **21** (4), August 2012.\n
➜ This papers explores the use of this technique for in-plane **vibration analysis** of resonant systems.","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"src = FileAttachment(\"Modern_Times_gear.mp4\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"frameRate = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"width_frame_cm = 240 ","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"pattern_pitch_cm = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"pattern_pitch_px = pattern_pitch_cm * framesMap.get(frame).width /width_frame_cm","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"mutable rectangleCoordinates = Object({\"topLeft\":{\"x\":0,\"y\":0},\"bottomRight\":{\"x\":0,\"y\":0}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2225,"value":"// Initialize rectangleCoordinates to following default values if the drawn rectangle's dimensions are invalid (null or zero).\nfunction initializeRectangle() {\n mutable rectangleCoordinates = Object({\"topLeft\": {\"x\": 255, \"y\": 180}, \"bottomRight\": {\"x\": 375, \"y\": 225}});\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"mutable imageData = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"averagePixelValues = extractAveragePixelValues(imageData, rectangleCoordinates);","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"function extractAveragePixelValues(imageData, rectangleCoordinates) {\n const { topLeft, bottomRight } = rectangleCoordinates;\n const widthRectangle = bottomRight.x - topLeft.x; \n const heightRectangle = bottomRight.y - topLeft.y; \n\n const sumValues = new Array(widthRectangle).fill(0); \n const pixelCount = new Array(widthRectangle).fill(0); \n\n for (let x = topLeft.x; x < bottomRight.x; x++) {\n for (let y = topLeft.y; y < bottomRight.y; y++) {\n const index = (y * imageData.width + x) * 4;\n\n sumValues[x - topLeft.x] += imageData.data[index]; // Red channel\n sumValues[x - topLeft.x] += imageData.data[index + 1]; // Green channel\n sumValues[x - topLeft.x] += imageData.data[index + 2]; // Blue channel\n pixelCount[x - topLeft.x] += 3; // Count the number of channels\n }\n }\n\n return sumValues.map((sum, x) => pixelCount[x] > 0 ? sum / pixelCount[x] : 0);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1531,"value":"mutable ScrubberPlay = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"### Discrete Fourier Transform","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"// Adapted from https://www.nayuki.io/res/free-small-fft-in-multiple-languages/fft.js\nfft = await import(await FileAttachment(\"nayuki_fft.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"function goertzel(signal, k) {\n const N = signal.length;\n const omega = (2 * Math.PI * k) / N;\n const coeff = 2 * Math.cos(omega);\n\n let q0 = 0, q1 = 0, q2 = 0;\n\n // Process the signal to get the real and imaginary components for the target frequency\n for (let i = 0; i < N; i++) {\n q0 = coeff * q1 - q2 + signal[i];\n q2 = q1;\n q1 = q0;\n }\n\n // Calculate real and imaginary parts\n const realPart = q1 - q2 * Math.cos(omega);\n const imagPart = q2 * Math.sin(omega);\n\n // Calculate magnitude, amplitude, and phase\n const magnitude = Math.sqrt(realPart * realPart + imagPart * imagPart);\n const amplitude = (2 * magnitude) / N;\n const phase_rad = Math.atan2(imagPart, realPart);\n\n return { realPart, imagPart, amplitude, phase_rad };\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"### Video Manipulation and Frame Extraction\n*See https://observablehq.com/@theo-jaunet/from-video-to-frames*\n
The code and functions were selected by Sylvain Lesage and Théo Jaunet in their respective notebooks and are used here without modifications. ","pinned":false,"hidden":false,"mode":"md"},{"id":336,"value":"// https://unpkg.com/vidvid-info@0.1.7/index.js\nvidvid = await import(await FileAttachment(\"vidvid.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"defaults = ({\n crossOrigin: undefined,\n loading: 'lazy',\n timeResolution: 0.001,\n debug: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"disposal = Inputs.disposal","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"eachFrame = async (src, frameRate, limit = -1, start = 0, options = {}) => {\n const debugLabel = `eachFrame on ${JSON.stringify({\n src,\n frameRate,\n limit,\n start,\n options\n })}`;\n if (options.debug) console.time(debugLabel);\n // To gain some time, the duration can be passed in the options\n const duration =\n options.duration === undefined\n ? await vidvid.info(src, options).then(info => info.duration)\n : options.duration;\n const numFrames = limit === -1 ? duration * frameRate - start : limit;\n const framesArray = new Map();\n for (let i = start; i < numFrames; i++) {\n const t = i / frameRate;\n framesArray.set(i, await frameAt(src, t, options));\n }\n if (options.debug) console.timeEnd(debugLabel);\n return framesArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"// https://observablehq.com/@severo/extract-a-frame-from-a-video\nasync function fetchExtracter(videoUrl, options = {}) {\n const video = document.createElement(\"video\");\n const src = await fetchSrc(videoUrl, {\n loading: options.loading,\n crossOrigin: options.crossOrigin,\n invalidation: disposal(video)\n });\n video.crossOrigin = getCrossOrigin(options.crossOrigin);\n video.src = src;\n return await fetchExtracterFromVideo(video, options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"fetchSrc = async (\n videoUrl,\n {\n invalidation,\n loading = defaults.loading,\n crossOrigin = defaults.crossOrigin\n }\n) => {\n if (loading !== \"eager\") return videoUrl;\n\n // fetch the video file in CORS mode,\n const mode = 'cors';\n const credentials =\n crossOrigin === \"use-credentials\" ? 'include' : 'same-origin';\n\n let response;\n // it might fail if the server does not allow the origin\n try {\n response = await fetch(videoUrl, { credentials, mode });\n } catch (e) {\n console.warn(\n `Could not fetch the video for ${videoUrl}. Falling back to lazy loading.`\n );\n return videoUrl;\n }\n const blob = await response.blob();\n const url = URL.createObjectURL(blob);\n invalidation.then(() => URL.revokeObjectURL(url));\n return url;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"// https://observablehq.com/@severo/frameat\nframeAt = {\n const getExtracterKey = (videoOrSrc, options) =>\n JSON.stringify({ videoOrSrc, options });\n \n // The extracters are Promises\n const extracters = new Map();\n \n return async (videoOrSrc, t, options = {}) => {\n const key = getExtracterKey(videoOrSrc, options);\n \n if (!extracters.has(key)) {\n if (videoOrSrc instanceof HTMLVideoElement) {\n extracters.set(key, fetchExtracterFromVideo(videoOrSrc, options));\n } else {\n extracters.set(key, fetchExtracter(videoOrSrc, options));\n }\n }\n \n const extracter = extracters.get(key);\n return extracter.then(e => e.fetchFrame(t, options));\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"framesMap = eachFrame(src, frameRate, -1, 0, {\n crossOrigin: 'anonymous',\n debug: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"getCrossOrigin = (crossOrigin = defaults.crossOrigin) => {\n return crossOrigin;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"getDebug = (debug = defaults.debug) => debug","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"getQuantizeAndClamp = (\n duration,\n timeResolution = defaults.timeResolution,\n clamp = true\n) => {\n return t => {\n if (clamp !== true && (t > duration || t < 0)) {\n throw new Error(`t=${t} is out of video bounds [0, ${duration}]`);\n }\n const roundedT = Math.round(t / timeResolution) * timeResolution;\n return roundedT > duration ? duration : roundedT < 0 ? 0 : roundedT;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"class Queue {\n // Using an Array for a queue is surely not optimal, but it's OK for our use case, since the queue operations will be a lot quicker than the video's ones\n constructor() {\n this.q = [];\n }\n enqueue(item) {\n this.q.push(item);\n }\n dequeue() {\n return this.q.shift();\n }\n peek() {\n return this.q[this.q.length - 1];\n }\n getLength() {\n return this.q.length;\n }\n isEmpty() {\n return this.q.length === 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}