44:["$","title",null,{"children":"Sierpiński Carpet | Yao Yue | Observable"}] 4c:T6bf,function draw_carpet_alternative(colors, stroke_color = "white", border_color = art_earth_trio[2]) { function draw_borders(skip, field_size, border_length, frame_width, color) { draw_horizontal_border(svg, skip, skip, border_length, frame_width, side, color, stroke_color); draw_horizontal_border(svg, skip, skip + frame_width + field_size, border_length, frame_width, side, color, stroke_color); draw_vertical_border(svg, skip, skip, border_length, frame_width, side, color, stroke_color); draw_vertical_border(svg, skip + frame_width + field_size, skip, border_length, frame_width, side, color, stroke_color); } const inner_frame = 1; const inner_gap = 2; const outer_frame = 3; const outer_gap = 4; const total_padding = inner_frame + inner_gap + outer_frame + outer_gap; const canvas_size = carpet_size + total_padding * 2; const svg = d3.select(make_svg(canvas_size * side, canvas_size * side)); const defs = svg.append("defs"); const artboard = svg.append("g"); draw_carpet_pattern(svg, colors, carpet_size, total_padding, stroke_color); // inner frame draw_borders(outer_gap + outer_frame + inner_gap, carpet_size, carpet_size + inner_frame * 2, inner_frame, border_color); // inner gap draw_borders(outer_gap + outer_frame, carpet_size + inner_frame * 2, carpet_size + (inner_gap + inner_frame) * 2, inner_gap, art_earth_trio[0]); // outer frame draw_borders(outer_gap, carpet_size + (inner_frame + inner_gap) * 2, carpet_size + (outer_frame + inner_gap + inner_frame) * 2, outer_frame, border_color); // outer gap draw_borders(0, carpet_size + (inner_frame + inner_gap + outer_frame) * 2, canvas_size, outer_gap, art_earth_trio[0]); return svg.node(); }4d:T5e7,function draw_pattern_coded(pattern_rows, code, side = border_side * 3, border_gap = gap, double_border = double, colors=art_earth_full, stroke_color = "white", fill_color = art_earth_trio[0], border_color = art_earth_trio[2]) { const rows = pattern_rows[0].length + (border_gap ? 2 : 0) + (double_border ? 3 : 2); const cols = pattern_rows.length; const y_offset = (double_border ? 2 : 1) + (border_gap ? 1 : 0); var svg; svg = d3.select(make_svg(side * pattern_rows.length, side * rows)); // top border draw_horizontal_border(svg, 0, 0, cols, double_border ? 2 : 1, side, border_color, stroke_color); if (border_gap) { // top gap draw_horizontal_border(svg, 0, double_border ? 2 : 1, cols, 1, side, fill_color, stroke_color); // bottom gap draw_horizontal_border(svg, 0, rows - 2, cols, 1, side, fill_color, stroke_color); } // bottom border draw_horizontal_border(svg, 0, rows - 1, cols, 1, side, border_color, stroke_color); for (var x = 0; x < cols; x++) { for (var y = 0; y < pattern_rows[0].length; y++) { svg.append('rect') .attr('x', x * side) .attr('y', (y + y_offset) * side) .attr('width', side) .attr('height', side) .attr('stroke', stroke_color) .attr('fill', pattern_rows[x][y]); svg.append('text') .text(code[x][y]) .attr('x', x * side + side / 3) .attr('y', (y + y_offset) * side + side / 1.3) .attr('stroke', "black"); } } return svg.node(); }4e:Tf05,function draw_border_oriented(svg, colors, pattern_rows, border_gap, double_border, row, col, orientation = "top", stroke_color, fill_color, border_color) { const length = colors.length; const gap = border_gap ? 1 : 0; const outside_border = double_border ? 2 : 1; const outside_rows = outside_border + gap; var x_offset, y_offset; // outside border switch (orientation) { case "top": // top border draw_horizontal_border(svg, col, row, length, outside_border, border_side, border_color, stroke_color); if (border_gap) { // top gap draw_horizontal_border(svg, col, row + outside_border, length, 1, border_side, fill_color, stroke_color); // bottom gap draw_horizontal_border(svg, col, row + outside_rows + pattern_rows, length, 1, border_side, fill_color, stroke_color); } // bottom border draw_horizontal_border(svg, col, row + outside_rows + pattern_rows + gap, length, 1, border_side, border_color, stroke_color); y_offset = outside_border + gap; break; case "bottom": // top border draw_horizontal_border(svg, col, row, length, 1, border_side, border_color, stroke_color); if (border_gap) { // top gap draw_horizontal_border(svg, col, row + 1, length, 1, border_side, fill_color, stroke_color); // bottom gap draw_horizontal_border(svg, col, row + 1 + pattern_rows + gap, length, 1, border_side, fill_color, stroke_color); } // bottom border draw_horizontal_border(svg, col, row + 1 + pattern_rows + gap * 2, length, outside_border, border_side, border_color, stroke_color); y_offset = 1 + gap; break; case "left": // left border draw_vertical_border(svg, col, row, length, outside_border, border_side, border_color, stroke_color); if (border_gap) { // left gap draw_vertical_border(svg, col + outside_border, row, length, 1, border_side, fill_color, stroke_color); // right gap draw_vertical_border(svg, col + outside_rows + pattern_rows, row, length, 1, border_side, fill_color, stroke_color); } // right border draw_vertical_border(svg, col + outside_rows + pattern_rows + gap, row, length, 1, border_side, border_color, stroke_color); x_offset = outside_border + gap; break; case "right": // left border draw_vertical_border(svg, col, row, length, 1, border_side, border_color, stroke_color); if (border_gap) { // left gap draw_vertical_border(svg, col + 1, row, length, 1, border_side, fill_color, stroke_color); // right gap draw_vertical_border(svg, col + 1 + pattern_rows + gap, row, length, 1, border_side, fill_color, stroke_color); } // right border draw_vertical_border(svg, col + 1 + pattern_rows + gap * 2, row, length, outside_border, border_side, border_color, stroke_color); x_offset = 1 + gap; break; } // border pattern if (orientation == "top" || orientation == "bottom") { for (var x = 0; x < length; x++) { for (var y = 0; y < pattern_rows; y++) { svg.append('rect') .attr('x', (col + x) * border_side) .attr('y', (row + y + y_offset) * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', stroke_color) .attr('fill', colors[x][y]); } } } else { for (var y = 0; y < length; y++) { for (var x = 0; x < pattern_rows; x++) { svg.append('rect') .attr('x', (col + x + x_offset) * border_side) .attr('y', (row + y) * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', stroke_color) .attr('fill', colors[y][x]); } } } }4f:Tb68,function draw_corner_oriented(svg, colors, pattern_rows, border_gap, double_border, row, col, orientation = "top", stroke_color, fill_color, border_color) { const length = colors.length; const gap = border_gap ? 1 : 0; const outside_border = double_border ? 2 : 1; const outside_rows = outside_border + gap; var x_offset = 0; var y_offset = 0; // outside border switch (orientation) { case "top": // top border draw_horizontal_border(svg, col - outside_rows, row, length + outside_rows + gap + 1, outside_border, border_side, border_color, stroke_color); if (border_gap) { // top gap draw_horizontal_border(svg, col - gap, row + outside_border, length + gap * 2, 1, border_side, fill_color, stroke_color); } y_offset = outside_border + gap; break; case "bottom": if (border_gap) { // bottom gap draw_horizontal_border(svg, col - gap, row + pattern_rows, length + gap * 2, 1, border_side, fill_color, stroke_color); } // bottom border draw_horizontal_border(svg, col - outside_rows, row + pattern_rows + gap, length + outside_rows + gap + 1, outside_border, border_side, border_color, stroke_color); break; case "left": // left border draw_vertical_border(svg, col, row - outside_rows, length + outside_border + gap + 1, outside_border, border_side, border_color, stroke_color); if (border_gap) { // left gap draw_vertical_border(svg, col + outside_border, row - gap, length + gap * 2, 1, border_side, fill_color, stroke_color); } x_offset = outside_border + gap; break; case "right": if (border_gap) { // right gap draw_vertical_border(svg, col + pattern_rows, row - gap, length + gap * 2, 1, border_side, fill_color, stroke_color); } // right border draw_vertical_border(svg, col + pattern_rows + gap, row - outside_rows, length + outside_rows + gap + 1, outside_border, border_side, border_color, stroke_color); break; } // border pattern if (orientation == "top" || orientation == "bottom") { for (var x = 0; x < length; x++) { for (var y = 0; y < pattern_rows; y++) { svg.append('rect') .attr('x', (col + x) * border_side) .attr('y', (row + y + y_offset) * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', stroke_color) .attr('fill', colors[x][y]); } } } else { for (var y = 0; y < length; y++) { for (var x = 0; x < pattern_rows; x++) { svg.append('rect') .attr('x', (col + x + x_offset) * border_side) .attr('y', (row + y) * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', stroke_color) .attr('fill', colors[y][x]); } } } }50:T2727,function alternative_floor_plan(stroke_color = "black", fill_color = art_earth_trio[0], border_color = art_earth_trio[2]) { function horizontal_border(svg, row, col, len, color=border_color) { for (var i = 0; i < len; i++) { svg.append('rect') .attr('x', (col + i) * border_side) .attr('y', row * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', "white") .attr('fill', color); } } function vertical_border(svg, row, col, len, color=border_color) { for (var i = 0; i < len; i++) { svg.append('rect') .attr('x', col * border_side) .attr('y', (row + i) * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', "white") .attr('fill', color); } } // normalize edges based on size of a (grouted) border tile const unit = border_side / grouted_scale; const svg = d3.select(make_svg(unit * floor_width, unit * floor_depth)); // draw the room outline svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', unit * floor_width) .attr('height', unit * floor_depth) .attr('stroke', stroke_color) .attr('fill', "white"); // draw field const top_slack = 1.5; const left_offset = 2; const left_slack = left_offset - Math.floor(left_offset); const bottom_length = Math.floor(floor_width / grouted_scale); for (var i = 0; i < border_size; ++i) { horizontal_border(svg, top_slack - Math.floor(top_slack) + i, left_slack, bottom_length, fill_color); } //// draw the toilet base //svg.append('rect') // .attr('x', 0) // .attr('y', unit * (tub_depth + (floor_depth - tub_depth) / 2 - base_width / 2)) // .attr('width', unit * base_depth) // .attr('height', unit * base_width) // .attr('stroke', stroke_color) // .attr('fill', fill_color); // draw top border const top_offset = Math.floor(tub_width / grouted_scale); const top_length = 49; draw_border_oriented(svg, bracelet_colors.slice(11, top_length), 5, true, false, top_slack, top_offset + 11, "top", "white", fill_color, border_color); // draw right side border const right_offset = Math.floor(floor_width / grouted_scale - 10); const right_top = 8; const right_length = 90; vertical_border(svg, top_slack + right_top - 1, right_offset + 1, 6, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + 5, right_offset, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + right_top + 20, right_offset + 1, 7, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + 21, right_offset, "right", "white", fill_color, border_color); // insertion, shell draw_border_oriented(svg, sort_colors.slice(18, 27), 5, true, false, top_slack + right_top + 36, right_offset, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + right_top + 45, right_offset + 1, 7, fill_color); draw_border_oriented(svg, sort_colors.slice(27, 38), 5, true, false, top_slack + right_top + 46, right_offset, "right", "white", fill_color, border_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + right_length - 34, right_offset, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + right_top + right_length - 19, right_offset + 1, 7, fill_color); horizontal_border(svg, top_slack + right_top + right_length - 3, right_offset + 1, 7, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + right_length - 18, right_offset, "right", "white", fill_color, border_color); vertical_border(svg, top_slack + right_top + right_length - 2, right_offset + 1, 5, fill_color); // draw bottom border draw_border_oriented(svg, bracelet_colors.slice(11, 45), 5, true, false, top_slack + right_top + right_length + 1, left_offset + 8, "bottom", "white", fill_color, border_color); draw_border_oriented(svg, sort_colors.slice(9, 21), 5, true, false, top_slack + right_top + right_length + 1, left_offset + 41, "bottom", "white", fill_color, border_color); draw_border_oriented(svg, bracelet_colors.slice(0, 34), 5, true, false, top_slack + right_top + right_length + 1, left_offset + 52, "bottom", "white", fill_color, border_color); // draw left border const left_top = 85; vertical_border(svg, top_slack + left_top - 4, left_offset + 7, 4, fill_color); draw_border_oriented(svg, sort_colors.slice(0, 11), 5, true, false, top_slack + left_top, left_offset, "left", "white", fill_color, border_color); vertical_border(svg, top_slack + right_top + right_length - 2, left_offset + 7, 5, fill_color); // draw tub bottom border vertical_border(svg, top_slack + left_top - 10, left_offset + 12, 6, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, 15), 5, true, false, top_slack + left_top - 12, left_offset + 13, "top", "white", fill_color, border_color); draw_border_oriented(svg, sort_colors.slice(60, 70), 5, true, false, top_slack + left_top - 12, left_offset + 28, "top", "white", fill_color, border_color); horizontal_border(svg, top_slack + left_top - 5, left_offset + 7, 5, fill_color); vertical_border(svg, top_slack + left_top - 15, left_offset + 41, 5, fill_color); // draw tub right border vertical_border(svg, top_slack + right_top - 1, left_offset + 47, 5, fill_color); horizontal_border(svg, top_slack + right_top + 4, left_offset + 41, 7, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + 5, left_offset + 40, "right", "white", fill_color, border_color); draw_border_oriented(svg, sort_colors.slice(35, 61), 5, true, false, top_slack + right_top + 20, left_offset + 40, "right", "white", fill_color, border_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + left_top - 31, left_offset + 40, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + left_top - 16, left_offset + 41, 7, fill_color); horizontal_border(svg, top_slack + left_top - 11, left_offset + 36, 5, fill_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack, right_offset - 3, "top", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 16), 5, true, false, top_slack + 2, right_offset + 2, "right", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 2, right_offset + 2, "right", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length + 3, right_offset - 3, "bottom", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 16), 5, true, false, top_slack + right_top + right_length + 3, left_offset + 2, "bottom", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 2, left_offset, "left", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack + right_top + right_length - 23, left_offset, "left", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack + right_top + right_length - 25, left_offset + 2, "top", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 23, left_offset + 37, "bottom", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 28, left_offset + 42, "right", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack + 2, left_offset + 40, "left", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack, left_offset + 42, "top", "white", fill_color, border_color); vertical_border(svg, top_slack + left_top - 3, left_offset, 18); vertical_border(svg, top_slack + left_top - 3, left_offset + 8, 18); horizontal_border(svg, top_slack + right_top + right_length + 1, left_offset + 42, 10); horizontal_border(svg, top_slack + right_top + right_length + 9, left_offset + 42, 10); horizontal_border(svg, top_slack + left_top - 4, left_offset + 27, 13); horizontal_border(svg, top_slack + left_top - 12, left_offset + 27, 13); horizontal_border(svg, top_slack + left_top - 4, left_offset + 8, 13); vertical_border(svg, top_slack + right_top + 1, right_offset, 90); vertical_border(svg, top_slack + right_top + 1, right_offset + 8, 90); vertical_border(svg, top_slack + right_top + 1, left_offset + 40, 65); vertical_border(svg, top_slack + right_top + 1, left_offset + 48, 65); if (double) { horizontal_border(svg, top_slack + right_top - 9, 41, top_length + 7); vertical_border(svg, top_slack + right_top - 8, right_offset + 9, 108); horizontal_border(svg, top_slack - Math.floor(top_slack) + border_size - 1, left_slack + 1, bottom_length); vertical_border(svg, top_slack + left_top - 12, left_offset - 1, 35); horizontal_border(svg, top_slack + left_top - 13, left_slack + 1, 41); vertical_border(svg, top_slack + right_top - 8, left_offset + 39, 72); } // draw the tub outline svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', unit * tub_width) .attr('height', unit * tub_depth) .attr('stroke', stroke_color) .attr('fill', "white"); return svg.node(); }51:T271b,function floor_plan(stroke_color = "black", fill_color = art_earth_trio[0], border_color = art_earth_trio[2]) { function horizontal_border(svg, row, col, len, color=border_color) { for (var i = 0; i < len; i++) { svg.append('rect') .attr('x', (col + i) * border_side) .attr('y', row * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', "white") .attr('fill', color); } } function vertical_border(svg, row, col, len, color=border_color) { for (var i = 0; i < len; i++) { svg.append('rect') .attr('x', col * border_side) .attr('y', (row + i) * border_side) .attr('width', border_side) .attr('height', border_side) .attr('stroke', "white") .attr('fill', color); } } // normalize edges based on size of a (grouted) border tile const unit = border_side / grouted_scale; const svg = d3.select(make_svg(unit * floor_width, unit * floor_depth)); // draw the room outline svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', unit * floor_width) .attr('height', unit * floor_depth) .attr('stroke', stroke_color) .attr('fill', "white"); // draw field const top_slack = 1.5; const left_offset = 2; const left_slack = left_offset - Math.floor(left_offset); const bottom_length = Math.floor(floor_width / grouted_scale); for (var i = 0; i < border_size; ++i) { horizontal_border(svg, top_slack - Math.floor(top_slack) + i, left_slack, bottom_length, fill_color); } //// draw the toilet base //svg.append('rect') // .attr('x', 0) // .attr('y', unit * (tub_depth + (floor_depth - tub_depth) / 2 - base_width / 2)) // .attr('width', unit * base_depth) // .attr('height', unit * base_width) // .attr('stroke', stroke_color) // .attr('fill', fill_color); // draw top border const top_offset = Math.floor(tub_width / grouted_scale); const top_length = 49; draw_border_oriented(svg, bracelet_colors.slice(11, top_length), 5, true, false, top_slack, top_offset + 11, "top", "white", fill_color, border_color); // draw right side border const right_offset = Math.floor(floor_width / grouted_scale - 10); const right_top = 8; const right_length = 90; vertical_border(svg, top_slack + right_top - 1, right_offset + 1, 6, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + 5, right_offset, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + right_top + 20, right_offset + 1, 7, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + 21, right_offset, "right", "white", fill_color, border_color); // insertion, shell draw_border_oriented(svg, sort_colors.slice(18, 27), 5, true, false, top_slack + right_top + 36, right_offset, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + right_top + 45, right_offset + 1, 7, fill_color); draw_border_oriented(svg, sort_colors.slice(27, 38), 5, true, false, top_slack + right_top + 46, right_offset, "right", "white", fill_color, border_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + right_length - 34, right_offset, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + right_top + right_length - 19, right_offset + 1, 7, fill_color); horizontal_border(svg, top_slack + right_top + right_length - 3, right_offset + 1, 7, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + right_length - 18, right_offset, "right", "white", fill_color, border_color); vertical_border(svg, top_slack + right_top + right_length - 2, right_offset + 1, 5, fill_color); // draw bottom border draw_border_oriented(svg, bracelet_colors.slice(11, 45), 5, true, false, top_slack + right_top + right_length + 1, left_offset + 8, "bottom", "white", fill_color, border_color); draw_border_oriented(svg, sort_colors.slice(9, 21), 5, true, false, top_slack + right_top + right_length + 1, left_offset + 41, "bottom", "white", fill_color, border_color); draw_border_oriented(svg, bracelet_colors.slice(0, 34), 5, true, false, top_slack + right_top + right_length + 1, left_offset + 52, "bottom", "white", fill_color, border_color); // draw left border const left_top = 85; vertical_border(svg, top_slack + left_top - 4, left_offset + 7, 4, fill_color); draw_border_oriented(svg, sort_colors.slice(0, 11), 5, true, false, top_slack + left_top, left_offset, "left", "white", fill_color, border_color); vertical_border(svg, top_slack + right_top + right_length - 2, left_offset + 7, 5, fill_color); // draw tub bottom border vertical_border(svg, top_slack + left_top - 10, left_offset + 12, 6, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, 15), 5, true, false, top_slack + left_top - 12, left_offset + 13, "top", "white", fill_color, border_color); draw_border_oriented(svg, sort_colors.slice(60, 70), 5, true, false, top_slack + left_top - 12, left_offset + 28, "top", "white", fill_color, border_color); horizontal_border(svg, top_slack + left_top - 5, left_offset + 7, 5, fill_color); vertical_border(svg, top_slack + left_top - 15, left_offset + 41, 5, fill_color); // draw tub right border vertical_border(svg, top_slack + right_top - 1, left_offset + 47, 5, fill_color); horizontal_border(svg, top_slack + right_top + 4, left_offset + 41, 7, fill_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + right_top + 5, left_offset + 40, "right", "white", fill_color, border_color); draw_border_oriented(svg, sort_colors.slice(35, 61), 5, true, false, top_slack + right_top + 20, left_offset + 40, "right", "white", fill_color, border_color); draw_border_oriented(svg, bracelet_colors.slice(0, bracelet_pattern.length), 5, true, false, top_slack + left_top - 31, left_offset + 40, "right", "white", fill_color, border_color); horizontal_border(svg, top_slack + left_top - 16, left_offset + 41, 7, fill_color); horizontal_border(svg, top_slack + left_top - 11, left_offset + 36, 5, fill_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack, right_offset - 3, "top", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 16), 5, true, false, top_slack + 2, right_offset + 2, "right", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 2, right_offset + 2, "right", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length + 3, right_offset - 3, "bottom", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 16), 5, true, false, top_slack + right_top + right_length + 3, left_offset + 2, "bottom", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 2, left_offset, "left", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack + right_top + right_length - 23, left_offset, "left", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack + right_top + right_length - 25, left_offset + 2, "top", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 23, left_offset + 37, "bottom", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(0, 10), 5, true, false, top_slack + right_top + right_length - 28, left_offset + 42, "right", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack + 2, left_offset + 40, "left", "white", fill_color, border_color); draw_corner_oriented(svg, bracelet_colors.slice(5, 15), 5, true, false, top_slack, left_offset + 42, "top", "white", fill_color, border_color); vertical_border(svg, top_slack + left_top - 3, left_offset, 18); vertical_border(svg, top_slack + left_top - 3, left_offset + 8, 18); horizontal_border(svg, top_slack + right_top + right_length + 1, left_offset + 42, 10); horizontal_border(svg, top_slack + right_top + right_length + 9, left_offset + 42, 10); horizontal_border(svg, top_slack + left_top - 4, left_offset + 27, 13); horizontal_border(svg, top_slack + left_top - 12, left_offset + 27, 13); horizontal_border(svg, top_slack + left_top - 4, left_offset + 8, 13); vertical_border(svg, top_slack + right_top + 1, right_offset, 90); vertical_border(svg, top_slack + right_top + 1, right_offset + 8, 90); vertical_border(svg, top_slack + right_top + 1, left_offset + 40, 65); vertical_border(svg, top_slack + right_top + 1, left_offset + 48, 65); if (double) { horizontal_border(svg, top_slack + right_top - 9, 41, top_length + 7); vertical_border(svg, top_slack + right_top - 8, right_offset + 9, 108); horizontal_border(svg, top_slack - Math.floor(top_slack) + border_size - 1, left_slack + 1, bottom_length); vertical_border(svg, top_slack + left_top - 12, left_offset - 1, 35); horizontal_border(svg, top_slack + left_top - 13, left_slack + 1, 41); vertical_border(svg, top_slack + right_top - 8, left_offset + 39, 72); } // draw the tub outline svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', unit * tub_width) .attr('height', unit * tub_depth) .attr('stroke', stroke_color) .attr('fill', "white"); return svg.node(); }52:Te46, function sort_coloring(palette = art_earth_full) { // fill background color const spacing = 3; const sort_length = spacing - 1 + (bubblesort_5.length + spacing) + (combsort_5.length + spacing) + (mergesort_5.length + spacing) + (quicksort_5.length + spacing) + (insertsort_5.length + spacing) + (shellsort_5.length + spacing) + (exchangesort_5.length + spacing) + selectionsort_5.length + spacing - 1; const map = Array.from(Array(sort_length), () => new Array(5).fill(palette[0])); var offset = spacing - 1; // 1: bubble sort for (var i = 0; i < bubblesort_5.length; i++) { map[offset + i][0] = palette[bubblesort_5[i][0]]; map[offset + i][1] = palette[bubblesort_5[i][1]]; map[offset + i][2] = palette[bubblesort_5[i][2]]; map[offset + i][3] = palette[bubblesort_5[i][3]]; map[offset + i][4] = palette[bubblesort_5[i][4]]; } offset += bubblesort_5.length + spacing; // 2: merge sort for (var i = 0; i < mergesort_5.length; i++) { map[offset + i][0] = palette[mergesort_5[i][0]]; map[offset + i][1] = palette[mergesort_5[i][1]]; map[offset + i][2] = palette[mergesort_5[i][2]]; map[offset + i][3] = palette[mergesort_5[i][3]]; map[offset + i][4] = palette[mergesort_5[i][4]]; } offset += mergesort_5.length + spacing; // 3: insert sort for (var i = 0; i < insertsort_5.length; i++) { map[offset + i][0] = palette[insertsort_5[i][0]]; map[offset + i][1] = palette[insertsort_5[i][1]]; map[offset + i][2] = palette[insertsort_5[i][2]]; map[offset + i][3] = palette[insertsort_5[i][3]]; map[offset + i][4] = palette[insertsort_5[i][4]]; } offset += insertsort_5.length + spacing; // 4: shell sort, a better insert sort for (var i = 0; i < shellsort_5.length; i++) { map[offset + i][0] = palette[shellsort_5[i][0]]; map[offset + i][1] = palette[shellsort_5[i][1]]; map[offset + i][2] = palette[shellsort_5[i][2]]; map[offset + i][3] = palette[shellsort_5[i][3]]; map[offset + i][4] = palette[shellsort_5[i][4]]; } offset += shellsort_5.length + spacing; // 5: quick sort for (var i = 0; i < quicksort_5.length; i++) { map[offset + i][0] = palette[quicksort_5[i][0]]; map[offset + i][1] = palette[quicksort_5[i][1]]; map[offset + i][2] = palette[quicksort_5[i][2]]; map[offset + i][3] = palette[quicksort_5[i][3]]; map[offset + i][4] = palette[quicksort_5[i][4]]; } offset += quicksort_5.length + spacing; // 6: comb sort, a better bubble sort for (var i = 0; i < combsort_5.length; i++) { map[offset + i][0] = palette[combsort_5[i][0]]; map[offset + i][1] = palette[combsort_5[i][1]]; map[offset + i][2] = palette[combsort_5[i][2]]; map[offset + i][3] = palette[combsort_5[i][3]]; map[offset + i][4] = palette[combsort_5[i][4]]; } offset += combsort_5.length + spacing; // 7: exchange sort for (var i = 0; i < exchangesort_5.length; i++) { map[offset + i][0] = palette[exchangesort_5[i][0]]; map[offset + i][1] = palette[exchangesort_5[i][1]]; map[offset + i][2] = palette[exchangesort_5[i][2]]; map[offset + i][3] = palette[exchangesort_5[i][3]]; map[offset + i][4] = palette[exchangesort_5[i][4]]; } offset += exchangesort_5.length + spacing; // 8: selection sort for (var i = 0; i < selectionsort_5.length; i++) { map[offset + i][0] = palette[selectionsort_5[i][0]]; map[offset + i][1] = palette[selectionsort_5[i][1]]; map[offset + i][2] = palette[selectionsort_5[i][2]]; map[offset + i][3] = palette[selectionsort_5[i][3]]; map[offset + i][4] = palette[selectionsort_5[i][4]]; } return map; }53:Td09,sort_pattern = { // fill background color const spacing = 3; const sort_length = spacing - 1 + (bubblesort_5.length + spacing) + (combsort_5.length + spacing) + (mergesort_5.length + spacing) + (quicksort_5.length + spacing) + (insertsort_5.length + spacing) + (shellsort_5.length + spacing) + (exchangesort_5.length + spacing) + selectionsort_5.length + spacing - 1; const map = Array.from(Array(sort_length), () => new Array(5).fill(0)); var offset = spacing - 1; // 2 // 1: bubble sort, [2, 9) for (var i = 0; i < bubblesort_5.length; i++) { map[offset + i][0] = bubblesort_5[i][0]; map[offset + i][1] = bubblesort_5[i][1]; map[offset + i][2] = bubblesort_5[i][2]; map[offset + i][3] = bubblesort_5[i][3]; map[offset + i][4] = bubblesort_5[i][4]; } offset += bubblesort_5.length + spacing; // 12 // 2: merge sort, [12, 18) for (var i = 0; i < mergesort_5.length; i++) { map[offset + i][0] = mergesort_5[i][0]; map[offset + i][1] = mergesort_5[i][1]; map[offset + i][2] = mergesort_5[i][2]; map[offset + i][3] = mergesort_5[i][3]; map[offset + i][4] = mergesort_5[i][4]; } offset += mergesort_5.length + spacing; // 3: insert sort, [21, 27) for (var i = 0; i < insertsort_5.length; i++) { map[offset + i][0] = insertsort_5[i][0]; map[offset + i][1] = insertsort_5[i][1]; map[offset + i][2] = insertsort_5[i][2]; map[offset + i][3] = insertsort_5[i][3]; map[offset + i][4] = insertsort_5[i][4]; } offset += insertsort_5.length + spacing; // 4: shell sort, a better insert sort, [30, 35) for (var i = 0; i < shellsort_5.length; i++) { map[offset + i][0] = shellsort_5[i][0]; map[offset + i][1] = shellsort_5[i][1]; map[offset + i][2] = shellsort_5[i][2]; map[offset + i][3] = shellsort_5[i][3]; map[offset + i][4] = shellsort_5[i][4]; } offset += shellsort_5.length + spacing; // 5: quick sort, [38, 43) for (var i = 0; i < quicksort_5.length; i++) { map[offset + i][0] = quicksort_5[i][0]; map[offset + i][1] = quicksort_5[i][1]; map[offset + i][2] = quicksort_5[i][2]; map[offset + i][3] = quicksort_5[i][3]; map[offset + i][4] = quicksort_5[i][4]; } offset += quicksort_5.length + spacing; // 6: comb sort, a better bubble sort, [46, 51) for (var i = 0; i < combsort_5.length; i++) { map[offset + i][0] = combsort_5[i][0]; map[offset + i][1] = combsort_5[i][1]; map[offset + i][2] = combsort_5[i][2]; map[offset + i][3] = combsort_5[i][3]; map[offset + i][4] = combsort_5[i][4]; } offset += combsort_5.length + spacing; // 7: exchange sort, [54, 59) for (var i = 0; i < exchangesort_5.length; i++) { map[offset + i][0] = exchangesort_5[i][0]; map[offset + i][1] = exchangesort_5[i][1]; map[offset + i][2] = exchangesort_5[i][2]; map[offset + i][3] = exchangesort_5[i][3]; map[offset + i][4] = exchangesort_5[i][4]; } offset += exchangesort_5.length + spacing; // 8: selection sort, [62, 67) for (var i = 0; i < selectionsort_5.length; i++) { map[offset + i][0] = selectionsort_5[i][0]; map[offset + i][1] = selectionsort_5[i][1]; map[offset + i][2] = selectionsort_5[i][2]; map[offset + i][3] = selectionsort_5[i][3]; map[offset + i][4] = selectionsort_5[i][4]; } return map; }54:[] 48:{"id":"196d4277f6fdc9a5","slug":"sierpinski-carpet","title":"Sierpiński Carpet","thumbnail":"d472497171b69e6e0526985b298ee0ea728981d0a6e646df3c314b8e6601cabe","access_level":"public","create_time":"$D2023-11-12T20:11:09.887Z","update_time":"$D2026-10-19T17:14:48.519Z","view_time":null,"first_public_time":"$D2023-11-12T20:11:09.887Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":1722,"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":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sierpiński Carpet","cells":[{"id":0,"value":"# Sierpiński Carpet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"viewof steps = Inputs.range([2, 4], {value: 4, step: 1, label: \"Level of fractal details\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"wall_pattern_size = (81 + 1 * 2 + 2 * 2 + 3 * 2 + 4 * 2) * (0.75 + 3 / 32);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"Wall pattern with border. Dimensions:\n- Sierpiński carpet pattern: 81 x 81\n- overall canvas dimension: 87\" x 87\"\n- designed for 3/4\" square mosaic tiles with 1/16\" or 3/32\" grout lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1648,"value":"draw_carpet_alternative(coloring());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"Floor border tile pattern, which uses a \"bracelet\" shape as well as 8 different sorting algorithms against the initial sequence `[5, 1, 4, 2, 3]`, color-coded from lightest (smallest) to darkest (largest). Dimensions:\n- overall: 79\" wide x 90\" long\n- tub: 32\" wide x 60\" long\n- designed for 3/4\" square mosaic tiles with 1/16\" grout lines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"\nfloor_plan()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"draw_border(bracelet_colors, bracelet_colors[0].length);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"draw_border(sort_colors, sort_colors[0].length);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"viewof gap = Inputs.toggle({label: \"Border Gap\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"viewof double = Inputs.toggle({label: \"Double Border\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"### Details on Pattern Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1564,"value":"art_earth_swatches","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"draw_pattern_coded(bracelet_coloring(15), bracelet_pattern)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"draw_pattern_coded(sort_colors, sort_pattern)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"### Drawing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1580,"value":"sort_coloring()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"frame_width = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"grout_width = 1 / 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"carpet_size = Math.pow(3, steps); // size of the pattern in cells","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"carpet_with_grout = (frame_width * 2 + carpet_size) * (1 + grout_width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"carpet_width = carpet_size * side;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"canvas_height = canvas_width;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"canvas_width = carpet_width + side * frame_width * 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"side = 6; // size of each (inch) square","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"border_scale = 0.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"grouted_scale = 0.75 + grout_width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"border_side = 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"border_size = Math.floor(floor_depth / (border_scale + grout_width) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"border_rows = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"function make_svg(width, height) {\n // replacement for the removed DOM.svg(width, height) helper\n const node = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n node.setAttribute(\"viewBox\", `0 0 ${width} ${height}`);\n node.setAttribute(\"width\", width);\n node.setAttribute(\"height\", height);\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"function draw_horizontal_border(svg, left_col, top_row, length, rows, side, color, stroke_color=\"white\") {\n for (var x = 0; x < length; x++) {\n for (var y = 0; y < rows; y++) {\n // top\n svg.append(\"rect\")\n .attr(\"x\", (left_col + x) * side)\n .attr(\"y\", (top_row + y) * side)\n .attr(\"height\", side)\n .attr(\"width\", side)\n .attr(\"stroke\", stroke_color)\n .attr(\"fill\", color);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"function draw_vertical_border(svg, left_col, top_row, length, cols, side, color, stroke_color) {\n for (var x = 0; x < cols; x++) {\n for (var y = 0; y < length; y++) {\n // top\n svg.append(\"rect\")\n .attr(\"x\", (x + left_col) * side)\n .attr(\"y\", (y + top_row) * side)\n .attr(\"height\", side)\n .attr(\"width\", side)\n .attr(\"stroke\", stroke_color)\n .attr(\"fill\", color);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"function draw_carpet_pattern(svg, colors, size, border_width, stroke_color) {\n for (var x = 0; x < size; x++) {\n for (var y = 0; y < size; y++) {\n svg.append('rect')\n .attr('x', (border_width + x) * side)\n .attr('y', (border_width + y) * side)\n .attr('width', side)\n .attr('height', side)\n .attr('stroke', stroke_color)\n .attr('fill', colors[x][y]);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"function draw_carpet(colors, stroke_color = \"white\", border_color = art_earth_trio[2]) {\n\n const svg = d3.select(make_svg(canvas_width + frame_width * 2, canvas_height + frame_width * 2));\n const defs = svg.append(\"defs\");\n const artboard = svg.append(\"g\");\n const border_length = carpet_size + frame_width * 2;\n\n draw_carpet_pattern(svg, colors, carpet_size, frame_width, stroke_color);\n\n draw_horizontal_border(svg, 0, 0, border_length, frame_width, side, border_color, stroke_color);\n draw_horizontal_border(svg, 0, frame_width + carpet_size, border_length, frame_width, side, border_color, stroke_color);\n draw_vertical_border(svg, 0, 0, border_length, frame_width, side, border_color, stroke_color);\n draw_vertical_border(svg, frame_width + carpet_size, 0, border_length, frame_width, side, border_color, stroke_color);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"draw_carpet(coloring(), \"white\", art_earth_trio[2]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"function draw_border(colors, pattern_rows, orientation = \"top\", border_gap = gap, double_border = double, stroke_color = \"white\", fill_color = art_earth_trio[0], border_color = art_earth_trio[2]) {\n\n const rows = pattern_rows + (border_gap ? 2 : 0) + (double_border ? 3 : 2);\n var svg;\n\n if (orientation == \"top\" || orientation == \"bottom\") {\n svg = d3.select(make_svg(border_side * border_size, border_side * rows));\n } else {\n svg = d3.select(make_svg(border_side * rows, border_side * border_size));\n }\n\n draw_border_oriented(svg, colors, pattern_rows, border_gap, double_border, 0, 0, orientation, stroke_color, fill_color, border_color);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"floor_width = 79","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"floor_depth = 90","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"tub_width = 32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"tub_depth = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"base_width = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"base_depth = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"### Color the squares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"bracelet_colors = bracelet_coloring(border_size);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":" bracelet_pattern = [\n [0, 0, 0, 0, 0],\n [0, 0, 5, 0, 0],\n [0, 4, 4, 4, 0],\n [0, 4, 2, 4, 0],\n [0, 4, 4, 4, 0],\n [3, 3, 3, 3, 3],\n [3, 1, 1, 1, 3],\n [3, 1, 1, 1, 3],\n [3, 1, 1, 1, 3],\n [3, 3, 3, 3, 3],\n [0, 4, 4, 4, 0],\n [0, 4, 2, 4, 0],\n [0, 4, 4, 4, 0],\n [0, 0, 5, 0, 0],\n [0, 0, 0, 0, 0]\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function bracelet_coloring(length, palette = art_earth_full) {\n // fill background color\n const map = Array.from(Array(length), () => new Array(5).fill(palette[0]));\n \n for (var x = 0; x < length; x++) {\n for (var y = 0; y < 5; y++) {\n map[x][y] = palette[bracelet_pattern[x % bracelet_pattern.length][y]];\n }\n }\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"sort_colors = sort_coloring()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"$53","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1684,"value":"sort_pattern[66]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"bubblesort_5 = [\n [5, 1, 4, 2, 3],\n [1, 5, 4, 2, 3],\n [1, 4, 5, 2, 3],\n [1, 4, 2, 5, 3],\n [1, 4, 2, 3, 5],\n [1, 2, 4, 3, 5],\n [1, 2, 3, 4, 5]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"mergesort_5 = [\n [5, 1, 4, 2, 3],\n [1, 5, 4, 2, 3],\n [1, 5, 2, 4, 3],\n [1, 2, 5, 4, 3],\n [1, 2, 4, 5, 3],\n [1, 2, 3, 4, 5]\n ]; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"quicksort_5 = [\n [5, 1, 4, 2, 3],\n [3, 1, 4, 2, 5],\n [3, 1, 2, 4, 5],\n [1, 3, 2, 4, 5],\n [1, 2, 3, 4, 5]\n ];\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"shellsort_5 = [ // using Ciuca gap sequence [..., 4, 1]\n [5, 1, 4, 2, 3],\n [3, 1, 4, 2, 5],\n [1, 3, 4, 2, 5],\n [1, 3, 2, 4, 5],\n [1, 2, 3, 4, 5]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"insertsort_5 = [\n [5, 1, 4, 2, 3],\n [1, 5, 4, 2, 3],\n [1, 4, 5, 2, 3],\n [1, 4, 2, 5, 3],\n [1, 2, 4, 5, 3],\n [1, 2, 3, 4, 5]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"combsort_5 = [\n [5, 1, 4, 2, 3],\n [2, 1, 4, 5, 3],\n [1, 2, 4, 5, 3],\n [1, 2, 4, 3, 5],\n [1, 2, 3, 4, 5]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"exchangesort_5 = [\n [5, 1, 4, 2, 3],\n [1, 5, 4, 2, 3],\n [1, 4, 5, 2, 3],\n [1, 2, 5, 4, 3],\n [1, 2, 3, 4, 5]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"selectionsort_5 = [\n [5, 1, 4, 2, 3],\n [1, 5, 4, 2, 3],\n [1, 2, 4, 5, 3],\n [1, 2, 3, 5, 4],\n [1, 2, 3, 4, 5]\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"coloring()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"coloring = (palette = art_earth_trio) => {\n const map = Array.from(Array(carpet_size), () => new Array(carpet_size).fill(palette[0]));\n for (var i = steps; i > 0; i--) {\n const last_group = Math.pow(3, i);\n const group = Math.pow(3, i - 1);\n\n for (var x = 0; x < carpet_size; x++) {\n for (var y = 0; y < carpet_size; y++) {\n if (Math.floor(x % last_group / group) == 1 && Math.floor(y % last_group / group) == 1) {\n map[x][y] = palette[1];\n }\n }\n }\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## External Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":418,"value":"import {art_earth_trio, art_earth_full, art_earth_swatches} from \"@thinkingfish/art-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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":"$W54","stdlib":"1"}} 24:null