A combination of hexagonal mesh and poisson-disc blocks to generate nicely-distributed flowers on a hexagonal tile mesh.
Last active
September 24, 2019 01:38
-
-
Save Strikeskids/67e9755cd731539a68767e3673243426 to your computer and use it in GitHub Desktop.
hexagonal flower poisson-disc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.hexagon { | |
fill: white; | |
pointer-events: all; | |
} | |
.hexagon path { | |
-webkit-transition: fill 250ms linear; | |
transition: fill 250ms linear; | |
} | |
.hexagon .fill { | |
fill: #101943; | |
} | |
.mesh { | |
fill: none; | |
stroke: #000; | |
stroke-opacity: .2; | |
pointer-events: none; | |
} | |
.border { | |
fill: none; | |
stroke: #000; | |
stroke-width: 2px; | |
pointer-events: none; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
const radius = 5, width = radius * 200, height = radius * 200; | |
var sample = poissonDiscSampler(width, height, radius * 16); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
let points = []; | |
while (true) { | |
const s = sample(); | |
if (!s) break; | |
points.push(s); | |
} | |
svg.append('g').selectAll('circle') | |
.data(points) | |
.enter() | |
.append('circle') | |
.attr('cx', p => p[0]) | |
.attr('cy', p => p[1]) | |
.attr('r', 2) | |
var topology = hexTopology(radius, width, height); | |
var projection = hexProjection(radius); | |
var path = d3.geo.path() | |
.projection(projection); | |
svg.append("g") | |
.attr("class", "hexagon") | |
.selectAll("path") | |
.data(topology.objects.hexagons.geometries) | |
.enter().append("path") | |
.attr("d", function(d) { return path(topojson.feature(topology, d)); }) | |
.attr("class", function(d) { return d.fill ? "fill" : null; }); | |
svg.append("path") | |
.datum(topojson.mesh(topology, topology.objects.hexagons)) | |
.attr("class", "mesh") | |
.attr("d", path); | |
function hexTopology(radius, width, height) { | |
var dx = radius * 2 * Math.sin(Math.PI / 3), | |
dy = radius * 1.5, | |
m = Math.ceil((height + radius) / dy) + 1, | |
n = Math.ceil(width / dx) + 1, | |
geometries = [], | |
arcs = []; | |
for (var j = -1; j <= m; ++j) { | |
for (var i = -1; i <= n; ++i) { | |
var y = j * 2, x = (i + (j & 1) / 2) * 2; | |
arcs.push([[x, y - 1], [1, 1]], [[x + 1, y], [0, 1]], [[x + 1, y + 1], [-1, 1]]); | |
} | |
} | |
for (var j = 0, q = 3; j < m; ++j, q += 6) { | |
for (var i = 0; i < n; ++i, q += 3) { | |
geometries.push({ | |
type: "Polygon", | |
arcs: [[q, q + 1, q + 2, ~(q + (n + 2 - (j & 1)) * 3), ~(q - 2), ~(q - (n + 2 + (j & 1)) * 3 + 2)]], | |
fill: false, | |
}); | |
} | |
} | |
return { | |
transform: {translate: [0, 0], scale: [1, 1]}, | |
objects: {hexagons: {type: "GeometryCollection", geometries: geometries}}, | |
arcs: arcs | |
}; | |
} | |
function hexProjection(radius) { | |
var dx = radius * 2 * Math.sin(Math.PI / 3), | |
dy = radius * 1.5; | |
return { | |
stream: function(stream) { | |
return { | |
point: function(x, y) { stream.point(x * dx / 2, (y - (2 - (y & 1)) / 3) * dy / 2); }, | |
lineStart: function() { stream.lineStart(); }, | |
lineEnd: function() { stream.lineEnd(); }, | |
polygonStart: function() { stream.polygonStart(); }, | |
polygonEnd: function() { stream.polygonEnd(); } | |
}; | |
} | |
}; | |
} | |
// Based on https://www.jasondavies.com/poisson-disc/ | |
function poissonDiscSampler(width, height, radius) { | |
var k = 30, // maximum number of samples before rejection | |
radius2 = radius * radius, | |
R = 3 * radius2, | |
cellSize = radius * Math.SQRT1_2, | |
gridWidth = Math.ceil(width / cellSize), | |
gridHeight = Math.ceil(height / cellSize), | |
grid = new Array(gridWidth * gridHeight), | |
queue = [], | |
queueSize = 0, | |
sampleSize = 0; | |
return function() { | |
if (!sampleSize) return sample(Math.random() * width, Math.random() * height); | |
// Pick a random existing sample and remove it from the queue. | |
while (queueSize) { | |
var i = Math.random() * queueSize | 0, | |
s = queue[i]; | |
// Make a new candidate between [radius, 2 * radius] from the existing sample. | |
for (var j = 0; j < k; ++j) { | |
var a = 2 * Math.PI * Math.random(), | |
r = Math.sqrt(Math.random() * R + radius2), | |
x = s[0] + r * Math.cos(a), | |
y = s[1] + r * Math.sin(a); | |
// Reject candidates that are outside the allowed extent, | |
// or closer than 2 * radius to any existing sample. | |
if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) return sample(x, y); | |
} | |
queue[i] = queue[--queueSize]; | |
queue.length = queueSize; | |
} | |
}; | |
function far(x, y) { | |
var i = x / cellSize | 0, | |
j = y / cellSize | 0, | |
i0 = Math.max(i - 2, 0), | |
j0 = Math.max(j - 2, 0), | |
i1 = Math.min(i + 3, gridWidth), | |
j1 = Math.min(j + 3, gridHeight); | |
for (j = j0; j < j1; ++j) { | |
var o = j * gridWidth; | |
for (i = i0; i < i1; ++i) { | |
if (s = grid[o + i]) { | |
var s, | |
dx = s[0] - x, | |
dy = s[1] - y; | |
if (dx * dx + dy * dy < radius2) return false; | |
} | |
} | |
} | |
return true; | |
} | |
function sample(x, y) { | |
var s = [x, y]; | |
queue.push(s); | |
grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s; | |
++sampleSize; | |
++queueSize; | |
return s; | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment