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:{"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"},{"id":33,"value":"viewof myWidth = number({placeholder: \"width\", title: \"Your width\", value:610, submit: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof myHeight = number({placeholder: \"height\", title: \"Your Height\", value:428, submit: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":150,"value":"max=700 ","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"comparison=closestRatio(myWidth, myHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"css=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}