2c:null 2d:["$","title",null,{"children":"Picture hanging arrangement generator revised | Grant Custer | Observable"}] 32:T551,function fineTume(picked, placed) { let to_center = {x: picked.x - wall_center.x, y: picked.y - wall_center.y} function tune(attempt, adjust, centerCheck) { if (checkOpen(attempt, placed)) { picked = attempt if (centerCheck(attempt) !== 0) { let adjusted = adjust(attempt) tune(adjusted, adjust, centerCheck) } } } function yCenterCheck(frame) { return frame.y - wall_center.y } function xCenterCheck(frame) { return frame.x - wall_center.x } if (to_center.y < 0) { function adjust(attempt) { return Object.assign({}, attempt, {y: attempt.y + tuner}) } tune(picked, adjust, yCenterCheck) } if (to_center.y > 0) { function adjust(attempt) { return Object.assign({}, attempt, {y: attempt.y - tuner}) } function centerCheck(attempt) { return attempt.y - wall_center.y } tune(picked, adjust, yCenterCheck) } if (to_center.x < 0) { function adjust(attempt) { return Object.assign({}, attempt, {x: attempt.x + tuner}) } function centerCheck(attempt) { return attempt.x - wall_center.x } tune(picked, adjust, xCenterCheck) } if (to_center.x > 0) { function adjust(attempt) { return Object.assign({}, attempt, {x: attempt.x - tuner}) } function centerCheck(attempt) { return attempt.x - wall_center.x } tune(picked, adjust, xCenterCheck) } return picked }33:T41c,function drawCanvas() { ctx.clearRect(0, 0, m(wall.w), m(wall.h)); for (let [i, f] of placed.entries()) { if (mode === "Layout" || mode === "Labeled") { ctx.fillStyle = "black"; ctx.fillRect(m(f.x - f.w / 2), m(f.y - f.h / 2), m(f.w), m(f.h)); } else if (mode === "Measurement") { ctx.strokeStyle = "#aaa"; ctx.strokeRect(m(f.x - f.w / 2), m(f.y - f.h / 2), m(f.w), m(f.h)); } if (mode === "Labeled" || mode === "Measurement") { if (mode === "Labeled") { ctx.fillStyle = "white"; } if (mode === "Measurement") { ctx.fillStyle = "#aaa"; } let width = ctx.measureText("A").width; ctx.fillText(alphabet[i], m(f.x) - width / 2, m(f.y)); } } if (mode === "Measurement") { for (let d of top_dots) { ctx.fillStyle = "black"; ctx.fillRect(m(d.x) - 2, m(d.y) - 2, 4, 4); } drawConnections(); } if (show_grid) { for (let cell of grid) { ctx.fillStyle = "blue"; ctx.fillRect(m(cell.x), m(cell.y), 2, 2); } } }34:T4d4,function drawConnections() { ctx.strokeStyle = "black"; for (let c of connections) { ctx.beginPath(); ctx.moveTo(m(c[0].x), m(c[0].y)); ctx.lineTo(m(c[1].x), m(c[0].y)); ctx.stroke(); ctx.beginPath(); ctx.moveTo(m(c[1].x), m(c[0].y)); ctx.lineTo(m(c[1].x), m(c[1].y)); ctx.stroke(); let size = 12; ctx.font = size + "px monospace"; let mid_x = (c[1].x - c[0].x) / 2 + c[0].x; let mid_y = (c[1].y - c[0].y) / 2 + c[0].y; let x_diff = f3(c[1].x - c[0].x); let y_diff = f3(c[1].y - c[0].y); let text_x = `${x_diff}`; let text_x_width = ctx.measureText(text_x).width; let text_y = `${y_diff}`; let text_y_width = ctx.measureText(text_y).width; let box_width = Math.max(text_x_width, text_y_width); let box_height = size * 2; let padding = 4; ctx.fillStyle = "black"; ctx.fillRect( m(mid_x) - box_width / 2 - padding, m(mid_y) - size / 2 + 5 - box_height / 2 - padding, box_width + padding * 2, box_height + padding * 2 ); ctx.fillStyle = "white"; ctx.fillText(text_x, m(mid_x) - text_x_width / 2, m(mid_y) - size / 2 + 3); ctx.fillText(text_y, m(mid_x) - text_y_width / 2, m(mid_y) + size / 2 + 3); } }35:[] 30:{"id":"bde0ed971ac217b7","slug":"picture-hanging-arrangement-generator-revised","title":"Picture hanging arrangement generator revised","thumbnail":"c12bae5b003c7be8178f8500ce79f55681135c4fb2fc7c64e1edae125d71c4e8","access_level":"public","create_time":"$D2018-09-07T23:49:13.440Z","update_time":"$D2018-12-30T18:42:49.003Z","view_time":null,"first_public_time":"$D2018-09-09T16:13:07.722Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":606,"publish_version":606,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Picture hanging arrangement generator revised","cells":[{"id":0,"value":"md`# Picture hanging arrangement generator revised`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"md`This is a revised version of my [Greedy picture hanging tool](https://beta.observablehq.com/@grantcuster/greedy-picture-hanging). The idea is you give it a set of frame sizes and it packs them together towards the center.\n\nInstead of the one-step spiraling out algorithm from the previous version, this one works in two steps. First it breaks the available space into tiles and sorts those tiles by their proximity to the center. To place a picture it looks through the sorted tiles until it finds one where the frame does not collide with any already placed frames.\n\nAfter a frame has been placed it goes through a second round of fine-tuning. The fine-tuning algorithm tries to move the frame towards the center, first in the vertical and then in the horizontal direction. If it detects a collision it stops attempting the move. This fine-tuning corrects for the coarseness of the tile method.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"{\n const canvas = ctx.canvas;\n canvas.style.background = \"#efefef\";\n drawCanvas();\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"viewof regen = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"viewof mode = radio({\n title: \"Mode\",\n options: [\"Layout\", \"Labeled\", \"Measurement\"],\n value: \"Layout\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"{\n if (mode === \"Labeled\") {\n return md`${frames.map(\n (f, i) =>\n `${\n alphabet[i]\n }: ${f3(f.w)} x ${f3(f.h)}`\n )}`;\n } else {\n return html`Switch to a different mode to see labels`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof frame_num = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 10, \n title: \"Frame number\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"{\n if (frame_num - placed.length === 0) {\n return md`All frames placed.`\n } else {\n return html`${frame_num - placed.length} frames unplaced.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"viewof padding = slider({\n min: 0, \n max: 1, \n step: 0.125/2, \n value: 0.125, \n title: \"Padding\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"viewof tuning = checkbox({\n options: [{ value: \"tune_it\", label: \"Fine tuning\" }],\n value: \"tune_it\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"viewof show_grid = checkbox({\n options: [{ value: \"show\", label: \"Show grid\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"function randomFrame() { return {w: Math.random() * 8 + 2, h: Math.random() * 10 + 2 }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"frames = {\n regen;\n return [...Array(frame_num)].map(n => randomFrame());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function placeFrames() {\n let placed = []\n for (let frame of frames) {\n let picked\n for (let cell of sorted_grid) { \n let temp_place = Object.assign({}, frame, { x:cell.x, y: cell.y })\n let open = checkOpen(temp_place, placed)\n if (open) { picked = temp_place; break; }\n }\n if (picked) {\n if (tuning) {\n picked = fineTume(picked, placed)\n }\n placed.push(picked)\n }\n }\n return placed\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"placed = placeFrames()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`## Wall set-up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"wall = {return {w: 50, h: 26}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"canvas_size = {\n let aspect = 2/1\n let w = width;\n let h = m(wall.h);\n return { w, h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"wall_multiplier = width/wall.w","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function m(number) { return wall_multiplier * number }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"wall_center = {return { x:wall.w/2, y: wall.h/2}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`## Grid set-up`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"grid_increment = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"wall_dims = {return{cols: Math.ceil(wall.w/grid_increment), rows: Math.ceil(wall.h/grid_increment)}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"grid_offset = { return { x: (wall.w % grid_increment)/2, y: (wall.h % grid_increment)/2}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"function makeGrid(row_num, col_num) {\n let nested = [...Array(row_num)].map((blank, r) => {\n return [...Array(col_num)].map((blank, c) => {\n let i = r * col_num + c\n let x = c * grid_increment + grid_increment/2 - grid_offset.x\n let y = r * grid_increment + grid_increment/2 - grid_offset.y\n let d = pointDistance({x,y}, wall_center)\n return { r, c, i, x, y, d }\n })\n })\n return nested.reduce((acc, val) => acc.concat(val), []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"grid = makeGrid(wall_dims.rows, wall_dims.cols)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"sorted_grid = _.sortBy(grid, 'd')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`## Placement utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"function getBoundaries(f) {\n let l = f.x - f.w / 2 - padding\n let r = f.x + f.w / 2 + padding\n let t = f.y - f.h / 2 - padding\n let b = f.y + f.h / 2 + padding\n return {\n l,\n r,\n t,\n b,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"function checkBounds(f) {\n let b = getBoundaries(f)\n return !(b.l < 0 || b.t < 0 || b.r > wall.w || b.b > wall.h)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"function collisionCheck(a, b) {\n let fa = getBoundaries(a)\n let fb = getBoundaries(b)\n return fa.l < fb.r && fa.r > fb.l && fa.t < fb.b && fa.b > fb.t\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"function checkOpen(f, placed) {\n let bound_check = checkBounds(f)\n if (!bound_check) return false\n for (let i=0; i {\n let bounds = getBoundaries(f);\n let center = f.x;\n let top = bounds.t + padding;\n let distance = pointDistance({ x: center, y: top }, wall_center);\n return { x: center, y: top, d: distance };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"sorted_dots = _.sortBy(top_dots, \"d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"connections = {\n let connected = [];\n for (let i = 1; i < sorted_dots.length; i++) {\n let current = sorted_dots[i];\n let placed = sorted_dots.slice(0, i);\n let placed_distances = placed.map(p => pointDistance(current, p));\n let min = _.min(placed_distances);\n let min_index = placed_distances.indexOf(min);\n let connection = [\n Object.assign({}, placed[min_index]),\n Object.assign({}, current)\n ];\n connected.push(connection);\n }\n return connected;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"denominator_tune = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"function f3(number) {\n if (number === 0) return 0;\n let rounded = Math.round(number * denominator_tune) / denominator_tune;\n let f = new Fraction(rounded);\n let fraction = f.toFraction(true);\n if (fraction === \"0\") return 0;\n return fraction;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`## Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"ctx = DOM.context2d(m(wall.w), m(wall.h))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"createCanvas = () => {\n const canvas = document.createElement('canvas');\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"resize = (canvas) => {\n let aspect = 2/1\n let w = width;\n let h = w / aspect;\n \n canvas.style.width = `${w}px`;\n canvas.style.height = `${h}px`;\n\n return { w, h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"alphabet = \"A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z\".split(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"import {slider, checkbox, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"Fraction = require(\"fraction.js@4.0.9/fraction\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"