2d:null 2e:["$","title",null,{"children":"Aspect Ratio | Martien van Steenbergen | Observable"}] 33:T798,{ const aspect = aspectRatios(props) const rows = 32; const mm2pt = mm => mm * 2.8346457; const pt2mm = pt => pt / mm2pt(1); const sqrt2 = Math.sqrt(2); const number = n => Math.round(n).toLocaleString(); const gridMultiple = x => Math.trunc(x / resolution) * resolution; const grid = x => `${x}`; const grids = grid(1) + grid(resolution); const unit = u => `${u}`; const units = (x, y) => unit(x) + unit(y); const td = x => `${x}`; const th = x => `${x}`; const multiples = (x, y) => `${x}×${y}`; const wxh = "widthheight"; const wxhs = `${th(aspect.wide)}${th(aspect.tall)}${th( multiples(resolution, aspect.wide) )}${th(multiples(resolution, aspect.tall))}`; const tableNumber = (x, factor = 1) => `${number(factor * x)}`; const dim = (wide, tall, factor) => `${tableNumber(wide, factor)}${tableNumber(tall, factor)}`; let a = ``; // a += ``; // a + ``; // a + ``; // a + ``; // a += ``; a += ``; // a += `${grids}`; // Heading 1: grid sizes a += `${unit("aspect")}${unit("points")}`; // Heading 1: grid sizes // a += `${units("mm", "point") + units("point", "mm")}`; // Heading 2: units a += `${wxhs}`; // Heading 3: dimensions for (let r = 1; r <= rows; r++) { let hmm = r * aspect.tall; let wmm = r * aspect.wide; let wpt = wmm * resolution; let hpt = hmm * resolution; a += ""; a += ``; // Paper size a += dim(wmm, hmm, 10); a += dim(wpt, hpt); a += ""; } a += "




#
${r}

"; return html`${a}`; }34:T673,function ratio(d = {}) { const { aspect = [16, 9], resolution = 36, zoom = 1, factor = 1, snap = 0, w = width, } = d const view = factor / zoom const dimensions = aspector(aspect, 1) // unit aspect ratio const size = aspector(dimensions, resolution) // aspect ratio subdivided into resolution points const box = aspector(size, view) // viewbox as a function of zoom and factor return { // user space aspect: dimensions, size, box, factor, view, resolution, zoom, wide: box.wide, // for convenience tall: box.tall, // for convenience get viewBox() { return [ 0, 0, ...box ] }, // for convenience µ(n = 1) { return n * resolution / 12 }, m(n = 1) { return n * resolution / 4 }, M(n = 1) { return n * resolution / 1 }, value(...x) { const [a = 0, b = 0, c = 0] = x[0]; return this.M(a) + this.m(b) + this.µ(c) }, get snaps() { return [this.M(), this.m(), this.µ()] }, // device or screen or browser space width: w, get height() { return (this.width * this.tall / this.wide) | 0 }, foil(w = width) // for convenience: creates empty svg drawing pad with proper size and viewbox { return d3 .select(DOM.svg(w, this.height)) .attr("viewBox", `${this.viewBox}`) .attr("preserveAspectRatio", "xMinYMin meet") }, // deprecated get viewportWidth() { return this.width }, // deprecated: use ‘width’ instead get viewportHeight() { return this.height }, // deprecated: use ‘height’ instead get viewbox() { return this.viewBox }, // deprecated (lower case ‘b‘) } }35:[] 31:{"id":"4c9d4f6737e6e5d0","slug":"aspect-ratio","title":"Aspect Ratio","thumbnail":"19a80ed5902a181c7bbebd367995d3100ba8cc32270896216b7c5c1d597f2003","access_level":"public","create_time":"$D2019-02-22T13:40:05.729Z","update_time":"$D2023-05-15T11:09:27.703Z","view_time":null,"first_public_time":"$D2019-02-22T13:45:56.466Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":1441,"publish_version":1441,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"01d1c4db89387bbb","slug":"grid","title":"Grid","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Aspect Ratio","cells":[{"id":0,"value":"md`# Aspect Ratio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"{\n const denominator = gcd(screen.width, screen.height)\n const d2 = gcd(window.innerWidth, window.innerHeight)\n return md`Your screen’s dimensions are\n**${screen.width}×${screen.height}**,\nhence its aspect ratio is \n**${screen.width / denominator}:${screen.height / denominator}**.\n\nYour browser’s inner viewport is\n**${window.innerWidth}×${window.innerHeight}** or **${window.innerWidth / d2}:${window.innerHeight / d2}**`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof resolution = {\n const s = slider({\n min: 3,\n max: 360,\n step: 1,\n value: 36,\n title: \"Grid Size\"\n })\n s.querySelector('input').style.width = \"92%\";\n return s\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof props = slider({\n min: 0,\n max: aspectRatios().length - 1,\n step: 1,\n value: 7,\n title: \"Aspect Ratio\",\n display: v => `${aspectRatios()[v].wide}:${aspectRatios()[v].tall}@${resolution}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"viewof zoom = \n{\n const z = \n slider({\n min: .01,\n max: 10,\n step: .01,\n value: 1,\n format: \".0%\",\n title: \"Zoom\",\n\n // display: v => `${aspectRatios()[v].wide}:${aspectRatios()[v].tall}@${aspectRatios()[v].resolution}`\n })\n z.querySelector('input').style.width = \"92%\";\n return z\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"{\n const film = dim.foil()\n\n const l = dim.M(4)\n film\n .append(\"path\").attr(\"fill\", \"green\")\n .attr(\"d\", `M${dim.box.wide/2} ${dim.box.tall/2} m${-l/2} ${-l/2} h${l} v${l} h${-l} Z`)\n\n const dot = ([x, y], r = dim.M(1), c = \"red\") => film\n .append(\"circle\")\n .attr(\"r\", r)\n .attr(\"cx\", x).attr(\"cy\", y)\n .attr(\"fill\", \"red\").attr(\"opacity\", .8)\n\n const corners = [\n [ 0, 0],\n [\"100%\", 0],\n [\"100%\", \"100%\"],\n [ 0, \"100%\"],\n ]\n corners.forEach(c => dot(c))\n\n return film.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"dim = ratio({\n aspect: aspectRatios(props).ratio,\n resolution,\n zoom,\n snap:16,\n w: width/1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"{\n const factor = 1\n const zoom = 2\n const aspect = aspector() // unity\n const size = aspector(aspect, 36) // resolution\n const box = aspector(size, factor / zoom) // zoom && factor\n return {aspect, size, box}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function aspectRatios(a) {\n const aspect = [\n { wide: 1, tall: 1, resolution: 36 },\n { wide: 3, tall: 2, resolution: 9 },\n { wide: 5, tall: 3, resolution: 18 },\n { wide: 4, tall: 3, resolution: 18 },\n { wide: 5, tall: 4, resolution: 18 },\n { wide: 7, tall: 5, resolution: 9 },\n { wide: 15, tall: 10, resolution: 36 },\n { wide: 16, tall: 9, resolution: 36 },\n { wide: 16, tall: 10, resolution: 3 },\n { wide: 16, tall: 16, resolution: 3 }\n ]\n if (a == undefined)\n return aspect\n else \n return {\n ...aspect[a], \n get ratio() { return [this.wide, this.tall] },\n get viewBox() { return [0, 0, this.wide * this.resolution, this.tall * this.resolution] }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"function aspector(aspect = [16, 9], resolution = 1, snap = 1) {\n const clone = aspect.slice(0) // change a clone, not the original\n const factor = Math.round(snap / clone[0])\n const scale = resolution * (factor === 0 ? 1 : factor)\n clone.wide = clone[0] = scale * aspect[0]\n clone.tall = clone[1] = scale * aspect[1]\n return clone\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"M = dim.M // hoist M() to notebook level","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import {gcd} from \"@martien/math-helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"