45:["$","title",null,{"children":"Huygens arc length approximation | Alexander Milevski | Observable"}] 4d:T171d,{ const arcWeight = 5; const deg2rad = Math.PI / 180; const angleVal = document.getElementById('angle'); const classicVal = document.getElementById('classic'); const huygensVal = document.getElementById('huygens'); const errorVal = document.getElementById('error'); console.log(angleVal); const color = d3.interpolateRgb('steelblue', 'brown'); const svg = d3 .create('svg') .attr('width', w) .attr('height', h) .attr('viewBox', [-w/2, -h/2, w, h].join(' ')); // canvas const drawing = svg.append('g') .attr('class', 'drawing'); const controls = svg.append('g') .attr('class', 'controls'); let circles, arc, span, startAngle, endAngle; var C = [ 0, 0]; var R = (w / 2) * 0.75; var sizes = [10, 10]; var angles = [0, Math.PI / 2]; var X = [0, 0]; var Y = [0, 0]; circles = controls.selectAll('circle') .data(sizes) .enter() .append('circle') .attr('cx', function (size, i) { return X[i]; }) .attr('cy', function (size, i) { return Y[i]; }) .attr('r', function (size) { return size; }) .attr('class', 'point') .attr('data-index', function (s, i) { return i; }) .call(d3.drag() .on('start', dragstart) .on('drag', drag) .on('end', dragend)); controls .append('circle') .attr('class', 'center') .attr('cx', C[0]).attr('cy', C[1]) .attr('r', 2); controls .append('circle') .attr('class', 'circle') .attr('cx', C[0]).attr('cy', C[1]) .attr('r', R); circles.raise(); function crossProduct (ax, ay, bx, by, cx, cy) { // compute the cross product of vectors (center -> a) x (center -> b) var det = (ax - cx) * (by - cy) - (bx - cx) * (ay - cy); if (det < 0) return 1; if (det > 0) return -1; return 0; // same dir } function dotProduct (ax, ay, bx, by, cx, cy) { return (ax - cx) * (bx - cx) + (ay - cy) * (by - cy); } function distance (ax, ay, bx, by) { var dx = ax - bx; var dy = ay - by; return Math.sqrt(dx * dx + dy * dy); } function closestPointOnCircle (px, py) { let vX = px - C[0]; let vY = py - C[1]; let magV = Math.sqrt(vX * vX + vY * vY); return [ C[0] + vX / magV * R, C[1] + vY / magV * R ]; } function dragstart (evt, d) { d3.select(this).classed('active', true); } function drag (evt, d) { const target = d3.select(this); const closest = closestPointOnCircle(evt.x, evt.y); const i = parseInt(target.attr('data-index')); X[i] = closest[0]; Y[i] = closest[1]; target .attr('cx', closest[0]) .attr('cy', closest[1]); render(); } function dragend (evt, d) { d3.select(this).classed('active', false); } function arcPath () { startAngle = Math.atan2(Y[0] - C[1], X[0] - C[0]) + Math.PI / 2; endAngle = Math.atan2(Y[1] - C[1], X[1] - C[0]) + Math.PI / 2; return d3.arc() .innerRadius(R - arcWeight / 2) .outerRadius(R + arcWeight / 2)({ startAngle, endAngle }); } let N = 2; sizes = new Array(N).fill(10); function generate () { angles = new Array(N).fill(359).map(a => (0 + a * Math.random()) % 360); R = (w / 2) * 0.75; //R *= 3; angles.forEach((a, i) => { X[i] = C[0] + R * Math.sin(a * deg2rad); Y[i] = C[1] - R * Math.cos(a * deg2rad); }); render(); } function render () { drawing.selectAll('circle').remove(); drawing.selectAll('line').remove(); drawing.selectAll('path').remove(); circles .attr('cx', function (size, i) { return X[i]; }) .attr('cy', function (size, i) { return Y[i]; }); drawing .append('path') .attr('class', 'arc') .attr('d', arcPath); drawing .append('line') .attr('class', 'chord') .attr('x1', X[0]).attr('y1', Y[0]) .attr('x2', X[1]).attr('y2', Y[1]); var P = [(X[0] + X[1]) / 2, (Y[0] + Y[1]) / 2]; drawing .append('circle') .attr('cx', P[0]).attr('cy', P[1]) .attr('r', 3); var angleDiff = Math.abs(endAngle - startAngle); var angle = Math.atan2(P[1] - C[1], P[0] - C[0]); if (angleDiff > Math.PI) angle = angle - Math.PI; var CP = [ C[0] + R * Math.cos(angle), C[1] + R * Math.sin(angle) ]; drawing .append('circle') .attr('cx', CP[0]).attr('cy', CP[1]) .attr('r', 8) drawing .append('line') .attr('class', 'sagitta') .attr('x1', P[0]).attr('y1', P[1]) .attr('x2', CP[0]).attr('y2', CP[1]); drawing .append('line') .attr('class', 'half-chord') .attr('x1', X[0]).attr('y1', Y[0]) .attr('x2', CP[0]).attr('y2', CP[1]); drawing .append('line') .attr('class', 'half-chord') .attr('x1', X[1]).attr('y1', Y[1]) .attr('x2', CP[0]).attr('y2', CP[1]); drawing .append('line') .attr('class', 'radius') .attr('x1', C[0]).attr('y1', C[1]) .attr('x2', X[0]).attr('y2', Y[0]); drawing .append('line') .attr('class', 'radius') .attr('x1', C[0]).attr('y1', C[1]) .attr('x2', X[1]).attr('y2', Y[1]); var approx = huygens([X[0], Y[0]], [X[1], Y[1]], CP); var exact = R * angleDiff; huygensVal.innerHTML = approx; classicVal.innerHTML = exact; angleVal.innerHTML = (angleDiff * 180 / Math.PI).toFixed(2) + '°'; errorVal.innerHTML = Math.abs(((approx - exact) / exact) * 100).toFixed(4) + '%'; } function huygens (a, b, c) { var l = Math.sqrt( (a[0] - c[0]) * (a[0] - c[0]) + (a[1] - c[1]) * (a[1] - c[1])); var L = Math.sqrt( (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])); return 2 * l + (2 * l - L) / 3; } generate(); return svg.node(); }4e:[] 49:{"id":"8581f839695eaa51","slug":"huygens-arc-length-approximation","title":"Huygens arc length approximation","thumbnail":"dc17cf4ab1f33cb3813f0a2e2d81a3e34eee412e8f70c241ce1c0921036f98ff","access_level":"public","create_time":"$D2021-10-11T18:39:41.472Z","update_time":"$D2021-10-11T19:32:11.911Z","view_time":null,"first_public_time":"$D2021-10-11T19:27:13.214Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b3eb5708e41b6afb","login":"w8r","name":"Alexander Milevski","avatar_url":"https://avatars-next.observableusercontent.com/e14440659e459b817b9640058b94b4a860991303ddea273790cf99a2c0f87f1e","tier":"starter_2024","bio":"Maps, visual art, crowdsourcing, image processing","followed_by_you":false,"follows_you":false},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"7bb9e15c92240905","login":"w8r","name":"Alexander Milevski","avatar_url":"https://avatars-next.observableusercontent.com/e14440659e459b817b9640058b94b4a860991303ddea273790cf99a2c0f87f1e","tier":null,"bio":"Maps, visual art, crowdsourcing, image processing","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7bb9e15c92240905","login":"w8r","name":"Alexander Milevski","avatar_url":"https://avatars-next.observableusercontent.com/e14440659e459b817b9640058b94b4a860991303ddea273790cf99a2c0f87f1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Huygens arc length approximation","cells":[{"id":0,"value":"# Huygens arc length approximation\n\nChristiaan Huygens arc length approximation through the arc height and chord length","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"

Huygens' arc length approximation

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Angle
R × θ
Huygens
Error

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"w = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"h = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null