2b:null 2c:["$","title",null,{"children":"Folding an aspect ratio | spencer kelly | Observable"}] 31:[] 2f:{"id":"8285ef2e33e516ac","slug":"folding-an-aspect-ratio","title":"Folding an aspect ratio","thumbnail":"a2ec278f4c2dc670f93567bc82b216db7c104e2006febf066dd49df79cea2379","access_level":"public","create_time":"$D2019-06-05T15:35:50.973Z","update_time":"$D2019-06-05T21:36:50.102Z","view_time":null,"first_public_time":"$D2019-06-05T15:56:04.363Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":"starter_2024"},"version":114,"publish_version":114,"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":0,"collection":{"id":"5c39a8ca6059baac","slug":"aspect-ratios","title":"Aspect Ratios","owner":{"id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly"}},"type":"notebook","body":{"title":"Folding an aspect ratio","cells":[{"id":0,"value":"md`# Folding an aspect ratio\n\nchange the dimensions of different aspect ratios, by percentages,\n\nand determine the resulting aspect ratio.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"viewof original = select({placeholder: \"image\", title: \"Original aspect ratio\", value:'3:2', options:aspects.map(o=>o.title)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof fold = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 50, \n title: \"Fold amount, by percent:\", \n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md`### Folding Width-wise:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"{\n\n let orig=aspects.find(o=>o.title===original).ratio\n let box={\n h: 300,\n w: 300 * orig\n }\n let foldBy=fold/100\n let update={\n h: box.h*foldBy,\n w: box.w\n }\n let newAspect= round(update.w/update.h) \n let portraitAspect= round(update.h/update.w)\n \n return html`

\n ${orig} original aspect
\n \n \n

\n new aspect:\n

${newAspect}

\n \n

(or ${portraitAspect})

\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"md`### Folding height-wise:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"{\n\n let orig=aspects.find(o=>o.title===original).ratio\n let box={\n h: 300,\n w: 300 * orig\n }\n let foldBy=fold/100\n let update={\n h: box.h,\n w: box.w*foldBy\n }\n let newAspect= round(update.w/update.h) \n let portraitAspect= round(update.h/update.w)\n \n return html`

\n ${orig} original aspect
\n \n \n

\n new aspect:\n

${newAspect}

(or ${portraitAspect})

\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"round=function(num){\n return parseInt(num*100)/100\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"style=html``","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"},{"id":2,"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"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"