45:["$","title",null,{"children":"Pattern Tile Orientation | Yao Yue | Observable"}] 4d:Td36,function draw_tiles(color = tile_color, stroke_color = "white") { function draw_tile(x, y, w, h) { svg.append('rect') .attr('x', pixel_per_inch * x) .attr('y', pixel_per_inch * y) .attr('width', pixel_per_inch * w) .attr('height', pixel_per_inch * h) .attr('stroke', stroke_color) .attr('fill', color); } const svg = d3.select(DOM.svg(canvas_width, canvas_height)); const defs = svg.append("defs"); const artboard = svg.append("g"); var x_offset, x, y; // draw left panel, we go from right to left if (row_oriented) { y = 0; var row = 0; while (y < height) { x_offset = left_width; x = tile_width * offset * row; while (x > tile_width) { x -= tile_width; } while (x_offset > -tile_width) { draw_tile(x_offset - x, y, tile_width, tile_height); x_offset -= tile_width; } y += tile_height; row += 1; } } else { x = left_width; var col = 0; while (x > 0) { y = tile_width * offset * col; while (y > 0) { y -= tile_width; } while (y < height) { draw_tile(x - tile_height, y, tile_height, tile_width); y += tile_width; } x -= tile_height; col += 1; } } // draw right panel x_offset = left_width + panel_width; x = 0; y = 0; if (row_oriented) { var row = 0; while (y < height) { var x = tile_width * offset * row; while (x > 0) { x -= tile_width; } while (x < right_width) { draw_tile(x + x_offset, y, tile_width, tile_height); x += tile_width; } y += tile_height; row += 1; } } else { var col = 0; while (x < right_width) { y = tile_width * offset * col; while (y > 0) { y -= tile_width; } while (y < height) { draw_tile(x + x_offset, y, tile_height, tile_width); y += tile_width; } x += tile_height; col += 1; } } // draw patterned middle svg.append('defs').append('pattern') // define pattern for tiling .attr('id','blossom-pattern') .attr('width', pattern_size * pixel_per_inch) .attr('height', pattern_size * pixel_per_inch) .attr('patternUnits', 'userSpaceOnUse') .attr('x', 0) .attr('y', 0) .append('svg:image') .attr("xlink:href", mosaic_url) .attr('width', pattern_size * pixel_per_inch) .attr('height', pattern_size * pixel_per_inch); svg.append('rect') .attr('x', pixel_per_inch * left_width) .attr('y', 0) .attr('width', pixel_per_inch * panel_width) .attr('height', pixel_per_inch * height) .attr('stroke', 'white') .attr('fill', 'white') .attr('fill', "url(#blossom-pattern)"); // draw tub silhouette svg.append('rect') .attr('x', pixel_per_inch * x_offset + 2) .attr('y', pixel_per_inch * (height - tub_height)) .attr('width', pixel_per_inch * right_width - 3) .attr('height', pixel_per_inch * tub_height) .attr('stroke', 'black') .attr('fill', 'white'); svg.append('rect') .attr('x', pixel_per_inch * x_offset + 2) .attr('y', pixel_per_inch * (height - tub_height)) .attr('width', pixel_per_inch * right_width - 3) .attr('height', pixel_per_inch) .attr('stroke', 'black') .attr('fill', 'white'); return svg.node(); }4e:T6b1, function draw_tubside(color = tile_color, stroke_color = "white") { function draw_tile(x, y, w, h) { svg.append('rect') .attr('x', pixel_per_inch * x) .attr('y', pixel_per_inch * y) .attr('width', pixel_per_inch * w) .attr('height', pixel_per_inch * h) .attr('stroke', stroke_color) .attr('fill', color); } const svg = d3.select(DOM.svg(side_canvas_width, canvas_height)); const defs = svg.append("defs"); const artboard = svg.append("g"); var x, y; // draw tiles x = 0; y = 0; if (row_oriented) { var row = 0; while (y < height) { var x = tile_width * offset * row; while (x > 0) { x -= tile_width; } while (x < side_width) { draw_tile(x, y, tile_width, tile_height); x += tile_width; } y += tile_height; row += 1; } } else { var col = 3; while (x < side_width) { y = tile_width * offset * col; while (y > 0) { y -= tile_width; } while (y < height) { draw_tile(x, y, tile_height, tile_width); y += tile_width; } x += tile_height; col += 1; } } // draw tub silhouette svg.append('rect') .attr('x', 0) .attr('y', pixel_per_inch * (height - tub_height)) .attr('width', pixel_per_inch * side_width) .attr('height', pixel_per_inch * tub_height) .attr('stroke', 'black') .attr('fill', 'white'); svg.append('rect') .attr('x', 0) .attr('y', pixel_per_inch * (height - tub_height)) .attr('width', pixel_per_inch * side_width) .attr('height', pixel_per_inch) .attr('stroke', 'black') .attr('fill', '#977556'); return svg.node(); }4f:[{"id":"5a5feed3641a315a4e3033042d71ad6998fc84625ee5b4c1952860ff70a4d8f2d92abf63e06151189eef6b69c8d806332fc030b99033b1ed168e94fb99990b26","href":"https://static.observableusercontent.com/files/5a5feed3641a315a4e3033042d71ad6998fc84625ee5b4c1952860ff70a4d8f2d92abf63e06151189eef6b69c8d806332fc030b99033b1ed168e94fb99990b26","name":"th.jpg","type":"image/jpeg","lastModified":1702440314741.819,"size":54301}] 49:{"id":"28283d5acb46eb4c","slug":"pattern-tile-orientation","title":"Pattern Tile Orientation","thumbnail":"079d2143ffe976a0025a9193145653f957b19c1f2b8bdc832ecb97c80a28c9e6","access_level":"public","create_time":"$D2023-12-12T17:36:32.949Z","update_time":"$D2023-12-14T19:02:09.972Z","view_time":null,"first_public_time":"$D2023-12-12T17:36:32.949Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"970ea23967c29df1","login":"thinkingfish","name":"Yao Yue","avatar_url":"https://avatars-next.observableusercontent.com/ef7694d8a57d0923cbf6e4e10040c5050cbc9fd0d451bc06cbd4d59cefb016c2","tier":"starter_2024","bio":"","following":false},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1dacff11243c3975","login":"thinkingfish","name":"Yao Yue","avatar_url":"https://avatars-next.observableusercontent.com/ef7694d8a57d0923cbf6e4e10040c5050cbc9fd0d451bc06cbd4d59cefb016c2","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1dacff11243c3975","login":"thinkingfish","name":"Yao Yue","avatar_url":"https://avatars-next.observableusercontent.com/ef7694d8a57d0923cbf6e4e10040c5050cbc9fd0d451bc06cbd4d59cefb016c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Pattern Tile Orientation","cells":[{"id":0,"value":"# Pattern Tile Orientation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"viewof row_oriented = Inputs.toggle({label: \"Horizontal?\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof offset = Inputs.select([0.2, 0.25, 0.3333, 0.5], {value: 0.3333, label: \"Tile offset\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html`

${draw_tiles()}

${draw_tubside()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"width = 124","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 144","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"left_width = 36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"panel_width = 48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"right_width = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"tub_height = 19","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"side_width = 70","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"tile_width = 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"tile_height = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"pixel_per_inch = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"canvas_width = pixel_per_inch * width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"side_canvas_width = side_width * pixel_per_inch","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"canvas_height = pixel_per_inch * height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"pattern_size = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"grout_line = 1/8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"swatches([tile_color], \"3em\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"tile_color = \"#EEE7E2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"mosaic_img.image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"mosaic_url = mosaic_img.url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"mosaic_img = FileAttachment(\"th.jpg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"import {swatches} from \"@thinkingfish/color-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null