31:[] 2f:{"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"},{"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"},{"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"},{"id":86,"value":"md`### Folding Width-wise:`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":76,"value":"md`### Folding height-wise:`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":45,"value":"round=function(num){\n return parseInt(num*100)/100\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}