3e:null 3f:["$","title",null,{"children":"Rectangle Packing | tomcburke | Observable"}] 45:T4ed,options = { let factors = []; let totalArea = height * width; let options = hasSelected ? [{min:1,size:1},{min:2,size:4},{min:3,size:9},{min:4,size:16}] : [{min:1,size:1}]; for(let h = 0; h <= options.length-1; h++) { let areaCount = participantCount-1+options[h].size; let max = 2 * (areaCount-1); for(let i = options[h].min; i <= max; i++) { for(let j = areaCount; j <= max; j++) { let x = i; let y = j / i; if(j % i !== 0) { continue; } if(y < options[h].min) { continue; } if((x*y)-Math.min(y,x) >= areaCount) { continue; } let h1 = y * (width / x) / ratio; var area; if(h1 <= height) { area = (width / x) * (h1 / y) } else { let w1 = x * (height / y) * ratio; area = (w1 / x) * (height / y); } let boost = (hasSelected && options[h].min > 1) ? boostSelected : 1; factors.push([options[h].min, x, y, boost * Math.round(area*areaCount/totalArea*100)]); } } } yield factors.sort(function(a,b) { return b[3]-a[3]; }).slice(0,5); }46:[] 43:{"id":"e7bcb4c205be3647","slug":"rectangle-packing","title":"Rectangle Packing","thumbnail":"0b3c22a7193cdcd64bd61fbb2f5eee1e062ad9a363ae376c7bd3999d8fbd61ee","access_level":"public","create_time":"$D2019-05-08T11:58:10.178Z","update_time":"$D2021-01-05T14:38:53.975Z","view_time":null,"first_public_time":"$D2019-05-09T15:59:33.376Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5069e7556e985edc","login":"tomcburke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/cab693bac7a1cb18a1b926d67edc5068347a57acb1f9cc7c02648a7273afe604","tier":"starter_2024","bio":""},"version":230,"publish_version":230,"role":null,"authored":false,"authors":[{"type":"individual","id":"19ebaa7bcfa11bbf","login":"tomcburke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/cab693bac7a1cb18a1b926d67edc5068347a57acb1f9cc7c02648a7273afe604","tier":null,"bio":""}],"members":[{"type":"individual","id":"19ebaa7bcfa11bbf","login":"tomcburke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/cab693bac7a1cb18a1b926d67edc5068347a57acb1f9cc7c02648a7273afe604","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rectangle Packing","cells":[{"id":0,"value":"md`# Rectangle Packing\n\nThis small proof of concept generates the best options, based on percentage of space used withough stretching, to arrange n tiles of aspect ratio r in a given space, with one item optionally selected, and selected items shown bigger than other items. \n\nOptions which show a selected item bigger are optionally boosted in the results.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof participantCount = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof hasSelected = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof ratio = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"viewof boostSelected = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof width = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof height = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`## Top 5 layout options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"{\n var container = html`

`;\n for(var i=0; i<= options.length-1; i++)\n {\n let thisItem = html`

${options[i][1]}X${options[i][2]}, selected ratio: ${options[i][0]}:1. ${options[i][3]}% match

`;\n let thisContainer = html`

`;\n for(var j = 0; j < participantCount; j++)\n {\n let color = (hasSelected && j==0) ? \"darkred\" : \"blue\";\n let span = (hasSelected && j==0) ? options[i][0] : 1;\n let participant = html`

${j}

`;\n thisContainer.appendChild(participant);\n }\n thisItem.appendChild(thisContainer);\n container.appendChild(thisItem);\n }\n return container\n}\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"