D3 Template

2e:null 2f:["$","title",null,{"children":"Rhombus Tiling Visualiser | David Quick | Observable"}] 34:T656,### Motivation The inspiration for this visualisation comes from a puzzle called "Rhombus Tiling" which I first discovered in Peter Winker's book "Mathematical Puzzles: A connoisseur's Collection". The puzzle goes like this: >Form n choose 2 different Rhombi from the pairs of non-parallel sides of a regular 2n-gon, then tile the 2n-gon with translations of the rhombi. Prove you use each different rhombus exactly once! In simpler terms with diagrams: - take an even sided shape (square, hexagon, octagon, etc) ![untitled (4).svg](${await FileAttachment("untitled (4).svg").url()}) - colour each edge differently ![untitled (6).svg](${await FileAttachment("untitled (6).svg").url()}) - form a rhombus from each pair of differently coloured edges ![untitled (8).svg](${await FileAttachment("untitled (8).svg").url()}) - completely fill the shape with these rhombi ![untitled (7).svg](${await FileAttachment("untitled (7).svg").url()}) - you'll find you've used each shape exactly once This is true for any (even) number of edges, for example: ![untitled (11).svg](${await FileAttachment("untitled (11).svg").url()}) ![untitled (10).svg](${await FileAttachment("untitled (10).svg").url()}) ![untitled (12).svg](${await FileAttachment("untitled (12).svg").url()}) I can recommend spending some time trying to solve this for yourself, so won't give the answer away. I will include a hint or two below though. Once I'd solve the puzzle, I was really interested in seeing what such a random rhombus tiling might look like for shapes larger than the best decagon I could draw by hand. Hence why I built this tool.35:T177a, D3 Template

Display:
faces
table
lines
edges
points
vertices
curves

Animation:
sec(s)

Back Colour:

Edge Colour:

Face Colour:

opcty

statusbar

