2b:null 2c:["$","title",null,{"children":"Aspect Ratio comparison | spencer kelly | Observable"}] 31:[] 2f:{"id":"60a7ed0d5d08bc34","slug":"aspect-ratio-comparison","title":"Aspect Ratio comparison","thumbnail":"80e348e60c22916c760a66d84d063d9e1f58bfc706b89d5fdc92a0df222cee2f","access_level":"public","create_time":"$D2019-05-21T17:22:35.090Z","update_time":"$D2019-06-05T21:44:22.698Z","view_time":null,"first_public_time":"$D2019-05-21T19:16:30.998Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":"starter_2024"},"version":159,"publish_version":159,"role":null,"authored":false,"authors":[{"type":"individual","id":"25825fd15d797d3f","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":null}],"members":[{"type":"individual","id":"25825fd15d797d3f","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"5c39a8ca6059baac","slug":"aspect-ratios","title":"Aspect Ratios","owner":{"id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly"}},"type":"notebook","body":{"title":"Aspect Ratio comparison","cells":[{"id":0,"value":"md`# Aspect Ratio comparison\nwhen fitting together two different aspect ratios, some amount of cropping will happen.\n\nThis attempts to show how much of it is lost, for different combinations of aspect ratios.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viewof viewport = select({placeholder: \"viewport\", title: \"viewport\", value:'4:3', options:aspects.map(o=>o.title)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"viewof boxTitle = select({placeholder: \"image\", title: \"image-crop\", value:'3:2', options:aspects.map(o=>o.title)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"{\n let viewAspect=aspects.find(o=>o.title===viewport).ratio\n let view={\n h:300,\n w: 300*viewAspect\n }\n let boxAspect=aspects.find(o=>o.title===boxTitle).ratio\n let box={\n h: 300,\n w: 300 * boxAspect\n }\n let diffAbs=Math.abs(box.w - view.w)\n let diff=diffAbs / box.w\n diff=parseInt(diff*100,10)\n\n return html`

\n ${boxAspect} object
\n fit into a ${viewAspect} viewport \n

${diff}% of image missing

${boxTitle}

\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"aspects=[\n {\n title: '1:1',\n description: 'instagram',\n ratio: 1\n },\n {\n title: '4:3',\n description: 'all smartphones',\n ratio: 1.33\n },\n {\n title: 'A4 paper',\n description: '√2:1 (Lichtenberg ratio)',\n ratio: 1.41 \n },\n {\n title: '3:2',\n description: 'DSLR photos, linkedin',\n ratio: 1.5\n },\n {\n title: 'business card',\n description: '85.60 × 53.98 mm',\n ratio: 1.58577\n },\n {\n title: 'golden ratio',\n description: '1.6180339...',\n ratio: 1.6180\n },\n {\n title: '16:9',\n description: 'youtube, hdtv',\n ratio: 1.78,\n },\n {\n title: 'widescreen',\n description: 'fancy tv screens, movie-theatres',\n ratio: 1.85,\n },\n {\n title: 'facebook',\n description: '',\n ratio: 1.88,\n },\n {\n title: '1:2',\n description: 'twitter, some modern phones',\n ratio: 2,\n },\n {\n title: '\\'Cinemascope\\'',\n description: 'some modern movie-theatres',\n ratio: 2.35\n },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"