2b:null 2c:["$","title",null,{"children":"Séries de Fourier | rdevooght | Observable"}] 31:T13d1,function Drawer({ width = 640, height = 480, curve: Curve = d3.curveBasis, stroke = "black", strokeWidth = 1.5, lineCap = "round", lineJoin = "round", multipleStrokes = false, xDomain = [0, 10], yDomain = [0, 10], margin = { top: 40, right: 40, bottom: 40, left: 40 } } = {}) { // Create container div const container = document.createElement("div"); container.style.position = "relative"; container.style.width = width + "px"; container.style.height = height + "px"; // Create SVG element const svg = d3 .select(container) .append("svg") .attr("width", width) .attr("height", height) .style("position", "absolute") .style("top", "0") .style("left", "0"); // Create Canvas element const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; canvas.style.position = "absolute"; canvas.style.top = "0"; canvas.style.left = "0"; container.appendChild(canvas); const context = canvas.getContext("2d"); const strokes = (canvas.value = []); const curve = Curve(context); const redo = []; // Set up scales const xScale = d3 .scaleLinear() .domain(xDomain) .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain(yDomain) .range([height - margin.bottom, margin.top]); // Create and add axes const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); // Add axes groups to SVG svg .append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); // Add grid lines (optional) svg .append("g") .attr("class", "grid") .attr("transform", `translate(0,${height - margin.bottom})`) .style("stroke-dasharray", "2,2") .style("opacity", 0.2) .call(xAxis.tickSize(-height + margin.top + margin.bottom).tickFormat("")); svg .append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .style("stroke-dasharray", "2,2") .style("opacity", 0.2) .call(yAxis.tickSize(-width + margin.left + margin.right).tickFormat("")); // add marks svg.append("g").attr("class", "marks"); container.drawMarks = function (marks) { svg .select("g.marks") .selectAll("line") .data(marks) .join("line") .attr("x1", (x) => xScale(x)) .attr("y1", margin.top) .attr("x2", (x) => xScale(x)) .attr("y2", height - margin.bottom) .style("stroke", "red") .style("stroke-width", 2) .style("stroke-dasharray", "5,5"); }; context.lineJoin = lineJoin; context.lineCap = lineCap; function render() { context.clearRect(0, 0, width, height); // Draw clipping area for the drawing region context.save(); context.beginPath(); context.rect( margin.left, margin.top, width - margin.left - margin.right, height - margin.top - margin.bottom ); context.clip(); for (const stroke of strokes) { context.strokeStyle = stroke.stroke; context.lineWidth = stroke.strokeWidth; context.beginPath(); curve.lineStart(); for (const point of stroke) { const scaledX = xScale(point[0]); const scaledY = yScale(point[1]); curve.point(scaledX, scaledY); } if (stroke.length === 1) { const scaledPoint = [xScale(stroke[0][0]), yScale(stroke[0][1])]; curve.point(...scaledPoint); } curve.lineEnd(); context.stroke(); } context.restore(); canvas.value = strokes; canvas.dispatchEvent(new CustomEvent("input")); } d3.select(canvas).call( d3 .drag() .container(canvas) .subject(dragsubject) .on("start drag", dragged) .on("start.render drag.render", render) ); canvas.undo = () => { if (strokes.length === 0) return; redo.push(strokes.pop()); render(); }; canvas.redo = () => { if (redo.length === 0) return; strokes.push(redo.pop()); render(); }; function dragsubject() { const currentStroke = []; currentStroke.stroke = typeof stroke === "function" ? stroke() : stroke; currentStroke.strokeWidth = typeof strokeWidth === "function" ? strokeWidth() : strokeWidth; if (!multipleStrokes) { strokes.pop(); } strokes.push(currentStroke); redo.length = 0; return currentStroke; } function dragged({ subject, x, y }) { // Only add points if within the drawing area if ( x >= margin.left && x <= width - margin.right && y >= margin.top && y <= height - margin.bottom ) { const domainX = xScale.invert(x); const domainY = yScale.invert(y); subject.push([domainX, domainY]); } } // Add methods to the container container.undo = canvas.undo; container.redo = canvas.redo; container.value = canvas.value; return container; }32:T5cd,function integrate(points, a, b) { const cleanedPoints = clean_curve(points); if (cleanedPoints.length < 2) return null; // Find segments that contain a and b let startIdx = 0; while (startIdx < cleanedPoints.length - 1 && cleanedPoints[startIdx + 1][0] < a) startIdx++; let endIdx = cleanedPoints.length - 1; while (endIdx > 0 && cleanedPoints[endIdx - 1][0] > b) endIdx--; if (startIdx >= endIdx) return null; let integral = 0; // Handle first segment with interpolation at a const firstX = Math.max(a, cleanedPoints[startIdx][0]); const lastX = Math.min(b, cleanedPoints[endIdx][0]); for (let i = startIdx; i < endIdx; i++) { const x1 = i === startIdx ? firstX : cleanedPoints[i][0]; const x2 = i === endIdx - 1 ? lastX : cleanedPoints[i + 1][0]; let y1 = cleanedPoints[i][1]; let y2 = cleanedPoints[i + 1][1]; if (i === startIdx && x1 > cleanedPoints[i][0]) { y1 = interpolate(x1, cleanedPoints[i][0], cleanedPoints[i][1], cleanedPoints[i + 1][0], cleanedPoints[i + 1][1]); } if (i === endIdx - 1 && x2 < cleanedPoints[i + 1][0]) { y2 = interpolate(x2, cleanedPoints[i][0], cleanedPoints[i][1], cleanedPoints[i + 1][0], cleanedPoints[i + 1][1]); } integral += ((x2 - x1) * (y1 + y2)) / 2; } return integral; }33:[] 2f:{"id":"b6f861b86a77c960","slug":"series-de-fourier","title":"Séries de Fourier","thumbnail":"afc288eb967712c111d7457be4bba96e9bcc63d1091b0ea4868666849fd7f552","access_level":"public","create_time":"$D2025-02-06T09:36:09.798Z","update_time":"$D2025-12-30T17:18:03.199Z","view_time":null,"first_public_time":"$D2025-02-07T13:35:14.522Z","fork":{"id":"c36363a3d71a4530","slug":"draw-me","title":"Draw Me","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"08edfe4fc9c48058","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":"starter_2024"},"version":437,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b57291a859dc84da","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":null}],"members":[{"type":"team","id":"08edfe4fc9c48058","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b57291a859dc84da","login":"rdevooght","name":"","avatar_url":"https://avatars-next.observableusercontent.com/84eeb55c51a715de2358854408e42b23748bf474ec7b5e8dfe59fa94b4976d6b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Séries de Fourier","cells":[{"id":31,"value":"# Séries de Fourier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":381,"value":"## Calculer la série de fourier d'une fonction tracée à la main","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":196,"value":"viewof params = inputsGroup(\n [\n [\n slider({\n title: \"a\",\n description: \"début du domaine\",\n value: 2,\n max: 10\n }),\n slider({ title: \"b\", description: \"fin du domaine\", value: 8, max: 10 })\n ]\n ],\n\n [[\"a\", \"b\"]]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"Trace une fonction dans le graphique ci-dessous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":145,"value":"viewof strokes = Drawer({\n width,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"viewof max_k = slider({\n min: 0,\n max: 50,\n step: 1,\n value: 3,\n title: \"Nombre de termes dans la série de Fourier\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"draw_fourier_approx(coefs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"html`${tex`\\frac{${coefs.a0.toFixed(2)}}{2}`} ${coefs.ak.map(\n (c) =>\n html`${c > 0 ? tex`+` : \"\"} ${tex`${c.toFixed(\n 3\n )} \\cos\\left(\\frac{2k\\pi (x-${params.a})}{${params.b - params.a}}\\right)`}`\n)} ${coefs.bk.map(\n (c) =>\n html`${c > 0 ? tex`+` : \"\"} ${tex`${c.toFixed(\n 3\n )} \\sin\\left(\\frac{2k\\pi (x-${params.a})}{${params.b - params.a}}\\right)`}`\n)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"

Terme constant

\n${draw_fourier_terms('a0')}\n

Cosinus

\n${draw_fourier_terms('ak')}\n

Sinus

\n${draw_fourier_terms('bk')}\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":383,"value":"## Tracer les premiers termes d'une série de Fourier sur base des coefficients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":423,"value":"T = 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"a0 = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"ak = (k) => {\n if (k % 2 == 0) {\n return 0;\n } else {\n if ((k - 1) % 4 == 0) {\n return (8 / k / Math.PI) * (1 - 2 / k / Math.PI);\n } else {\n return (8 / k / Math.PI) * (-1 - 2 / k / Math.PI);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"bk = (k) => 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"### Valeurs des premiers coefficients\n\n${[1,2,3,4,5].map(k => tex`a_${k} = ${ak(k)}\\\\`)}\n\n${[1,2,3,4,5].map(k => tex`b_${k} = ${bk(k)}\\\\`)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":409,"value":"viewof max_n = slider({\n min: 0,\n max: 50,\n step: 1,\n value: 0,\n title: \"Nombre de termes dans la série de Fourier\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"draw_fourier_approx(coefs_values, { yDomain: [-3, 5] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"coefs_values = {\n let coefs = {\n a0: a0,\n ak: [],\n bk: [],\n domain: [0, T],\n };\n\n for (let k = 1; k <= max_n; k++) {\n coefs.ak.push(ak(k));\n coefs.bk.push(bk(k));\n }\n return coefs;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"## functions and imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"undo = {\n const keydowned = event => {\n if (event.keyCode === 90 && event.metaKey && !event.altKey) {\n if (event.shiftKey) viewof strokes.redo();\n else viewof strokes.undo();\n event.preventDefault();\n }\n };\n const form = html``;\n form.redo.onclick = () => viewof strokes.redo();\n form.undo.onclick = () => viewof strokes.undo();\n addEventListener(\"keydown\", keydowned);\n invalidation.then(() => removeEventListener(\"keydown\", keydowned));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"coefs = compute_fourier_coef(strokes[0], params.a, params.b, max_k)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"viewof strokes.drawMarks([params.a, params.b])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"strokes // It’s a view!","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"function clean_curve(points) {\n if (points.length === 0) return [];\n \n const cleaned = [points[0]];\n let maxX = points[0][0];\n \n for (let i = 1; i < points.length; i++) {\n if (points[i][0] > maxX) {\n cleaned.push(points[i]);\n maxX = points[i][0];\n }\n }\n \n return cleaned;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"function interpolate(x, x1, y1, x2, y2) {\n return y1 + ((x - x1) * (y2 - y1)) / (x2 - x1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"function compute_a0(curve, a, b) {\n return integrate(curve, a, b) * 2 / (b-a)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"function oversample(points, a, b, k) {\n // Ensure we have enough points for accurate integration\n const minPointsPerPeriod = 10;\n const period = (b - a) / (2 * k); // for highest frequency\n const desiredN = Math.ceil(((b - a) / period) * minPointsPerPeriod);\n\n // If we don't have enough points, interpolate\n if (points.length < desiredN) {\n const interpolatedPoints = [];\n let j = 0;\n for (let i = 0; i < desiredN; i++) {\n const x = a + ((b - a) * i) / (desiredN - 1);\n // find the point following x in the original data\n while (points[j][0] < x) {\n j++;\n }\n // interpolate between the original points, at value x\n const y =\n points[j - 1][1] +\n ((x - points[j - 1][0]) * (points[j][1] - points[j - 1][1])) /\n (points[j][0] - points[j - 1][0]);\n interpolatedPoints.push([x, y]);\n }\n return interpolatedPoints;\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"function compute_ak(curve, a, b, k) {\n const oversampled_curve = oversample(curve, a, b, k);\n let product_curve = oversampled_curve.map((p) => [\n p[0],\n p[1] * Math.cos((2 * k * Math.PI * (p[0] - a)) / (b - a))\n ]);\n return (integrate(product_curve, a, b) * 2) / (b - a);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"function compute_bk(curve, a, b, k) {\n const oversampled_curve = oversample(curve, a, b, k);\n let product_curve = oversampled_curve.map((p) => [\n p[0],\n p[1] * Math.sin((2 * k * Math.PI * (p[0] - a)) / (b - a))\n ]);\n return (integrate(product_curve, a, b) * 2) / (b - a);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"function compute_fourier_coef(curve, a, b, max_k) {\n let coefs = {\n a0: compute_a0(curve, a, b),\n ak: [],\n bk: [],\n domain: [a, b],\n };\n\n for (let k = 1; k <= max_k; k++) {\n coefs.ak.push(compute_ak(curve, a, b, k));\n coefs.bk.push(compute_bk(curve, a, b, k));\n }\n return coefs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"function fourier_approx(coefs) {\n const max_k = coefs.ak.length;\n const T = coefs.domain[1] - coefs.domain[0];\n const a = coefs.domain[0];\n let f = function (x) {\n let y = coefs.a0 / 2;\n for (let k = 1; k <= max_k; k++) {\n y += coefs.ak[k - 1] * Math.cos((2 * k * Math.PI * (x - a)) / T);\n y += coefs.bk[k - 1] * Math.sin((2 * k * Math.PI * (x - a)) / T);\n }\n return y;\n };\n return f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"function draw(func, { h = null, xDomain = [-1, 1], yDomain = null } = {}) {\n // The function that we are sampling is sin(a * x), where the symbol a\n // refers to the valu of the slider below.\n let samples = build_samples(func, xDomain[0], xDomain[1], {\n N: 200,\n max_depth: 7\n });\n let w = width;\n if (h == null) {\n h = w * 0.4;\n }\n if (yDomain == null) {\n yDomain = d3.extent(samples.map((x) => x[1]));\n }\n\n let plot = Plot.plot({\n y: { domain: yDomain },\n width: w,\n height: h,\n marks: [\n Plot.line(samples, {\n strokeWidth: 3,\n stroke: \"steelblue\"\n }),\n Plot.ruleX([0]),\n Plot.ruleY([0]),\n Plot.axisX({ y: 0 }),\n Plot.axisY({ x: 0 })\n ]\n });\n\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"function draw_fourier_approx(\n coefs,\n { xDomain = [0, 10], yDomain = [0, 10] } = {}\n) {\n let f = fourier_approx(coefs);\n return draw(f, { xDomain, yDomain });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"function draw_fourier_terms(terms) {\n const a = coefs.domain[0];\n const b = coefs.domain[1];\n const T = b - a;\n let data = [];\n const sampler = (f) =>\n build_samples(f, 0, 10, {\n N: 200,\n max_depth: 7\n });\n if (terms == \"a0\") {\n data = [sampler((x) => coefs.a0)];\n } else if (terms == \"ak\") {\n data = coefs.ak.map((c, i) =>\n sampler((x) => c * Math.cos((2 * (i + 1) * Math.PI * (x - a)) / T))\n );\n } else if (terms == \"bk\") {\n data = coefs.bk.map((c, i) =>\n sampler((x) => c * Math.sin((2 * (i + 1) * Math.PI * (x - a)) / T))\n );\n }\n\n let plot_options = {\n y: { domain: terms == \"a0\" ? [0, coefs.a0 * 1.5] : [-1, 1] },\n width: width,\n height: 300,\n marks: [\n Plot.ruleX([0]),\n Plot.ruleY([0]),\n Plot.axisX({ y: 0 }),\n Plot.axisY({ x: 0 })\n ]\n };\n for (let d of data) {\n plot_options.marks.push(\n Plot.line(d, {\n strokeWidth: 3,\n stroke: \"steelblue\"\n })\n );\n }\n\n return Plot.plot(plot_options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"import { inputsGroup } from \"@bumbeishvili/input-groups\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"import { build_samples } from '@mcmcclur/adaptive-plotter'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"