Two rectangles at the same drawing scale

21:null 22:["$","title",null,{"children":"Fabric Shrinkage Geometry: Two Axes, One Area | Sewlore | Sewlore | Observable"}] 27:T5b9a,/* MIT License Copyright (c) 2026 Sewlore Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Sewlore names and branding remain the property of their respective owner. The licence does not grant trademark ownership or imply endorsement. */ // Original Sewlore geometry lesson. Hypothetical, not fabric data. const CONTROL_LIMITS = Object.freeze({ min: -20, max: 30, step: 0.5 }); const DECIMAL = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i; function parseContraction(value) { if (typeof value !== 'number' && typeof value !== 'string') throw new RangeError('Enter a finite percentage.'); if (typeof value === 'string' && !DECIMAL.test(value.trim())) throw new RangeError('Enter a decimal percentage.'); const number = Number(value); if (!Number.isFinite(number) || number < CONTROL_LIMITS.min || number > CONTROL_LIMITS.max) { throw new RangeError('Use a percentage from −20 to +30.'); } return Object.is(number, -0) ? 0 : number; } function parseControlPercent(value) { const number = parseContraction(value); if (Math.abs(number / CONTROL_LIMITS.step - Math.round(number / CONTROL_LIMITS.step)) > 1e-9) { throw new RangeError('Use steps of 0.5 percentage points.'); } return number; } function rectangularAreaChange(lengthPercent, widthPercent) { const length = parseContraction(lengthPercent); const width = parseContraction(widthPercent); const lengthFactor = 1 - length / 100; const widthFactor = 1 - width / 100; // The cross term is the shared corner, counted in both one-axis changes. const areaContractionPercent = length + width - length * width / 100; return Object.freeze({ lengthPercent: length, widthPercent: width, lengthFactor, widthFactor, areaContractionPercent, areaRetainedPercent: 100 - areaContractionPercent }); } function rectangleAtSameScale(referenceWidth, referenceHeight, lengthPercent, widthPercent) { if (![referenceWidth, referenceHeight].every(value => typeof value === 'number' && Number.isFinite(value) && value > 0)) { throw new RangeError('Reference sides must be positive finite numbers.'); } const result = rectangularAreaChange(lengthPercent, widthPercent); const width = referenceWidth * result.lengthFactor; const height = referenceHeight * result.widthFactor; if (![width, height].every(value => Number.isFinite(value) && value > 0)) throw new RangeError('Drawing dimensions are outside the supported numeric range.'); return Object.freeze({ referenceWidth, referenceHeight, width, height }); } function formatPercent(value, signed = false) { if (!Number.isFinite(value)) throw new RangeError('The percentage must be finite.'); const magnitude = Number(Math.abs(value).toFixed(3)); if (magnitude === 0) return '0%'; return `${value < 0 ? '−' : signed ? '+' : ''}${magnitude}%`; } function changeName(value) { if (!Number.isFinite(value)) throw new RangeError('The percentage must be finite.'); return value > 0 ? 'Contraction' : value < 0 ? 'Expansion' : 'No change'; } const lessonRoot = globalThis.document.createElement('div'); lessonRoot.id = "sewlore-area-widget"; lessonRoot.innerHTML = "

01 · CHOOSE A HYPOTHETICAL CHANGE

Start with the sides.

Positive percentages mean contraction. Negative percentages mean expansion. These controls describe hypothetical geometry.

Length contraction (%)

−20% expansion+30% contraction

Width contraction (%)

−20% expansion+30% contraction

Illustrative examples, not measured fabric data

Both sides are unchanged. Area retained is 100%; area contraction is 0%.

\n \n

02 · MULTIPLY THE RETAINED PARTS

Keep both drawings at one scale.

Dashed: referenceFilled: changed

Reference: 240 × 160 drawing units. Changed: 240 × 160. Drawing units are illustrative, not calibrated lengths.

Area retained

100%

of the reference area

Area contraction

No change

Retained side factors: 1.000 × 1.000

