# Note Martin Laptev 2026+001 - [0 Dec measurement system](#sec-dec) - [1 Longitude latitude course](#sec-llc) - [2 Distance speed duration](#sec-dsd) - [Interactive world map](#map) - [Color wheel compass](#cwc) - [3.1 Hue saturation lightness (hsl)](#hsl) - [3.2 Course color table](#cct) - [3 Red green blue (rgb)](#sec-rgb) - [4 Dec time zones](#sec-dtz) - [5 Dates and times](#sec-dat) - [6 Millenium Year Day](#sec-myd) - [7 Day of dek (dod)](#sec-dod) - [8 Zone equatorial meter (zem)](#sec-zem) - [9 Length area volume](#sec-lav) - [10 Typical seat height](#sec-tsh) - [11 Perpetually setting sun](#sec-pss) - [12 Airplane cruising speed](#sec-acs) - [13 Centimilliday (cmd)](#sec-cmd) - [14 heart rate tempo](#sec-hrt) - [15 Frequency period wavelength](#sec-fpw) - [16 Ten equal temperament (Xet)](#sec-xet) - [Color sound table](#cst) - [17 Octave note tone](#sec-ont) - [18 Light and sound](#sec-las) - [19 US customary units](#sec-ucu) - [Unit conversion tables](#unit-conversion-tables) - [20 Miles per hour (mph)](#sec-mph) - [21 Are hectare acre](#sec-aha) - [22 Drop wineglass keg](#sec-dwk) - [23 Body mass index (bmi)](#sec-bmi) - [24 Centizem centimeter inch](#sec-cci) - [25 Claude Boniface Collignon](#sec-cbc) - [Summary](#tldr) - [Next](#next) - [Cite](#cite) - [Appendix](#last) - [Observable notebooks](#note) - [Glossary](#glos)
# Dec measurement system This part of my website focuses on Dec, a [measurement system](https://en.wikipedia.org/wiki/System_of_units_of_measurement#:~:text=a%20collection%20of%20units%20of%20measurement%20and%20rules%20relating%20them%20to%20each%20other) that [I](https://maptv.github.io) created. All Dec measurements are based on [turns](https://en.wikipedia.org/wiki/Turn_%28angle%29#:~:text=a%20unit%20of%20plane%20angle%20measurement%20equal%20to%202%CF%80%C2%A0radians%2C%20360%C2%A0degrees). When measuring [angles](https://en.wikipedia.org/wiki/Angle#:~:text=the%20figure%20formed%20by%20two%20rays)📐, a [turn](https://en.wikipedia.org/wiki/Turn_%28angle%29#:~:text=the%20Greek%20letter,to%20one%20turn) (t) represents a full⭕️circle and equals 2*π* ($\underline\tau$) [radians](https://en.wikipedia.org/wiki/Radian#:~:text=the%20unit%20of%20angle%20in%20the%20International%20System%20of%20Units) (rad) or 360 [degrees](https://en.wikipedia.org/wiki/Degree_(angle)#:~:text=a%20measurement%20of%20a%20plane%20angle%20in%20which%20one%20full%20rotation%20is%20360%20degrees) (°). [Geographic coordinates](https://en.wikipedia.org/wiki/Geographic_coordinate_system#:~:text=positions%20directly%20on%20Earth%20as%20latitude%20and%20longitude) and [compass](https://en.wikipedia.org/wiki/Compass#:~:text=a%20device%20that%20shows%20the%20cardinal%20directions%20used%20for%20navigation%20and%20geographic%20orientation)🧭directions are angles📐and thus can, and should😄, be measured in turns instead of rad or °. # Longitude latitude course Dec measures [longitude](https://en.wikipedia.org/wiki/Longitude#:~:text=denoted%20by%20the%20Greek%20letter%20lambda) in [parallels](https://en.wikipedia.org/wiki/Circle_of_latitude#:~:text=an%20abstract%20east%E2%80%93west%20small%20circle%20connecting%20all%20locations%20around%20Earth%20(ignoring%20elevation)%20at%20a%20given%20latitude%20coordinate%20line) (λ), [latitude](https://en.wikipedia.org/wiki/Latitude#:~:text=denoted%20by%20the%20Greek%20lower%2Dcase%20letter%20phi) in [meridians](https://en.wikipedia.org/wiki/Meridian_arc#Full_meridian_(polar_perimeter):~:text=The%20polar%20Earth%27s%20circumference%20is%20simply%20four%20times%20quarter%20meridian) (m), and compass🧭directions in [roses](https://en.wikipedia.org/wiki/Compass_rose#:~:text=a%20polar%20diagram%20displaying%20the%20orientation%20of%20the%20cardinal%20directions) (r). To measure certain kinds of angles📐, Dec uses specific types of turns with distinct names like λ, m, or r. All turn types can be combined with [metric prefixes](https://en.wikipedia.org/wiki/Metric_prefix#:~:text=a%20unit%20prefix%20that%20precedes%20a%20basic%20unit%20of%20measure%20to%20indicate%20a%20multiple%20or%20submultiple%20of%20the%20unit), like [deci](https://en.wikipedia.org/wiki/Deci-#:~:text=a%20decimal%20unit%20prefix%20in%20the%20metric%20system%20denoting%20a%20factor%20of%20one%20tenth), [centi](https://en.wikipedia.org/wiki/Centi-#:~:text=a%20unit%20prefix%20in%20the%20metric%20system%20denoting%20a%20factor%20of%20one%20hundredth), or [milli](https://en.wikipedia.org/wiki/Milli-#:~:text=a%20unit%20prefix%20in%20the%20metric%20system%20denoting%20a%20factor%20of%20one%20thousandth), to create turn [submultiples](https://en.wikipedia.org/wiki/Multiple_%28mathematics%29#:~:text=of%20%22a%20being-,a%20unit%20fraction,-of%20b%22%20%28a), such as deciturns (dt), centiturns (ct), or milliturns (mt). The table below provides the current longitude in milliparallels (mλ) and latitude in millimeridians (mm) of Points 0 and 1 on the map🗺️beneath the table. By default, Point 0 is at 800 mλ and 0 mm, near the [Galápagos🏝️archipelago](https://en.wikipedia.org/wiki/Gal%C3%A1pagos_Islands#:~:text=an%20archipelago%20of%20volcanic%20islands%20in%20the%20Eastern%20Pacific) of Ecuador🇪🇨, and Point 1 is at 800 mλ and 100 mm, near the bottom of the [Missouri bootheel](https://en.wikipedia.org/wiki/Missouri_Bootheel#:~:text=a%20salient%20(protrusion)%20located%20in%20the%20southeasternmost%20part%20of%20the%20U.S.%20state%20of%20Missouri) in the United States🇺🇸. To move the points, click the map🗺️or edit their coordinates in the table. The [toggle](https://observablehq.com/framework/inputs/toggle)✅inputs above the table add layers to the map🗺️: country borders, a rainbow🌈colored🎨grid of Dec [graticules](https://en.wikipedia.org/wiki/Graticule_(cartography)#:~:text=a%20graphical%20depiction%20of%20a%20coordinate%20system%20as%20a%20grid%20of%20lines), a [choropleth](https://en.wikipedia.org/wiki/Choropleth_map#:~:text=a%20type%20of%20statistical%20thematic%20map%20that%20uses%20pseudocolor) of [Coordinated Universal Time](https://en.wikipedia.org/wiki/Coordinated_Universal_Time#:~:text=the%20primary%20time%20standard%20globally%20used%20to%20regulate%20clocks%20and%20time) (utc) time zones, and [solar terminator](https://en.wikipedia.org/wiki/Terminator_(solar)#:~:text=a%20moving%20line%20that%20divides%20the%20daylit%20side%20and%20the%20dark%20night%20side%20of%20a%20planetary%20body) shading with a yellow🟡dot denoting the [point](https://en.wikipedia.org/wiki/Subsolar_point#:~:text=the%20point%20at%20which%20its%20Sun%20is%20perceived%20to%20be%20directly%20overhead) where the Sun☀️is [directly overhead](https://en.wikipedia.org/wiki/Zenith#:~:text=the%20imaginary%20point%20on%20the%20celestial%20sphere%20directly%20%22above%22%20a%20particular%20location): ${sunLonHsl} mλ and ${sunLatHsl} mm. Alongside the geographic coordinates of a point, each row of the table contains the [course](https://en.wikipedia.org/wiki/Azimuth#:~:text=%20azimuth%20is%20usually%20denoted%20alpha) in milliroses (mr) we would need to maintain to travel🧳the shortest distance to the other point. The shortest distance is shown as orange🟠dots on the map🗺️. The default courses in mr are 0 (North) from Point 0 to 1 and 500 (South) from Point 1 to 0. # Distance speed duration Dec measures distance in [taurs](https://en.wikipedia.org/wiki/Turn_(angle)#Tau_proposals:~:text=%E2%81%A0%20turn-,Circumference%20of%20a%20circle,-%F0%9D%90%B6) (c), speed in [omegars](https://en.wikipedia.org/wiki/Angular_velocity#:~:text=linear%20velocity%20is%20the%20radius%20times%20the%20angular%20velocity) (v), and time in years (y) and days (d). Each of these four turn types approximates (≈) a physical property of the Earth🌍: c = $\underline{\tau r}$ ≈ its [circumference](https://en.wikipedia.org/wiki/Earth%27s_circumference#:~:text=the%20distance%20around%20Earth), y ≈ the duration of its [orbit](https://en.wikipedia.org/wiki/Earth%27s_orbit#:~:text=From%20a%20vantage%20point%20above%20the%20north%20pole%20of%20either%20the%20Sun%20or%20Earth%2C%20Earth%20would%20appear%20to%20revolve%20in%20a%20counterclockwise%20direction%20around%20the%20Sun) around the Sun☀️, d ≈ the duration of its [rotation](https://en.wikipedia.org/wiki/Earth%27s_rotation#:~:text=the%20rotation%20of%20planet%20Earth%20around%20its%20own%20axis) on its [axis](https://en.wikipedia.org/wiki/Axial_tilt#:~:text=the%20imaginary%20line%20that%20passes%20through%20both%20the%20north%20pole%20and%20south%20pole), and $\text c\over\text d$ = v = $\underline{\omega r}$ ≈ the speed of its rotation at the [Equator](https://en.wikipedia.org/wiki/Equator#:~:text=the%20circle%20of%20latitude%20that%20divides%20Earth%20into%20the%20Northern%20and%20Southern%20hemispheres). At a speed of 0.5 v or 500 milliomegars (mv), we could travel🧳the 0.1 c or 100 millitaurs (mc) between the default positions📍of Points 0 and 1 in 0.2 d or 200 millidays (md). The time required to travel🧳between two points is the distance divided by the speed: ${distance_mcHsl0} mc ÷ ${velocity_vHsl0} v = ${traveltimeHsl0} md = ${distance_cHsl} c ÷ ${velocity_vHsl1} v = ${distance_mcHsl1} mc ÷ ${velocity_mvHsl} mv = ${traveltimeHsl1} d. ## Interactive world map
``` {ojs} //| echo: false //| label: speedinput //| column: margin viewof travelspeed = Inputs.range([0, 1000], {label: "Speed", value: 500, step: 1}) ``` ``` {ojs} //| echo: false //| label: yawinput //| column: margin viewof yaw = Inputs.range([0, 1000], {label: "Yaw", value: 500, step: 1}) ``` ``` {ojs} //| echo: false //| label: pitchinput //| column: margin viewof pitch = Inputs.range([-500, 500], {label: "Pitch", value: 0, step: 1}) ``` ``` {ojs} //| echo: false //| label: rollinput //| column: margin viewof roll = Inputs.range([-500, 500], {label: "Roll", value: 0, step: 1}) ``` ``` {ojs} //| echo: false //| label: sizeinput //| column: margin viewof mapsize = Inputs.range([0, 100], {label: "Size", value: 100, step: 1}) ``` ``` {ojs} //| echo: false //| label: projselect //| column: margin viewof select = Inputs.select( projections, {format: x => x.name, value: projections.find(t => t.name === "Equirectangular (plate carrée)")}) ```
``` {ojs} //| echo: false //| label: toggles viewof bordertoggle = labelToggle(Inputs.toggle, "Border", false, "bordertoggle") viewof gridtoggle = labelToggle(Inputs.toggle, "Grid", false, "gridtoggle") viewof utctoggle = labelToggle(Inputs.toggle, "UTC", false, "utctoggle") viewof suntoggle = labelToggle(Inputs.toggle, "Sun", false, "suntoggle") rstbtn.node(); ``` ``` {ojs} //| echo: false //| label: maptable table = createTable([ { Point: 0, Milliparallel: 800, Millimeridian: 0, Milliwindrose: 0 }, { Point: 1, Milliparallel: 800, Millimeridian: 100, Milliwindrose: 500 }, ], { headerEditable: false, appendRows: false }) // {Point: 0, Milliparallel: `${Math.floor(long2turn(Place_A[0], 3))}`, Millimeridian: `${Math.floor(lati2turn(Place_A[1], 3))}`, Milliwindrose: `${Math.floor(lati2turn(coor2bear(Place_A, Place_B)))}`}, // {Point: 1, Milliparallel: `${Math.floor(long2turn(Place_B[0], 3))}`, Millimeridian: `${Math.floor(lati2turn(Place_B[1], 3))}`, Milliwindrose: `${Math.floor(lati2turn(coor2bear(Place_B, Place_A)))}`}, // ], {headerEditable: false, appendRows: false}) ```
``` {ojs} //| echo: false //| label: fig-distmap // https://observablehq.com/@d3/solar-terminator // https://observablehq.com/@mbostock/time-zones viewof coordinates = worldMapCoordinates([[turn2long(table.rows[1].cells[1].childNodes[0].innerText), turn2degr(table.rows[1].cells[2].childNodes[0].innerText % 250)], [turn2long(table.rows[2].cells[1].childNodes[0].innerText), turn2degr(table.rows[2].cells[2].childNodes[0].innerText % 250)], projection], [width, height * mapsize / 100]) //viewof coordinates = worldMapCoordinates([ // [turn2long(table.rows[1].cells[1].childNodes[0].innerText), turn2degr(table.rows[1].cells[2].childNodes[0].innerText % 250)], // [turn2long(table.rows[2].cells[1].childNodes[0].innerText), turn2degr(table.rows[2].cells[2].childNodes[0].innerText % 250)], // projection], [width, height]) ```
## Color wheel compass ``` {ojs} //| echo: false //| label: colorpreview //| column: margin //| class: colorcomponent preview() ``` ``` {ojs} //| echo: false //| label: coloropposites8 //| column: margin //| class: coloropp // https://observablehq.com/@maddievision/enneagram quickRender(326, 326, context => { const center = 163 const ringRadius = 140 const ringLineWidth = 4 // Ring context.beginPath(); context.lineWidth = ringLineWidth context.strokeStyle = "#ddd" context.arc(center, center, ringRadius, 0, 2 * Math.PI); context.stroke(); context.font = "Bold 16px Arial" context.textAlign = 'center' let octPoints = [] for (let i = 0; i < 8; i++) { const xPhase = Math.sin(i / 8 * 2 * Math.PI) const yPhase = Math.cos(i / 8 * 2 * Math.PI) const x = center + ringRadius * xPhase const y = center - ringRadius * yPhase octPoints.push([x, y]) } // Lines octConnections.forEach(([a, b], i ) => { const [x1, y1] = octPoints[a] const [x2, y2] = octPoints[b] const lineAngle = Math.atan2(y2 - y1, x2 - x1) // Draw just short of the label circumference const x2a = x2 - 28 * Math.cos(lineAngle) const y2a = y2 - 28 * Math.sin(lineAngle) const x1a = x1 + 28 * Math.cos(lineAngle) const y1a = y1 + 28 * Math.sin(lineAngle) context.lineWidth = ringLineWidth context.strokeStyle = "#ddd" context.beginPath(); context.moveTo(x2a, y2a); context.lineTo(x1a, y1a); context.stroke(); }) // Arrow Heads octConnections.forEach(([a, b], i ) => { const [x1, y1] = octPoints[a] const [x2, y2] = octPoints[b] const lineAngle = Math.atan2(y2 - y1, x2 - x1) const xl = x2 - 88 * Math.cos(lineAngle - (15 / 360) * 2 * Math.PI) const yl = y2 - 88 * Math.sin(lineAngle - (15 / 360) * 2 * Math.PI) const xr = x2 - 88 * Math.cos(lineAngle + (15 / 360) * 2 * Math.PI) const yr = y2 - 88 * Math.sin(lineAngle + (15 / 360) * 2 * Math.PI) const x2a = x2 - 22 * Math.cos(lineAngle) const y2a = y2 - 22 * Math.sin(lineAngle) const x = x2 - 69 * Math.cos(lineAngle) const y = y2 - 69 * Math.sin(lineAngle) context.fillStyle = hsl8[i] context.strokeStyle = window.darkmode ? "#aaa" : "#333"; context.lineWidth = 1 context.beginPath(); context.moveTo(x2a, y2a); context.lineTo(xl, yl); context.lineTo(xr, yr); context.lineTo(x2a, y2a); context.fill(); context.stroke(); context.fillStyle = yiq(hsl8[i]) > 0.51 ? "#000" : "white" context.fillText(["N", "NE", "E", "SE", "S", "SW", "W", "NW"][i], x, y + 6) }) // Labels octPoints.forEach(([x, y], i) => { context.lineWidth = 1 context.fillStyle = hsl8[i] context.strokeStyle = window.darkmode ? "#aaa" : "#333"; context.beginPath(); context.arc(x, y, 22, 0, 2 * Math.PI); context.fill(); context.stroke(); context.fillStyle = yiq(hsl8[i]) > 0.51 ? "#000" : "white"; context.fillText(["N", "NE", "E", "SE", "S", "SW", "W", "NW"][i], x, y + 6) }) }) ``` ``` {ojs} //| echo: false //| label: colorcomparer8 //| column: margin //| class: colorcomparer // https://observablehq.com/@observablehq/categorical-palette-tool displayPalette(hsl8, {darkMode: true}) ``` ``` {ojs} //| echo: false //| label: coloropposites10 //| column: margin //| class: coloropp // https://observablehq.com/@maddievision/enneagram quickRender(326, 326, context => { const center = 163 const ringRadius = 140 const ringLineWidth = 4 // Ring context.beginPath(); context.lineWidth = ringLineWidth context.strokeStyle = "#ddd" context.arc(center, center, ringRadius, 0, 2 * Math.PI); context.stroke(); context.font = "Bold 24px Arial" context.textAlign = 'center' let decPoints = [] for (let i = 0; i < 10; i++) { const xPhase = Math.sin(i / 10 * 2 * Math.PI) const yPhase = Math.cos(i / 10 * 2 * Math.PI) const x = center + ringRadius * xPhase const y = center - ringRadius * yPhase decPoints.push([x, y]) } // Lines decConnections.forEach(([a, b], i ) => { const [x1, y1] = decPoints[a] const [x2, y2] = decPoints[b] const lineAngle = Math.atan2(y2 - y1, x2 - x1) // Draw just short of the label circumference const x2a = x2 - 28 * Math.cos(lineAngle) const y2a = y2 - 28 * Math.sin(lineAngle) const x1a = x1 + 28 * Math.cos(lineAngle) const y1a = y1 + 28 * Math.sin(lineAngle) context.lineWidth = ringLineWidth context.strokeStyle = "#ddd" context.beginPath(); context.moveTo(x2a, y2a); context.lineTo(x1a, y1a); context.stroke(); }) // Arrow Heads decConnections.forEach(([a, b], i ) => { const [x1, y1] = decPoints[a] const [x2, y2] = decPoints[b] const lineAngle = Math.atan2(y2 - y1, x2 - x1) const xl = x2 - 79 * Math.cos(lineAngle - (15 / 360) * 2 * Math.PI) const yl = y2 - 79 * Math.sin(lineAngle - (15 / 360) * 2 * Math.PI) const xr = x2 - 79 * Math.cos(lineAngle + (15 / 360) * 2 * Math.PI) const yr = y2 - 79 * Math.sin(lineAngle + (15 / 360) * 2 * Math.PI) const x2a = x2 - 22 * Math.cos(lineAngle) const y2a = y2 - 22 * Math.sin(lineAngle) const x = x2 - 60 * Math.cos(lineAngle) const y = y2 - 60 * Math.sin(lineAngle) context.fillStyle = hsl10[i] context.strokeStyle = window.darkmode ? "#aaa" : "#333"; context.lineWidth = 1 context.beginPath(); context.moveTo(x2a, y2a); context.lineTo(xl, yl); context.lineTo(xr, yr); context.lineTo(x2a, y2a); context.fill(); context.stroke(); context.fillStyle = yiq(hsl10[i]) > 0.51 ? "#000" : "white" context.fillText(i, x, y + 8) }) // Labels decPoints.forEach(([x, y], i) => { context.lineWidth = 1 context.fillStyle = hsl10[i] context.strokeStyle = window.darkmode ? "#aaa" : "#333"; context.beginPath(); context.arc(x, y, 22, 0, 2 * Math.PI); context.fill(); context.stroke(); context.fillStyle = yiq(hsl10[i]) > 0.51 ? "#000" : "white"; context.fillText(i, x, y + 8) }) }) ``` ``` {ojs} //| echo: false //| label: colorcomparer10 //| column: margin //| class: colorcomparer // https://observablehq.com/@observablehq/categorical-palette-tool displayPalette(hsl10.slice(0, 10), {darkMode: true}) ``` ``` {ojs} //| echo: false //| label: fig-colorwheelcompass //| class: colorcomponent // https://observablehq.com/@pjedwards/compass-rose-as-legend-with-colors svg` ${repeat(tick(radius, 5, '#434343'), 5 * 4 * 10)} ${repeat(tick(radius, 8), 10 * 4)} ${repeat(``, 4, 0)} ${repeat(``, 4, 45)} ${repeat(directionMarker(radius+14, 24), 4, 0)} ${repeat(directionMarker(radius+12, 24), 4, 45)} ${repeat(turnMarker(radius+14, 32), 4, 0)} ${repeat(turnMarker(radius+12, 32), 4, 45)} ${repeat(pie(radius-margin/2, 2 * Math.PI * (radius-margin/2) / deccolors.length / 2, 1, deccolors), deccolors.length, 360/deccolors.length)} ` ``` ``` {ojs} //| echo: false //| label: colorbar //| class: colorcomponent // https://observablehq.com/@paavanb/progressive-color-picker decBar = colorbar({ colorFn: t => hslToRgb(dec2hue(t) / 1000, colorS / 1000, colorL / 1000), onSelect: t => { set(viewof colorD, t * 1000) onUpdateHSL(dec2hue(t), colorS / 1000, colorL / 1000) } }) ``` ## Hue saturation lightness (hsl) ``` {ojs} //| echo: false //| label: hueslider //| class: colorslider // https://observablehq.com/@paavanb/progressive-color-picker { const input = Inputs.range([0, 1000], { label: "Hue", value: 0, step: 1 }) input.value = initialHSL[0] input.oninput = (evt) => onUpdateHSL(dec2hue(evt.currentTarget.value / 1000), colorS / 1000, colorL / 1000) return Inputs.bind(input, viewof colorD) } ``` ``` {ojs} //| echo: false //| label: satslider //| class: colorslider // https://observablehq.com/@paavanb/progressive-color-picker { const input = Inputs.range([0, 1000], { label: "Saturation", value: 1000, step: 1, }) input.oninput = (evt) => onUpdateHSL(colorD, evt.currentTarget.value / 1000, colorL / 1000) return Inputs.bind(input, viewof colorS) } ``` ``` {ojs} //| echo: false //| label: litslider //| class: colorslider // https://observablehq.com/@paavanb/progressive-color-picker { const input = Inputs.range([0, 1000], { label: "Lightness", value: 500, step: 1, }) input.oninput = (evt) => onUpdateHSL(colorD, colorS / 1000, evt.currentTarget.value / 1000) return Inputs.bind(input, viewof colorL) } ``` ## Course color table
mr🧭 c°🧭 h°🎨 hex🎨
${rainbowDir} ${rainbowMtr} ${rainbowDegC} ${rainbowDegH} ${rainbowHex}
NE 125 45 44 fb0
E 250 90 68 df0
SE 375 135 96 6f0
S 500 180 180 0ff
SW 625 225 216 06f
W 750 270 264 60f
NW 875 315 292 d0f
N 0 0 0 f00
The [color🎨wheel](https://en.wikipedia.org/wiki/Color_wheel#:~:text=an%20abstract%20illustrative%20organization%20of%20color%20hues%20around%20a%20circle) compass🧭above indicates both a [hue](https://en.wikipedia.org/wiki/Hue#:~:text=an%20angular%20position%20around%20a%20central%20or%20neutral%20point%20or%20axis%20on%20a%20color%20space%20coordinate%20diagram) in mt and a course in mr. We can convert the hue to [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV#:~:text=the%20two%20most%20common%20cylindrical%2Dcoordinate%20representations%20of%20points%20in%20an%20RGB%20color%20model) degrees (h°) and the course to compass🧭degrees (c°): 25 mr = 9 c°. To rotate🔄the color🎨wheel compass🧭, use the “Hue” [range](https://observablehq.com/framework/inputs/range)🎚️and [hue bar](https://observablehq.com/@paavanb/progressive-color-picker) inputs beneath it or change the course from Point 0 to 1 on the map🗺️. # Red green blue (rgb) The table beneath the hue bar compares the current Point 0 to 1 course in its top row with the [cardinal](https://en.wikipedia.org/wiki/Cardinal_direction#:~:text=north%2C%20south%2C%20east%2C%20and%20west) and [intercardinal](https://en.wikipedia.org/wiki/Cardinal_direction#:~:text=northeast%20(NE)%2C%20southeast%20(SE)%2C%20southwest%20(SW)%2C%20and%20northwest%20(NW)) directions. Together, the range🎚️inputs underneath the hue bar form a “hue saturation lightness” (hsl) triplet. Like “[red green blue](https://en.wikipedia.org/wiki/RGB_color_model#:~:text=an%20additive%20color%20model)” (rgb) or [hexadecimal](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet:~:text=hexadecimal%20number%20used%20in%20HTML%2C%20CSS%2C%20SVG%2C%20and%20other%20computing%20applications%20to%20represent%20colors) (hex) triplets, hsl triplets specify a full-fledged color🎨instead of just a hue.
> **Bad Pun Alert** > > Feeling ***disoriented***😵‍💫? Of > [***course***](https://en.wikipedia.org/wiki/Course_(navigation)#:~:text=the%20cardinal%20direction%20in%20which%20the%20craft%20is%20to%20be%20steered) > you are! Color🎨labels🏷️can help you find your > [***bearings***](https://en.wikipedia.org/wiki/Bearing_(navigation)#:~:text=the%20horizontal%20angle%20between%20the%20direction%20of%20an%20object%20and%20north%20or%20another%20object), > stay on > [***track***](https://en.wikipedia.org/wiki/Course_(navigation)#:~:text=The%20path%20that%20a%20vessel%20follows), > and avoid > [***heading***](https://en.wikipedia.org/wiki/Course_(navigation)#:~:text=the%20direction%20where%20the%20watercraft's%20bow%20or%20the%20aircraft's%20nose%20is%20pointed) > aches🤕. Orange you glad I couldn’t think > of a color🎨pun?
Color🎨can provide a general idea of angular📐[measure](https://en.wikipedia.org/wiki/Angle#:~:text=The%20magnitude%20of%20an%20angle), regardless of the metric prefixes or [units](https://en.wikipedia.org/wiki/Angle#Units) we use. Therefore, we can reuse♻️colors🎨across many different contexts. Most often, red designates starting points, like North (0 mr) and [Longitude 0](https://en.wikipedia.org/wiki/18th_meridian_west#:~:text=a%20line%20of%20longitude%20that%20extends%20from%20the%20North%20Pole%20across%20the%20Arctic%20Ocean%2C%20Greenland%2C%20Iceland%2C%20the%20Atlantic%20Ocean%2C%20the%20Canary%20Islands%2C%20the%20Southern%20Ocean%2C%20and%20Antarctica%20to%20the%20South%20Pole) (0 mλ), and cyan denotes midpoints, such as South (500 mr) and [Longitude 5](https://en.wikipedia.org/wiki/162nd_meridian_east#:~:text=a%20line%20of%20longitude%20that%20extends%20from%20the%20North%20Pole%20across%20the%20Arctic%20Ocean%2C%20Asia%2C%20the%20Pacific%20Ocean%2C%20the%20Southern%20Ocean%2C%20and%20Antarctica%20to%20the%20South%20Pole) (500 mλ). The Equator (0 mm) is the [major latitude](https://en.wikipedia.org/wiki/Circle_of_latitude#:~:text=mark%20the%20divisions%20between%20the%20five%20principal%20geographical%20zones) midway between the South (-250 mm) and North (250 mm) Poles. Unlike the Equator, the Tropics of [Cancer](https://en.wikipedia.org/wiki/Tropic_of_Cancer#:~:text=northernmost%20circle%20of%20latitude%20where%20the%20Sun%20can%20be%20seen%20directly%20overhead)♋(65 mm) and [Capricorn](https://en.wikipedia.org/wiki/Tropic_of_Capricorn#:~:text=the%20southernmost%20latitude%20where%20the%20Sun%20can%20be%20seen%20directly%20overhead)♑️(-65 mm) and the [Arctic](https://en.wikipedia.org/wiki/Arctic_Circle#:~:text=the%20southernmost%20latitude%20at%20which%2C%20on%20the%20winter%20solstice%20in%20the%20Northern%20Hemisphere%2C%20the%20Sun%20does%20not%20rise%20all%20day%2C%20and%20on%20the%20Northern%20Hemisphere%27s%20summer%20solstice%2C%20the%20Sun%20does%20not%20set) (250 mm – 65 mm = 185 mm) and [Antarctic](https://en.wikipedia.org/wiki/Antarctic_Circle#:~:text=the%20Sun%20is%20above%20the%20horizon%20for%2024%20continuous%20hours%20at%20least%20once%20per%20year%20(and%20therefore%20visible%20at%20solar%20midnight)%20and%20the%20centre%20of%20the%20Sun%20(ignoring%20refraction)%20is%20below%20the%20horizon%20for%2024%20continuous%20hours%20at%20least%20once%20per%20year%20(and%20therefore%20not%20visible%20at%20solar%20noon)) (65 mm – 250 mm = -185 mm) Circles are defined by the [axial tilt](https://en.wikipedia.org/wiki/Axial_tilt#Earth:~:text=the%20angle%20between%20the%20ecliptic%20and%20the%20celestial%20equator%20on%20the%20celestial%20sphere) of the Earth🌏: 65 mt. # Dec time zones Enable the “Grid” toggle✅input to see Latitudes [-2](https://en.wikipedia.org/wiki/72nd_parallel_south#:~:text=a%20circle%20of%20latitude%20that%20is%2072%20degrees%20south%20of%20the%20Earth's%20equatorial%20plane%20in%20the%20Antarctic) (-200 mm), [-1](https://en.wikipedia.org/wiki/36th_parallel_south#:~:text=a%20circle%20of%20latitude%20that%20is%2036%20degrees%20south%20of%20the%20Earth's%20equatorial%20plane) (-100 mm), [0](https://en.wikipedia.org/wiki/Equator#:~:text=the%20circle%20of%20latitude%20that%20divides%20Earth%20into%20the%20Northern%20and%20Southern%20hemispheres) (0 mm), [1](https://en.wikipedia.org/wiki/36th_parallel_north#:~:text=a%20circle%20of%20latitude%20that%20is%2036%20degrees%20north%20of%20the%20Earth's%20equatorial%20plane) (100 mm), and [2](https://en.wikipedia.org/wiki/72nd_parallel_north#:~:text=a%20circle%20of%20latitude%20that%20is%2072%20degrees%20north%20of%20the%20Earth's%20equatorial%20plane%2C%20in%20the%20Arctic) (200 mm) on the map🗺️above along with the ten major longitudes that divide the Earth🌎into the ten Dec time zones. Notably, Longitude 0 is the major longitude that functions as both the [Prime Meridian](https://en.wikipedia.org/wiki/Prime_meridian#:~:text=an%20arbitrarily%2Dchosen%20meridian%20%28a%20line%20of%20longitude%29%20in%20a%20geographic%20coordinate%20system%20at%20which%20longitude%20is%20defined%20to%20be%200%C2%B0) and [International Date Line](https://en.wikipedia.org/wiki/International_Date_Line#:~:text=the%20line%20between%20the%20South%20and%20North%20Poles%20that%20is%20the%20boundary%20between%20one%20calendar%20day%20and%20the%20next) in Dec. Like the ten major longitudes that separate them, Dec time zones are numbered 0 to 9. Based on its current deciparallel (dλ) longitude, ${point0lHsl}, Point 0 on the map🗺️above is in Zone ${point0zHsl}. The number assigned to each time zone is its offset from Zone 0 in decidays (dd). To obtain the dd offset at a location, we [floor](https://en.wikipedia.org/wiki/Floor_and_ceiling_functions#:~:text=the%20greatest%20integer%20less%20than%20or%20equal%20to%20x) its dλ longitude: ⌊${decLonHsl}⌋ = ${decZonHsl}. ``` {ojs} //| echo: false //| label: loninput viewof longitude = Inputs.range([0, 10], {label: "Longitude", value: .5, step: .01}) ``` Each Dec time zone is 1 dλ wide and 0.5 m long. While 1 m is always ~1 c long, the length of a λ [varies by latitude](https://en.wikipedia.org/wiki/Longitude#Length_of_a_degree_of_longitude:~:text=depends%20only%20on%20the%20radius%20of%20a%20circle%20of%20latitude). At the Equator, 1 λ is ~1 c long. At the [North](https://en.wikipedia.org/wiki/North_Pole#:~:text=the%20point%20in%20the%20Northern%20Hemisphere%20where%20the%20Earth%27s%20axis%20of%20rotation%20meets%20its%20surface) or [South](https://en.wikipedia.org/wiki/South_Pole#:~:text=the%20point%20in%20the%20Southern%20Hemisphere%20where%20the%20Earth%27s%20axis%20of%20rotation%20meets%20its%20surface) Pole, the length of a λ is zero. The approximate c length of a λ is the [cosine](https://en.wikipedia.org/wiki/Sine_and_cosine#:~:text=the%20ratio%20of%20the%20length%20of%20the%20adjacent%20leg%20to%20that%20of%20the%20hypotenuse) of its latitude in m, rad, or °, depending on the input requirement of our cosine function: cos(${parLat}${conversionFactor}) = ${parLen}. ``` {ojs} //| echo: false //| label: latinput viewof latitude = Inputs.range([-.25, .25], {label: "Latitude", value: 0, step: .001}) ``` ``` {ojs} //| echo: false //| label: costype viewof costype = Inputs.radio(["turns", "radians", "degrees"], {label: "Cosine input", value: "turns"}) ``` # Dates and times Dec dates consist of a “year of era” (yoe) and a “day of year” (doy), whereas Dec times are composed of a “time of day” (tod) and a “time zone offset” (tzo). In Zone 0, the current date is ${decYearP0hsl0}+${decDateP0hsl0} and the current time is ${decTimeP0hsl0}-0. Color🎨labels🏷️can help us to visually [parse](https://en.wikipedia.org/wiki/Parsing#:~:text=a%20process%20of%20analyzing%20a%20string%20of%20symbols) the date and time that make up a Dec snap🫰: ${decYearP0hsl1}+${decDateP0hsl1}${decTimeP0hsl1}-0. # Millenium Year Day Yoe color🎨labels🏷️are based on y. Every millennium starts with Year 0 (0 y) and has Year 500 (500 y) as its midpoint. Doy color🎨labels🏷️are derived from milliyears (my). Every year starts on Day 0 (0 my). The midyear point (500 my) is noon (500 md) on Day 182 in [common years](https://en.wikipedia.org/wiki/Common_year#:~:text=a%20calendar%20year%20with%20365%20days) and midnight (0 md) on Day 183 in [leap years](https://en.wikipedia.org/wiki/Leap_year#:~:text=a%20calendar%20year%20that%20contains%20an%20additional%20day). # Day of dek (dod) Each doy also has two components. The first two digits of a three-digit doy represent a group of ten days called a decaday (dek). The last digit of a doy is the “day of dek” (dod). In Dec, deks are used instead of months and weeks. Likewise, Dec uses dod in lieu of days of month (dom) and days of week (dow). In Zone 0, it is currently Dek ${decDekP0hsl} and Dod ${decDodP0hsl}. # Zone equatorial meter (zem)
[Wikimedia](https://commons.m.wikimedia.org/wiki/File:Modulor_measurements.svg#mw-jump-to-license)
Apart from c, Dec also measures distance using a unit called the **z**one **e**quatorial **m**eter (zem). The width of a Dec time zone at the Equator is approximately ten million (~107) zem (z). Similarly, the distance from the Equator to one of the Poles is ~107 [meters](https://en.wikipedia.org/wiki/Metre#Definition:~:text=the%20base%20unit%20of%20length%20in%20the%20International%20System%20of%20Units). In other words, a decimeridian (dm) is ~107 z long and a [quarter meridian](https://en.wikipedia.org/wiki/Meridian_arc#Full_meridian_(polar_perimeter):~:text=The%20distance%20from%20the%20equator%20to%20the%20pole) is ~107 meters long.
[Wikimedia](https://commons.wikimedia.org/wiki/File:Typing-colour_for-finger-positions.svg)
# Length area volume You can approximate a z using your hands🤲. With your palms flat on a table in front of you and the tips of your thumbs👍touching, the maximum distance between the tips of your pinkies is ~1 z. When you spread out the fingers on one hand✋or do the “[call me](https://en.wikipedia.org/wiki/Shaka_sign#:~:text=the%20gesture%20is%20commonly%20understood%20to%20mimic%20the%20handset%20of%20a%20traditional%20landline%20telephone)”, “[drink](https://en.wikipedia.org/wiki/Shaka_sign#:~:text=placing%20the%20thumb%20to%20the%20mouth%20and%20motioning%20the%20little%20finger%20upward%20as%20if%20tipping%20up%20a%20bottle%27s%20bottom%20end)”, or “[shaka](https://en.wikipedia.org/wiki/Shaka_sign#:~:text=a%20gesture%20with%20friendly%20intent%20often%20associated%20with%20Hawaii%20and%20surf%20culture)”🤙gesture, your thumb👍and pinky tips are ~0.5 z apart.
Wikimedia
To visualize a square zem (z²), imagine four people standing in a circle, facing inward, each with their right hand✋placed on top of the elbow of the person to their right. Alternatively, two people can stand in front of each other and raise their arms💪, placing one hand✋on the elbow of the other person and the other hand✋on their own elbow.
Wikimedia
You can approximate a z² yourself by sitting in a chair🪑or standing🧍with your knees and feet🦶1 z, 4 decimeters, or 16 inches apart, which is probably about the width of your hips or shoulders. The z² will be between your shins, its top will be below your knees, and its bottom will be either above your ankles or feet🦶, depending on your height.
Dimensions.com
# Typical seat height According to [dimensions.com](https://www.dimensions.com), 115 centizem (cz) is the [typical seat height](https://www.dimensions.com/element/sitting-female-side-1#:~:text=Seat%20Height%20(Typical)%3A-,18%E2%80%9D%20%7C%2046%20cm,-Style%3A%20Casual) for both men and women age 25 to 45. A box📦that is the size of a cubic zem (z³) would likely fit under a typical chair🪑 or in between the shins of two people sitting in front of each other with their knees and feet🦶1 z apart and their legs🦵bent at 25 centiturn angles📐. # Perpetually setting sun In [Slovak](https://sk.wikipedia.org/wiki/Zem)🇸🇰, zem means Earth🌍. This is fitting because all Dec units are based on physical attributes of the Earth🌏. At the Equator, the Earth🌎rotates on its axis at a speed of ~1.00224 v. If we could indefinitely maintain this speed while flying West in an airplane✈️towards the setting sun☀️, we would be able to perpetually fly [into the sunset](https://tvtropes.org/pmwiki/pmwiki.php/Main/RidingIntoTheSunset)🌅. # Airplane cruising speed To travel fast enough for a perpetual sunset🌅, the airplane✈️would need to surpass the [speed of sound](https://en.wikipedia.org/wiki/Speed_of_sound#:~:text=the%20distance%20travelled%20per%20unit%20of%20time%20by%20a%20sound%20wave)🔊(sos), which at 15 ° [Celsius](https://en.wikipedia.org/wiki/Celsius#:~:text=the%20unit%20of%20temperature%20on%20the%20Celsius%20temperature%20scale) and 1 [standard atmosphere](https://en.wikipedia.org/wiki/Standard_atmosphere_(unit)#:~:text=a%20unit%20of%20pressure%20defined%20as%20101325%20Pa) is 0.735048 v or Mach 1. [Mach numbers](https://en.wikipedia.org/wiki/Mach_number) are relative to the sos, which varies greatly by air temperature and pressure. The cruising speed of a [Boeing 747](https://en.wikipedia.org/wiki/Boeing_747#:~:text=sweep%2C%20allowing%20a-,Mach%C2%A00.85,-%28490%C2%A0kn;%20900) is ~0.54 v or Mach ~0.85. The highway🛣️speed of a car🚗is roughly tenfold slower than the cruising speed of an airplane✈️. If we are driving on a highway🛣️at a speed of 50 mv and our exit is 1000 z away, we will have 20 centimillidays (cmd) until we have to exit the highway🛣️. To ensure we do not miss our exit, we can periodically check a countdown of the remaining z: ${zLeft}. # Centimilliday (cmd) Dec refers to cmd as beats (b) because they are similar in duration to heart❤️beats or [musical beats](https://en.wikipedia.org/wiki/Beat_(music)#:~:text=I-,n%20music%20and%20music%20theory%2C%20the%20beat%20is%20the%20basic%20unit%20of%20time,-%2C%20the). In Dec, 1 d = 100 centiday (cd) = 105 b = 106 microdays (µd), 1 mc = 100 kilozem (kz) = 105 z = 106 decizems (dz) = 106 nanotaurs (nc), and therefore, 1 mv = $\text{mc}\over\text d$ = $\text {kz}\over\text {cd}$ = $\text z\over\text b$ = $\text {dz}\over\text{µd}$ = $\text {nc}\over\text{µd}$. A cd is 96% of a quarter hour and a b is 86.4% of a second. # heart rate tempo A [normal resting heart❤️rate](https://en.wikipedia.org/wiki/Heart_rate#:~:text=heart%20rate%20is-,60–100%20bpm,-.%20An%20ultra%2Dtrained) is between 100 and 166.6 b per md (bpm). The unofficial anthem of the Dec measurement system, “[Turn the beat around](https://en.wikipedia.org/wiki/Turn_the_Beat_Around#:~:text=a%20disco%20song%20written%20by%20Gerald%20Jackson%20and%20Peter%20Jackson%2C%20and%20performed%20by%20American%20actress%20and%20singer%20Vicki%20Sue%20Robinson%20in%201976)”, has a [tempo](https://en.wikipedia.org/wiki/Tempo#:~:text=the%20speed%20or%20pace%20of%20a%20given%20composition) of 188.64 bpm, which corresponds to the *allegro* [tempo marking](https://en.wikipedia.org/wiki/Tempo#Approximately_from_the_slowest_to_the_fastest). A Dec clock⏰ticks at a rate of 100 bpm, $\text b^{-1}$, $1\over\text b$, 1 [inverse](https://en.wikipedia.org/wiki/Multiplicative_inverse#:~:text=x%2C%20denoted%20by-,1/x%20or%20x%E2%88%921,-%2C%20is%20a%20number) beat, or 1 perbeat (p), which is 1.15740 times more frequent than a [Hertz](https://en.wikipedia.org/wiki/Hertz#:~:text=one%20event%20(or%20cycle)). # Frequency period wavelength Dec uses p, b, and z, often with metric prefixes, to measure the [frequency](https://en.wikipedia.org/wiki/Frequency#:~:text=the%20number%20of%20occurrences%20of%20a%20repeating%20event%20per%20unit%20of%20time), [period](https://en.wikipedia.org/wiki/Frequency#:~:text=the%20reciprocal%20of%20the%20frequency), and [wavelength](https://en.wikipedia.org/wiki/Wavelength#:~:text=the%20distance%20over%20which%20the%20wave%27s%20shape%20repeats), respectively, of a sound or light wave. The equations below show how frequency, period, and wavelength are related to each other and to speed. The speed of light (sol) is roughly 647.551657 kiloomegars (kv), which is about 881 thousand times faster than the sos. frequency = speed ÷ wavelength = 1 ÷ period period = wavelength ÷ speed = 1 ÷ frequency wavelength = speed × period = speed ÷ frequency The frequency range of the [visible](https://en.wikipedia.org/wiki/Visible_spectrum#:~:text=the%20band%20of%20the%20electromagnetic%20spectrum%20that%20is%20visible%20to%20the%20human%20eye) spectrum of light is ~345.6 to ~914.4 teraperbeats (Tp). The range of sound frequencies which can be [audible](https://en.wikipedia.org/wiki/Hearing_range#:~:text=the%20frequency%20range%20that%20can%20be%20heard%20by%20humans) for humans is ~[10](https://en.wikipedia.org/wiki/Hearing_range#:~:text=humans%20can%20hear%20sound%20as%20low%20as%2012%C2%A0Hz) to ~[24000](https://en.wikipedia.org/wiki/Hearing_range#:~:text=8%5D%20and-,as%20high%20as%2028%C2%A0kHz,-%2C%20though%20the%20threshold) p. The period and wavelength that correspond to the frequency chosen by the range input below are 1000 ÷ ${iobs} p = ${parseFloat((1000 / iobs).toFixed(3))} millibeats (mb) and 735.048 mv ÷ ${iobs} p = ${parseFloat((735.048 / iobs).toFixed(3))} z. ``` {ojs} //| echo: false //| label: iobinput //| class: freqcomponent // https://observablehq.com/@freedmand/sounds viewof iobs = Inputs.range([1, 9999], { step: 1, value: 380, label: "Frequency" }) ``` ``` {ojs} //| echo: false //| label: beatinput //| class: freqcomponent // https://observablehq.com/@freedmand/sounds viewof beats = Inputs.range([1, 999], { step: 1, value: 1, label: "Duration" }) ``` ``` {ojs} //| echo: false //| label: iobplayer //| class: freqcomponent // https://observablehq.com/@freedmand/sounds Play((t) => Math.sin(iobs / .864 * t * 2 * Math.PI), beats * .864, iobs) ``` In addition to p, the limits of human hearing can be expressed in musical [steps](https://en.wikipedia.org/wiki/Steps_and_skips#:~:text=the%20difference%20in%20pitch%20between%20two%20consecutive%20notes%20of%20a%20musical%20scale) (s). Frequencies less than 12.5 p have a negative s value and are unlikely to be audible outside of carefully controlled laboratory experiments. Similarly, frequencies above 109 s or 24320 p represent the upper limit of the audible range. In s, the [range](https://en.wikipedia.org/wiki/Range_(music)#:~:text=the%20distance%20from%20the%20lowest%20to%20the%20highest%20pitch%20it%20can%20play) of an 88-key piano is ~9 to ~81.3. The equations below uses an [octave](https://en.wikipedia.org/wiki/Octave#:~:text=an%20interval%20between%20two%20notes%2C%20one%20having%20twice%20the%20frequency%20of%20vibration%20of%20the%20other) index (i) measured in integer decasteps (Ds) and a note (n) measured in s to convert between p and s. i = ⌊s ÷ 10⌋ = ⌊log2(p ÷ 12.5)⌋ $$\text{n} = \text{s}-10 \times \text{i} = \text{s mod } 10 = \frac{\text{p} \div 2^\text{i}-12.5}{1.25}$$ s = 10 × i + n p = (12.5 + 1.25 × n) × 2i $$10 \times \text{i} + \frac{\text{p}/2^\text{i} - 12.5}{1.25}$$ In the context of music, Dec refers to p values as [pitches](https://en.wikipedia.org/wiki/Pitch_(music)#:~:text=the%20quality%20that%20makes%20it%20possible%20to%20judge%20sounds%20as%20%22higher%22%20and%20%22lower%22%20in%20the%20sense%20associated%20with%20musical%20melodies) and s and s values as [tones](https://en.wikipedia.org/wiki/Musical_tone#:~:text=a%20steady%20periodic%20sound). A typical person can reliably distinguish sounds🔊that [differ](https://en.wikipedia.org/wiki/Cent_(music)#:~:text=Normal%20adults%20are%20able%20to%20recognize%20pitch%20differences%20of%20as%20small%20as%2025%20cents%20very%20reliably) by at least 200 ms. Notably, the A4 [pitch](https://en.wikipedia.org/wiki/Pitch_(music)#:~:text=the%20quality%20that%20makes%20it%20possible%20to%20judge%20sounds%20as%20%22higher%22%20and%20%22lower%22%20in%20the%20sense%20associated%20with%20musical%20melodies) widely used to [tune musical instruments](https://en.wikipedia.org/wiki/Concert_pitch#:~:text=the%20pitch%20reference%20to%20which%20a%20group%20of%20musical%20instruments%20are%20tuned%20for%20a%20performance) is very close to 380 p or 49 s. Like the ten Dec colors, there are ten frequencies that Dec chooses from the audible range to serve as a set of sound labels. These ten frequencies the Dechromatic scale. Dec uses nine [spectral colors](https://en.wikipedia.org/wiki/Visible_spectrum#:~:text=the%20band%20of%20the%20electromagnetic%20spectrum%20that%20is%20visible%20to%20the%20human%20eye) and a tenth color which cannot be defined by a single wavelength, period, or frequency because it is an equal mix of Red and Blue. To make the [audible](https://en.wikipedia.org/wiki/Hearing_range#:~:text=the%20frequency%20range%20that%20can%20be%20heard%20by%20humans) frequency range more intuitive, Humans can hear The typical range for humans extends from Tone 03 to Tone 104.a sound wave include its [frequency](https://en.wikipedia.org/wiki/Frequency#:~:text=the%20number%20of%20occurrences%20of%20a%20repeating%20event%20per%20unit%20of%20time), [pitch](https://en.wikipedia.org/wiki/Pitch_(music)#:~:text=a%20perceptual%20property%20that%20allows%20sounds%20to%20be%20ordered%20on%20a%20frequency%2Drelated%20scale) in p, [period](https://en.wikipedia.org/wiki/Frequency#:~:text=the%20reciprocal%20of%20the%20frequency), musical in s, . From the value selected by the “Frequency” range🎚️input below, we can calculate a pitch: , a : The table The positive (**+**) and negative (**–**) [indexes](https://en.wikipedia.org/wiki/Index#:~:text=an%20integer%20pointer%20into%20an%20array%20data%20structure), hex triplets, and h° in the table below are used by Dec to label🏷️groups of ten, like dod, “[top of the dd](https://en.wiktionary.org/wiki/top_of_the_hour)” tod, and time zones. In addition to colors🎨, Dec also labels🏷️groups of ten with the [musical notes](https://en.wikipedia.org/wiki/Musical_note#:~:text=Chromatic%20scale,-note%20naming%20conventions) that constitute the Dec [chromatic](https://en.wikipedia.org/wiki/Chromatic_scale#:~:text=a%20set%20of%20twelve%20pitches%20(more%20completely%2C%20pitch%20classes)%20used%20in%20tonal%20music) (Dechromatic) [scale](https://en.wikipedia.org/wiki/Scale_(music)#:~:text=any%20consecutive%20series%20of%20notes%20that%20form%20a%20progression%20between%20one%20note%20and%20its%20octave) of the **Ten** **e**qual **t**emperament (Tenet) musical system. # Ten equal temperament (Xet) Tenet (Xet) identifies each Dechromatic scale note with a single-digit integer and expresses all other possible sound🔊frequencies as decimal numbers. In contrast, the notes of the [12 equal temperament](https://en.wikipedia.org/wiki/12_equal_temperament#:~:text=the%20musical%20system%20that%20divides%20the%20octave%20into%2012%20parts) (12et) musical system have names that consist of a letter from A to G and often a symbol such as sharp (♯), half sharp (𝄲), flat (♭), and half flat (𝄳). The sound🔊frequencies of two consecutive Xet Dechromatic scale notes always differ by one s, but the differences between consecutive 12et chromatic scale notes vary from the ~599 millisteps (ms) between A♯ and B to the ~1067 ms between G♯ and A. The rightmost column of the table below shows the 12et notes that are closest to the Xet Dechromatic scale notes. 12et considers B𝄲, D𝄲, and E𝄳 to be [microtones](https://en.wikipedia.org/wiki/Microtonality#:~:text=intervals%20not%20found%20in%20the%20customary%20Western%20tuning%20of%20twelve%20equal%20intervals%20per%20octave). The sound🔊frequency differences between the nearest Xet and 12et notes in the table range from the 8 ms between Notes 9 and A to the ~87 ms between Notes 5 and F. ## Color sound table # Octave note tone The image above applies Dec color🎨labels🏷️to one [octave](https://en.wikipedia.org/wiki/Octave#:~:text=the%20interval%20between%20one%20musical%20pitch%20and%20another%20with%20double%20or%20half%20its%20frequency) of piano🎹keys. In Xet, an octave is 10 s, 1 decastep (Ds), or 104 ms. From top to bottom, the text below the image provides the [scientific pitch name](https://en.wikipedia.org/wiki/Scientific_pitch_notation#:~:text=a%20method%20of%20specifying%20musical%20pitch%20by%20combining%20a%20musical%20note%20name%20(with%20accidental%20if%20needed)%20and%20a%20number%20identifying%20the%20pitch%27s%20octave), integer i sound🔊frequency, and integer millizem (mz) wavelength of the corresponding white key. As octave indexes and frequencies increase, wavelengths decrease. From the perspective of Xet, all of the labeled🏷️keys in the image above are in Octave 4. Octave indexes in Xet and 12et match except for Xet notes with indexes below 2 and 12et notes from A♯ to B𝄲. An octave index is the Xet analog of a clef in staff notation, because both are responsible for setting the reference frame that allows us to interpret the relative pitches of notes as the absolute pitches of tones. Clefs in staff notation and octave indexes in Xet set the reference frame that allows us to When we append a positive note index that is less than ten to an octave index which is a positive integer, we obtain a Xet [musical tone](https://en.wikipedia.org/wiki/Musical_tone#:~:text=a%20steady%20periodic%20sound) index. The tone indexes of the labeled🏷️keys in the image above range from 40.069 to 49.008. Tone 49.008 is A4, the A note widely used to [tune musical instruments](https://en.wikipedia.org/wiki/Concert_pitch#:~:text=the%20pitch%20reference%20to%20which%20a%20group%20of%20musical%20instruments%20are%20tuned%20for%20a%20performance). Tone 41.302 is C4, the “[Middle C](https://en.wikipedia.org/wiki/C_(musical_note)#Middle_C:~:text=above%20the%20top%20line%20of%20the%20bass%20staff%20or%20below%20the%20bottom%20line%20of%20the%20treble%20staff)” in between the [bass](https://en.wikipedia.org/wiki/Clef#Bass_clef) and [treble](https://en.wikipedia.org/wiki/Clef#:~:text=the%20most%20common%20clef%20in%20use%20and%20is%20generally%20the%20first%20clef%20learned%20by%20music%20students)🎼[clefs](https://en.wikipedia.org/wiki/Clef#:~:text=a%20musical%20symbol%20used%20to%20indicate%20which%20notes%20are%20represented%20by%20the%20lines%20and%20spaces%20on%20a%20musical%20staff) of a [grand staff](https://en.wikipedia.org/wiki/Staff_(music)#Grand_staff). The mermaid chart below visualizes the structure of the Xet music notation example above it, which is composed of the Xet equivalents of an ascending C♯ major [arpeggio](https://en.wikipedia.org/wiki/Arpeggio#:~:text=a%20type%20of%20chord%20in%20which%20the%20notes%20that%20compose%20a%20chord%20are%20individually%20sounded%20in%20a%20progressive%20rising%20or%20descending%20order) and a C♯ major [chord](https://en.wikipedia.org/wiki/Chord_(music)#:~:text=a%20group%5Ba%5D%20of%20notes%20played%20together%20for%20their%20harmonic%20consonance%20or%20dissonance). This arpeggio and chord are also shown beneath the mermaid chart in [staff notation](https://en.wikipedia.org/wiki/Musical_notation#Modern_staff_notation:~:text=5%20parallel%20horizontal%20lines%20that%20act%20as%20a%20framework%20upon%20which%20pitches%20are%20indicated%20by%20placing%20oval%20note%2Dheads%20on%20(i.e.%20crossing)%20the%20staff%20lines%2C%20between%20the%20lines%20(i.e.%20in%20the%20spaces)%20or%20above%20and%20below%20the%20staff%20using%20small%20additional%20lines%20called%20ledger%20lines). Whereas staff notation is graphical, Xet notation is [text-based](https://en.wikipedia.org/wiki/Plain_text#:~:text=only%20characters%20of%20readable%20material%20but%20not%20its%20graphical%20representation). ``` 8 | 42 5 8 5 | 2 | ```
Xet vertically aligns chords into columns. A chord can contain either notes that represent tones or the tones themselves. Mixing notes and tones in the same chord is not allowed. The chord in the example above can be written with notes instead of tones because Tone 42 sets Octave 4 as the default. Each line can have its own default octave. In the example below, Tone 46 sets the default on the middle line to Octave 4 but then Tone 50 changes it Octave 5. Based on the default, we know the middle note in the chord represents Tone 50. We can then infer the tones represented by the top and bottom notes because chords are always ordered from highest to lowest tone. ``` 2 | 46 50 2 0 | 6 | ```
Column widths are measured in characters. A column of notes has a width of one character. The three notes vertically aligned in the column below are the Xet equivalent of a F♯ major chord. Tone 50 is able to set the reference frame for all three of these notes, even though they do not all belong to the same octave. Notes that span more than two octaves can be part of the same column but not part of the same reference frame. ``` 2 | 2 | 46 50 2 0 | 2 0 x 0 | 6 | 6 6 | ``` ``` 8 8 | 5 x 5 | 42 x 2 | ``` ``` 2 2 |2 x 2 | 0 x 0 | 0 x 0 | 46 x 6 | 6 6 | ``` ``` 52 2 x | 2 2 | 50 x 0 x | 0 x 0 | 46 x 6 |6 x 6 | ``` ``` 52 2 | 2 ∅ 2 | 50 ∅∅ 0 | 0 ∅ 0 | 46 ∅∅ 6 | 6 6 | ``` Thanks to this convention, we can The first example below uses Xet tones to emulate the F♯ major chord. because aligned three notes in column below consists of notes because the previous in the example below below the example below, notes should be played If a chord spans multiple octaves, it has to be specified with tones. In the example below, Tone 46 sets the octave and then Tone 502) changes it. indicate that these notes are in Octave 4 The whereas the chord (F♯A♯C♯ = 602) spans two octaves. When played as an [arpeggio](https://en.wikipedia.org/wiki/Arpeggio#:~:text=a%20type%20of%20chord%20in%20which%20the%20notes%20that%20compose%20a%20chord%20are%20individually%20sounded%20in%20a%20progressive%20rising%20or%20descending%20order) starting immediately after kkkkk shown below can be written in Xet as one line of text that consists of a [time signature](https://en.wikipedia.org/wiki/Time_signature#Symbolic_signatures:~:text=an%20indication%20in%20music%20notation%20that%20specifies%20how%20many%20note%20values%20of%20a%20particular%20type%20fit%20into%20each%20measure), tones, notes, spaces, and bar (|) characters. 4442 5 8 6 |50 2 2 0 |46 8 5 2 
4442 5 8 6 |50 2 2 0 |46 8 5 2  at the end of every [measure](https://en.wikipedia.org/wiki/Bar_(music)#:~:text=a%20segment%20of%20music%20bounded%20by%20vertical%20lines): 4442 5 8 . [time signatures](https://en.wikipedia.org/wiki/Time_signature#Symbolic_signatures:~:text=an%20indication%20in%20music%20notation%20that%20specifies%20how%20many%20note%20values%20of%20a%20particular%20type%20fit%20into%20each%20measure), 444| The value of a space depends on the [time signatures](https://en.wikipedia.org/wiki/Time_signature#Symbolic_signatures:~:text=an%20indication%20in%20music%20notation%20that%20specifies%20how%20many%20note%20values%20of%20a%20particular%20type%20fit%20into%20each%20measure), which in Xet consist of a top number that defines the number of musical [beats](https://en.wikipedia.org/wiki/Beat_(music)#:~:text=In%20music%20and%20music%20theory%2C%20the%20beat%20is%20the%20basic%20unit%20of%20time) per [measure](https://en.wikipedia.org/wiki/Bar_(music)#:~:text=a%20segment%20of%20music%20bounded%20by%20vertical%20lines) and a bottom number that determines the number of spaces per musical beat. The number of spaces per measure is the product of the top and bottom numbers. If a time signature is never specified, we assume there are four beats per measure, four spaces per beat, and thus sixteen spaces per measure. Whenever The color labels of the examples below, one musical beat is indicated by four spaces (    ). Therefore, a single space ( ) is worth a quarter of a musical beat, which is the equivalent of an eighth note in [common time](https://en.wikipedia.org/wiki/Time_signature#Symbolic_signatures:~:text=time%2C%20also%20called-,common%20time,-or%20imperfect%20time). Similarly Each tone in the [arpeggio](https://en.wikipedia.org/wiki/Arpeggio#:~:text=a%20type%20of%20chord%20in%20which%20the%20notes%20that%20compose%20a%20chord%20are%20individually%20sounded%20in%20a%20progressive%20rising%20or%20descending%20order) shown below that consists of the three C♯ major chord notes immediately above Middle C. Each note in the arpeggio lasts a If we specify that one space ( ) is equivalent to a quarter of a musical beat, this arpeggio could be written in Xet as a series of tones: 42 45 48 . To avoid repeating the octave index, we can specify it at the beginning of the line and place a bar character (|) between it and the three notes of the arpeggio: 4|2 5 8 . Xet indicates note duration with whitespace indicated with one or more spaces following a note or a rest indicates its duration. The single space ( ) that follows each note in the arpeggio example above indicates that each note is held for the shortest duration. The table below shows the note and rest names, symbols, and number of spaces that are equivalent if a quarter note is one beat and there are eight spaces per beat. a single space ( ) is equivalent to an eighth note in. If a piece of music contains sixteenth notes, we will need at least eight spaces per musical is often an eighth note. If these three notes are to be played simultaneously instead of sequentially, they need to be split across three separate lines: 4|2  4|5  4|8  If the three notes are all quarter C♯, F, and G♯,. Rather than annotate music as a series of tones, Xet first identifies an octave at the beginning of a line before the notes that should be played in that octave. the notes that are played simultaneously instead of sequentially are written on separate lines and aligned vertically using whitespace. The example below shows an below Middle C. Notes written on the same line are in the same octave and are played sequentially. Notes can be grouped into a [chord](https://en.wikipedia.org/wiki/Chord_(music)#:~:text=a%20group%5Ba%5D%20of%20notes%20played%20together) such as the F♯ major chord (A♯C♯F♯): 026. All notes, rests, and chords are followed by a Xet separator which indicates their respective durations. A separator that follows a chord applies to all notes in that chord: 026    . As shown in the table below, Xet separators can be color coded.
Note Rest Separator US name UK name
𝅜 𝄺                  double breve
𝅝 𝄻          whole semibreve
𝅗𝅥 𝄼      half minim
𝅘𝅥 𝄽    quarter crotchet
𝅘𝅥𝅮 𝄾 𝄖 eighth quaver
𝅘𝅥𝅯 𝄿 𝄗 sixteenth semiquaver
𝅘𝅥𝅰 𝅀 𝄘 thirty-second demisemiquaver
𝅘𝅥𝅱 𝅁 𝄙 sixty-fourth hemidemisemiquaver
𝅘𝅥𝅲 𝅂 𝄚 hundred twenty-eighth semihemidemisemiquaver
𝄛 two hundred fifty-sixth demisemihemidemisemiquaver
In Xet, a rest is denoted by a null sign (∅). Notes, rests, chords, and their separators are grouped into [measures](https://en.wikipedia.org/wiki/Bar_(music)#:~:text=a%20segment%20of%20music) that have a bar (|) on both sides. Measures are grouped into lines that start with an octave index and end with a [newline](https://en.wikipedia.org/wiki/Newline#:~:text=used%20to%20signify%20the%20end%20of%20a%20line%20of%20text%20and%20the%20start%20of%20a%20new%20one) character. Lines separated by empty lines are played sequentially, whereas groups of lines are played simultaneously. Since each line that represent Octaves 4 and 5, span Notes 40 to 59, and overlap with the majority of the range of 12et treble clef tones: 41.302 to 61.302. Similarly, two lines representing Octaves 2 and 3 are To cover most of the tone range of the bass clef: 21.302 to 41.302, we need two Xet lines labeled as Octaves 2 and 3, Notes 20 to 39. Of these four lines, the top two cover but the treble clef and the bottom two closely match the bass clef. The Xet analog of the 12et treble clef is two lines that represent Octaves 4 and 5, to be played separately are separated by spaces and grouped into measures that end with a bar (|). Measures are grouped into lines that start with an octave and [time signature](https://en.wikipedia.org/wiki/Time_signature#:~:text=an%20indication%20in%20music%20notation%20that%20specifies%20how%20many%20note%20values%20of%20a%20particular%20type%20fit%20into%20each%20measure) and end with a [newline](https://en.wikipedia.org/wiki/Newline#:~:text=used%20to%20signify%20the%20end%20of%20a%20line%20of%20text%20and%20the%20start%20of%20a%20new%20one) character. Groups of lines are played together and are separated by empty lines. With four lines, we can cover Octaves 2, 3, 4, and 5 or equivalently Notes 20 to 59, which is close to the range of the 12et bass and treble [clefs](https://en.wikipedia.org/wiki/Clef#:~:text=a%20musical%20symbol%20used%20to%20indicate%20which%20notes%20are%20represented%20by%20the%20lines%20and%20spaces%20on%20a%20musical%20staff): 21.302 to 61.302. Of these four lines, the top two are analogous to the treble clef and the bottom two closely match the bass clef. All rests except whole rests are followed by a fraction: ½ for a half rest, ¼ for a quarter rest, ⅛ for an eighth rest, and so on. The same goes for notes. The first two [measures](https://en.wikipedia.org/wiki/Bar_(music)#:~:text=a%20segment%20of%20music) of the [chorus](https://en.wikipedia.org/wiki/Chorus#:~:text=the%20part%20of%20a%20song%20that%20is%20repeated%20several%20times) from “[Turn the beat around](https://en.wikipedia.org/wiki/Turn_the_Beat_Around#:~:text=a%20disco%20song%20written%20by%20Gerald%20Jackson%20and%20Peter%20Jackson%2C%20and%20performed%20by%20American%20actress%20and%20singer%20Vicki%20Sue%20Robinson%20in%201976)” are shown below, first using Xet music notation and then a 12et treble clef. 444 | 94 98 88 88 84 68 | 634 ∅4 | 444 | 94 98 88 88 84 68 | 6³4 ∅4 | 444 | 9¼ 9⅛ 8⅛ 8⅛ 8¼ 6⅛ | 6¾ ∅¼ | # Light and sound In his 1704 book entitled [Optiks](https://en.wikipedia.org/wiki/Opticks#:~:text=a%20collection%20of%20three%20books%20by%20Isaac%20Newton)[1], [Isaac Newton](https://en.wikipedia.org/wiki/Isaac_Newton#:~:text=,an%20English%20polymath,-active%20as%20a) presented the first [color🎨wheel](https://en.wikipedia.org/wiki/Color_wheel#:~:text=Newton's%20asymmetric%20color%20wheel%20based%20on%20musical%20intervals) and linked its colors🎨to musical notes. On 2025+080, I read [The Color of Sound](https://www.flutopedia.com/sound_color.htm) by [Clint Goss](https://www.clintgoss.com)[2], which presents a method of connecting musical notes to colors🎨via their frequencies. The note and color🎨pairs in that article are similar to those of the Dechromatic scale. # US customary units The [unit conversion](https://en.wikipedia.org/wiki/Conversion_of_units#:~:text=the%20conversion%20of%20the%20unit%20of%20measurement%20in%20which%20a%20quantity%20is%20expressed) table below shows the [United States](https://en.wikipedia.org/wiki/Imperial_and_US_customary_measurement_systems)🇺🇸(US) customary units that Dec redefines. The values in the first column are approximate [fold changes](https://en.wikipedia.org/wiki/Fold_change#:~:text=measure%20describing%20how%20much%20a%20quantity%20changes%20between%20an%20original%20and%20a%20subsequent%20measurement) from original to redefined units. A fold change of 1 means 0 [change](https://en.wikipedia.org/wiki/Relative_change#:~:text=compare%20two%20quantities%20while%20taking%20into%20account%20the%20%22sizes%22%20of%20the%20things%20being%20compared). Identical fold changes indicate US customary units derived from the same Dec and [International System of Units](https://en.wikipedia.org/wiki/International_System_of_Units#:~:text=the%20world%27s%20most%20widely%20used%20system%20of%20measurement) (SI) units. ## Unit conversion tables # Miles per hour (mph) Unlike Dec and SI, the US customary measurement system does not use metric prefixes to scale units by [powers of ten](https://en.wikipedia.org/wiki/Power_of_10#:~:text=any%20of%20the%20integer%20powers%20of%20the%20number%20ten). Redefined US customary units serve as convenient reference points. US customary volume units have intuitive names and scale by [powers of two](https://en.wikipedia.org/wiki/Power_of_two#:~:text=a%20number%20of%20the%20form%202n%20where%20n%20is%20an%20integer). # Are hectare acre A square kilozem (kz²) is 1 hexakilare, 16 hectares, 1600 [ares](https://en.wikipedia.org/wiki/Hectare#Are), 40 Dec [acres](https://en.wikipedia.org/wiki/Acre#:~:text=%20is-,a%20unit%20of%20land%20area,-used%20in%20the), 0.16 square kilometers (km²), 0.0625 Dec [square miles](https://en.wikipedia.org/wiki/Square_mile#:~:text=US%20unit%20of%20measure%20for%20area), 106 z², or 1 megahexamilliare (Mx). A z² is 1 hexamilliare (x), 16 square decimeters (dm²), 1.7 Dec [square feet](https://en.wikipedia.org/wiki/Square_foot#:~:text=the%20area%20of%20a%20square%20with%20sides%20of%201%20foot)🦶 (f²), or 256 Dec square inches (i²). A square decazem (Dz²) is 1 hexadeciare, 16 [square meters](https://en.wikipedia.org/wiki/Square_metre#:~:text=the%20unit%20of%20area%20in%20the%20International%20System%20of%20Units) (m²), ~19.75 Dec [square yards](https://en.wikipedia.org/wiki/Square_yard#:~:text=U.S.%20customary%20unit%20of%20area), or 100 x. # Drop wineglass keg A cubic decizem (dz³) is 1 cubic nanotaur (nc³), 1 Dec wineglass, 2 Dec ounces, 64 milliliters (mL), 1000 Dec drops (g), or 1000 cubic centizems (cz³). A dz³ of water🌊weighs $1\over7$ Dec pounds, 64 grams, or 1000 Dec grains (g). A Dec ounce (u) of water weighs $1\over14$ Dec pounds, 500 Dec g, or 32 grams. In Dec, the symbols g and u can refer to either volume or mass. Mass divided by volume is density.
[Wikimedia](https://commons.wikimedia.org/wiki/File:Da_Vinci_Vitruve_Luc_Viatour_2.svg)
A z³ is 1 keg. A keg of water🌊weighs 64 kilograms, 128 Dec pounds, or a 1000 Dec kilograins (kg). If [Leonardo da Vinci](https://en.wikipedia.org/wiki/Leonardo_da_Vinci#:~:text=an%20Italian%20polymath%20of%20the%20High%20Renaissance)’s [Vitruvian Man](https://en.wikipedia.org/wiki/Vitruvian_Man#:~:text=a%20drawing%20by%20the%20Italian%20Renaissance%20artist%20and%20scientist%20Leonardo%20da%20Vinci) were 4 z tall, we could measure 1 z from his knees to his feet🦶or from his elbows💪to his fingertips. If he also weighed 1000 Dec kg, his [body mass index](https://en.wikipedia.org/wiki/Body_mass_index#:~:text=the%20body%20mass%20divided%20by%20the%20square%20of%20the%20body%20height) (bmi) would be 62.5 kg per x ($\text {kg}\over\text x$) or 25 kilograms per m² ($\text {kilogram}\over\text m^2$). # Body mass index (bmi) A normal bmi ranges from 46.25 to 62.5 $\text {kg}\over\text x$ or 18.5 to 25 $\text {kg}\over\text m^2$. A person with a bmi above 75 $\text {kg}\over\text x$ or 30 $\text {kg}\over\text m^2$ can be classified as obese. A bmi of ${kgrains} kg ÷ ${zem2} x = ${bmi} $\text {kg}\over\text x$ = ${kgrams} kilograms ÷ ${meter2} m² = ${bmim2} $\text {kilograms}\over\text m^2$ is considered ${bmiStr}. ``` {ojs} //| echo: false //| label: kginput viewof kilograins = Inputs.range([0, 10000], {label: "Kilograins", value: 1000, step: 1}) ``` ``` {ojs} //| echo: false //| label: zinput viewof zems = Inputs.range([0, 10], {label: "Zems", value: 4, step: 0.01}) ``` # Centizem centimeter inch
[Wikimedia](https://commons.wikimedia.org/wiki/File:Ruler_illustration.svg)
The longest length depicted in the image of a ruler📏above is 1 dz, 1 nc, 4 centimeters, or $8\over5$ Dec inches, and the shortest length is $1\over2$ mz, $1\over5$ millimeters, $1\over125$ Dec inches, or $1\over127$ US customary inches. A US customary inch is $127\over2$ mz, $127\over5$ millimeters, or $127\over125$ Dec inches. A Dec inch is $5\over2$ centimeters. A centimeter is $5\over2$ cz. A z is 4 decimeters. A decimeter is 4 Dec inches. # Claude Boniface Collignon In 1788, [Claude Boniface Collignon](https://en.wikipedia.org/wiki/Claude_Boniface_Collignon#:~:text=a%20French%20attorney%20who%20contributed%20to%20scientific%20and%20social%20reforms%20in%20the%20time%20of%20the%20French%20Revolution) proposed measuring length in dz or nc and tracking time in deks, dd, md, µd, and nanodays (nd)[3]. On 2025+039, while searching for units similar to c and z, I noticed the definition of a zem, 1 z = 10-8 c = 40 centimeters, in a table of [ten possible length units](https://www.roma1.infn.it/~dagos/history/sm/node12.html) from a 2004 [arxiv](https://arxiv.org/abs/physics/0412078) [article](https://www.roma1.infn.it/~dagos/history/sm/sm.html) entitled “Why does the meter beat the second?”[4]. # Summary This article introduces the Dec measurement system and describes how Dec uses metric prefixes and the properties of the planet Earth🌍to define units based on turns for geographic coordinates, compass🧭directions, dates, times, speeds, distances, areas, volumes, and weights. Each unit has a unique name, such as λ, m, r, y, d, b, v, c, z, or x. Dec attempts to bridge the gap, improve interoperability, and faciliate conversion between the US customary and SI measurement systems by redefining US customary units. Redefinition of US customary units makes inches ~1.58% shorter, miles ~0.58% shorter, pints ~5.67% larger, ounces ~8.21% larger, and pounds ~1.23% lighter. Dec color🎨labels🏷can convey an impression of a value at a glance. Xet sound🔊labels🏷allow us to estimate a value without even having to look at it. Both types of labels can help avoid confusion when [decimal separators](https://en.wikipedia.org/wiki/Decimal_separator#:~:text=In%20English%2Dspeaking%20countries%2C%20the%20decimal%20point%20is%20usually%20a%20small%20dot%20%28.%29%20placed%20either%20on%20the%20baseline) appear, disappear, or move due to a measurement unit change such as the addition, removal, or replacement of a metric prefix. # Next Now that you have had a taste of Dec, I hope that you are hungry for more! If so, dive🤿deeper into Dec [dates](../../dec/date) and [times](../../dec/time) before tackling Dec [snaps](../../dec/snap)🫰and [spans](../../dec/span)🌈. My [filter](../../quarto/filter), [include](../../quarto/include), and [script](../../quarto/script) articles discuss the [Quarto](../../quarto) publishing system and how I display Dec [dates](../../dec/date) in the [navigation bar](https://en.wikipedia.org/wiki/Navigation_bar#:~:text=a%20section%20of%20a%20graphical%20user%20interface%20intended%20to%20aid%20visitors%20in%20accessing%20information), the [article list](../../list), and [title blocks](https://quarto.org/docs/authoring/title-blocks.html) of my website.
# Cite Of the several different [bibliography file formats](https://pandoc.org/MANUAL.html#specifying-bibliographic-data) supported by [Quarto](https://quarto.org), I recommend storing [citations](https://en.wikipedia.org/wiki/Citation#:~:text=a%20reference%20to%20a%20source) in [yaml](https://en.wikipedia.org/wiki/YAML#:~:text=a%20human%2Dreadable%20data%20serialization%20language) files. With the `bibliography.yml` file shown below, you can cite this article and the 2021 article entitled [`chrono`-Compatible Low-Level Date Algorithms](https://howardhinnant.github.io/date_algorithms) in which [Howard Hinnant](https://howardhinnant.github.io) describes the algorithms that serve as the foundation of Dec dates (Hinnant 2021+185).
**bibliography.yml** ``` yml --- references: - id: laptev2025 author: - family: Laptev given: Martin issued: literal: 2026+001 title: Dec type: article URL: https://maptv.github.io/dec - id: hinnant2021 author: - family: Hinnant given: Howard issued: literal: 2021+185 title: chrono-Compatible Low-Level Date Algorithms type: article URL: https://howardhinnant.github.io/date_algorithms ... ```
As demonstrated by the previous sentence above and the [References](#references) section below, Quarto citations can include Dec dates. By default, Quarto formats citations according to the [Chicago Manual of Style](https://chicagomanualofstyle.org/) author-date format. Per this format, the citation for this article would appear as [Laptev, Martin](https://maptv.github.io/about). 2026+001. “Dec.” ${decYearP0}+${decDateP0}. . Instead of using Quarto [citation syntax](https://quarto.org/docs/authoring/citations.html#sec-citations), you can also prepare a list of references using [footnotes](https://quarto.org/docs/authoring/markdown-basics.html#footnotes). As an example, I included citations for the Hinnant date algorithm article[5] in both the [references](#references) and [footnotes](#footnotes) sections. In alphabetical order below, you will find a list of the [Observable](http://observablehq.com) notebooks that I adapted into many of the visualizations above. # Appendix # Observable notebooks
0. [Armstrong, Zan](https://observablehq.com/@zanarmstrong) 2023+057. “Text color annotations in markdown.” ${decYearP0}+${decDateP0}. . 1. [Bostock, Mike](https://observablehq.com/@mbostock) 2020+335. “Time Zones.” ${decYearP0}+${decDateP0}. . 2. [Bostock, Mike](https://observablehq.com/@mbostock) 2022+037. “Solar Terminator.” ${decYearP0}+${decDateP0}. . 3. [Bostock, Mike](https://observablehq.com/@mbostock) 2023+314. “Input: Table.” ${decYearP0}+${decDateP0}. . 4. [Edwards, Paul](https://observablehq.com/@pjedwards). 2022+171. “Compass Rose as legend with colors.” ${decYearP0}+${decDateP0}. . 5. [Freedman, Dylan](https://observablehq.com/@freedmand). 2017+345. “Sounds.” ${decYearP0}+${decDateP0}. . 6. [Gordon, Marcus A.](https://observablehq.com/@magfoto). 2018+288. “Wavelengths and Spectral Colours.” ${decYearP0}+${decDateP0}. . 7. [Harmath, Dénes](https://observablehq.com/user/@thsoft). 2018+104. “ABC.” ${decYearP0}+${decDateP0}. . 8. [Johnson, Ian](https://observablehq.com/@enjalot) 2021+121. “Draggable World Map Coordinates Input.” ${decYearP0}+${decDateP0}. . 9. [Lim, Maddie](https://observablehq.com/@maddievision) 2018+330. “Enneagram.” ${decYearP0}+${decDateP0}. . 10. [Paavanb](https://observablehq.com/@paavanb). 2024+006. “Progressive Color Picker.” ${decYearP0}+${decDateP0}. . 11. [Patel, Amit](https://observablehq.com/@redblobgames). 2021+290. “Compass Rose.” ${decYearP0}+${decDateP0}. . 12. [Pettiross, Jeff](https://observablehq.com/@pettiross) 2024+150. “Categorical color scheme test tool.” ${decYearP0}+${decDateP0}. 13. [Rieder, Lukas](https://observablehq.com/@lukasrieder) 2023+032. “Editable table.” ${decYearP0}+${decDateP0}. . 14. [Rivière, Philippe](https://observablehq.com/@fil) 2022+259. “Add a class to an observable input.” ${decYearP0}+${decDateP0}. . 15. [Rivière, Philippe](https://observablehq.com/@fil) 2023+330. “D3 Projections.” ${decYearP0}+${decDateP0}. . 16. [Yamahata, Christophe](https://observablehq.com/@christophe-yamahata) 2021+119. “Great circle: shortest distance between two locations on Earth 🌏.” ${decYearP0}+${decDateP0}. .
# Glossary
- a: arcbeat, a hundred thousandth of a circle, 0.0036 degrees, .216 arcminutes, 12.96 arcseconds - b: beat, centimilliday, a hundred thousandth of an day, 864 milliseconds - mb: millibeat, centimicroday, a thousandth of a beat, a hundred millionth of a day, 864 microseconds - bpc: a musical or heart beat per centiday, a tenth of a beat per milliday, 0.0694 beats per minute, 100 beats per day - bpm: a musical or heart beat per milliday, ten beats per centiday, 0.694 beats per minute, 1000 beats per day - bmi: body mass index, kilograins of body mass divided by height in zem squared (kg/z²) - c: taur, 𝜏*r*, 100000 kilozem, 40000 kilometers, nearly the circumference of the Earth, roughly the product of 𝜏 and the radius of the Earth, approximately the dividend of the surface area and the diameter of the Earth - mc: millitaur, *m*𝜏*r*, a thousandth of a taur, 100 kilozem, 40 kilometers - nc: nanotaur, *n*𝜏*r*, a thousandth of a taur, 100 millizem, 1 decizem, 4 centimeters - nc³: cubic nanotaur, *n*𝜏*r*³, 1 cubic decizem - d: day, a tenth of a decaday, a seventh of week, a fifth of a pentaday, 10 decidays, 24 hours, 100 centidays, 1000 millidays, 1440 minutes, 86400 seconds, 100000 beats, the inverse of a quotidie - dek: decaday, a group of ten days, 2 pentadays - pent: pentaday, a group of five days, half a decaday - dod: day of decaday - ba: the name of day of decaday 0, the frontmost voiced consonant and the most open vowel - ve: the name of day of decaday 1, the second frontmost voiced consonant and the second most open vowel - di: the name of day of decaday 2, the third frontmost voiced consonant and the third most open vowel - zo: the name of day of decaday 3, the fourth frontmost voiced consonant and the fourth most open vowel - gu: the name of day of decaday 4, the least frontmost voiced consonant and the least open vowel - pa: the name of day of decaday 5, the frontmost voiceless consonant and the most open vowel - fe: the name of day of decaday 6, the second frontmost voiceless consonant and the second most open vowel - ti: the name of day of decaday 7, the third frontmost voiceless consonant and the third most open vowel - so: the name of day of decaday 8, the fourth frontmost voiceless consonant and the fourth most open vowel - ku: the name of day of decaday 9, the least frontmost voiceless consonant and the least open vowel - dop: day of pentaday - dom: day of month - dow: day of week - doy: day of year, decaday \* 10 + dod - dd: deciday, a tenth of a day, 2.4 hours, 144 minutes - cd: centiday, a hundredth of a day, 0.24 hours, 14.4 minutes - md: milliday, a thousandth of a day, 1.44 minutes - cmd: centimilliday, a hundred thousandth of a day, 1 beat, 864 milliseconds - µd: microday, a millionth of a day, 86.4 milliseconds - nd: nanoday, a billionth of a day, 86.4 microseconds - °: degree, 1/360 turns, 180/𝜋 or 360/𝜏 radians - c°: compass degree - h°: hue degree - e: egg, 1000 grains, 2 ounces, 64 grams - f: Dec foot, 0.75 zem, 75 millimeter - f²: Dec square foot, 5625 square centizem, 9 square decimeter - g: drop (gutta in Latin) or grain (granum in Latin), 64 microliters or 64 milligrams - kg: kilograin or kilodrop, 64 grams or 64 milliliters - Mg: megagrain or megadrop, 64 kilograms or 64 liters - h: hand, 0.25 zem, 1 decimeter - hex: hexadecimal, base 16 - hsl: hue saturation lightness - hsv: hue saturation value - i: inch, a sixteenth of a zem, 25 millimeter - i²: Dec square inch, 3906.25 square millizem, 625 square millimeters - k: keg, cubic zem, 64 liters, 1000 wine glasses, a million drops, half a barrel - L: liter, 15625 drops, a cubic decimeter - mL: milliliter, a cubic centimeter, a thousandth of a liter, 15.625 drops - µL: microliter, a cubic millimeter, a millionth of a liter, 0.015625 drops - m: meridian, a full circle around the Earth moving North or South; used in the abbreviations a.m. (antemeridian) and p.m. (postmeridian) - dm: decimeridian, a tenth of a meridian - mm: millimeridian, a thousandth of a meridian - m²: square meter, 6.25 square zem - km²: square kilometer, 6.25 square kilozem - dm²: square decimeter, 6.25 square decizem - λ: parallel, a full circle around the Earth moving West or East; the English alphabet equivalent of λ is the letter “l”, which occurs three times in the word “parallel” and represents a ***l***ine that crosses every possible ***l***ongitude at the same ***l***atitude - dλ: deciparallel, a tenth of a parallel - mλ: milliparallel, a thousandth of a parallel - n: a musical note - ba: the name of musical note 0, the frontmost voiced consonant and the most open vowel - ve: the name of musical note 1, the second frontmost voiced consonant and the second most open vowel - di: the name of musical note 2, the third frontmost voiced consonant and the third most open vowel - zo: the name of musical note 3, the fourth frontmost voiced consonant and the fourth most open vowel - gu: the name of musical note 4, the least frontmost voiced consonant and the least open vowel - pa: the name of musical note 5, the frontmost voiceless consonant and the most open vowel - fe: the name of musical note 6, the second frontmost voiceless consonant and the second most open vowel - ti: the name of musical note 7, the third frontmost voiceless consonant and the third most open vowel - so: the name of musical note 8, the fourth frontmost voiceless consonant and the fourth most open vowel - ku: the name of musical note 9, the least frontmost voiceless consonant and the least open vowel - i: an index that represents either the ten musical steps in a musical octave that result in a two-fold increase in frequency or the ten days in a decaday; the Greek letter iota represents ten in the Greek numeral system - p: perbeat, the inverse of a beat, 1/beat, once per beat, every beat, 100000 q; the letter “p” can be flipped vertically to produce the letter “b” - Tp: teraperbeat, 1012 perbeat, the inverse of a picobeat, 1/picobeat, once per picobeat, every picobeat - q: quotidie, the inverse of a day, a hundred thousandth of a perbeat; the letter “q” can be flipped vertically to produce the letter “d” - r: compass rose, a full circle along the horizon, 360 compass degress - mr: compass millirose, a thousandth of a circle along the horizon, .36 compass degress - rad: radian, $1\over\tau$ turns, $360\over\tau$ degrees, $1\over 2\pi$ turns, $180\over\pi$ degrees - rgb: red green blue - s: step, a tenth of a two fold change in frequency from one octave to an adjacent octave - Ds: decastep, octave, a two fold change in frequency from one octave to an adjacent octave - ms: millistep, a ten thousandth of a two fold change in frequency from one octave to an adjacent octave - SI: [International System of Units](https://en.wikipedia.org/wiki/International_System_of_Units#:~:text=the%20world%27s%20most%20widely%20used%20system%20of%20measurement) - sol: speed of light, 647.55170928 kiloomegars, 299792458 meters per second - sos: speed of sound, 735.048 milliomegars, 340.3 meters per second - 𝜏: 2𝜋 or approximately 6.2831853 - Tenet: ten equal temperance - Xet: Tenet - 12et: twelve equal temperance - tod: time of day - t: turn, 360 degrees, 𝜏 or 2𝜋 radians - ct: centiturn, a hundredth of a turn, 3.6 degrees, 𝜏/100 or 𝜋/50 radians - dt: deciturn, a tenth of a turn, 36 degrees, 𝜏/10 or 𝜋/5 radians - mt: milliturn, a thousandth of a turn, .36 degrees, 𝜏/1000 or 𝜋/500 r $\pi\over 500$ radians - tzo: time zone offset - u: ounce (uncia in Latin), 500 grains, 32 grams, 500 drops, 32 milliliters - utc: [Coordinated Universal Time](https://en.wikipedia.org/wiki/Coordinated_Universal_Time#:~:text=the%20primary%20time%20standard%20globally%20used%20to%20regulate%20clocks%20and%20time) - US: [United States](https://en.wikipedia.org/wiki/Imperial_and_US_customary_measurement_systems) - v: omegar, ωr, 1041.6 Dec miles per hour, approximately 1035.62 US miles per hour, 1.6 megameters per hour, 0.4629 kilometers per second, roughly 1.36 times the speed of sound - kv: kiloomegar, kωr, 1.6 gigameters per hour, 0.4629 megameters per second, approximately 0.1544% of the speed of light - mv: milliomegar, mωr, 1.0416 Dec miles per hour, roughly 1.03562 US miles per hour, 1.6 kilometers per hour, 0.4629 meters per second, approximately 0.136% the speed of sound - w: wineglass, 64 milliters, 2 ounces, cubic decizem, 1000 drops - x: hexamilliare, square zem, z², 16 square decimeters, 1.7 Dec square feet, 256 Dec square inches - Mx: megahexamilliare, a million square zem, square kilozem, kz², hexakilare, 16 hectares, 1600 ares, 40 Dec acres, 0.16 square kilometers, 0.0625 Dec square miles - y: year - my: milliyear, a thousandth of a year - yoe: year of era, integer years since the Dec epoch - z: zem, zone equatorial meter, 4 decimeters, 16 Dec inches - kz²: square kilozem, a million square zem, megahexamilliare, Mx, hexakilare, 16 hectares, 1600 ares, 40 Dec acres, 0.16 square kilometers, 0.0625 Dec square miles - kz: kilozem, 1000 zem, 400 meters, a quarter Dec mile - z²: square zem, hexamilliare, 16 square decimeters, 1.7 Dec square feet, 256 Dec square inches - Dz²: square decazem, 1 hexadeciare, 16 square meters, 19.75 Dec square yards, 100 square zem - z³: cubic zem, 1 keg, 64 liters, 1000 wine glasses, a million drops, half a barrel - dz³: cubic decizem, 1000 drops, 64 milliliters, 2 ounces, 1 wine glass - cz³: cubic centizem, 1 drop, 64 microliters - dz: decizem, a tenth of a zem, 4 centimeters - cz: centizem, a hundredth of a zem, 4 millimeters - mz: millizem, a thousandth of a zem, 0.4 millimeters
``` {ojs} //| echo: false //| output: false // https://observablehq.com/@parlant/editable-table function createTable(data, options) { let table = html`
`; table.innerHTML = xss.filterXSS(tableify.default(data)); makeTableEditable(table, options); return table; } table.setAttribute("class", "table") tableify = import("https://cdn.skypack.dev/tableify@1.1.1?min") xss = import("https://cdn.skypack.dev/xss@1.0.14?min") function createCellDiv(value, max) { return `
${Math.round(value)}
` } liveTable = observeTable(table) function makeTableEditable(table, options) { const defaults = {headerEditable: false, appendRows: true}; options = options === undefined ? {} : options; for (let key in defaults) { options[key] = options[key] === undefined ? defaults[key] : options[key]; } return Generators.observe((_notify) => { const navigate = (event) => { const cell = event.target; const row = cell.closest('tr'); const table = row.closest('table'); const isBody = row.parentNode.tagName === 'TBODY'; const isHeader = row.parentNode.tagName === 'THEAD'; const colIndex = cell.cellIndex; const colCount = row.cells.length; const rowIndex = row.rowIndex; const rowCount = table.rows.length; const headStop = options.headerEditable ? 0 : 1; let direction = null; let x = colIndex; let y = rowIndex; if (![ // https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes#heading-a-full-list-of-key-event-values 8, 9, 13, 16, 17, 18, 27, 33, 34, 35, 36, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 109, 189 ].includes(event.which)) { event.preventDefault(); } else { switch(event.code) { // Tab cycles through the table, adding new rows as needed. case 'Tab': event.preventDefault(); if (event.altKey || event.shiftKey) { direction = -1; if (x - 1 < 0) { if (y - 1 < headStop) break; x = colCount - 1; y = y - 1; } else { x = x - 1; } } else { direction = 1; if (x + 1 === colCount) { x = 0; y = y + 1; } else { x = x + 1; } } break; // Plain Enter navigates downwards. // Shift + Enter or Alt + Enter goes up to the cell above. case 'Enter': event.preventDefault(); if (event.altKey || event.shiftKey) { direction = -1; x = x; y = y - 1; } else { direction = 1; x = x; y = y + 1; } break; // The arrow keys allow you to navigate through cells. // No new rows are added. case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': case 'Enter': if (!event.altKey) break; event.preventDefault(); switch(event.code) { case 'ArrowUp': direction = -1; y = Math.max(y - 1, headStop); break; case 'ArrowDown': direction = 1; y = Math.min(y + 1, rowCount - 1); break; case 'ArrowLeft': direction = -1; x = Math.max(x - 1, 0); break; case 'ArrowRight': direction = 1; x = Math.min(x + 1, colCount - 1); break; } break; } if (direction !== null) { let nextRow; if (y === rowCount) { nextRow = options.appendRows ? addRowRelativeTo(row, direction) : row; } else { nextRow = table.rows[y]; } let nextCell = nextRow.cells[x]; focusCell(nextCell); } }; } table.addEventListener("keydown", navigate, false); if (table.rows.length > 0) { for (let row of table.rows) { if (!options.headerEditable && row.rowIndex === 0) continue; for (let cell of row.cells) { if (cell.cellIndex === 0) continue; let cellValue = cell.innerText cell.innerHTML = `
${cellValue}
` if (cell.cellIndex === 3) continue; cell.contentEditable = true; } } } return () => table.removeEventListener("keydown", navigate); }); } function observeTable(table) { return Generators.observe((notify) => { const keyinput = (event) => notify(parseTableData(table)); table.addEventListener("input", keyinput, false); notify(parseTableData(table)); return () => window.removeEventListener("input", keyinput); }); } function parseTableData(table) { const header = []; const data = []; for (let row of table.rows) { const rowIndex = row.rowIndex; const isHeader = row.parentNode.tagName === 'THEAD' && rowIndex === 0; let obj = {}; for (let cell of row.cells) { const head = header[cell.cellIndex]; if (isHeader) { header.push(cell.innerText); } else { obj[head] = cell.innerText; } } if (!isHeader) data.push(obj); } return JSON.parse(JSON.stringify(data)); } function focusCell(td) { const s = window.getSelection(); const r = document.createRange(); let textNode = td.childNodes[0]; const i = td.innerText.length; td.focus(); if (textNode) { r.setStart(textNode, i); r.setEnd(textNode, i); } else { r.selectNode(td); } s.removeAllRanges(); s.addRange(r); } function addRowRelativeTo(tr, direction) { const newTr = document.createElement('tr'); const insertPosition = direction == 1 ? 'afterend' : 'beforebegin'; tr.insertAdjacentElement(insertPosition, newTr); for (let _td of Array.from(tr.children)) { const newTd = document.createElement('td'); newTd.appendChild(document.createTextNode('')); newTd.contentEditable = true; newTr.appendChild(newTd); } return newTr; } // https://observablehq.com/@observablehq/text-color-annotations-in-markdown rstbtn = d3.create('button').html('Reset').attr("id", "rstbtn").attr("class", "btn btn-quarto"); // https://observablehq.com/@recifs/add-a-class-to-an-observable-input--support function labelToggle(inputType, inputLabel, inputValue, inputId) { const input = inputType({label: inputLabel, value: inputValue}); input.setAttribute("id", inputId); return input; } // https://observablehq.com/@observablehq/synchronized-inputs function set(input, value) { input.value = value; input.dispatchEvent(new Event("input", {bubbles: true})); } // https://observablehq.com/@observablehq/input-table // https://stackoverflow.com/a/52079217 // Converts from degrees to radians. function toRadians(degrees) { return degrees * Math.PI / 180; }; // Converts from radians to degrees. function toDegrees(radians) { return radians * 180 / Math.PI; } function coor2bear(strt, dest) { const [strtLng, strtLat] = strt.map(toRadians); const [destLng, destLat] = dest.map(toRadians); return (toDegrees(Math.atan2( Math.sin(destLng - strtLng) * Math.cos(destLat), Math.cos(strtLat) * Math.sin(destLat) - Math.sin(strtLat) * Math.cos(destLat) * Math.cos(destLng - strtLng) )) + 360) % 360; } function yiq(color) { const {r, g, b} = d3.rgb(color); return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1 } function textcolor(content, style = {}) { const { background, color = yiq(background) > 0.51 ? "#000" : "white", padding = "0 2px", borderRadius = "4px", fontWeight = 400, fontFamily = "monospace", ...rest } = typeof style === "string" ? {background: style} : style; return htl.html`${content}`; } function turn2comp(turn) { return ["N", "NE", "E", "SE", "S", "SW", "W", "NW"][Math.round(turn / 125) % 8] } function dec2rgb(d) { const color = d3.color(piecewiseColor(d % 1)) return [color.r, color.g, color.b] } function dec2hue(d) { return rgbToHsl(...dec2rgb(d))[0] * 1000 } piecewiseColor = d3.piecewise(d3.interpolateRgb, [ "#f00", // 0 0 red "#f50", // 0.25 20 yr "#f60", // 0.5 24 yr orangered "#f70", // 0.75 28 yr "#f90", // 1 36 yr orange "#fb0", // 1.25 44 yr "#fc0", // 1.5 48 yr yelloworange "#fd0", // 1.75 52 yr "#ff0", // 2 60 yellow "#ef0", // 2.25 64 gy "#df0", // 2.5 68 gy limeyellow "#cf0", // 2.75 72 gy "#af0", // 3 80 gy lime "#8f0", // 3.25 88 gy "#7f0", // 3.5 92 gy greenlime "#6f0", // 3.75 96 gy "#0f0", // 4 120 green "#0f7", // 4.25 148 cg "#0f9", // 4.5 156 cg cyangreen "#0fb", // 4.75 164 cg "#0ff", // 5 180 cyan "#0cf", // 5.25 192 bc "#0bf", // 5.5 196 bc azurecyan "#0af", // 5.75 200 bc "#08f", // 6 208 bc azure "#06f", // 6.25 216 bc "#05f", // 6.5 220 bc blueazure "#04f", // 6.75 224 bc "#00f", // 7 240 blue "#50f", // 7.25 260 mb "#60f", // 7.5 264 mb purpleblue "#70f", // 7.75 268 mb "#90f", // 8 276 mb purple "#b0f", // 8.25 284 mb "#c0f", // 8.5 288 mb violetpurple "#d0f", // 8.75 292 mb "#f0f", // 9 300 magenta "#f0a", // 9.25 320 rm "#f08", // 9.5 328 rm "#f06", // 9.75 336 rm "#f00", // 0 0 red ]) hueMtr = Math.round(colorD) hueDeg = dec2hue(colorD / 1000) * .36 hStr = `hsl(${hueDeg}` slStr = `, ${colorS / 10}%, ${colorL / 10}%)` hslStr = hStr + slStr bkgH = ({background: hStr + ", 100%, 50%)"}) bkgHsl = ({background: hslStr}) rainbowMtr = textcolor(hueMtr, bkgHsl) rainbowDir = textcolor(turn2comp(hueMtr), bkgHsl) rainbowDegC = textcolor(Math.round(colorD *.36), bkgHsl) rainbowDegH = textcolor(Math.round(hueDeg), bkgHsl) rainbowHex = textcolor(shortenHex(d3.color(hslStr).formatHex()).slice(1), bkgHsl) rainbowN5zn = textcolor('-5', d3.color(`hsl(180${slStr}`).formatHex()) rainbowP583 = textcolor('5.83̅', d3.color(`hsl(129.88235294117646${slStr}`).formatHex()) // Show preview swatches of color preview = () => { const container = DOM.element('div') d3.select(container).attr('style', 'display: flex;') d3.select(container) .append('div') .text('Selected') .style('font-weight', 'bold') .append('div') .classed('swatch', true) .style('background-color', `hsl(${dec2hue(colorD / 1000) * .36}, ${colorS / 10}%, ${colorL / 10}%`); d3.select(container) .append('div') .text('Preview') .style('font-style', 'italic') .append('div') .classed('swatch', true) .style('background-color', `rgb(${hoverRGB[0]}, ${hoverRGB[1]}, ${hoverRGB[2]}`) d3.select(container).selectAll('div.swatch') .style('width', '100px') .style('height', '100px') .style('margin-right', '8px') .style('padding', '4px') return container } // The currently hovered color mutable hoverRGB = [255, 0, 0] /** * Draw an interactive color bar * @param colorFn (t: number) => [number, number, number] Given a position on the bar (between 0 and 1), return its RGB * @param onSelect (t: number) => void Callback for when a position is selected on the bar */ function colorbar({colorFn, onSelect}) { const WIDTH = 360 const HEIGHT = 32 const container = DOM.element('div') function handleSelect(coords) { const t = coords[0] / WIDTH onSelect(t) } let isDragging = false const canvas = d3.select(container).append('canvas') .attr('width', WIDTH) .attr('height', HEIGHT) .attr('style', 'cursor: crosshair; border: 1px solid black; border-radius: 2px;') .on('mousedown', function() { isDragging = true handleSelect(d3.mouse(this)) }) .on('mouseup', () => { isDragging = false; }) .on('mousemove', function() { const coords = d3.mouse(this) if (isDragging) { handleSelect(coords) } mutable hoverRGB = colorFn(coords[0] / WIDTH) }) const ctx = canvas.node().getContext('2d') const imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT) // Possible optimization: cache d3.range so we're not recalculating it a million times d3.range(WIDTH).forEach(colIdx => { const t = colIdx / WIDTH const rgb = colorFn(t) d3.range(HEIGHT).forEach(rowIdx => { const screenIdx = rowIdx * WIDTH + colIdx const imgDataIdx = 4 * screenIdx imgData.data[imgDataIdx] = rgb[0] imgData.data[imgDataIdx + 1] = rgb[1] imgData.data[imgDataIdx + 2] = rgb[2] imgData.data[imgDataIdx + 3] = 255 }) }); ctx.putImageData(imgData, 0, 0) return container; } initialRGB = [255, 0, 0] initialHSL = rgbToHsl(...initialRGB) viewof colorR = Inputs.input(initialRGB[0]) viewof colorG = Inputs.input(initialRGB[1]) viewof colorB = Inputs.input(initialRGB[2]) viewof colorD = Inputs.input(dec2hue(initialHSL[0])) viewof colorS = Inputs.input(1000) viewof colorL = Inputs.input(500) viewof colorA = Inputs.input(1000) /** * Update all color values based on current HSL */ onUpdateHSL = function(h, s, l) { const rgb = hslToRgb(h / 1000, s / 1000, l / 1000) console.log(h) set(viewof colorR, rgb[0]) set(viewof colorG, rgb[1]) set(viewof colorB, rgb[2]) } /** * Credit to github.com/mjackson Source: https://gist.github.com/mjackson/5311256 * Converts an RGB color value to HSL. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes r, g, and b are contained in the set [0, 255] and * returns h, s, and l in the set [0, 1]. * * @param Number r The red color value * @param Number g The green color value * @param Number b The blue color value * @return Array The HSL representation */ function rgbToHsl(r, g, b) { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [ h, s, l ]; } /** * Credit to github.com/mjackson Source: https://gist.github.com/mjackson/5311256 * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param {number} h The hue * @param {number} s The saturation * @param {number} l The lightness * @return {Array} The RGB representation */ function hslToRgb(h, s, l){ let r, g, b; if(s == 0){ r = g = b = l; // achromatic } else { let q = l < 0.5 ? l * (1 + s) : l + s - l * s; let p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } /** * Credit github.com/mjackson. Source: https://gist.github.com/mjackson/5311256 */ function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } // https://observablehq.com/@maddievision/simple-canvas pixelRatio = window.devicePixelRatio; createCanvas = (width, height) => { const canvas = document.createElement('canvas'); canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; return canvas } renderWithScale = (context, renderFunction) => { context.save(); context.scale(pixelRatio, pixelRatio); renderFunction() context.restore(); } quickRender = (width, height, renderer) => { const canvas = createCanvas(width, height) const context = canvas.getContext('2d') renderWithScale(context, () => { renderer(context) }) return canvas } // http://howardhinnant.github.io/date_algorithms.html#civil_from_days function unix2dote(unix, zone, offset = 719468) { return [(unix ?? Date.now()) / 86400000 + ( zone = zone ?? -Math.round( (new Date).getTimezoneOffset() / 144) ) / 10 + offset, zone] } function unix2dote1(unix, zone, offset = 719468) { return [(unix ?? Date.now()) / 86400000 + ( zone = zone ?? (-Math.round( (new Date).getTimezoneOffset() / 144) + 10) % 10 ) / 10 + offset, zone] } octConnections = [ [0, 4], [1, 5], [2, 6], [3, 7], [4, 0], [5, 1], [6, 2], [7, 3], ] decConnections = [ [0, 5], [1, 6], [2, 7], [3, 8], [4, 9], [5, 0], [6, 1], [7, 2], [8, 3], [9, 4] ] hsl8 = [ `hsl(0, ${colorS / 10}%, ${colorL / 10}%)`, // 0 `hsl(44, ${colorS / 10}%, ${colorL / 10}%)`, // 875 `hsl(68, ${colorS / 10}%, ${colorL / 10}%)`, // 750 `hsl(96, ${colorS / 10}%, ${colorL / 10}%)`, // 625 `hsl(180, ${colorS / 10}%, ${colorL / 10}%)`, // 500 `hsl(216, ${colorS / 10}%, ${colorL / 10}%)`, // 375 `hsl(264, ${colorS / 10}%, ${colorL / 10}%)`, // 250 `hsl(292, ${colorS / 10}%, ${colorL / 10}%)`, // 125 ] hsl10 = [ `hsl(0, ${colorS / 10}%, ${colorL / 10}%)`, // red `hsl(36, ${colorS / 10}%, ${colorL / 10}%)`, // orange `hsl(60, ${colorS / 10}%, ${colorL / 10}%)`, // yellow `hsl(80, ${colorS / 10}%, ${colorL / 10}%)`, // lime `hsl(120, ${colorS / 10}%, ${colorL / 10}%)`, // green `hsl(180, ${colorS / 10}%, ${colorL / 10}%)`, // cyan `hsl(208, ${colorS / 10}%, ${colorL / 10}%)`, // azure `hsl(240, ${colorS / 10}%, ${colorL / 10}%)`, // blue `hsl(276, ${colorS / 10}%, ${colorL / 10}%)`, // violet `hsl(300, ${colorS / 10}%, ${colorL / 10}%)`, // magenta `hsl(0, ${colorS / 10}%, ${colorL / 10}%)`, // red ] hsla10 = [ `hsla(0, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // red `hsla(36, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // orange `hsla(60, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // yellow `hsla(80, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // lime `hsla(120, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // green `hsla(180, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // cyan `hsla(208, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // azure `hsla(240, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // blue `hsla(276, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // violet `hsla(300, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // magenta `hsla(0, ${colorS / 10}%, ${colorL / 10}%, ${colorA / 10}%)`, // red ] function dote2date(dote, zone = 0) { const cote = Math.floor(( dote >= 0 ? dote : dote - 146096 ) / 146097), dotc = dote - cote * 146097, yotc = Math.floor((dotc - Math.floor(dotc / 1460) + Math.floor(dotc / 36524) - Math.floor(dotc / 146096) ) / 365); return [ yotc + cote * 400, dotc - (yotc * 365 + Math.floor(yotc / 4) - Math.floor(yotc / 100) ), zone]} sunLonHsl = textcolor(sunLon, `hsl(${d3.hsl(piecewiseColor(sunLon % 1000 / 1000)).h}` + slStr) sunLatHsl = textcolor(sunLat, `hsl(${d3.hsl(piecewiseColor((sunLat + 1000) % 1000 / 1000)).h}` + slStr) dz = unix2dote(now) ydz = dote2date(...dz) decZone = ydz[2] decZonePos = (decZone + 10) % 10 decSign = decZone < 0 ? "+" : "–" ydzP0 = dote2date(...unix2dote(now, 0)) decYearP0 = ydzP0[0] decYdaP0 = ydzP0[1] decDateP0 = Math.floor(decYdaP0) decTimeP0 = ydzP0[1] % 1 decDekP0 = Math.floor(decDateP0 / 10) decDodP0 = decDateP0 % 10 decYearP0hsl0 = textcolor(decYearP0, `hsl(${d3.hsl(piecewiseColor(decYearP0 % 1000 / 1000)).h}` + slStr) decYearP0hsl1 = textcolor(decYearP0, `hsl(${d3.hsl(piecewiseColor(decYearP0 % 1000 / 1000)).h}` + slStr) decDateP0hsl0 = textcolor(decDateP0.toString().padStart(3, "0"), `hsl(${d3.hsl(piecewiseColor(decDateP0 / (365 + isLeapP0))).h}` + slStr) decDateP0hsl1 = textcolor(decDateP0.toString().padStart(3, "0"), `hsl(${d3.hsl(piecewiseColor(decDateP0 / (365 + isLeapP0))).h}` + slStr) decYdaP0hsl = textcolor(decYdaP0.toFixed(5).padStart(9, "0"), `hsl(${d3.hsl(piecewiseColor(decYdaP0 / (365 + isLeapP0))).h}` + slStr) decTimeP0hsl0 = textcolor((decTimeP0 * 10).toFixed(4), `hsl(${d3.hsl(piecewiseColor(decTimeP0)).h}` + slStr) decTimeP0hsl1 = textcolor((decTimeP0 * 10).toFixed(4), `hsl(${d3.hsl(piecewiseColor(decTimeP0)).h}` + slStr) decDekP0hsl = textcolor(decDekP0, `hsl(${d3.hsl(piecewiseColor(decDekP0 / 37)).h}` + slStr) decDodP0hsl = textcolor(decDodP0, `hsl(${d3.hsl(piecewiseColor(decDodP0 / 10)).h}` + slStr) decLon = longitude % 10 decLonHsl = textcolor(parseFloat(decLon.toFixed(2)), `hsl(${d3.hsl(piecewiseColor(decLon / 10)).h}` + slStr) decZon = Math.floor(decLon) decZonHsl = textcolor(decZon, `hsl(${d3.hsl(piecewiseColor(decZon / 10)).h}` + slStr) parLat = textcolor(parseFloat(latitude.toFixed(3)), `hsl(${d3.hsl(piecewiseColor((latitude + 1) % 1)).h}` + slStr) parCos = Math.cos(latitude * 2 * Math.PI) parLen = textcolor(parseFloat(parCos.toFixed(3)), `hsl(${d3.hsl(piecewiseColor(parCos)).h}` + slStr) conversionFactor = costype === "turns" ? "" : costype === "radians" ? tex`\,\tau\!` : tex`\times360` zemsLeft = 1000 - 50 * Math.floor(now / 86400000 % 1 * 1000 % 1 * 100 % 21) zLeft = textcolor(zemsLeft, `hsl(${d3.hsl(piecewiseColor(zemsLeft / 1000)).h}` + slStr) point0long = long2turn(Place_A[0], 1) point0zone = Math.floor(point0long) point0lHsl = textcolor(parseFloat(point0long.toFixed(2)), `hsl(${d3.hsl(piecewiseColor(point0long / 10)).h}` + slStr) point0zHsl = textcolor(point0zone, `hsl(${d3.hsl(piecewiseColor(point0zone / 10)).h}` + slStr) isLeapP0 = decYearP0 % 4 == 0 && decYearP0 % 100 != 0 || decYearP0 % 400 == 0; timezones = FileAttachment("../asset/timezones.json").json() zones = topojson.feature(timezones, timezones.objects.timezones).features mesh = topojson.mesh(timezones, timezones.objects.timezones) color = d3.scaleSequential(d3.interpolateRdBu).domain([-12, 14]) coor = [[[-18, -89.98], [-18, 89.98], [18, 89.98], [18, -89.98], [-18, -89.98], ]] deczones = [...Array(10).keys()].map( i => ({ "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [coor[0].map(t => [t[0]+36*i, t[1]])] }, "properties": [] }) ) // https://observablehq.com/@enjalot/draggable-world-map-coordinates-input // https://observablehq.com/@christophe-yamahata/great-circle-shortest-distance-between-two-locations-on-ea function worldMapCoordinates(config = {}, dimensions) { var n_point; var lonA, lonB, latA, latB; const { value = [], title, description, width = dimensions[0] } = Array.isArray(config) ? {value: config} : config; const height = dimensions[1]; [lonA, latA] = value[0]; [lonB, latB] = value[1]; lonA = lonA != null ? lonA : 90; latA = latA != null ? latA : 0.025; lonB = lonB != null ? lonB : -90; latB = latB != null ? latB : 36; const formEl = html`
`; const context = DOM.context2d(width, height); const canvas = context.canvas; const projection = config[2] .precision(0.1) .fitSize([width, height], { type: "Sphere" }); const path = d3.geoPath(projection, context).pointRadius(2.5); formEl.append(canvas); function fillMesh(f) { context.beginPath(); path(f); context.fillStyle = color(f.properties.zone); context.fill(); context.innerHTML = `${f.properties.places} ${f.properties.time_zone}`; } function draw(lon0, lat0, lon1, lat1) { if (!utctoggle) { context.beginPath(); path({type: "Sphere"}); context.fillStyle = window.darkmode ? "#007FFF" : mapcolors.ocean; context.fill(); if (gridtoggle) { deczones.map((f, i) => { context.beginPath(); path(f); context.fillStyle = hsla10[i]; context.fill(); }) } } if (utctoggle) { zones.map(f => fillMesh(f)) } context.beginPath(); path(land); if (!utctoggle) { context.fillStyle = window.darkmode ? "#0808" : mapcolors.land; context.fill(); } context.strokeStyle = `#000`; context.stroke(); if (bordertoggle) { context.beginPath(); path(borders); context.lineWidth = 1.25; context.strokeStyle = window.darkmode ? "#aaa" : "#333"; context.stroke(); } if (utctoggle) { context.beginPath(); path(mesh); context.lineWidth = 1.25; context.strokeStyle = `#999`; context.stroke(); } if (gridtoggle) { context.beginPath(); path(graticule); context.lineWidth = 1.25; context.strokeStyle = utctoggle || !window.darkmode ? "#000" : "#fff"; context.stroke(); context.fillStyle = "#000"; context.font = width < 760 ? "14px serif" : width < 990 ? "17px serif" : "23px serif"; d3.range(-1.5, 342 + 1, 36).map(x => context.fillText(long2zone(x), ...projection([x, 54.7]))); d3.range(-1.5, 342 + 1, 36).map(x => context.fillText(long2zone(x), ...projection([x, -59.7]))); // context.font = width < 760 ? "12px serif" : "21px serif"; // context.fillStyle = `#000`; // d3.range(-1.5, 342 + 1, 36).map(x => context.fillText(long2zone(x), ...projection([x, 27.5]))); // d3.range(-1.5, 342 + 1, 36).map(x => context.fillText(long2zone(x), ...projection([x, -48]))); // d3.range(-18, 336 + 1, 36).map(x => context.fillText(formatLongitude(x), ...projection([x, 90]))); // d3.range(-18, 336 + 1, 36).map(x => context.fillText(formatLongitude(x), ...projection([x, -90]))); } if (suntoggle) { context.beginPath(); path(night); context.fillStyle = "rgba(0,0,255,0.3)"; context.fill(); context.beginPath(); path.pointRadius(width / 84 + 5); path({type: "Point", coordinates: sun}); context.strokeStyle = "#0009"; context.fillStyle = "#ff0b"; context.lineWidth = 1; context.stroke(); context.fill(); } if (lon0 != null && lat0 != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon0, lat0]], id: "point0test"}; context.beginPath(); path.pointRadius(point_radius_2); path(pointPath); context.fillStyle = window.darkmode ? "#A24" : "#FDF"; context.fill(); context.strokeStyle = window.darkmode ? "white" : "black"; context.stroke(); } if (lon1 != null && lat1 != null) { const pointPath = { type: "MultiPoint", coordinates: [[lon1, lat1]] }; context.beginPath(); path.pointRadius(point_radius_2); path(pointPath); context.fillStyle = window.darkmode ? "#24B" : "#BFF"; context.fill(); context.strokeStyle = window.darkmode ? "white" : "black"; context.stroke(); } // We draw the path between 2 points var interpolation = d3.geoInterpolate([lon0,lat0],[lon1,lat1]); var nb_points = d3.geoDistance([lon0,lat0],[lon1,lat1])*20; for(let i = 1; i t.name === "Equirectangular (plate carrée)")); set(viewof colorD, 0) set(viewof colorS, 1000) set(viewof colorL, 500) table.rows[1].cells[1].innerHTML = createCellDiv(800, 10) table.rows[2].cells[1].innerHTML = createCellDiv(800, 10) table.rows[1].cells[2].innerHTML = createCellDiv(0, 2.5) table.rows[2].cells[2].innerHTML = createCellDiv(100, 2.5) table.rows[1].cells[3].innerHTML = createCellDiv(0, 10) table.rows[2].cells[3].innerHTML = createCellDiv(500, 10) draw(lonA, latA, lonB, latB); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); } table.onkeyup = function(ev) { if ([ // https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes#heading-a-full-list-of-key-event-values 9, 13, 27 ].includes(ev.which)) { lonA = turn2long(liveTable[0].Milliparallel); latA = turn2degr(liveTable[0].Millimeridian); lonB = turn2long(liveTable[1].Milliparallel); latB = turn2degr(liveTable[1].Millimeridian); const point0bear = Math.round(lati2turn(coor2bear([lonA, latA], [lonB, latB]))) set(viewof colorD, point0bear) table.rows[1].cells[1].innerHTML = createCellDiv(long2turn(lonA), 10) table.rows[2].cells[1].innerHTML = createCellDiv(long2turn(lonB), 10) table.rows[1].cells[2].innerHTML = createCellDiv(lati2turn(latA), 2.5) table.rows[2].cells[2].innerHTML = createCellDiv(lati2turn(latB), 2.5) table.rows[1].cells[3].innerHTML = createCellDiv(point0bear, 10) table.rows[2].cells[3].innerHTML = createCellDiv(lati2turn(coor2bear([lonB, latB], [lonA, latA])), 10) draw(lonA, latA, lonB, latB); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); } else if ([ // https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes#heading-a-full-list-of-key-event-values 8, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 109, 189 ].includes(ev.which)) { lonA = turn2long(liveTable[0].Milliparallel); latA = turn2degr(liveTable[0].Millimeridian); lonB = turn2long(liveTable[1].Milliparallel); latB = turn2degr(liveTable[1].Millimeridian); const point0bear = Math.round(lati2turn(coor2bear([lonA, latA], [lonB, latB]))) set(viewof colorD, point0bear) table.rows[1].cells[3].innerHTML = createCellDiv(point0bear, 10) table.rows[2].cells[3].innerHTML = createCellDiv(lati2turn(coor2bear([lonB, latB], [lonA, latA])), 10) draw(lonA, latA, lonB, latB); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); } } rstbtn.on('click', resetlatlon); document.getElementsByClassName("quarto-color-scheme-toggle")[0].onclick = function (e) { window.quartoToggleColorScheme(); window.darkmode = document.getElementsByTagName("body")[0].className.match(/quarto-dark/) ? true : false; draw(lonA, latA, lonB, latB); return false; }; const form = input({ type: "worldMapCoordinates", title, description, display: v => "", // html`
// Longitude: ${lonA != null ? lonA.toFixed(2) : ""} //     // Latitude: ${latA != null ? latA.toFixed(2) : ""} //
//
// Longitude: ${lonB != null ? lonB.toFixed(2) : ""} //     // Latitude: ${latB != null ? latB.toFixed(2) : ""} //
`, getValue: () => [[lonA != null ? lonA : null, latA != null ? latA : null], [lonB != null ? lonB : null, latB != null ? latB : null]], form: formEl }); return form; } point_radius = width / 900 * mapsize / 100 + 3 point_radius_2 = width / 150 * mapsize / 100 + 3 Place_A = coordinates[0] Place_B = coordinates[1] distance_km = (d3.geoDistance(Place_A, Place_B)* 6371).toFixed(0) distance_mc = distance_km / 40 distance_mcHsl0 = textcolor(parseFloat(distance_mc.toFixed(0)), `hsl(${d3.hsl(piecewiseColor(distance_mc % 1000 / 1000)).h}` + slStr) distance_mcHsl1 = textcolor(parseFloat(distance_mc.toFixed(0)), `hsl(${d3.hsl(piecewiseColor(distance_mc % 1000 / 1000)).h}` + slStr) distance_c = distance_mc / 1000 distance_cHsl = textcolor(parseFloat(distance_c.toFixed(3)), `hsl(${d3.hsl(piecewiseColor(distance_c % 1)).h}` + slStr) velocity_v = travelspeed / 1000 velocity_vHsl0 = textcolor(parseFloat(velocity_v.toFixed(3)), `hsl(${d3.hsl(piecewiseColor(velocity_v)).h}` + slStr) velocity_vHsl1 = textcolor(parseFloat(velocity_v.toFixed(3)), `hsl(${d3.hsl(piecewiseColor(velocity_v)).h}` + slStr) velocity_mvHsl = textcolor(parseFloat(travelspeed.toFixed(0)), `hsl(${d3.hsl(piecewiseColor(travelspeed / 1000)).h}` + slStr) traveltime = Math.round(distance_mc) / Math.round(travelspeed) traveltimeHsl0 = Number.isFinite(traveltime) ? textcolor(parseFloat(Math.round(traveltime * 1000).toFixed(3)), `hsl(${d3.hsl(piecewiseColor(traveltime % 1)).h}` + slStr) : traveltime traveltimeHsl1 = Number.isFinite(traveltime) ? textcolor(parseFloat(traveltime.toFixed(3)), `hsl(${d3.hsl(piecewiseColor(traveltime % 1)).h}` + slStr) : traveltime nb_points = Math.round(distance_km/150) d3format = require("d3-format@1") function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`
`; if (!form) form = html`
`; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`
${title}
` ); if (description) form.append( html`
${description}
` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; } // https://observablehq.com/@fil/d3-projections projections = [ { name: "Airocean", value: d3.geoAirocean }, { name: "Airy’s minimum error", value: d3.geoAiry }, { name: "Aitoff", value: d3.geoAitoff }, { name: "American polyconic", value: d3.geoPolyconic }, { name: "Armadillo", value: d3.geoArmadillo, options: { clip: { type: "Sphere" } } }, { name: "August", value: d3.geoAugust }, { name: "azimuthal equal-area", value: d3.geoAzimuthalEqualArea }, { name: "azimuthal equidistant", value: d3.geoAzimuthalEquidistant }, { name: "Baker dinomic", value: d3.geoBaker }, { name: "Berghaus’ star", value: d3.geoBerghaus, options: { clip: { type: "Sphere" } } }, { name: "Bertin’s 1953", value: d3.geoBertin1953 }, { name: "Boggs’ eumorphic", value: d3.geoBoggs }, { name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs, options: { clip: { type: "Sphere" } } }, { name: "Bonne", value: d3.geoBonne }, { name: "Bottomley", value: d3.geoBottomley }, { name: "Bromley", value: d3.geoBromley }, { name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly }, { name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon }, { name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman }, { name: "Cahill-Keyes", value: d3.geoCahillKeyes }, { name: "Collignon", value: d3.geoCollignon }, { name: "conic equal-area", value: d3.geoConicEqualArea }, { name: "conic equidistant", value: d3.geoConicEquidistant }, { name: "Craig retroazimuthal", value: d3.geoCraig }, { name: "Craster parabolic", value: d3.geoCraster }, { name: "Cox", value: d3.geoCox }, { name: "cubic", value: d3.geoCubic }, { name: "cylindrical equal-area", value: d3.geoCylindricalEqualArea }, { name: "cylindrical stereographic", value: d3.geoCylindricalStereographic }, { name: "dodecahedral", value: d3.geoDodecahedral }, { name: "Eckert I", value: d3.geoEckert1 }, { name: "Eckert II", value: d3.geoEckert2 }, { name: "Eckert III", value: d3.geoEckert3 }, { name: "Eckert IV", value: d3.geoEckert4 }, { name: "Eckert V", value: d3.geoEckert5 }, { name: "Eckert VI", value: d3.geoEckert6 }, { name: "Eisenlohr conformal", value: d3.geoEisenlohr }, { name: "Equal Earth", value: d3.geoEqualEarth }, { name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular }, { name: "Fahey pseudocylindrical", value: d3.geoFahey }, { name: "flat-polar parabolic", value: d3.geoMtFlatPolarParabolic }, { name: "flat-polar quartic", value: d3.geoMtFlatPolarQuartic }, { name: "flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal }, { name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut }, { name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal }, { name: "general perspective", value: d3.geoSatellite }, { name: "Gingery", value: d3.geoGingery, options: { clip: { type: "Sphere" } } }, { name: "Ginzburg V", value: d3.geoGinzburg5 }, { name: "Ginzburg VI", value: d3.geoGinzburg6 }, { name: "Ginzburg VIII", value: d3.geoGinzburg8 }, { name: "Ginzburg IX", value: d3.geoGinzburg9 }, { name: "Goode’s homolosine", value: d3.geoHomolosine}, { name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine, options: { clip: { type: "Sphere" } } }, { name: "gnomonic", value: d3.geoGnomonic }, { name: "Gringorten square", value: d3.geoGringorten }, { name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial }, { name: "Guyou square", value: d3.geoGuyou }, { name: "Hammer", value: d3.geoHammer }, { name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal, options: { clip: { type: "Sphere" } } }, { name: "HEALPix", value: d3.geoHealpix, options: { clip: { type: "Sphere" } } }, { name: "Hill eucyclic", value: d3.geoHill }, { name: "Hufnagel pseudocylindrical", value: d3.geoHufnagel }, { name: "icosahedral", value: d3.geoIcosahedral }, { name: "Imago", value: d3.geoImago }, { name: "Kavrayskiy VII", value: d3.geoKavrayskiy7 }, { name: "Lagrange conformal", value: d3.geoLagrange }, { name: "Larrivée", value: d3.geoLarrivee }, { name: "Laskowski tri-optimal", value: d3.geoLaskowski }, { name: "Loximuthal", value: d3.geoLoximuthal }, { name: "Mercator", value: d3.geoMercator }, { name: "Miller cylindrical", value: d3.geoMiller }, { name: "Mollweide", value: d3.geoMollweide }, { name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide, options: { clip: { type: "Sphere" } } }, { name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres, options: { clip: { type: "Sphere" } } }, { name: "Natural Earth", value: d3.geoNaturalEarth1 }, { name: "Natural Earth II", value: d3.geoNaturalEarth2 }, { name: "Nell–Hammer", value: d3.geoNellHammer }, { name: "Nicolosi globular", value: d3.geoNicolosi }, { name: "orthographic", value: d3.geoOrthographic }, { name: "Patterson cylindrical", value: d3.geoPatterson }, { name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial }, { name: "rectangular polyconic", value: d3.geoRectangularPolyconic }, { name: "Robinson", value: d3.geoRobinson }, { name: "sinusoidal", value: d3.geoSinusoidal }, { name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal, options: { clip: { type: "Sphere" } } }, { name: "sinu-Mollweide", value: d3.geoSinuMollweide }, { name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide, options: { clip: { type: "Sphere" } } }, { name: "stereographic", value: d3.geoStereographic }, { name: "Lee’s tetrahedal", value: d3.geoTetrahedralLee }, { name: "Times", value: d3.geoTimes }, { name: "Tobler hyperelliptical", value: d3.geoHyperelliptical }, { name: "transverse Mercator", value: d3.geoTransverseMercator }, { name: "Van der Grinten", value: d3.geoVanDerGrinten }, { name: "Van der Grinten II", value: d3.geoVanDerGrinten2 }, { name: "Van der Grinten III", value: d3.geoVanDerGrinten3 }, { name: "Van der Grinten IV", value: d3.geoVanDerGrinten4 }, { name: "Wagner IV", value: d3.geoWagner4 }, { name: "Wagner VI", value: d3.geoWagner6 }, { name: "Wagner VII", value: d3.geoWagner7 }, { name: "Werner", value: d3.geoBonne ? () => d3.geoBonne().parallel(90) : null }, { name: "Wiechel", value: d3.geoWiechel }, { name: "Winkel tripel", value: d3.geoWinkel3 } ] mapcolors = ({ night: "#719fb6", day: "#ffe438", grid: "#4b6a79", ocean: "#adeeff", land: "#90ff7888", sun: "#ffb438" }) function long2turn(degrees = -180, e = 3) { // turns: e=0, deciturns: e=1, etc. return (((degrees %= 360) < 0 ? degrees + 360 : degrees) + 18) / (360 / 10**e) % 10**e; } function turn2degr(turns = -500, e = 3) { // turns: e=0, deciturns: e=1, etc. return turns % 10**e * (360 / 10**e) } function turn2long(turns = -500, e = 3) { // turns: e=0, deciturns: e=1, etc. return turns % 10**e * (360 / 10**e) - 18 } function long2zone(degrees = -180) { return Math.floor(long2turn(degrees, 1)); } function lati2turn(degrees = -180, e = 3) { // turns: e=0, deciturns: e=1, etc. return (degrees %= 360) / (360 / 10**e) % 10**e; } selectedProjection = select ? select.value() : d3.geoEquirectangular() projection = { let proj = selectedProjection; if (proj.rotate) proj.rotate([-turn2long(yaw), -turn2degr(pitch), turn2degr(roll)]); return proj; } sun = { const now = new Date; const day = new Date(+now).setUTCHours(0, 0, 0, 0); const t = solar.century(now); const longitude = (day - now) / 864e5 * 360 - 180; return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)]; } sunLon = Math.round(long2turn(sun[0])) sunLat = Math.round(lati2turn(sun[1])) night = d3.geoCircle().radius(90).center(antipode(sun))() antipode = ([longitude, latitude]) => [longitude + 180, -latitude] height = { const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere); const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); return dy; } d3 = require("d3@5", "d3-array@3", "d3-geo@3", "d3-geo-projection@4", "d3-geo-polygon@1.8") sphere = ({type: "Sphere"}) graticule = d3.geoGraticule().stepMinor([36, 36]).stepMajor([36, 36])() graticule.coordinates = graticule.coordinates.map( i => i.map(j => j.map((k, index, arr) => i.length === 3 && index === 0 ? k - 18 : k)) ) land = topojson.feature(world, world.objects.land) world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json").then(response => response.json()) topojson = require("topojson-client@3") solar = require("solar-calculator@0.3/dist/solar-calculator.min.js") borders = topojson.mesh(countries, countries.objects.countries, (a, b) => a !== b) countries = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json").then(response => response.json()) deccolors = [ `hsl(20${slStr}`, `hsl(24${slStr}`, `hsl(28${slStr}`, `hsl(36${slStr}`, `hsl(44${slStr}`, `hsl(48${slStr}`, `hsl(52${slStr}`, `hsl(60${slStr}`, `hsl(64${slStr}`, `hsl(68${slStr}`, `hsl(72${slStr}`, `hsl(80${slStr}`, `hsl(88${slStr}`, `hsl(92${slStr}`, `hsl(96${slStr}`, `hsl(120${slStr}`, `hsl(148${slStr}`, `hsl(156${slStr}`, `hsl(164${slStr}`, `hsl(180${slStr}`, `hsl(192${slStr}`, `hsl(196${slStr}`, `hsl(200${slStr}`, `hsl(208${slStr}`, `hsl(216${slStr}`, `hsl(220${slStr}`, `hsl(224${slStr}`, `hsl(240${slStr}`, `hsl(260${slStr}`, `hsl(264${slStr}`, `hsl(268${slStr}`, `hsl(276${slStr}`, `hsl(284${slStr}`, `hsl(288${slStr}`, `hsl(292${slStr}`, `hsl(300${slStr}`, `hsl(320${slStr}`, `hsl(328${slStr}`, `hsl(336${slStr}`, `hsl(0${slStr}`, ] viewof size = Inputs.range([50, 700], { value: 300, step: 20, label: 'size' }) viewof numMajorTicks = Inputs.range([0, 45], { value: 6, step: 2, label: "Major ticks" }) viewof numMinorTicks = Inputs.range([0, 10], { value: 2, step: 1, label: "Minor ticks" }) function repeat(component, N, initialAngle=0) { // NOTE: if component is a function, it will be called with (angle, i) if (N <= 0) return ""; let result = []; for (let i = 0; i < N; i++) { let angle = (360 / N) * i + initialAngle; let el = typeof component === 'function'? component(angle, i) : component; result.push(`${el}`); } return result.join(""); } function tick(radius, length, color='black') { return ``; } function directionMarker(radius, fontSize) { return (angle, _) => { let label = {0: 'N', 45: 'NE', 90: 'E', 135: 'SE', 180: 'S', 225: 'SW', 270: 'W', 315: 'NW'}[angle] ?? '??'; return `${label}`; }; } function turnMarker(radius, fontSize) { return (angle, _) => { let label = {0: '0', 45: '125', 90: '250', 135: '375', 180: '500', 225: '625', 270: '750', 315: '875'}[angle] ?? '??'; return `${label}`; }; } function pie(radius, width, narrowness=1.0, piecolors) { return (_, i) => ``; } margin = size / 14 padding = 42 radius = size / 2 - margin - padding window.darkmode = document.getElementsByTagName("body")[0].className.match(/quarto-dark/) ? true : false; // https://observablehq.com/@observablehq/categorical-palette-tool function displayPalette(palette, { darkMode = false } = {}) { return htl.html`
${cielabScatter(palette, { darkMode: darkMode })}
${lightnessSpectrum(palette, { darkMode: darkMode })}
${swatches(palette)}
` } paletteDots = function(palette, { darkMode = false } = {}) { return Plot.plot( { marks: [ Plot.dot(palette, { x: (d,i) => i * 36, r: 16, fill: { value: (d) => d, label: "Color" }, stroke: darkMode ? "white" : "#202020" , tip: { format: { x: false }, fill: darkMode ? "#202020" : "white" } }), Plot.text(palette.map((d,i) => i), { x: (d) => d * 36, dx: 18, dy: 16, opacity: 0.8 }), ], x: { domain: [ 0, 320 ], ticks: 0 }, height: 48, width: (palette.length) * 40, marginTop: 16, style: { fontSize: 18, overflow: "visible" } }) } function cielabScatter(palette, { darkMode = false } = {}) { let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})})); return Plot.plot({ width: colorsize, height: colorsize, style: { fontSize: 12 }, marks: [ Plot.frame({rx: size / 2, ry: size / 2, opacity: 0.2}), Plot.gridX({ticks: 3, opacity: 0.2}), Plot.gridY({ticks: 3, opacity: 0.2}), Plot.ruleX([0], {opacity: 0.25}), Plot.ruleY([0], {opacity: 0.25}), Plot.dot(labPalette, { x: "a", y: "b", r: 5, fill: { value: (d) => d.color, label: "Color" }, channels: { L: { value: "l", label: "L*" } }, tip: { format: { fill: (d,i) => `${i}` }, fill: "#202020", } }), ], x: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "a*" }, y: { domain: [-80, 80], ticks: 3, tickRotate: 0, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "b*" } }); } function lightnessSpectrum(palette, { darkMode = false } = {}) { let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})})); return Plot.plot({ height: colorsize, width: 70, style: { fontSize: 12, overflow: "visible" }, // let the tip overflow the rect of the plot marks: [ Plot.tickY( labPalette, { y: (d) => d.l, stroke: { value: (d) => d.color, label: "Color" }, strokeWidth: 3, tip: { anchor: "right", frameAnchor: "left", format: { fontSize: 12, stroke: (d,i) => `${i}`, a: true, b: true }, fill: "#202020" }, channels: { a: { value: "a", label: "a*" }, b: { value: "b", label: "b*" } }, }) ], y: { domain: [30, 100], grid: true, tickSize: 0, labelAnchor: "center", label: "L*", labelArrow: false }, }) } function swatches(palette) { return Plot.plot({ height: colorsize, width: 50, x: {ticks: 0}, margin: 0, marks: [ Plot.barX( palette, { y: (d,i) => i, fill: (d) => d, inset: -1 } ) ] })} colorsize = 210 kilograms = kilograins * 0.064 kgrains = parseFloat(kilograins.toFixed(2)) kgrams = parseFloat(kilograms.toFixed(2)) zem2 = parseFloat((zems**2).toFixed(2)) meter2 = parseFloat(((zems*.4)**2).toFixed(2)) bmi = parseFloat((kilograins / zems**2).toFixed(2)) bmim2 = parseFloat((kilograms / meter2).toFixed(2)) bmiStr = bmi < 46.25 ? "underweight" : bmi < 62.5 ? "normal" : bmi < 75 ? "overweight" : "obese" // https://observablehq.com/@magfoto/wavelengths-and-spectral-colours // takes wavelength in nm and returns an rgba value function wavelengthToColor(wavelength) { let R, G, B, alpha, colorSpace, wl = wavelength, gamma = 1; if (wl >= 380 && wl < 440) { R = -1 * (wl - 440) / (440 - 380); G = 0; B = 1; } else if (wl >= 440 && wl < 490) { R = 0; G = (wl - 440) / (490 - 440); B = 1; } else if (wl >= 490 && wl < 510) { R = 0; G = 1; B = -1 * (wl - 510) / (510 - 490); } else if (wl >= 510 && wl < 580) { R = (wl - 510) / (580 - 510); G = 1; B = 0; } else if (wl >= 580 && wl < 645) { R = 1; G = -1 * (wl - 645) / (645 - 580); B = 0.0; } else if (wl >= 645 && wl <= 780) { R = 1; G = 0; B = 0; } else { R = 0; G = 0; B = 0; } // intensty is lower at the edges of the visible spectrum. if (wl > 780 || wl < 380) { alpha = 0; } else if (wl > 700) { alpha = (780 - wl) / (780 - 700); } else if (wl < 420) { alpha = (wl - 380) / (420 - 380); } else { alpha = 1; } colorSpace = ["rgba(" + (R * 100) + "%," + (G * 100) + "%," + (B * 100) + "%, " + alpha + ")", R, G, B, alpha] // colorSpace is an array with 5 elements. // The first element is the complete code as a string. // Use colorSpace[0] as is to display the desired color. // Use the last four elements alone or together to access each of the individual r, g, and b channels. return colorSpace; } // https://observablehq.com/@freedmand/sounds function piano(stlibWidth) { const width = 960; const keyHeight = 450; const height = 575; const whiteKeys = 11; const blackKeys = [1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1]; const whiteOffsets = blackKeys.reduce((x, y) => x.concat([y + x[x.length - 1] + 1]), [0]); const svg = html``; function wrap(elem, note) { const freq = 440 * Math.pow(2, note / 12); // Play a note when clicked. const oscillator = ctx.createOscillator(); const gain = ctx.createGain(); gain.gain.value = 0; oscillator.type = 'square'; oscillator.frequency.setValueAtTime(freq, ctx.currentTime); oscillator.connect(gain); gain.connect(ctx.destination); oscillator.start(); elem.style.cursor = 'pointer'; elem.onclick = () => { gain.gain.cancelScheduledValues(ctx.currentTime); gain.gain.linearRampToValueAtTime(0.1, ctx.currentTime + 0.05); gain.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.3); }; return elem; } // Draw the white keys. for (let i = 0; i <= whiteKeys - 1; i++) { svg.appendChild(wrap(html``, whiteOffsets[i] - 4)); svg.appendChild(html`${String.fromCharCode('A'.charCodeAt(0) + (i + 5) % 7) + (i < 4 ? "3" : "4")}`); svg.appendChild(html`${Math.round(220 * Math.pow(2, (whiteOffsets[i] - 4) / 12) * .864)}`); svg.appendChild(html`${Math.round(73504.8 / (220 * Math.pow(2, (whiteOffsets[i] - 4) / 12) * .864))}`); } // Draw the black keys. for (let i = 0; i <= whiteKeys - 2; i++) { if (blackKeys[i] == 1) { svg.appendChild(wrap(html``, whiteOffsets[i] - 4 + blackKeys[i])); } } return svg; } whiteKeyColors = [ "#fff", "#fff", "#fff", xetHex[1], xetHex[2], xetHex[4], xetHex[6], xetHex[7], xetHex[9], xetHex[11], "#fff", "#fff", "#fff", ] blackKeyColors = [ "#000", "#000", xetHex[0], "", xetHex[3], xetHex[5], "", xetHex[8], xetHex[10], "#000", "#000", "#000", ] // https://observablehq.com/@freedmand/sounds ctx = new (window.AudioContext || window.webkitAudioContext)() function Play(genFn, duration, frequency) { return new SoundBuffer(genFn, duration, frequency).gui(); } class SoundBuffer { constructor(genFn, duration, frequency) { this.duration = duration; this.frequency = frequency; // Create an audio buffer. this.audioBuffer = ctx.createBuffer(1, ctx.sampleRate * this.duration, ctx.sampleRate); this.buffer = this.audioBuffer.getChannelData(0); let max = 0; for (let i = 0; i < this.audioBuffer.length; i++) { const value = genFn(i / ctx.sampleRate); this.buffer[i] = value; if (Math.abs(value) > max) max = Math.abs(value); } for (let i = 0; i < this.audioBuffer.length; i++) { this.buffer[i] = this.buffer[i] / max; } } play(maxVol = 0.3) { this.stop(); this.source = ctx.createBufferSource(); this.source.buffer = this.audioBuffer; const gain = ctx.createGain(); gain.gain.value = maxVol; this.source.connect(gain); gain.connect(ctx.destination); this.source.start(); } stop() { if (this.source) this.source.stop(); } draw(height = 50, width = width, color = 'blue') { const drawingCtx = DOM.context2d(width, height); // Draw the middle line. drawingCtx.strokeStyle = 'gainsboro'; drawingCtx.beginPath(); drawingCtx.moveTo(0, height / 2); drawingCtx.lineTo(width, height / 2); drawingCtx.stroke(); // Draw the waveform. drawingCtx.strokeStyle = color; drawingCtx.beginPath(); for (let i = 0; i < width; i++) { const value = this.buffer[Math.floor(i / width * this.audioBuffer.length)]; const y = height - Math.floor((value / 2 + 0.5) * height * 0.9 + height * 0.05); if (i == 0) { drawingCtx.moveTo(i, y); } else { drawingCtx.lineTo(i, y); } } drawingCtx.stroke(); return drawingCtx.canvas; } gui() { const ui = html`
▶ ◼   Frequency: ${this.frequency} ib, Duration: ${Math.round(this.duration / .864)} b
`; const cursor = ui.querySelector('.cursor'); let interval = null; const resetInterval = () => { if (interval != null) { clearInterval(interval); interval = null; } }; const soundPlayer = ui.querySelector('.sound-player'); ui.querySelector('.sound-pane').appendChild(this.draw(46, width - 20)); ui.querySelector('.play-button').onclick = () => { cursor.style.left = '0'; this.play(); cursor.style.display = 'block'; const playTime = Date.now(); resetInterval(); interval = setInterval(() => { if (!document.contains(soundPlayer)) { resetInterval(); this.stop(); } let progress = (Date.now() - playTime) / this.duration / 1000; if (progress < 0) progress = 0; if (progress > 1) { progress = 1; resetInterval(); this.stop(); cursor.style.display = 'none'; } cursor.style.left = `${Math.floor(progress * (width - 20))}px`; }, 20); }; ui.querySelector('.stop-button').onclick = () => { resetInterval(); this.stop(); cursor.style.display = 'none'; }; return ui; } } function shortenHex(hex) { if (!/^#([0-9a-f]{3}){1,2}$/i.test(hex)) { return hex; } hex = hex.replace("#", ""); if (hex.length === 6 && hex[0] === hex[1] && hex[2] === hex[3] && hex[4] === hex[5]) { return "#" + hex[0] + hex[2] + hex[4]; } return "#" + hex; } piecewiseIob = d3.piecewise(d3.interpolateRound, [ 301.734720, 319.675162, 338.684026, 358.823261, 380.160000, 402.765523, 426.715171, 452.088950, 478.971619, 507.452688, 537.627456, 569.596406, 603.466416, 639.351360, ]) piecewiseLen = d3.piecewise(d3.interpolateRound, [ 2436.073648, 2299.359125, 2170.306080, 2048.495960, 1933.522727, 1825.002285, 1722.572924, 1625.892425, 1534.637900, 1448.505481, 1367.206961, 1290.471625, 1218.042928, 1149.677698, ]) class minMax { constructor(limits) { this.min = Math.min(...limits) this.max = Math.max(...limits) } scale(val) { return (val - this.min) / (this.max - this.min) } } octave4scaler = new minMax([200, 400]) freqs = [ 201.38, 213.36, 226.04, 239.49, 253.73, 268.81, 284.80, 301.73, 319.68, 338.68, 358.82, 380.16, ] notes = [ "A♯", "B", "C", "C♯", "D", "D♯", "E", "F", "F#", "G", "G♯", "A", ] xet = freqs.map(x => octave4scaler.scale(x)) xetFix = xet.map(x => parseFloat((x * 10).toFixed(2))) xetCol = xet.map(piecewiseColor) xetHex = xetCol.map(x => d3.color(x).formatHex()) xetHue = xetCol.map(x => Math.round(d3.hsl(x).h)) xetIob = xet.map(piecewiseIob) xetLen = xet.map(piecewiseLen) hues = Object.fromEntries([ 0.002, 0.00390625, 0.004, 0.0078125, 0.008, 0.014, 0.015625, 0.0158, 0.016, 0.021, 0.022, 0.024, 0.030, 0.03125, 0.040, 0.039, 0.0625, 0.065, 0.067, 0.130, 0.185, 1/3, 0.40069, 0.41302, 0.413, 0.4132, 0.420, 0.450, 0.460, 0.480, 0.490, 0.49008, 0.599, 0.704, 0.754, 0.788, 0.815, 0.864, 0.935, 0.960, ].map(i => [i, d3.hsl(piecewiseColor(i)).h]) ); h26div300 = d3.hsl(piecewiseColor(26 / 300)).h hD039 = d3.hsl(piecewiseColor(39 / 365)).h hD080 = d3.hsl(piecewiseColor(80 / 365)).h hD285 = d3.hsl(piecewiseColor(285 / 365)).h fMile = 1.6 / 1.609344 fInch = 25 / 25.4 hIob = d3.hsl(piecewiseColor(1 / .864 % 1)).h hDrop = d3.hsl(piecewiseColor(64 / 51 % 1)).h hMass = d3.hsl(piecewiseColor(448 / 453.59237 % 1)).h hGall = d3.hsl(piecewiseColor(3.584 / 3.785411784 % 1)).h hBarr = d3.hsl(piecewiseColor(128 / 119.24 % 1)).h hCara = d3.hsl(piecewiseColor(192 / 200 % 1)).h hAvOz = d3.hsl(piecewiseColor(32 / 28.349523125 % 1)).h hFlOz = d3.hsl(piecewiseColor(32 / 29.5735295625 % 1)).h hInch = d3.hsl(piecewiseColor(fInch % 1)).h hSqIn = d3.hsl(piecewiseColor(fInch**2 % 1)).h hCuIn = d3.hsl(piecewiseColor(fInch**3 % 1)).h hMile = d3.hsl(piecewiseColor(fMile % 1)).h hSqMi = d3.hsl(piecewiseColor(fMile**2 % 1)).h bcHue = (xetHue[1] + xetHue[2]) / 2 ddsHue = (xetHue[4] + xetHue[5]) / 2 dseHue = (xetHue[5] + xetHue[6]) / 2 ``` ``` {ojs} //| echo: false //| output: false html` ` ```
Hinnant, Howard. 2021+185. “chrono-Compatible Low-Level Date Algorithms.” .
[1] [Newton, Issac](https://en.wikipedia.org/wiki/Isaac_Newton#:~:text=,an%20English%20polymath,-active%20as%20a). 1704. “Opticks.” ${decYearP0}+${decDateP0}. . [2] [Clint Goss](https://www.clintgoss.com). 2022+098. “Color of Sound.” ${decYearP0}+${decDateP0}. . [3] [Collignon, Claude Boniface](https://en.wikipedia.org/wiki/Claude_Boniface_Collignon#:~:text=a%20French%20attorney%20who%20contributed%20to%20scientific%20and%20social%20reforms%20in%20the%20time%20of%20the%20French%20Revolution). 1788. “Découverte d’étalons justes, naturels, invariables et universels.” ${decYearP0}+${decDateP0}. . [4] [Agnoli, Paolo](http://www.paoloagnoli.it) & [D’Agostini, Giulio](https://www.roma1.infn.it/~dagos). 2004+330. “Why does the meter beat the second?” ${decYearP0}+${decDateP0}. . [5] [Hinnant, Howard](https://howardhinnant.github.io). 2021+185. “`chrono`-Compatible Low-Level Date Algorithms.” ${decYearP0}+${decDateP0}. .