36:T3d7e,{ let tiling = new Tiling(5, []) var chartDiv = document.getElementById("grid-main") var jsonPaths = [ {"path": [{ "x": 20, "y": 980}, { "x": 980, "y": 20}, { "x": 20, "y": 20}, { "x": 980, "y": 980}]} ]; // var d3 = importjs("https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js") console.log("hi") // var d3 = require("d3@6.5") // let d3 = await importjs("https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js", 'window.d3') console.log(d3) var svg = d3.select(chartDiv) .append("svg") .attr("viewBox", "0 0 1600 1024") .attr("preserveAspectRatio", "xMidYMid meet") .attr("width", "100%") .attr("height", "100%") .classed("svg-content", true) // elements for data join var faces = svg.append("g"), lines = svg.append("g"), points = svg.append("g"), curves = svg.append("g"); var t_duration = 1000 // follow v4 general update pattern function update(tiling) { var n = tiling.n; var blueprint = tiling.blueprint; var statusbar = document.getElementById("grid-statusbar"); statusbar.textContent="n: " + blueprint["n"] + ", placements: " + blueprint["placements"].map(d => "[" + d[0] + "," + d[1] + "]").join(", "); var edge_colour_type = document.getElementById("edge_colour_type").value; var edge_colour_base = document.getElementById("edge_colour_base").value; var face_colour_type = document.getElementById("face_colour_type").value; var face_colour_base = document.getElementById("face_colour_base").value; var t_exit = d3.transition() .duration(0.5*t_duration) .ease(d3.easeCubicOut); var t_update = d3.transition() .duration(0.6*t_duration) .delay(0.2*t_duration) .ease(d3.easeCubicOut); var t_enter = d3.transition() .duration(0.5*t_duration) .delay(0.5*t_duration) .ease(d3.easeCubicOut); var x_scale_ngon = d3.scaleLinear() .domain([-1, 1]) .range([48, 976]) var y_scale_ngon = d3.scaleLinear() .domain([-1, 1]) .range([48, 976]) var x_scale_table = d3.scaleLinear() .domain([-1, 0]) .range([648, 1576]) var y_scale_table = d3.scaleLinear() .domain([0, 1]) .range([48, 976]) var colours = [] // get point details var point_details = []; if (document.getElementById("toggle_vertices").checked) { point_details = point_details.concat(Object.values(tiling.vertices)) } if (document.getElementById("toggle_points").checked) { point_details = point_details.concat(tiling.points) } points.selectAll(".point") .data(point_details, d => d.key) .join( enter => enter .append("circle") .attr("class", "point") .attr("fill", "#ccc") .attr("stroke", "#000") .attr("cx", d => x_scale_ngon(d.x)) .attr("cy", d =>y_scale_ngon(d.y)) .attr("r", 0.0001) .call(enter => enter.transition(t_enter) .delay((d, i) => 0.75*t_duration + 0.02*t_duration * Math.sqrt(i)) .attr("r", d => Math.sqrt(256 / n)) ), update => update .call(enter => update.transition(t_update) .attr("cx", d => x_scale_ngon(d.x)) .attr("cy", d => y_scale_ngon(d.y)) .attr("r", d => Math.sqrt(256 / n)) ), exit => exit .call(exit => exit.transition(t_exit) .attr("r", 0.0001) .remove()) ); // get line details var line_details = []; if (document.getElementById("toggle_edges").checked) { line_details = line_details.concat(Object.values(tiling.edges)) } if (document.getElementById("toggle_lines").checked) { line_details = line_details.concat(tiling.lines) } if (document.getElementById("toggle_table").checked) { line_details = line_details.concat(tiling.unplaced_table_edges) } lines.selectAll(".line") .data(line_details, d => d.key) .join( enter => enter .append("line") .attr("class", "line") .style("stroke-width", d => d.placed ? Math.sqrt(256 / n) : Math.sqrt(64 / n)) .style("stroke", d => d.colour(edge_colour_type, edge_colour_base)) .attr("x1", d => { return d.placed ? d.line.x1_collapsed(x_scale_ngon) : d.line.x1_collapsed(x_scale_table)}) .attr("y1", d => { return d.placed ? d.line.y1_collapsed(y_scale_ngon) : d.line.y1_collapsed(y_scale_table)}) .attr("x2", d => { return d.placed ? d.line.x2_collapsed(x_scale_ngon) : d.line.x2_collapsed(x_scale_table)}) .attr("y2", d => { return d.placed ? d.line.y2_collapsed(y_scale_ngon) : d.line.y2_collapsed(y_scale_table)}) .call(enter => enter.transition(t_enter) .attr("x1", d => { return d.placed ? d.line.x1(x_scale_ngon) : d.line.x1(x_scale_table)}) .attr("y1", d => { return d.placed ? d.line.y1(y_scale_ngon) : d.line.y1(y_scale_table)}) .attr("x2", d => { return d.placed ? d.line.x2(x_scale_ngon) : d.line.x2(x_scale_table)}) .attr("y2", d => { return d.placed ? d.line.y2(y_scale_ngon) : d.line.y2(y_scale_table)}) ), update => update .call(update => update.transition(t_update) // .delay((d, i) => 0.25*t_duration + 0.05*t_duration * Math.sqrt(i)) .style("stroke-width", d => d.placed ? Math.sqrt(256 / n) : Math.sqrt(64 / n)) .style("stroke", d => d.colour(edge_colour_type, edge_colour_base)) .attr("x1", d => { return d.placed ? d.line.x1(x_scale_ngon) : d.line.x1(x_scale_table)}) .attr("y1", d => { return d.placed ? d.line.y1(y_scale_ngon) : d.line.y1(y_scale_table)}) .attr("x2", d => { return d.placed ? d.line.x2(x_scale_ngon) : d.line.x2(x_scale_table)}) .attr("y2", d => { return d.placed ? d.line.y2(y_scale_ngon) : d.line.y2(y_scale_table)}) ), exit => exit .call(exit => exit.transition(t_exit) .attr("x1", d => { return d.placed ? d.line.x1_collapsed(x_scale_ngon) : d.line.x1_collapsed(x_scale_table)}) .attr("y1", d => { return d.placed ? d.line.y1_collapsed(y_scale_ngon) : d.line.y1_collapsed(y_scale_table)}) .attr("x2", d => { return d.placed ? d.line.x2_collapsed(x_scale_ngon) : d.line.x2_collapsed(x_scale_table)}) .attr("y2", d => { return d.placed ? d.line.y2_collapsed(y_scale_ngon) : d.line.y2_collapsed(y_scale_table)}) .remove() ) ); console.log(parseFloat(document.getElementById("face_opacity").value)) // get face details var face_details = []; if (document.getElementById("toggle_faces").checked) { face_details = face_details.concat(Object.values(tiling.faces)) } if (document.getElementById("toggle_table").checked) { face_details = face_details.concat(Object.values(tiling.unplaced_table)) } var f = faces.selectAll(".face") .data(face_details, d => d.key) .join( enter => enter .append("path") .attr("class", "face") .attr("fill-opacity", parseFloat(document.getElementById("face_opacity").value)) .attr("fill", d => d.colour(edge_colour_type, edge_colour_base, face_colour_type, face_colour_base)) .attr("d", d => {return d.placed ? d.tiny_shape(x_scale_ngon, y_scale_ngon) : d.tiny_shape(x_scale_table, y_scale_table)}) .on("click", faceClick) .call(enter => enter.transition(t_enter) .attr("d", d => {return d.placed ? d.shape(x_scale_ngon, y_scale_ngon) : d.shape(x_scale_table, y_scale_table)}) ), update => update .call(update => update.transition(t_update) .attr("fill-opacity", parseFloat(document.getElementById("face_opacity").value)) .attr("fill", d => d.colour(edge_colour_type, edge_colour_base, face_colour_type, face_colour_base)) .attr("d", d => {return d.placed ? d.shape(x_scale_ngon, y_scale_ngon) : d.shape(x_scale_table, y_scale_table)}) ), exit => exit .call(exit => exit.transition(t_exit) .attr("d", d => {return d.placed ? d.tiny_shape(x_scale_ngon, y_scale_ngon) : d.tiny_shape(x_scale_table, y_scale_table)}) .remove() ) ); // faces.selectAll(".face") // .data(face_details, (d, i) => d.key) // .on("click", function (d) { // console.log(d3.select(this)) // console.log(d) // d3.select(this).attr({ // fill: "orange", // r: radius * 2 // }); // }) // faces.selectAll(".face").on("click", function(d) { // console.log(d) // }) // get curve details var curve_details = []; if (document.getElementById("toggle_curves").checked) { curve_details = curve_details.concat(tiling.bearing_shapes(x_scale_ngon, y_scale_ngon, edge_colour_type, edge_colour_base)) } curves.selectAll(".curve") .data(curve_details, d => d.key) .join( enter => enter .append("path") .attr("class", "curve") .style("stroke-width", Math.sqrt(256 / n)) .style("stroke", d => d.colour) .style("fill-opacity", 0) .attr("d", d => d.collapsed_shape) .call(enter => enter.transition(t_enter) .attr("d", d => d.shape) ), update => update .call(update => update.transition(t_update) .style("stroke-width", Math.sqrt(256 / n)) .style("stroke", d => d.colour) .attr("d", d => d.shape), ), exit => exit .call(exit => exit.transition(t_exit) .attr("d", d => d.collapsed_shape) .remove() ) ); } function faceClick (click, face) { if (!click.shiftKey && face.placed) { tiling = tiling.remove_tile(face.placement.tile); update(tiling) return } var tile = face.placement.tile; var new_placement = face.placement; if (!face.placed) { new_placement = new Placement(tiling.n, tile.orientation_2 + tiling.n, tile.orientation_1); } else { tiling = tiling.remove_tile(face.placement.tile); } // only need two cases? for (let attempt = 0; attempt < 4; attempt++) { var new_placement = new Placement(tiling.n, new_placement.bearing_2, (new_placement.bearing_1 + tiling.n) % (2*tiling.n)); var face = tiling.add_placement(new_placement); if (face != null) { break; } } update(tiling) } function random_tiling(n) { console.log(n) tiling = new Tiling(n, []) var retries = 100; while (retries > 0) { retries --; var new_tiling = tiling.add_random_placement(); console.log(new_tiling) if (new_tiling == null) { break; // } else { // update(tiling); } } return tiling } tiling = random_tiling(parseInt(document.getElementById("side_count").value)); update(tiling); document.getElementById("side_count").addEventListener("keyup", evt => { console.log(evt) if (evt.key === "Enter") { var n = parseInt(document.getElementById("side_count").value); tiling = tiling.update_n(n); // console.log(n); update(tiling); } }); document.getElementById("style_animation_duration").addEventListener('input', function (evt) { t_duration = 1000*parseFloat(document.getElementById("style_animation_duration").value); }); document.getElementById("style_animation_duration").addEventListener("keyup", evt => { if (evt.key === "Enter") { t_duration = 1000*parseFloat(document.getElementById("style_animation_duration").value); } }); document.getElementById("background_colour").addEventListener('input', avt => { var colour = document.getElementById("background_colour").value; document.getElementById("grid-main").style.background = colour }, false); document.getElementById("face_opacity").addEventListener('input', function (evt) { update(tiling); }); document.getElementById("face_opacity").addEventListener("keyup", evt => { if (evt.key === "Enter") { update(tiling); } }); document.getElementById("random").addEventListener("click", d => { tiling = random_tiling(tiling.n); update(tiling); }); document.getElementById("add").addEventListener("click", d => { tiling.add_random_placement(); update(tiling); }); document.getElementById("remove").addEventListener("click", d => { tiling = tiling.remove_last_placement(); update(tiling); }); document.getElementById("star--").addEventListener("click", d => { var new_n = tiling.n - 1 - (tiling.n % 2); document.getElementById("side_count").value = new_n; var placements = star_tiling(new_n) tiling = new Tiling(new_n, placements); update(tiling); }); document.getElementById("star++").addEventListener("click", d => { var new_n = tiling.n + 1 + (tiling.n % 2); document.getElementById("side_count").value = new_n; var placements = star_tiling(new_n) tiling = new Tiling(new_n, placements); update(tiling); }); var display_toggle_elements = document.getElementsByClassName("display_toggles"); var display_values_elements = document.getElementsByClassName("display_values"); var display_input_elements = document.getElementsByClassName("display_inputs"); var refresh_tiling = function() { update(tiling); }; for (var i = 0; i < display_toggle_elements.length; i++) { display_toggle_elements[i].addEventListener('click', refresh_tiling, false); } for (var i = 0; i < display_values_elements.length; i++) { display_values_elements[i].addEventListener('change', refresh_tiling, false); } for (var i = 0; i < display_input_elements.length; i++) { display_input_elements[i].addEventListener('input', refresh_tiling, false); } document.getElementsByName("tile_random")[0].addEventListener("click", d => { tiling = random_tiling(tiling.n); update(tiling); }); document.getElementById("grid-statusbar").addEventListener("dblclick", d => { var placements = prompt("Enter a new tiling as list of pairs of bearings (0,1,... 2n-1)!", tiling.blueprint["placements"].map(d => "[" + d[0] + "," + d[1] + "]").join(", ")); placements = JSON.parse(placements).map(x => new Placement(this.n, x[0], x[1])) tiling = new Tiling(tiling.n, placements); update(tiling); }); d3.select("body").on("keydown", function(p) { console.log("Key pressed: " + event.key) switch(event.key) { case "r": tiling = random_tiling(tiling.n); update(tiling); break; case "ArrowUp": document.getElementById("side_count").value ++; var n = document.getElementById("side_count").value; tiling = tiling.update_n(n); // console.log(n); update(tiling); break; case "ArrowDown": document.getElementById("side_count").value --; var n = document.getElementById("side_count").value; tiling = tiling.update_n(n); // console.log(n); update(tiling); break; case "ArrowRight": tiling = tiling.remove_last_placement(); update(tiling); break; case "ArrowLeft": tiling.add_random_placement(); update(tiling); break; default: // code block } }); }37:T4b8,function orientations_colour(orientation_1, orientation_2, n, edge_colour_type, edge_colour_base, face_colour_type, face_colour_base) { var edge_base_hsl = d3.hsl(edge_colour_base); var face_base_hsl = d3.hsl(face_colour_base); var average_orientation = (orientation_1 + orientation_2)/2; switch (face_colour_type) { case "colour blend": var colour_1 = d3.rgb(orientation_colour(orientation_1, n, edge_colour_type, edge_colour_base)); var colour_2 = d3.rgb(orientation_colour(orientation_2, n, edge_colour_type, edge_colour_base)); return d3.rgb(Math.sqrt(colour_1.r**2 + colour_2.r**2), Math.sqrt(colour_1.g**2 + colour_2.g**2), Math.sqrt(colour_1.b**2 + colour_2.b**2)); case "average cyclic": if (Math.abs(average_orientation + (this.n/2) - orientation_2) % this.n < Math.abs(average_orientation - orientation_2) % this.n) { average_orientation = average_orientation + (this.n/2); } case "average edge": return orientation_colour(average_orientation, n, edge_colour_type, edge_colour_base); case "constant": default: return face_base_hsl; } }38:Tb6b,class Line { constructor (n, start, end, orientation, step, placed) { this.n = n; this.start = start; this.end = end; this.orientation = orientation; this.step = step; this.placed = placed; } get key() { return [this.orientation, this.step, this.placed]; } colour(edge_colouring, edge_colour_base) { return orientation_colour(this.orientation, this.n, edge_colouring, edge_colour_base) } get line() { return this; } toString() { return `Line(${this.orientation}/${this.n}, ${this.start.toString()}, ${this.end.toString()})` } x1(x_scale) { var x1 = this.start.x; if (this.placed) { return x_scale(x1); } else { var scale_factor = 4 return x_scale((x1/scale_factor - Math.min(this.step, this.orientation)/this.n)); } } x1_collapsed(x_scale) { var x1 = (this.start.x + this.end.x)/2; if (this.placed) { return x_scale(x1); } else { var scale_factor = 4 return x_scale((x1/scale_factor - Math.min(this.step, this.orientation)/this.n)); } } x2(x_scale) { var x2 = this.end.x; if (this.placed) { return x_scale(x2); } else { var scale_factor = 4 return x_scale((x2/scale_factor - Math.min(this.step, this.orientation)/this.n)); } } x2_collapsed(x_scale) { var x2 = (this.start.x + this.end.x)/2; if (this.placed) { return x_scale(x2); } else { var scale_factor = 4 return x_scale((x2/scale_factor - Math.min(this.step, this.orientation)/this.n)); } } y1(y_scale) { var y1 = this.start.y; if (this.placed) { return y_scale(y1); } else { var scale_factor = 4 return y_scale(1 + (y1/scale_factor - Math.max(this.step, this.orientation)/this.n)); } } y1_collapsed(y_scale) { var y1 = (this.start.y + this.end.y)/2; if (this.placed) { return y_scale(y1); } else { var scale_factor = 4 return y_scale(1 + (y1/scale_factor - Math.max(this.step, this.orientation)/this.n)); } } y2(y_scale) { var y2 = this.end.y; if (this.placed) { return y_scale(y2); } else { var scale_factor = 4 return y_scale(1 + (y2/scale_factor - Math.max(this.step, this.orientation)/this.n)); } } y2_collapsed(y_scale) { var y2 = (this.start.y + this.end.y)/2; if (this.placed) { return y_scale(y2); } else { var scale_factor = 4 return y_scale(1 + (y2/scale_factor - Math.max(this.step, this.orientation)/this.n)); } } }39:T900,class Face { constructor (n, placement, points, placed, correct_order=true) { this.n = n; this.placement = placement; this.points = points; this.placed = placed == null ? true : false; if (correct_order) { var ordered_bearings = [placement.bearing_1, placement.bearing_2, (placement.bearing_1 + this.n) % (2*this.n), (placement.bearing_2 + this.n) % (2*this.n)]; var min_bearing = ordered_bearings.reduce(function(lowest, next, index) { return next < ordered_bearings[lowest] ? index : lowest; }, 0); this.points = (this.points.concat(this.points)).splice(min_bearing, this.points.length); } } get key() { var tile = this.placement.tile; // console.log([tile.orientation_1, tile.orientation_2]) return [tile.orientation_1, tile.orientation_2] } colour(edge_colour_type, edge_colour_base, face_colour_type, face_colour_base) { var tile = this.placement.tile; return orientations_colour(tile.orientation_1, tile.orientation_2, this.n, edge_colour_type, edge_colour_base, face_colour_type, face_colour_base) } get ordered_points() { return this.points; } shape(x_scale, y_scale) { var face = this; return "M " + this.ordered_points.map( function(p) { if (face.placed) { return [x_scale(p.x), y_scale(p.y)].join(","); } else { var scale_factor = 4 return [x_scale((p.x/scale_factor - face.placement.bearing_1/face.n)), y_scale(1 + (p.y/scale_factor - face.placement.bearing_2/face.n))].join(","); } }).join(" L ") + " Z "; } tiny_shape(x_scale, y_scale) { var centre_x = this.ordered_points.map(p => p.x).reduce((a, b) => (a + b)) /4; var centre_y = this.ordered_points.map(p => p.y).reduce((a, b) => (a + b)) /4; var tiny_points = this.ordered_points.map(p => new Point(0.999*centre_x + 0.001*p.x, 0.999*centre_y + 0.001*p.y)); return "M " + tiny_points.map( function(p) { return [x_scale(p.x), y_scale(p.y)].join(","); }).join(" L ") + " Z "; } toString() { return `Face(${this.n}, ${this.placement.bearing_1}x${this.placement.bearing_2})` } }3a:Tb6b,class BearingCycle { constructor (n) { this.n = n; this.bearings = [] for (var i = 0; i < 2*n; i++) { this.bearings.push(i); } } toString() { return "Bearings(" + this.bearings.join(",") + ")"; } standardise_index(index) { return (index + this.bearings.length) % this.bearings.length; } get_item(index) { var index = this.standardise_index(index); return this.bearings[index]; } index_of(item) { return this.bearings.indexOf(item) } collapse_merged() { while (true) { for (let index = 0; index < this.bearings.length; index++) { if (this.get_item(index) % this.n == this.get_item(index+1) % this.n) { if (index + 1 == this.bearings.length) { this.bearings.splice(this.bearings.length -1, 1); this.bearings.splice(0, 1); this.collapse_merged(); } else { this.bearings.splice(index, 2); this.collapse_merged(); } break; } } break; } } apply_placement(placement) { var index_1 = this.index_of(placement.bearing_1) var index_2 = this.index_of(placement.bearing_2) if (Math.abs(index_1 - index_2) != 1 && Math.abs(index_1 - index_2) != this.bearings.length - 1) { console.log('invalid tiling: ' + placement + 'cannot be placed'); throw EvalError } [this.bearings[index_1], this.bearings[index_2]] = [this.bearings[index_2], this.bearings[index_1]]; this.collapse_merged() // console.log(this.toString()) } get_valid_placement(already_placed) { while (this.bearings.length > 0) { var index = Math.floor(Math.random() * this.bearings.length); var bearing_1 = this.get_item(index); var bearing_2 = this.get_item(index + 1); var seen_before = false; already_placed.forEach(placement => { if (placement.bearing_1 % this.n == bearing_1 % this.n && placement.bearing_2 % this.n == bearing_2 % this.n) { seen_before = true } if (placement.bearing_1 % this.n == bearing_2 % this.n && placement.bearing_2 % this.n == bearing_1 % this.n) { seen_before = true } }); if (seen_before) { // console.log("seen before: " + new Placement(this.n, bearing_1, bearing_2).toString()) continue; } // console.log("adding: " + new Placement(this.n, bearing_1, bearing_2).toString()) return new Placement(this.n, bearing_1, bearing_2); } return null; } }3b:T463,function get_points_from_lines(line_1, line_2) { if (Math.abs(line_1.start.x - line_2.start.x) < 2 ** -32 && Math.abs(line_1.start.y - line_2.start.y) < 2 ** -32) { return [line_1.end, line_1.start, line_2.end, get_parallelogram_point(line_1.start, line_1.end, line_2.end)] } if (Math.abs(line_1.start.x - line_2.end.x) < 2 ** -32 && Math.abs(line_1.start.y - line_2.end.y) < 2 ** -32) { return [line_1.end, line_1.start, line_2.start, get_parallelogram_point(line_1.start, line_1.end, line_2.start)] } if (Math.abs(line_1.end.x - line_2.start.x) < 2 ** -32 && Math.abs(line_1.end.y - line_2.start.y) < 2 ** -32) { return [line_1.start, line_1.end, line_2.end, get_parallelogram_point(line_1.end, line_1.start, line_2.end)] } if (Math.abs(line_1.end.x - line_2.end.x) < 2 ** -32 && Math.abs(line_1.end.y - line_2.end.y) < 2 ** -32) { return [line_1.start, line_1.end, line_2.start, get_parallelogram_point(line_1.end, line_1.start, line_2.start)] } console.log('tiling broken: ' + line_1 + ' and ' + line_2 + 'do not share a point'); throw EvalError }3c:T48bf,class Tiling { constructor(n, face_placements) { this.n = n; this.placements_to_do = face_placements; this.tile_faces = []; this.points_array = [[]]; this.lines_array = [[]]; // dictionary of bearing to following vertex this.bearing_vertices = {}; for (let index = 0; index < 2 * this.n; index++) { this.vertices[index] = new Vertex(n, index); } // dictionary of bearing to it's edge this.bearing_edges = []; for (let index = 0; index < 2 * this.n; index++) { this.edges[index] = new Edge(n, index); } // set of tiles which haven't been placed yet this.unplaced_tiles = [] for (var i = 0; i < n; i++) { for (var j = i+1; j < n; j++) { this.unplaced_tiles.push(new Tile(this.n, i, j)); } } // dictionary from bearing to it's open line this.bearing_open_lines = [{}] for (var bearing in this.edges) { var edge = this.edges[bearing]; this.bearing_open_lines.slice(-1)[0][bearing] = new Line(this.n, edge.start, edge.end, bearing % this.n, bearing >= this.n ? this.n - 1 : 0, true); }; // which bearings are still available and adjacent this.bearing_cycle = [new BearingCycle(n)] // fill the placements_to_do into their correct places while (this.placements_to_do.length > 0) { var placement = this.placements_to_do.shift(); this.add_placement(placement); } } toString() { return "Tiling(" + this.n + ", " + this.bearing_cycle.slice(-1)[0].join(",") + ")"; } get blueprint() { return { n: this.n, placements: this.tile_faces.map(f => [f.placement.bearing_1, f.placement.bearing_2]) } } get vertices() { return this.bearing_vertices; } get points() { return this.points_array.slice(-1)[0]; } get edges() { return this.bearing_edges; } get lines() { return this.lines_array.slice(-1)[0]; } get faces() { return this.tile_faces; } get curves() { var curves = {} for (let index = 0; index < this.bearing_open_lines.length; index++) { const bearing_lines = this.bearing_open_lines[index]; for (var bearing in bearing_lines) { if (bearing_lines.hasOwnProperty(bearing)) { var line = bearing_lines[bearing] if (!curves.hasOwnProperty(bearing)) { curves[bearing] = [] } var centre_x = (line.start.x + line.end.x)/2 var centre_y = (line.start.y + line.end.y)/2 var previous_point = curves[bearing].slice(-1)[0] if (previous_point == null || centre_x != previous_point.x || centre_y != previous_point.y) { curves[bearing].push(new Point(centre_x, centre_y)) } } } } return curves; } bearing_shapes(x_scale, y_scale, edge_colour_type, edge_colour_base) { var bearing_shapes = []; for (var bearing in this.curves) { bearing = parseInt(bearing); if (this.curves.hasOwnProperty(bearing)) { var points = this.curves[bearing] if (points.length < 2) { continue; } var shape = "M " + [x_scale(points[0].x), y_scale(points[0].y)].join(",") for (let index = 1; index < points.length; index++) { const prev = points[index-1]; const next = points[index]; const centre_x = (prev.x + next.x) / 2 const centre_y = (prev.y + next.y) / 2 // shape += " T " + [x_scale(centre_x), y_scale(centre_y)].join(",") // shape += " T " + [x_scale(next.x), y_scale(next.y)].join(",") // shape += " C " + [x_scale(centre_x), y_scale(centre_y)].join(" ") + ", " + [x_scale(centre_x), y_scale(centre_y)].join(" ") + ", " + [x_scale(next.x), y_scale(next.y)].join(" ") // shape += " S " + [x_scale(centre_x), y_scale(centre_y)].join(" ") + ", " + [x_scale(next.x), y_scale(next.y)].join(" ") var prev_target = get_perpendicular(prev, next, bearing, this.n); var next_target = get_perpendicular(next, prev, (bearing + this.n) % (2 * this.n), this.n); prev_target = new Point(prev.x + prev_target.x/2, prev.y + prev_target.y/2) next_target = new Point(next.x + next_target.x/2, next.y + next_target.y/2) shape += " C " + [x_scale(prev_target.x), y_scale(prev_target.y)].join(" ") + ", " + [x_scale(next_target.x), y_scale(next_target.y)].join(" ") + ", " + [x_scale(next.x), y_scale(next.y)].join(" ") } var angle = Math.PI * (((bearing/this.n) + 1) % 2); var normal = new Point(Math.cos(angle), Math.sin(angle)); var prev_target = new Point(points[0].x + normal.x/100, points[0].y + normal.y/100) var collapsed_shape = "M " + [x_scale(points[0].x), y_scale(points[0].y)].join(",") + " L " + [x_scale(prev_target.x), y_scale(prev_target.y)].join(" ") bearing_shapes.push({ bearing: bearing, points: points, shape: shape, collapsed_shape: collapsed_shape, colour: orientation_colour(bearing % this.n, this.n, edge_colour_type, edge_colour_base), key: bearing }) } } return bearing_shapes; } get placement_hash() { return md5.hash(this.faces.map(d => d.placement).map(d => String(d.bearing_1) + "," + String(d.bearing_2)).join('|')) } get unplaced_table() { var face_table = {}; for (let index = 0; index < this.unplaced_tiles.length; index++) { const tile = this.unplaced_tiles[index]; var start_1 = new Vertex(this.n, tile.orientation_1 - 1); var end_1 = new Vertex(this.n, tile.orientation_1); var delta_1 = new Point(end_1.x - start_1.x, end_1.y - start_1.y); var start_2 = new Vertex(this.n, tile.orientation_2 - 1); var end_2 = new Vertex(this.n, tile.orientation_2); var delta_2 = new Point(end_2.x - start_2.x, end_2.y - start_2.y); var centre = new Point((delta_1.x + delta_2.x)/2, (delta_1.y + delta_2.y)/2) var points = [ new Point(0 - centre.x, 0 - centre.y), new Point(delta_1.x - centre.x, delta_1.y - centre.y), new Point(delta_1.x + delta_2.x - centre.x, delta_1.y + delta_2.y - centre.y), new Point(delta_2.x - centre.x, delta_2.y - centre.y) ] var face = new Face(this.n, new Placement(this.n, tile.orientation_1, tile.orientation_2), points, false) face_table[[tile.orientation_1, tile.orientation_2]] = face } return face_table } get unplaced_table_edges() { var face_edges = []; for (let index = 0; index < this.unplaced_tiles.length; index++) { const tile = this.unplaced_tiles[index]; var start_1 = new Vertex(this.n, tile.orientation_1 - 1); var end_1 = new Vertex(this.n, tile.orientation_1); var delta_1 = new Point(end_1.x - start_1.x, end_1.y - start_1.y); var start_2 = new Vertex(this.n, tile.orientation_2 - 1); var end_2 = new Vertex(this.n, tile.orientation_2); var delta_2 = new Point(end_2.x - start_2.x, end_2.y - start_2.y); var centre = new Point((delta_1.x + delta_2.x)/2, (delta_1.y + delta_2.y)/2) face_edges.push(new Line(this.n, new Point(delta_1.x + delta_2.x - centre.x, delta_1.y + delta_2.y - centre.y), new Point(delta_2.x - centre.x, delta_2.y - centre.y), tile.orientation_1, tile.orientation_2, false)) face_edges.push(new Line(this.n, new Point(0 - centre.x, 0 - centre.y), new Point(delta_2.x - centre.x, delta_2.y - centre.y), tile.orientation_2, tile.orientation_1, false)) } return face_edges } add_placement(placement) { // console.log(placement) var already_placed = true; for (let index = 0; index < this.unplaced_tiles.length; index++) { const tile = this.unplaced_tiles[index]; if ((tile.orientation_1 == placement.tile.orientation_1 && tile.orientation_2 == placement.tile.orientation_2) || (tile.orientation_1 == placement.tile.orientation_2 && tile.orientation_2 == placement.tile.orientation_1)) { already_placed = false; } } if (already_placed) { // console.log('invalid tiling: ' + placement + 'already used'); // console.log(this.unplaced_tiles) // throw EvalError return null } // append new data structures this.bearing_open_lines.push(clone(this.bearing_open_lines.slice(-1)[0])); this.points_array.push(clone(this.points_array.slice(-1)[0])); this.lines_array.push(clone(this.lines_array.slice(-1)[0])); this.bearing_cycle.push(clone(this.bearing_cycle.slice(-1)[0])); // create face and apply data changes try { this.bearing_cycle.slice(-1)[0].apply_placement(placement) } catch (e) { this.bearing_open_lines = this.bearing_open_lines.slice(0, -1); this.points_array = this.points_array.slice(0, -1); this.lines_array = this.lines_array.slice(0, -1); this.bearing_cycle = this.bearing_cycle.slice(0, -1); return null } var line_1 = this.bearing_open_lines.slice(-1)[0][placement.bearing_1] var line_2 = this.bearing_open_lines.slice(-1)[0][placement.bearing_2] var points = get_points_from_lines(line_1, line_2) var face = new Face(this.n, placement, points) this.tile_faces.push(face); points[3].key = this.placement_hash; this.points_array.slice(-1)[0].push(points[3]); var bearing_1_offset_x = points[2].x - points[1].x var bearing_1_offset_y = points[2].y - points[1].y var bearing_2_offset_x = points[0].x - points[1].x var bearing_2_offset_y = points[0].y - points[1].y var start_1 = new Point(this.bearing_open_lines.slice(-1)[0][placement.bearing_1].start.x + bearing_1_offset_x, this.bearing_open_lines.slice(-1)[0][placement.bearing_1].start.y + bearing_1_offset_y) var end_1 = new Point(this.bearing_open_lines.slice(-1)[0][placement.bearing_1].end.x + bearing_1_offset_x, this.bearing_open_lines.slice(-1)[0][placement.bearing_1].end.y + bearing_1_offset_y) var line_1 = new Line(this.n, start_1, end_1, placement.bearing_1 % this.n, this.bearing_open_lines.slice(-1)[0][placement.bearing_1].step + (placement.bearing_1 >= this.n ? -1 : 1), true) this.bearing_open_lines.slice(-1)[0][placement.bearing_1] = line_1 var opposing_line = this.bearing_open_lines.slice(-1)[0][(placement.bearing_1 + this.n) % (2*this.n)] if ((Math.abs(opposing_line.start.x - line_1.start.x) < 2 ** -32 && Math.abs(opposing_line.start.y - line_1.start.y) < 2 ** -32 && Math.abs(opposing_line.end.x - line_1.end.x) < 2 ** -32 && Math.abs(opposing_line.end.y - line_1.end.y) < 2 ** -32) || (Math.abs(opposing_line.start.x - line_1.end.x) < 2 ** -32 && Math.abs(opposing_line.start.y - line_1.end.y) < 2 ** -32 && Math.abs(opposing_line.end.x - line_1.start.x) < 2 ** -32 && Math.abs(opposing_line.end.y - line_1.start.y) < 2 ** -32)) { } else { this.lines_array.slice(-1)[0].push(line_1) } var start_2 = new Point(this.bearing_open_lines.slice(-1)[0][placement.bearing_2].start.x + bearing_2_offset_x, this.bearing_open_lines.slice(-1)[0][placement.bearing_2].start.y + bearing_2_offset_y) var end_2 = new Point(this.bearing_open_lines.slice(-1)[0][placement.bearing_2].end.x + bearing_2_offset_x, this.bearing_open_lines.slice(-1)[0][placement.bearing_2].end.y + bearing_2_offset_y) var line_2 = new Line(this.n, start_2, end_2, placement.bearing_2 % this.n, this.bearing_open_lines.slice(-1)[0][placement.bearing_2].step + (placement.bearing_2 >= this.n ? -1 : 1), true) this.bearing_open_lines.slice(-1)[0][placement.bearing_2] = line_2 var opposing_line = this.bearing_open_lines.slice(-1)[0][(placement.bearing_2 + this.n) % (2*this.n)] if ((Math.abs(opposing_line.start.x - line_2.start.x) < 2 ** -32 && Math.abs(opposing_line.start.y - line_2.start.y) < 2 ** -32 && Math.abs(opposing_line.end.x - line_2.end.x) < 2 ** -32 && Math.abs(opposing_line.end.y - line_2.end.y) < 2 ** -32) || (Math.abs(opposing_line.start.x - line_2.end.x) < 2 ** -32 && Math.abs(opposing_line.start.y - line_2.end.y) < 2 ** -32 && Math.abs(opposing_line.end.x - line_2.start.x) < 2 ** -32 && Math.abs(opposing_line.end.y - line_2.start.y) < 2 ** -32)) { } else { this.lines_array.slice(-1)[0].push(line_2) } for (let index = 0; index < this.unplaced_tiles.length; index++) { const tile = this.unplaced_tiles[index]; if (tile.orientation_1 == placement.tile.orientation_1 && tile.orientation_2 == placement.tile.orientation_2) { var found_index = index } } this.unplaced_tiles.splice(found_index, 1) return face } add_random_placement() { var already_placed = []; this.tile_faces.forEach(face => { already_placed.push(face.placement) }); var placement = this.bearing_cycle.slice(-1)[0].get_valid_placement(already_placed) if (placement == null) { return null } this.add_placement(placement) return this } remove_last_placement() { var lost_face = this.tile_faces.splice(this.tile_faces.length - 1)[0]; this.unplaced_tiles.push(lost_face.placement.tile) this.bearing_open_lines = this.bearing_open_lines.slice(0, -1); this.points_array = this.points_array.slice(0, -1); this.lines_array = this.lines_array.slice(0, -1); this.bearing_cycle = this.bearing_cycle.slice(0, -1); return this // // fill the placements_to_do into their correct places // while (this.placements_to_do.length > 0) { // var placement = this.placements_to_do.shift(); // this.add_placement(placement); // } // var new_placements = [] // for (let index = 0; index < this.faces.length - 1; index++) { // const face = this.faces[index]; // new_placements.push(face.placement) // } // return new Tiling(this.n, new_placements); } remove_tile(tile) { var new_placements = []; var bearings_found = new Set(); for (let index = 0; index < this.faces.length; index++) { const face = this.faces[index]; var face_tile = face.placement.tile; if ((face_tile.orientation_1 == tile.orientation_1 && face_tile.orientation_2 == tile.orientation_2) || (face_tile.orientation_1 == tile.orientation_2 && face_tile.orientation_2 == tile.orientation_1)) { bearings_found.add(face.placement.bearing_1); bearings_found.add(face.placement.bearing_2); } else { if (bearings_found.has(face.placement.bearing_1) || bearings_found.has(face.placement.bearing_2)) { console.log("skipping placement") console.log(face.placement) bearings_found.add(face.placement.bearing_1); bearings_found.add(face.placement.bearing_2); } else { new_placements.push(face.placement); } } } console.log("removed single tile") console.log(new_placements.map(p => "[" + p.bearing_1 + ',' + p.bearing_2 + "]").join(", ")) return new Tiling(this.n, new_placements); } decrease_n(new_n) { var difference = this.n - new_n; var remove_orientations = new Set() for (let remove_n = this.n - 1; remove_n > this.n - 1 - difference; remove_n--) { remove_orientations.add(remove_n); } var new_placements = [] this.tile_faces.forEach(face => { var placement = face.placement; if (remove_orientations.has(placement.bearing_1 % this.n) || remove_orientations.has(placement.bearing_2 % this.n)) { } else { var bearing_1 = placement.bearing_1 >= this.n ? placement.bearing_1 - difference : placement.bearing_1; var bearing_2 = placement.bearing_2 >= this.n ? placement.bearing_2 - difference : placement.bearing_2; var new_placement = new Placement(new_n, bearing_1, bearing_2); new_placements.push(new_placement) } }); return new Tiling(new_n, new_placements); } increase_n(new_n) { var difference = new_n - this.n; var new_placements = [] for (let step_n = new_n; step_n >= this.n + 1; step_n--) { for (let index = step_n; index < (2*step_n) - 1; index++) { var new_placement = new Placement(new_n, step_n-1, index % (2*step_n) + new_n - step_n) new_placements.push(new_placement); } } this.tile_faces.forEach(face => { var placement = face.placement; var bearing_1 = placement.bearing_1 >= this.n ? placement.bearing_1 + difference : placement.bearing_1; var bearing_2 = placement.bearing_2 >= this.n ? placement.bearing_2 + difference : placement.bearing_2; var new_placement = new Placement(new_n, bearing_1, bearing_2); new_placements.push(new_placement) }); return new Tiling(new_n, new_placements); } update_n(n) { n = parseInt(n); if (this.n < n) { return this.increase_n(n); } else { return this.decrease_n(n); } } }3d:[{"id":"3ffcd7f2dc0adfdef951fa01583585a4e7dd21cfdbe67ac2da504ebcd764abc2c3a3e7d3ea1789cf74ccb95ba8ac0032fff880dede7f96057592911cf346335c","href":"https://static.observableusercontent.com/files/3ffcd7f2dc0adfdef951fa01583585a4e7dd21cfdbe67ac2da504ebcd764abc2c3a3e7d3ea1789cf74ccb95ba8ac0032fff880dede7f96057592911cf346335c","name":"untitled (6).svg","type":"image/svg+xml","lastModified":1629591442587.331,"size":2326},{"id":"42e45dbebe21aefdad6cc35162b9799a5546a72053a8090cba792c630b0fdf42e6676860ad9ca7fe280dfd57a8ba67d1a13295fe85ac89c4ee460c4e0c1b3dcf","href":"https://static.observableusercontent.com/files/42e45dbebe21aefdad6cc35162b9799a5546a72053a8090cba792c630b0fdf42e6676860ad9ca7fe280dfd57a8ba67d1a13295fe85ac89c4ee460c4e0c1b3dcf","name":"Screenshot 2021-08-22 at 02.25.58.png","type":"image/png","lastModified":1629595590888.078,"size":1068503},{"id":"58fa0ce2b444335761d9440dd7c8334c9a0edf40b8d468b00abd024402e2b26f6be4606300d2f56515a47bac0cbaa524ab21f8b8a6c7f53a41cd87e4d2f3c716","href":"https://static.observableusercontent.com/files/58fa0ce2b444335761d9440dd7c8334c9a0edf40b8d468b00abd024402e2b26f6be4606300d2f56515a47bac0cbaa524ab21f8b8a6c7f53a41cd87e4d2f3c716","name":"Screenshot 2021-08-22 at 02.08.30.png","type":"image/png","lastModified":1629595015840.436,"size":500648},{"id":"c11f4cbcc49b104d77c7b0bdbe7ce124f9c28cc7e93f53a7477b3c578540a9649789623713e1cbc56d5abd4af06771c178bfbd391bdc4b68cbae6d5629c051d5","href":"https://static.observableusercontent.com/files/c11f4cbcc49b104d77c7b0bdbe7ce124f9c28cc7e93f53a7477b3c578540a9649789623713e1cbc56d5abd4af06771c178bfbd391bdc4b68cbae6d5629c051d5","name":"untitled (13).svg","type":"image/svg+xml","lastModified":1629593626933.272,"size":1338812},{"id":"8be8085d0b3b26d36bdf418419e0ae38904178393ef045d02167b3924a106228575c921787ee0903aed3c8bef467c89a9412e9eca175da54768ca0b8ea3ac80d","href":"https://static.observableusercontent.com/files/8be8085d0b3b26d36bdf418419e0ae38904178393ef045d02167b3924a106228575c921787ee0903aed3c8bef467c89a9412e9eca175da54768ca0b8ea3ac80d","name":"untitled (14).svg","type":"image/svg+xml","lastModified":1629593626368.806,"size":389343},{"id":"0d8b862633ba358fe28c9297c57767f08c3dcc6b47e0cfc43d33008f6450e80212eec679d5494d98a7bbff1fc4cd79dd515777c63581fb663e7f474234b8b96f","href":"https://static.observableusercontent.com/files/0d8b862633ba358fe28c9297c57767f08c3dcc6b47e0cfc43d33008f6450e80212eec679d5494d98a7bbff1fc4cd79dd515777c63581fb663e7f474234b8b96f","name":"untitled (15).svg","type":"image/svg+xml","lastModified":1629593626233.812,"size":396354},{"id":"e7a0480adf5526231fca0ab4db1ed51b529274c9c1c06b6c9e2ab4b4a81bc910947a586977acae51300bd2c229ce88589512ee3b2e5ea711a895fc4b9258c36f","href":"https://static.observableusercontent.com/files/e7a0480adf5526231fca0ab4db1ed51b529274c9c1c06b6c9e2ab4b4a81bc910947a586977acae51300bd2c229ce88589512ee3b2e5ea711a895fc4b9258c36f","name":"untitled (18).svg","type":"image/svg+xml","lastModified":1629593625711.452,"size":10792},{"id":"4df671bf8c339618b1b55f27cb02d459bbe23220be5d9d49e9f4d9ad7abbcc8bd0de63c406e778cc838a2f9a78a0205b51a8cd42ec6a2e7c2e5dee8d83120438","href":"https://static.observableusercontent.com/files/4df671bf8c339618b1b55f27cb02d459bbe23220be5d9d49e9f4d9ad7abbcc8bd0de63c406e778cc838a2f9a78a0205b51a8cd42ec6a2e7c2e5dee8d83120438","name":"untitled (17).svg","type":"image/svg+xml","lastModified":1629593625634.097,"size":19497},{"id":"361dae5772c28dd4da00172cb6a84088a2df033c4702edc850c491382f175bf2bac2a9f633b15158b4f8ee28788039cce765b733dcd31722c6fe8a551d0f9446","href":"https://static.observableusercontent.com/files/361dae5772c28dd4da00172cb6a84088a2df033c4702edc850c491382f175bf2bac2a9f633b15158b4f8ee28788039cce765b733dcd31722c6fe8a551d0f9446","name":"untitled (12).svg","type":"image/svg+xml","lastModified":1629591845386.733,"size":249103},{"id":"34e39a01b1f197cabc35de4085e80ca581ebcd9cbd7d55e8e54b82961993dadb8a29783adfb0e848db6053f6966392acb688a06f2ebc95ab0057dc51ad2896ec","href":"https://static.observableusercontent.com/files/34e39a01b1f197cabc35de4085e80ca581ebcd9cbd7d55e8e54b82961993dadb8a29783adfb0e848db6053f6966392acb688a06f2ebc95ab0057dc51ad2896ec","name":"untitled (11).svg","type":"image/svg+xml","lastModified":1629591837444.656,"size":16984},{"id":"b1079d878b0d77956cc4059da54183323551c9aa2a008c3d8bb175c3dcaa45500d9d0bf9c0ba0f98440e767619e8f7e96aab32d576914a12ad14ec6481e81e4d","href":"https://static.observableusercontent.com/files/b1079d878b0d77956cc4059da54183323551c9aa2a008c3d8bb175c3dcaa45500d9d0bf9c0ba0f98440e767619e8f7e96aab32d576914a12ad14ec6481e81e4d","name":"untitled (10).svg","type":"image/svg+xml","lastModified":1629591718481.382,"size":49836},{"id":"8cd836fc94ce0d917656427515d6b21c4663039f87a1bf06b2b3604d885bef5dee1f647826a6244c8770aa4dbd36fe74abd7df00995bf213a52056d2533e13af","href":"https://static.observableusercontent.com/files/8cd836fc94ce0d917656427515d6b21c4663039f87a1bf06b2b3604d885bef5dee1f647826a6244c8770aa4dbd36fe74abd7df00995bf213a52056d2533e13af","name":"untitled (7).svg","type":"image/svg+xml","lastModified":1629591486629.589,"size":5604},{"id":"3b65d9be1e8a6706a108e2e2119518aff5bfcc343179fb6178a4a1913855e861bde9b388395cf947693da8f64c31b2c7e625dfd213dc4ed3dc33e77bb4177a22","href":"https://static.observableusercontent.com/files/3b65d9be1e8a6706a108e2e2119518aff5bfcc343179fb6178a4a1913855e861bde9b388395cf947693da8f64c31b2c7e625dfd213dc4ed3dc33e77bb4177a22","name":"untitled (8).svg","type":"image/svg+xml","lastModified":1629591473472.071,"size":5568},{"id":"828cd05edb57d251550ad3ee4281c1e0eea7ef020b85efa884727c0fe67b71f74c8f2c6355aa105c1ed79749b1894f332cb45358991cb8794e8b6f932279c785","href":"https://static.observableusercontent.com/files/828cd05edb57d251550ad3ee4281c1e0eea7ef020b85efa884727c0fe67b71f74c8f2c6355aa105c1ed79749b1894f332cb45358991cb8794e8b6f932279c785","name":"untitled (4).svg","type":"image/svg+xml","lastModified":1629591416010.322,"size":2320}] 32:{"id":"7915962f97f730bf","slug":"rhombus-tiling-visualiser","title":"Rhombus Tiling Visualiser","thumbnail":"1b6d53b4cb33404b8915ef78ec84e982017b56227d0ac567b1bb0c3a4562218b","access_level":"public","create_time":"$D2021-08-21T15:01:55.565Z","update_time":"$D2021-08-22T01:26:32.311Z","view_time":null,"first_public_time":"$D2021-08-22T01:33:49.412Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":3,"starred":false,"owner":{"type":"team","id":"dace6c6f92106d54","login":"davidquick","name":"David Quick","avatar_url":"https://avatars-next.observableusercontent.com/c39052667de11dcc4236540d620d284b835e8673e3ca175951c11d30d985a6f1","tier":"starter_2024"},"version":507,"publish_version":507,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd2c384f6158f33f","login":"davidquick","name":"David Quick","avatar_url":"https://avatars-next.observableusercontent.com/c39052667de11dcc4236540d620d284b835e8673e3ca175951c11d30d985a6f1","tier":null}],"members":[{"type":"individual","id":"cd2c384f6158f33f","login":"davidquick","name":"David Quick","avatar_url":"https://avatars-next.observableusercontent.com/c39052667de11dcc4236540d620d284b835e8673e3ca175951c11d30d985a6f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Rhombus Tiling Visualiser","cells":[{"id":0,"value":"# Rhombus Tiling Visualiser\n\nVisualise the many different tilings of a regular polygon with rhombi created from pairs of edges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"### Interactive Tool\n\nIn this tool you can:\n- increase number of sides (number n gives a 2n-gon)\n- randomise tiling\n- add/remove tiles one at a time\n- switch to a regular star shaped tiling (only for odd n)\n- click tiles to move them in/out of the grid\n- enable/disable and colour faces, lines, points, and curves\n\nThe GitHub version of this code also allows:\n- keyboard shortcuts\n- entering a list of tile placements explicitly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"### Examples\n\nHere are some examples of (partially) tiled polygons created using the tool above.\n\n![untitled (13).svg](${await FileAttachment(\"untitled (13).svg\").url()}), ![untitled (14).svg](${await FileAttachment(\"untitled (14).svg\").url()}), ![untitled (15).svg](${await FileAttachment(\"untitled (15).svg\").url()}), ![untitled (17).svg](${await FileAttachment(\"untitled (17).svg\").url()}), ![untitled (18).svg](${await FileAttachment(\"untitled (18).svg\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"### Spoilers\n\nScroll down to see a couple of hints towards my solution to the original puzzle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"\"hint 1\"\n// 1. turn on the 'curves' visualisation in the interactive viewer, what do you notice about these curves?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"\"hint 2\"\n// 2. there is one curve per edge colour, what do you notice about where curves cross over eachother?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"\"hint 3\"\n// 3. how many times do any two colours cross over each other?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"### Code\n\nI generally code in python and have never worked with javascript like this before, so I apologise for the state of this code. I was a bit rushed to get this working, so didn't have time to learn javascript/html best practices or properly document the code.\n\nThe original code is available on GitHub [rhombus-tiling-visualiser](https://github.com/davidquick/rhombus-tiling-visualiser) so you can load it full screen in a browser and really up the edge count:\n\n![Screenshot 2021-08-22 at 02.08.30.png](${await FileAttachment(\"Screenshot 2021-08-22 at 02.08.30.png\").url()})\n![Screenshot 2021-08-22 at 02.25.58.png](${await FileAttachment(\"Screenshot 2021-08-22 at 02.25.58.png\").url()})\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"d3 = require(\"d3@6.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"clone = require('https://bundle.run/clone@2.1.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md5 = require('spark-md5')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"class Point {\n constructor (x, y) {\n this.x = x;\n this.y = y;\n }\n\n toString() {\n return `Point(${this.x}, ${this.y})`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"class Vertex {\n constructor(n, previous_bearing) {\n this.n = n;\n this.previous_bearing = previous_bearing;\n }\n\n get next_bearing() {\n return this.previous_bearing + 1\n }\n\n get neighbouring_bearings() {\n return [this.previous_bearing, this.next_bearing]\n }\n\n get x() {\n return Math.cos(Math.PI * (this.previous_bearing+0.5)/this.n)\n }\n\n get y() {\n return Math.sin(Math.PI * (this.previous_bearing+0.5)/this.n)\n }\n\n get point() {\n return new Point(this.x, this.y)\n }\n\n get key() {\n return [this.previous_bearing % this.n, this.previous_bearing < this.n]\n }\n\n toString() {\n return `Vertex(${this.previous_bearing}.5/${this.n}, ${this.x}, ${this.y})`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"function orientation_colour(orientation, n, colouring_type, colour_base) {\n var base_hsl = d3.hsl(colour_base);\n var value = orientation/n\n switch (colouring_type) {\n case \"hue 360\":\n return d3.rgb(d3.hsl(base_hsl.h + (360*value), base_hsl.s, base_hsl.l));\n case \"hue 360 symmetric\":\n return d3.rgb(d3.hsl(base_hsl.h + (720*(value < 0.5 ? value : 1 - value)), base_hsl.s, base_hsl.l));\n case \"hue 90\":\n return d3.rgb(d3.hsl(base_hsl.h + (90*value), base_hsl.s, base_hsl.l));\n case \"hue 90 symmetric\":\n return d3.rgb(d3.hsl(base_hsl.h + (180*(value < 0.5 ? value : 1 - value)), base_hsl.s, base_hsl.l));\n case \"saturation\":\n return d3.rgb(d3.hsl(base_hsl.h, value, base_hsl.l));\n case \"luminance\":\n return d3.rgb(d3.hsl(base_hsl.h, base_hsl.s, value));\n case \"constant\":\n default:\n return base_hsl;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"class Edge {\n constructor (n, bearing) {\n this.n = n;\n this.bearing = bearing;\n }\n\n get orientation() {\n return this.bearing % this.n;\n }\n\n get start() {\n return new Vertex(this.n, this.bearing - 1);\n }\n\n get end() {\n return new Vertex(this.n, this.bearing);\n }\n\n get line() {\n return new Line(this.n, this.start, this.end, this.bearing % this.n, 0, true)\n }\n\n colour(edge_colouring, edge_colour_base) {\n return orientation_colour(this.orientation, this.n, edge_colouring, edge_colour_base)\n }\n\n get key() {\n return [this.bearing % this.n, this.bearing < this.n]\n }\n\n get placed() {\n return true;\n }\n\n toString() {\n return `Edge(${this.bearing}/${this.n}, ${this.start.toString()}, ${this.end.toString()})`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"class Tile {\nconstructor(n, orientation_1, orientation_2) {\n this.n = n;\n this.orientation_1 = Math.min(orientation_1, orientation_2);\n this.orientation_2 = Math.max(orientation_1, orientation_2);\n }\n\n toString() {\n return `Tile(${this.n}, ${this.orientation_1}x${this.orientation_2})`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"class Placement {\n constructor(n, bearing_1, bearing_2) {\n this.n = n;\n this.bearing_1 = bearing_1;\n this.bearing_2 = bearing_2;\n }\n\n get tile() {\n return new Tile(this.n, this.bearing_1 % this.n, this.bearing_2 % this.n)\n }\n\n toString() {\n return `Placement(${this.n}, ${this.bearing_1}x${this.bearing_2})`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"function get_parallelogram_point(shared_point, other_point_a, other_point_b) {\n var x = other_point_a.x + other_point_b.x - shared_point.x;\n var y = other_point_a.y + other_point_b.y - shared_point.y;\n \n return new Point(x, y)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"function get_perpendicular(point_1, point_2, bearing, n) {\n var difference = new Point(point_2.x - point_1.x, point_2.y - point_1.y);\n var angle = Math.PI * (((bearing/n) + 1) % 2);\n var normal = new Point(Math.cos(angle), Math.sin(angle));\n var dot = difference.x * normal.x + difference.y * normal.y;\n return new Point(dot * normal.x, dot * normal.y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function star_tiling(n) {\n var placements = [];\n for (let ring = 0; ring < Math.floor(n/2); ring++) {\n for (let i = 0; i < n; i++) {\n placements.push(new Placement(n, 2*i, (1+2*i+2*ring)%(2*n)));\n }\n }\n\n return placements;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 33:"$32:body"