29:null 2a:["$","title",null,{"children":"Mutant football generator | Lao | Observable"}] 2f:T2169,chart = { let n = 72; let force; let steps = Math.ceil(10000 / n ** 2); let width = 600; let height = 600; let colorScale = d3.scaleSequential(d3.interpolateViridis).domain([4.5, 7]); let delaunayColor = colorScale(5.5); //"rgba(140,198,63,.8)"; let sphere = { type: "Sphere" }; let graticule = d3.geoGraticule10(); // Variables for right-click drag let draggedPointIndex = null; let isDragging = false; function gaussianRandom(mean = 0, stdev = 1) { const u = 1 - Math.random(); // Converting [0,1) to (0,1] const v = Math.random(); const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v); return z * stdev + mean; } let points, dPoints; let randomPoints = () => { points = Array.from({ length: n }, (_, i) => { let x = gaussianRandom(); let y = gaussianRandom(); let z = gaussianRandom(); let h = Math.sqrt(x ** 2 + y ** 2 + z ** 2); return [x / h, y / h, z / h]; }); }; randomPoints(); let spacePoints = () => { if (n != mutable faces.value) { n = mutable faces.value; randomPoints(); } force = 6 / n ** 2; steps = Math.min(500, Math.ceil(10000 / n ** 2)); dPoints = Array.from({ length: n }, (_, i) => [0, 0, 0]); // Iterate over all pairs of points for (let i = 0; i < points.length; i++) { for (let j = i + 1; j < points.length; j++) { let [x1, y1, z1] = points[i]; let [x2, y2, z2] = points[j]; // Compute the difference vector between the two points let dx = x2 - x1; let dy = y2 - y1; let dz = z2 - z1; // Compute the distance between the points let dist = Math.sqrt(dx ** 2 + dy ** 2 + dz ** 2); // Apply repulsive force if distance is not zero let forceFactor = force / dist ** 4; // Update the positions of the points // Only apply forces to non-dragged points if (i !== draggedPointIndex || !isDragging) { dPoints[i][0] -= dx * forceFactor; dPoints[i][1] -= dy * forceFactor; dPoints[i][2] -= dz * forceFactor; } if (j !== draggedPointIndex || !isDragging) { dPoints[j][0] += dx * forceFactor; dPoints[j][1] += dy * forceFactor; dPoints[j][2] += dz * forceFactor; } } } for (let i = 0; i < points.length; i++) { // Skip updating the dragged point if (i === draggedPointIndex && isDragging) continue; points[i][0] += dPoints[i][0]; points[i][1] += dPoints[i][1]; points[i][2] += dPoints[i][2]; // Normalize all points back to the unit sphere surface let h = Math.sqrt( points[i][0] ** 2 + points[i][1] ** 2 + points[i][2] ** 2 ); points[i][0] = points[i][0] / h; points[i][1] = points[i][1] / h; points[i][2] = points[i][2] / h; } }; let xyzToGlobe = (xyzPoints) => { return xyzPoints.map(([x, y, z]) => { const lon = Math.atan2(y, x) * (180 / Math.PI); // Calculate longitude const hyp = Math.sqrt(x * x + y * y); // Hypotenuse of x and y (radius in xy-plane) const lat = Math.atan2(z, hyp) * (180 / Math.PI); // Calculate latitude return [lon, lat]; // Return as [longitude, latitude] }); }; // Convert [lon, lat] to [x, y, z] let globeToXyz = ([lon, lat]) => { const lonRad = lon * (Math.PI / 180); const latRad = lat * (Math.PI / 180); const x = Math.cos(latRad) * Math.cos(lonRad); const y = Math.cos(latRad) * Math.sin(lonRad); const z = Math.sin(latRad); return [x, y, z]; }; const projection = d3 .geoOrthographic() .fitExtent( [ [1, 1], [width - 1, height - 1] ], sphere ) .rotate([0, -30]); const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context).pointRadius(2.5); // Function to draw the globe let lineMin, lineMax, lineDistance; let voronoi, borders, triangles, numSides, coor, l; function arcDistance(a1, a2) { let d = d3.geoLength({ type: "LineString", coordinates: [a1, a2] }); return Math.min(1, Math.max(0, 1000 * d ** 2)); } function drawGlobe() { context.clearRect(0, 0, width, height); // Calculate and apply colors based on the number of neighbors voronoi.polygons().features.forEach((polygon, i) => { //console.log(polygon) numSides = 0; //polygon.geometry.coordinates[0].length; l = polygon.geometry.coordinates[0].length; for (let i = 0; i < l - 1; i++) { coor = polygon.geometry.coordinates[0]; numSides += arcDistance(coor[i], coor[i + 1]); } if (Math.random() < 0.001) { console.log(polygon.geometry.coordinates[0]); } const color = colorScale(numSides); context.beginPath(); path(polygon); context.fillStyle = color; context.fill(); }); // Draw borders of the Voronoi cells context.beginPath(); path(borders); context.strokeStyle = "#000"; context.stroke(); // Draw the red highlight on top of the black borders if (isDragging && draggedPointIndex !== null) { const polygons = voronoi.polygons().features; if (polygons[draggedPointIndex]) { context.beginPath(); path(polygons[draggedPointIndex]); context.strokeStyle = "#ff0000"; context.lineWidth = 3; context.stroke(); context.lineWidth = 1; } } triangles.coordinates.forEach((pair) => { context.beginPath(); path({ type: "LineString", coordinates: pair }); context.strokeStyle = delaunayColor; context.stroke(); }); // Draw points on the globe const globePoints = xyzToGlobe(points); globePoints.forEach((point, i) => { context.beginPath(); path({ type: "Point", coordinates: point }); context.fillStyle = i === draggedPointIndex && isDragging ? "#ff0000" : delaunayColor; context.fill(); }); } // Find which Voronoi cell contains a point function findCellAtPoint(mousePos) { const coords = projection.invert(mousePos); if (!coords) return null; // Use Voronoi's find method to get the closest point const found = voronoi.find(...coords); return found; } // iterate the force step to animate the relaxation of tension function animate() { for (let i = 0; i < steps; i++) { spacePoints(); voronoi = d3.geoVoronoi(xyzToGlobe(points)); borders = voronoi.cellMesh(); triangles = voronoi.mesh(); } drawGlobe(); if (context.canvas.isConnected) requestAnimationFrame(animate); } // Add drag behavior to rotate the globe let rx0, ry0; const canvas = d3.select(context.canvas); // Prevent context menu on right-click canvas.on("contextmenu", (event) => { event.preventDefault(); }); // Handle mouse down canvas.on("mousedown", (event) => { if (event.button === 2) { // Right click event.preventDefault(); const [mx, my] = d3.pointer(event); const cellIndex = findCellAtPoint([mx, my]); if (cellIndex !== null && cellIndex >= 0 && cellIndex < points.length) { draggedPointIndex = cellIndex; isDragging = true; drawGlobe(); } } }); // Handle mouse move canvas.on("mousemove", (event) => { if (isDragging && draggedPointIndex !== null && event.buttons === 2) { const [mx, my] = d3.pointer(event); const coords = projection.invert([mx, my]); if (coords) { // Convert lon/lat to xyz and update the dragged point const xyz = globeToXyz(coords); points[draggedPointIndex] = xyz; // Recalculate Voronoi for visual update voronoi = d3.geoVoronoi(xyzToGlobe(points)); borders = voronoi.cellMesh(); triangles = voronoi.mesh(); drawGlobe(); } } }); // Handle mouse up canvas.on("mouseup", (event) => { if (event.button === 2 && isDragging) { isDragging = false; draggedPointIndex = null; drawGlobe(); } }); // Handle mouse leave to ensure drag state is cleared canvas.on("mouseleave", () => { if (isDragging) { isDragging = false; draggedPointIndex = null; drawGlobe(); } }); // Original left-click drag for rotation canvas.call( drag(projection).on("drag.render", () => drawGlobe()) ); // Start animation setTimeout(animate, 10); return context.canvas; }30:[] 2d:{"id":"0a07e56f17bb064e","slug":null,"title":"Mutant football generator","thumbnail":"92ce8c9543e67066d85b7ae457f574b7600a912ec0a5aa1db91dcd4d189a43db","access_level":"public","create_time":"$D2024-08-17T15:38:28.041Z","update_time":"$D2025-07-03T16:06:52.261Z","view_time":null,"first_public_time":"$D2024-08-18T00:07:53.094Z","fork":{"id":"33b8e1fc309d084a","slug":"spherical-voronoi","title":"Spherical Voronoi","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":15,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1426,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Mutant football generator","cells":[{"id":0,"value":"# Mutant football generator \n## Optimally position points on sphere using force-directed spacing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":832,"value":"12, 32, and 72 are magic numbers. \n\nRare patterns may require multiple attempts to crystalize.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":991,"value":"mutable faces = Inputs.bind(\n Inputs.range([4, 408], { value: 72, step: 1, label: \"Number of Faces\", width: 500, transform: Math.log }),\n Inputs.number({ min: 4, max: 408, step: 1, label: \"Number of Faces\" })\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":835,"value":"-----------------------------\n\nI've recently become obsessed with [@jonpaulsballs](https://www.youtube.com/@jonpaulsballs)' quest to innovate footballs. Since a regular ball has 32 panels, I had to know, what does one with 31 panels look like? Do all balls have [12 pentagons](https://12p.com/)? \n\n-----------------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":837,"value":"\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1114,"value":"Classification:\n- classic football shape: 12, 32, 72, ~192\n- tetrahedral: 4, 22, ~40, ~46, ~88\n- hemispheres: 7, 10, 14, 27, 38, 41, 42, 50, 77, 80\n- trilateral: 39, 78\n- 3 - spiral: 23, 29, 49\n- reflective florets: 44,\n- chiral florets: 24, 48, ~72\n- partial florets: ~51, 70(4) 80(2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"To Do:\n- ✓ add better rotation (thank you [fil](https://observablehq.com/user/@fil) for fixing it! :0 <3 )\n- ✓ blend colors of polygons with an infinitesimally small side\n- shading\n- generate polyhedral net.\n - freeze current state\n - save/load\n - switch between voronoi nearest neighbor cells and delaunay triangulation \n - net type\n - shortest path from one point\n - two connected hemispheres originating from two antipodal points.\n - islands of radius steps\n - custom net\n - add a reference line for relative diameter to allow scaling SVG to size.\n - size of tabs\n - density of sewing holes\n - size of sewing holes\n - offset of sewing holes\n - export svg with two layers / groups\n - deal with orphan edges\n - laser engraved side numbers to make assembly easier\n- automatically classify settled state","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":696,"value":"d3 = require(\"d3@7\", \"d3-geo-voronoi\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"import {drag} from \"@d3/versor-dragging\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"