"; const getLocalElement = id => lessonRoot.querySelector('[id="' + "sewlore-area-" + id + '"]'); const axes = ['length', 'width']; const status = getLocalElement('status'); const summary = getLocalElement('error-summary'); const diagram = getLocalElement('diagram'); const controls = axes.map(axis => ({ axis, number: getLocalElement(`${axis}-number`), range: getLocalElement(`${axis}-range`), error: getLocalElement(`${axis}-error`) })); function render() { const values = []; let invalid = false; for (const { number, range, error } of controls) { number.setCustomValidity(''); number.removeAttribute('aria-invalid'); error.textContent = ''; try { const value = parseControlPercent(number.value); values.push(value); range.value = String(value); range.disabled = false; } catch (issue) { invalid = true; range.disabled = true; number.setCustomValidity(issue.message); number.setAttribute('aria-invalid', 'true'); error.textContent = issue.message; } } diagram.style.display = invalid ? 'none' : ''; diagram.setAttribute('aria-hidden', String(invalid)); if (invalid) { summary.textContent = 'Correct the marked percentage. Use −20 to +30 in steps of 0.5.'; status.textContent = 'The diagram is paused until both controls are valid.'; for (const id of ['area-retained', 'area-contraction', 'length-factor', 'width-factor']) getLocalElement(id).textContent = '—'; getLocalElement('area-kind').textContent = 'Awaiting valid values'; getLocalElement('diagram-description').textContent = 'Drawing paused. Both controls must be valid before either side is represented.'; getLocalElement('drawing-caption').textContent = 'The changed drawing is paused; neither percentage is being represented.'; return; } summary.textContent = ''; const [length, width] = values; const result = rectangularAreaChange(length, width); const shape = rectangleAtSameScale(240, 160, length, width); const changed = getLocalElement('changed-rectangle'); changed.setAttribute('width', shape.width); changed.setAttribute('height', shape.height); getLocalElement('length-line').setAttribute('x2', 60 + shape.width); getLocalElement('width-line').setAttribute('y2', 80 + shape.height); const horizontal = getLocalElement('length-svg-label'); horizontal.setAttribute('x', 60 + shape.width / 2); horizontal.textContent = `Length ${formatPercent(length, true)}`; const vertical = getLocalElement('width-svg-label'); const centreY = 80 + shape.height / 2; vertical.setAttribute('y', centreY); vertical.setAttribute('transform', `rotate(-90 24 ${centreY})`); vertical.textContent = `Width ${formatPercent(width, true)}`; getLocalElement('area-retained').textContent = formatPercent(result.areaRetainedPercent); getLocalElement('area-contraction').textContent = formatPercent(result.areaContractionPercent, true); getLocalElement('area-kind').textContent = changeName(result.areaContractionPercent); getLocalElement('length-factor').textContent = result.lengthFactor.toFixed(3); getLocalElement('width-factor').textContent = result.widthFactor.toFixed(3); const sides = `${Number(shape.width.toFixed(3))} × ${Number(shape.height.toFixed(3))}`; getLocalElement('drawing-caption').textContent = `Reference: 240 × 160 drawing units. Changed: ${sides}. Drawing units are illustrative, not calibrated lengths.`; getLocalElement('diagram-description').textContent = `Both rectangles share the same scale. Reference sides are 240 by 160 drawing units; changed sides are ${sides}. Length ${changeName(length).toLowerCase()} ${formatPercent(length, true)}; width ${changeName(width).toLowerCase()} ${formatPercent(width, true)}. No physical fabric sample is shown.`; status.textContent = `Hypothetical geometry: length ${formatPercent(length, true)}, width ${formatPercent(width, true)}. Area retained ${formatPercent(result.areaRetainedPercent)}; area contraction ${formatPercent(result.areaContractionPercent, true)} (${changeName(result.areaContractionPercent).toLowerCase()}).`; } for (const control of controls) { control.number.addEventListener('input', render); control.number.addEventListener('change', () => { if (!control.number.checkValidity()) control.number.reportValidity(); }); control.range.addEventListener('input', () => { control.number.value = control.range.value; render(); }); control.number.disabled = false; control.range.disabled = false; } function setExample(length, width) { controls[0].number.value = String(length); controls[1].number.value = String(width); render(); } getLocalElement('contraction-example').addEventListener('click', () => setExample(5, 2.5)); getLocalElement('mixed-example').addEventListener('click', () => setExample(-10, 5)); getLocalElement('opposite-example').addEventListener('click', () => setExample(5, -5)); getLocalElement('reset').addEventListener('click', () => setExample(0, 0)); for (const id of ['contraction-example', 'mixed-example', 'opposite-example', 'reset']) getLocalElement(id).disabled = false; render(); display(lessonRoot); 28:[] 25:{"id":"ef2d1f18f3557851","slug":"fabric-shrinkage-geometry-two-axes-one-area-sewlore","title":"Fabric Shrinkage Geometry: Two Axes, One Area | Sewlore","thumbnail":"235096a40494dcc833babd8dc6794958bd3e531b6ab73f4402034553f4e06d25","access_level":"public","create_time":"$D2026-10-06T14:56:14.653Z","update_time":"$D2026-10-06T14:58:41.085Z","view_time":null,"first_public_time":"$D2026-10-06T14:57:29.264Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"deb92796941c4d6e","login":"selami-bay-rd-z","name":"Sewlore","avatar_url":"https://avatars-next.observableusercontent.com/6610949ab1dcb892b2cc9e3a5b6d419b30796bc355764e52cc16eea90f606474","tier":"free_2026","bio":"Sewlore creates sewing patterns and practical measurement resources. https://sewlore.com/"},"version":14,"publish_version":14,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe35fb1da104485c","login":"selami-bay-rd-z","name":"Sewlore","avatar_url":"https://avatars-next.observableusercontent.com/6610949ab1dcb892b2cc9e3a5b6d419b30796bc355764e52cc16eea90f606474","tier":null,"bio":"Sewlore creates sewing patterns and practical measurement resources. https://sewlore.com/"}],"members":[{"type":"team","id":"deb92796941c4d6e","login":"selami-bay-rd-z","name":"Sewlore","avatar_url":"https://avatars-next.observableusercontent.com/6610949ab1dcb892b2cc9e3a5b6d419b30796bc355764e52cc16eea90f606474","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fabric Shrinkage Geometry: Two Axes, One Area | Sewlore","cells":[{"id":1,"value":"# Fabric Shrinkage Geometry: Two Axes, One Area | Sewlore\n\nExplore signed side changes with the controls below. Both drawings use the same scale. Every diagram and preset depicts hypothetical geometry; no fabric dataset or physical sample is shown.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$27","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## Keep the part that remains\n\nCall the signed length contraction L and the signed width contraction W, both in percent. A length contraction of +5% leaves 95% of that side, so its retained factor is 0.95. A width contraction of +2.5% leaves a factor of 0.975. Multiply these factors to find the portion of rectangular area retained. The area is built from two sides; one side's percentage cannot describe it alone.\n\nThe illustrative preset gives 0.95 × 0.975 = 0.92625. That is 92.625% of the original area retained and +7.375% area contraction. For your own paired care readings, the [Fabric Shrinkage Calculator](https://sewlore-fabric-shrinkage.web.app/) begins with actual before and after lengths rather than assumed percentages.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## Why the two changes do not add\n\nAdding 5 and 2.5 would give 7.5%. It counts the shared corner of the two removed strips twice. The combined expression is L + W − L × W ÷ 100. The product term corrects that overlap. This expression describes a geometric relationship.\n\nSigns still matter. A negative contraction percentage means expansion: −10% leaves a side factor of 1.10. With +5% on the other side, the area retained is 104.5%, so area contraction is −4.5%. Equal opposite values do not cancel either. +5% and −5% give factors 0.95 and 1.05, retaining 99.75% of the area. The resulting +0.25% contraction follows from multiplying, not averaging.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Keep the diagram's assumption visible\n\nThe dashed reference and filled changed shape share a corner and use the same drawing scale. Each horizontal drawing unit means the same thing in both rectangles; neither shape is enlarged merely to fill its container. The original aspect ratio is 240 to 160. Changing one side independently changes that ratio, which helps explain the area result.\n\nBoth shapes must remain flat rectangles for length times width to describe their area. A skewed marked grid, curling edge or irregular outline needs another measurement. Those observations belong beside your care method in a [before-cutting record](https://sewlore-preparation-notes.blogspot.com/2026/10/what-to-record-before-cutting-fabric.html). Diagram units are illustrative coordinates.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Carry the reasoning back to your notes\n\nRecord the same marked spans on the same swatch before and after the care method actually used. Keep direction, units and sample condition comparable. Follow appropriate manufacturer care guidance and review the [fabric preparation guidance](https://sewlore.com/blogs/sewing-journal/choose-fabric-and-elastic-for-sewing) for the project's material requirements.\n\nA stretch-and-release reading answers a different question from a care comparison; use the [stretch recording method](https://sewlore.com/blogs/sewing-journal/measure-fabric-stretch-and-record-recovery) for that observation. These controls explore mathematical possibilities. The relationships do not predict material behaviour, identify a care cause or certify fit, measurement accuracy or laboratory performance.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W28","stdlib":"2"}} 26:"$25:body"