31:T2683,viewof hexGrid = { let width = 500; // Canvas width let height = 500; // Canvas height let baseScale = 40; // Initial base scale of the hex grid let zoomScale = 1; // Zoom scale factor (adjusts with zooming) let translation = { x: 0, y: 0 }; // Initial translation (for panning) const sqrt3 = Math.sqrt(3); let isPolygonClosed = false; // Tracks if a polygon is closed let isCustomPolygon = false; // Indicates if custom polygon mode is active let customPolygonDrawn = false; // Indicates if the custom polygon is completed let selectedPoints = []; // Store selected vertices const container = html`

`; // Create SVG container for the grid const svgContainer = html`

`; container.appendChild(svgContainer); const svg = d3.create("svg").attr("width", width).attr("height", height).style("background", "#f0f0f0"); const mainGroup = svg.append("g"); // Main group that will be zoomed and translated svgContainer.appendChild(svg.node()); const gridGroup = mainGroup.append("g"); // Grid group for hex grid points const polygonGroup = mainGroup.append("g"); // Group for drawing polygons const selectedGroup = mainGroup.append("g"); // Group for selected points // Text and input container with vertical alignment const textContainer = html`

`; container.appendChild(textContainer); // Dropdown menu for selecting polygons const predefinedPolygonNames = Object.keys(polygonTemplates); const dropdown = html``; textContainer.appendChild(dropdown); // Textarea to display vertex coordinates (same width as dropdown) const textarea = html``; textContainer.appendChild(textarea); // Load the default polygon (first example) loadPredefinedPolygon(predefinedPolygonNames[0]); // Zoom and Pan setup const zoom = d3.zoom() .scaleExtent([0.1, 10]) // Set the zoom limits .on("zoom", (event) => { const transform = event.transform; mainGroup.attr("transform", transform); // Apply zoom and pan transformation zoomScale = transform.k; // Update the zoom scale translation = { x: transform.x, y: transform.y }; // Update translation drawGrid(); // Redraw the grid with updated zoom scale drawPolygon(); // Redraw the polygon to snap to grid points }); svg.call(zoom); // Apply zoom behavior to the SVG // Function to dynamically draw the grid based on the zoom scale function drawGrid() { gridGroup.selectAll("*").remove(); // Clear previous grid points const centerX = width / 2 + translation.x / zoomScale; // Adjust center based on translation and zoom const centerY = height / 2 + translation.y / zoomScale; const currentScale = baseScale * zoomScale; // Adjust grid scale based on zoom level const gridRange = Math.floor((width / currentScale) * 1.5); // Determine the number of grid points based on zoom level for (let i = -gridRange; i <= gridRange; i++) { for (let j = -gridRange; j <= gridRange; j++) { const [x, y] = hexToCartesian(i, j, currentScale, centerX, centerY); // Convert hex to cartesian coordinates if (x >= 0 && x <= width && y >= 0 && y <= height) { gridGroup.append("circle") .attr("cx", x) .attr("cy", y) .attr("i", i) .attr("j", j) .attr("r", Math.max(3 * (currentScale / baseScale), 1)) // Scale the grid points dynamically .attr("fill", "lightgray"); } } } } // Function to draw a polygon function drawPolygon() { polygonGroup.selectAll("*").remove(); // Clear previous polygons selectedGroup.selectAll("*").remove(); // Clear previous points const currentScale = baseScale * zoomScale; if (selectedPoints.length > 1) { polygonGroup.append("polygon") .attr("points", selectedPoints.map(p => { const [x, y] = hexToCartesian(p.i, p.j, currentScale, width / 2 + translation.x / zoomScale, height / 2 + translation.y / zoomScale); // Convert grid coords to Cartesian with current scale p.x = x; // Update Cartesian coordinates p.y = y; return `${x},${y}`; }).join(" ")) .attr("fill", "rgba(0, 0, 255, 0.3)") .attr("stroke", "blue") .attr("stroke-width", 2); } selectedPoints.forEach(p => { const [x, y] = hexToCartesian(p.i, p.j, currentScale, width / 2 + translation.x / zoomScale, height / 2 + translation.y / zoomScale); // Convert grid coords to Cartesian p.x = x; p.y = y; selectedGroup.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", Math.max(5 * (zoomScale), 2)) // Adjust the size of vertices when zooming .attr("fill", "blue") .datum(p); // Attach data for dragging }); enableVertexDragging(); updateTextarea(); // Update the textarea with coordinates } // Function to handle predefined polygons function loadPredefinedPolygon(polygonName) { clearPolygon(); const vertices = polygonTemplates[polygonName]; selectedPoints = vertices.map(([i, j]) => { const [x, y] = hexToCartesian(i, j, baseScale * zoomScale, width / 2, height / 2); return { i, j, x, y }; }); drawPolygon(); // Draw the predefined polygon isPolygonClosed = true; } // Function to clear the current polygon function clearPolygon() { selectedPoints = []; polygonGroup.selectAll("*").remove(); selectedGroup.selectAll("*").remove(); updateTextarea(); } // Function to enable dragging of vertices to the nearest lattice point function enableVertexDragging() { if (!isPolygonClosed) return; // Only enable dragging if polygon is closed selectedGroup.selectAll("circle") .call(d3.drag() .on("drag", function(event, d) { const [mouseX, mouseY] = d3.pointer(event); // Find the nearest lattice point during dragging const snappedPoint = findNearestPoint(mouseX, mouseY, baseScale * zoomScale, width / 2, height / 2); if (snappedPoint) { const { x, y, i, j } = snappedPoint; // Update the dragged vertex to snap to the nearest lattice point const point = selectedPoints.find(p => p.i === d.i && p.j === d.j); if (point) { point.x = x; point.y = y; point.i = i; point.j = j; } // Move the circle (vertex) to the snapped point d3.select(this).attr("cx", x).attr("cy", y); // Redraw the polygon with the snapped vertex position drawPolygon(); } }) .on("end", function(event, d) { const [mouseX, mouseY] = d3.pointer(event); // Finalize the position by snapping to the nearest lattice point on mouse release const snappedPoint = findNearestPoint(mouseX, mouseY, baseScale * zoomScale, width / 2, height / 2); if (snappedPoint) { const { x, y, i, j } = snappedPoint; // Update the vertex's final position to the nearest lattice point const point = selectedPoints.find(p => p.i === d.i && p.j === d.j); if (point) { point.x = x; point.y = y; point.i = i; point.j = j; } // Move the circle (vertex) to the snapped point d3.select(this).attr("cx", x).attr("cy", y); // Redraw the polygon with the final snapped position drawPolygon(); } }) ); } // Function to update the textarea with the polygon's vertex coordinates function updateTextarea() { const vertexList = selectedPoints.map(p => ` [${p.i}, ${p.j}]`).join(",\n"); textarea.value = `[\n${vertexList}\n]`; } // Handle polygon selection from dropdown dropdown.addEventListener('change', function() { const polygonName = dropdown.value; if (polygonName === "custom") { clearPolygon(); // Allow custom polygon creation isCustomPolygon = true; isPolygonClosed = false; } else { loadPredefinedPolygon(polygonName); // Load predefined polygon } }); // Handle mouse click to add vertices for custom polygon creation svg.on("click", (event) => { if (!isCustomPolygon || customPolygonDrawn) return; const [mouseX, mouseY] = d3.pointer(event); const snappedPoint = findNearestPoint(mouseX, mouseY, baseScale * zoomScale, width / 2, height / 2); if (snappedPoint) { const { i, j, x, y } = snappedPoint; // If the first point is clicked again, close the polygon if (selectedPoints.length > 0 && selectedPoints[0].i === i && selectedPoints[0].j === j) { selectedPoints.push(selectedPoints[0]); // Close the polygon by connecting to the first point isPolygonClosed = true; customPolygonDrawn = true; drawPolygon(); // Draw the final polygon } else { // Add the clicked point to the polygon if it's not a duplicate if (!selectedPoints.some(p => p.i === i && p.j === j)) { selectedPoints.push({ i, j, x, y }); drawPolygon(); // Redraw the polygon } } } }); // Initial draw of the grid and any polygons drawGrid(); return container; // Return the container holding everything }32:[] 2f:{"title":"Tiling with lattice polygons","cells":[{"id":0,"value":"# Tiling with lattice polygons\n\n- tool for making polygons on the ${tex`A_2`} lattice\n- tiling algorithm...","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"// Convert hex grid coordinates (i, j) to Cartesian coordinates (x, y)\nfunction hexToCartesian(i, j, scale, centerX, centerY, sqrt3 = Math.sqrt(3)) {\n const x = centerX + scale * (i + j * -0.5); // i determines x + offset by j\n const y = centerY - scale * (j * sqrt3 / 2); // j determines y\n return [x, y];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"// Convert Cartesian coordinates (mouseX, mouseY) to approximate hex grid coordinates (i, j)\nfunction cartesianToHex(mouseX, mouseY, scale, centerX, centerY, sqrt3 = Math.sqrt(3)) {\n const j = Math.round((centerY - mouseY) / (scale * sqrt3 / 2)); // Calculate j from y-axis\n const i = Math.round((mouseX - centerX - j * scale * -0.5) / scale); // Calculate i from x-axis\n return { i, j }; // Return the nearest hex grid coordinates\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"// Function to find the nearest hex grid point to a given mouse position\nfunction findNearestPoint(mouseX, mouseY, scale, centerX, centerY) {\n const { i, j } = cartesianToHex(mouseX, mouseY, scale, centerX, centerY); // Get nearest hex grid coordinates\n const [x, y] = hexToCartesian(i, j, scale, centerX, centerY); // Convert back to Cartesian for actual point position\n\n return { x, y, i, j }; // Return both Cartesian and grid coordinates\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"polygonTemplates = ({\n \"turtle\": [\n [3, 0],\n [2, 1],\n [1, 2],\n [-1, 1],\n [-1, 2],\n [-2, 2],\n [-3, 0],\n [-2, -1],\n [-3, -2],\n [-3, -3],\n [-1, -2],\n [0, -3],\n [1, -2],\n [2, -2]\n ],\n \"hat\": [\n [1, 0],\n [2, 0],\n [3, 1],\n [2, 2],\n [0, 1],\n [0, 2],\n [-1, 2],\n [-2, 2],\n [-3, 1],\n [-2, 0],\n [-3, -2],\n [-2, -2],\n [-2, -3],\n [0, -2]\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}