2b:null 2c:["$","title",null,{"children":"Aspect Ratio Finder | spencer kelly | Observable"}] 31:T489,view = { if(comparison.diff===0){ return html`

it's the ${comparison.aspect.title} ratio!

${comparison.aspect.description}

👍

` } let diff=Math.abs(comparison.diff).toFixed(0) diff=parseInt(diff,10) let msg=`

it is almost the ${comparison.aspect.title} ratio!

${comparison.aspect.description}

change it by ${ diff}px

` /* if(comparison.diff>0){ msg+=`crop the width to ${myWidth + diff}` }else{ msg+=`crop the height to ${myHeight + diff}` }*/ msg+=`

` //draw proper one let ours=drawSquare(myHeight, comparison.ours, comparison.aspect, '#B6B6B6') let theirs=drawSquare(myHeight, comparison.theirs, comparison.aspect) return html`

${msg} ${ours} ${theirs}

` }32:T433,aspects=[ { title: 'square', description: '1:1', ratio: 1, color: '#e9967a' }, { title: 'old tvs', description: '4:3', ratio: 1.33, color: '#E97AA8' }, { title: 'A4 paper', description: '√2:1 (Lichtenberg ratio)', ratio: 1.41, color: '#BB7AE9' }, { title: 'photograph', description: '3:2', ratio: 1.5, color: '#7AE9BB' }, { title: 'business card', description: '85.60 × 53.98 mm', ratio: 1.58577, color: '#7AA8E9' }, { title: 'golden ratio', description: '1.6180339...', ratio: 1.6180, color: '#7AE9BB' }, { title: 'HDTV', description: '16:9', ratio: 1.78, color: '#E9837A' }, { title: 'widescreen', description: 'fancy tv screens, movie-theatres', ratio: 1.85, color: '#E9837A' }, { title: '1:2', description: 'some modern cellphones', ratio: 2, color: '#BCE97A' }, { title: '\'Cinemascope\'', description: 'some modern movie-theatres', ratio: 2.35, color: '#E9BA7A' }, ]33:[] 2f:{"id":"594eb66e8483a840","slug":"aspect-ratio-finder","title":"Aspect Ratio Finder","thumbnail":"c45330d960e20cce7c11bf1d4c1a69c49c6a4c261c8a06b8bcb0feab8b74d8b0","access_level":"public","create_time":"$D2018-03-10T15:36:44.720Z","update_time":"$D2018-03-10T23:01:58.578Z","view_time":null,"first_public_time":"$D2018-03-10T22:23:45.802Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"178b998367cf1e11","login":"spencermountain","name":"spencer kelly","avatar_url":"https://avatars-next.observableusercontent.com/006044842415892d25db450d275d493d3e5629ec1c2a2dfad0167421e0f026f9","tier":"starter_2024"},"version":303,"publish_version":303,"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 Finder","cells":[{"id":0,"value":"md`# Aspect Ratio Finder\ndon't ever do math - - especially inside your head.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"viewof myWidth = number({placeholder: \"width\", title: \"Your width\", value:610, submit: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"viewof myHeight = number({placeholder: \"height\", title: \"Your Height\", value:428, submit: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"drawSquare=function(w, h, aspect, color){\n let style=`\n\t\twidth:${w}px; \n\t\theight:${h}px; \n\t\tborder:2px solid ${color || aspect.color}; \n\t\tcolor:${aspect.color};`\n return `

\n\t\t${aspect.title}\n\t

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"max=700 ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"comparison=closestRatio(myWidth, myHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"css=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"closestRatio = function(givenWidth, givenHeight) {\n let shortSide = givenWidth;\n let longSide = givenHeight;\n if (shortSide > longSide) {\n shortSide = givenHeight;\n longSide = givenWidth;\n }\n\n //calculate the 1:something for these numbers\n let ourRatio = longSide / shortSide;\n\n //find the aspect aspect ratio\n let aspect = null;\n for(let i = 0; i < aspects.length; i += 1) {\n let diff= Math.abs(ourRatio - aspects[i].ratio)\n if (aspects[i].ratio >= ourRatio ) {//|| diff<=0.1\n aspect = aspects[i];\n //is the earlier one closer, actually?\n if(i>0){\n let lastdiff= Math.abs(ourRatio - aspects[i-1].ratio)\n if(lastdiff {\n // Desired width and height in pixels\n const width = x;\n const height = y;\n \n // Device screen density, e.g. MacBook Pro is @2x\n const pixelRatio = window.devicePixelRatio;\n \n // Scale it up by pixel ratio for higher density screens\n canvas.width = width * pixelRatio;\n canvas.height = height * pixelRatio;\n \n // Set the style to the desired size so that it scales back down\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n return { width, height, pixelRatio };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"