#container
.drawing@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
document, body {
margin: 0;
min-height: 100vh;
}
body {
align-items: center;
background: #F6FFFA;
display: flex;
font-family: 'Montserrat', sans-serif;
justify-content: center;
}
#container {
align-items: center;
display: flex;
flex-direction: column;
}
#container>:first-child {
cursor: pointer;
}
button {
bottom: 30px;
max-width: 200px;
margin-top: 10px;
position: fixed;
}import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js'
import { Vec2, Vec3 } from 'https://cdn.skypack.dev/wtc-math';
console.clear();
const config = {
drawingType: 2,
dimensions: new Vec2(window.innerWidth-20, window.innerHeight-20),
r: 50,
k: 32,
};
const vars = {
drawing: null
}
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
document.querySelector('#container .drawing').innerHTML = '';
config.dimensions = new Vec2(window.innerWidth-20, window.innerHeight-20);
vars.drawing = new Drawing(config.drawingType).addTo('#container .drawing').size(config.dimensions);
setup();
}, 200);
})
const setup = () => {
vars.drawing.clear();
config.r = floatRandomBetween(40, 120);
vars.bluenoise = new BlueNoise({
size: config.dimensions.addNew(new Vec2(config.r*2, config.r*2)),
offset: new Vec2(config.r*-1, config.r*-1),
r: config.r,
k: config.k
});
draw();
};
const drawStar = (pos, initialA = 0, ir = 10, spokes = 7, dims = new Vec2(4, 10)) => {
for(let i = 0; i < spokes; i++) {
const a = initialA + Math.PI * 2 / spokes * i;
const oa = a - Math.PI * .5;
const ip = new Vec2( Math.cos(a) * ir + pos.x, Math.sin(a) * ir + pos.y );
const u = ip.addNew( new Vec2( Math.cos(oa) * (dims.x * .5), Math.sin(oa) * (dims.x * .5) ) );
const v = u.addNew( new Vec2( Math.cos(a) * dims.y, Math.sin(a) * dims.y ) );
const x = v.addNew( new Vec2( Math.cos(oa) * (dims.x * -1), Math.sin(oa) * (dims.x * -1) ) );
const y = ip.addNew( new Vec2( Math.cos(oa) * (dims.x * -.5), Math.sin(oa) * (dims.x * -.5) ) );
vars.drawing.polygon( [u,v,x,y,u] );
}
}
const drawCurl = (pos, initialA = 0, ir = 20, points = 3, width = 5, revolutions = 3) => {
const pointsDown = [];
const pointsUp = [];
const maxRev = (ir / width) - 1. / points;
revolutions = Math.min(revolutions, maxRev);
for(let i = 0; i < points*revolutions; i++) {
const a = initialA + Math.PI * 2 / points * i;
const oa = a - Math.PI * .5;
const ip = new Vec2( Math.cos(a) * ir + pos.x, Math.sin(a) * ir + pos.y );
const u = ip.addNew( new Vec2( Math.cos(a) * (width * .5), Math.sin(a) * (width * .5) ) );
const v = ip.addNew( new Vec2( Math.cos(a) * (width * -.5), Math.sin(a) * (width * -.5) ) );
pointsDown.push(u);
pointsUp.push(v);
ir -= width / points;
}
vars.drawing.polygon( pointsDown.concat(pointsUp.reverse()).concat(pointsDown[0]) );
}
const draw = () => {
vars.drawing.rect(new Vec2(0,0), config.dimensions);
while(vars.bluenoise.active.length > 0) {
vars.bluenoise.step();
}
vars.drawing.stroke = '#000000FF';
vars.drawing.lineWidth = 2;
vars.bluenoise.news.forEach((n) => {
const f = config.r/80;
const annulus = new Vec2(floatRandomBetween(6*f, 12*f), floatRandomBetween(5*f,10*f));
vars.drawing.stroke = '#'+getColour(Math.random());
const which = Math.random();
if(which < .89) {
drawStar(
n.addNew(vars.bluenoise.offset), // position
Math.random() * Math.PI, // initial angle
annulus.x, // internal size
Math.floor(floatRandomBetween(3, 12)), // number of spokes
new Vec2(floatRandomBetween(2*f,4*f), annulus.y) // spoke size
);
vars.drawing.circle(n.addNew(vars.bluenoise.offset), annulus.x*.25);
} else if(which < .9) {
drawCurl(
n.addNew(vars.bluenoise.offset), // position,
Math.random() * Math.PI, // initial angle
annulus.x * 1.5, // internal size
20, // number of points
floatRandomBetween(3*f,7*f), // width of stroke
Math.floor(floatRandomBetween(1,6)) // The number of revolutions
);
} else {
drawCurl(
n.addNew(vars.bluenoise.offset), // position,
Math.random() * Math.PI, // initial angle
annulus.x * 1.5, // internal size
Math.floor(floatRandomBetween(3, 3)), // number of points
floatRandomBetween(3*f,7*f), // width of stroke
Math.floor(floatRandomBetween(3,6)) // The number of revolutions
);
}
});
const triangles = Delaunator.from(vars.bluenoise.news.map(n => n.array));
vars.drawing.stroke = '#00000011';
for(let i = 0; i < triangles.triangles.length; i += 3) {
const t = [
vars.bluenoise.news[triangles.triangles[i+0]].addNew(vars.bluenoise.offset),
vars.bluenoise.news[triangles.triangles[i+1]].addNew(vars.bluenoise.offset),
vars.bluenoise.news[triangles.triangles[i+2]].addNew(vars.bluenoise.offset),
vars.bluenoise.news[triangles.triangles[i+0]].addNew(vars.bluenoise.offset)
];
vars.drawing.polygon(t);
}
}
const pal = ( t, a, b, c, d ) => {
const mp = c.scaleNew(t).add(d).scale(6.28318);
mp.x = Math.cos(mp.x);
mp.y = Math.cos(mp.y);
mp.z = Math.cos(mp.z);
return a.addNew(b.multiplyNew(mp));
// return a + b*cos( 6.28318*(c*t+d) );
}
const getColour = (d) => {
d *= 100.;
const col = pal(
d/70+.65,
new Vec3(0.5,0.5,0.5),
new Vec3(0.5,0.1,0.2),
new Vec3(1.0,1.0,1.0),
new Vec3(0.6,0.1,0.2) );
const gc = (s) => {
return (Math.floor(s * 255).toString(16)+'00').substring(0,2);
}
const colour = gc(col.x) + gc(col.y) + gc(col.z);
// const a = Math.floor((1.-d/30)*255).toString(16);
return colour;
}
setTimeout(() => {
setup();
document.body.querySelector('#container>:first-child').addEventListener('click', () => {
setup();
});
}, 500);
class Drawing {
static DT_CANVAS = 1;
static DT_SVG = 2;
#drawing;
#ctx;
#mode;
#instructions = [];
constructor(mode = Drawing.DT_CANVAS) {
this.mode = mode;
if(this.mode & Drawing.DT_CANVAS) {
this.#drawing = document.createElement('canvas');
} else if(this.mode & Drawing.DT_SVG) {
this.#drawing = SVG();
}
this.stroke = '#333';
}
clear() {
if(this.mode & Drawing.DT_CANVAS) {
this.c.clearRect(0,0,...this.dimensions.array);
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.clear();
}
}
rect(position, dimensions) {
this.#instructions.push({
f: 'rect',
args: [position, dimensions]
});
if(this.mode & Drawing.DT_CANVAS) {
this.c.beginPath();
this.c.rect(...position.array, ...dimensions.array);
this.c.stroke();
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.rect(dimensions.width, dimensions.height).move(...position.array).fill("none").stroke('#f06');
}
}
circle(position, radius) {
this.#instructions.push({
f: 'circle',
args: [position, radius]
});
if(this.mode & Drawing.DT_CANVAS) {
this.c.beginPath();
this.c.arc(position.x, position.y, radius, 0, 2 * Math.PI);
if(this.stroke) this.c.stroke();
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.circle(radius*2).fill("none").stroke(this.stroke).move(...position.subtractScalarNew(radius).array);
}
}
line(a, b) {
this.#instructions.push({
f: 'line',
args: [a, b]
});
if(this.mode & Drawing.DT_CANVAS) {
this.c.beginPath();
this.c.moveTo(a.x, a.y);
this.c.lineTo(b.x, b.y);
if(this.stroke) this.c.stroke();
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.line(...a.array, ...b.array).stroke(this.stroke);
}
}
polyline(points) {
this.#instructions.push({
f: 'polyline',
args: points
});
if(this.mode & Drawing.DT_CANVAS) {
this.c.beginPath();
points.forEach((p, i) => {
if(i === 0) this.c.moveTo(p.x, p.y);
else this.c.lineTo(p.x, p.y);
})
if(this.stroke) this.c.stroke();
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.polyline(points.map(p => p.array)).fill('none').stroke(this.stroke);
}
}
polygon(points) {
this.#instructions.push({
f: 'polygon',
args: [points]
});
if(this.mode & Drawing.DT_CANVAS) {
this.c.beginPath();
points.forEach((p, i) => {
if(i === 0) this.c.moveTo(p.x, p.y);
else this.c.lineTo(p.x, p.y);
})
if(this.stroke) this.c.stroke();
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.polygon(points.map(p => p.array)).fill('none').stroke(this.stroke);
}
}
download() {
let d;
if(this.mode & Drawing.DT_CANVAS) {
d = new Drawing(Drawing.DT_SVG).size(this.dimensions);
this.#instructions.forEach((i) => {
d[i.f](...i.args);
});
} else if(this.mode & Drawing.DT_SVG) {
d = this;
}
const fileName = "untitled.svg"
const url = "data:image/svg+xml;utf8," + encodeURIComponent(d.drawing.svg());
const link = document.createElement("a");
link.download = fileName;
link.href = url;
link.click();
}
addTo(element) {
if(typeof(element) === 'string') {
if(this.mode & Drawing.DT_CANVAS) {
document.body.querySelector(element).appendChild(this.drawing);
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.addTo(element);
}
}
return this;
}
size(d) {
if(this.mode & Drawing.DT_CANVAS) {
this.drawing.width = d.width;
this.drawing.height = d.height;
} else if(this.mode & Drawing.DT_SVG) {
this.drawing.size(...d.array);
}
this.#dimensions = d;
return this;
}
#dimensions
set dimensions(v) {
if(v instanceof Vec2) {
this.#dimensions = v;
this.size(v);
}
}
get dimensions() {
return this.#dimensions;
}
get drawing() {
return this.#drawing;
}
get c() {
if(this.mode & Drawing.DT_CANVAS) {
if(this.#ctx) return this.#ctx;
this.#ctx = this.drawing.getContext('2d');
return this.#ctx;
}
}
#stroke;
set stroke(v) {
this.#stroke = v;
if(this.mode & Drawing.DT_CANVAS) {
this.c.strokeStyle = v;
}
}
get stroke() {
return this.#stroke;
}
set mode(v) {
if(v & (Drawing.DT_CANVAS | Drawing.DT_SVG)) {
this.#mode = v;
}
}
get mode() {
return this.#mode || Drawing.DT_CANVAS;
}
}
// vars.drawing = SVG().addTo('#container').size(config.dimensions.x, config.dimensions.y);
vars.drawing = new Drawing(config.drawingType).addTo('#container .drawing').size(config.dimensions);
/// Create the download button
const dl = document.createElement('button');
dl.innerText = 'download';
dl.addEventListener('click', () => {
vars.drawing.download();
});
document.body.querySelector('#container').appendChild(dl);
class Grid {
static #defaults = {
size: config.dimensions.clone(),
cellSize: new Vec2(50,50),
fill: null
};
#grid = [];
#size;
#cellSize;
constructor(settings) {
settings = Object.assign({}, Grid.#defaults, settings);
this.#size = Vec2.interpolate(settings.size) || Grid.#defaults.size;
this.#cellSize = Vec2.interpolate(settings.cellSize) || Grid.#defaults.cellSize;
this.#grid.length = this.gridSize.area;
this.#grid.fill(settings.fill || Grid.#defaults.fill);
}
addChild(child, i) {
this.#grid[i] = child;
}
addChildAtPosition(child, pos) {
this.#grid[this.getArrayPosition(pos)] = child;
}
addChildAtGridPosition(child, gridPos) {
this.#grid[this.getArrayPositionFromGridPos(gridPos)] = child;
}
getChild(i) {
return this.#grid[i];
}
getChildAtPosition(pos) {
return this.#grid[this.getArrayPosition(pos)];
}
getChildAtGridPosition(gridPos) {
return this.#grid[this.getArrayPositionFromGridPos(gridPos)];
}
getGridPositionForIndex(i) {
const gsize = this.gridSize;
return new Vec2(i%gsize.x, Math.floor(i/gsize.x));
}
getArrayPositionFromGridPos(gpos) {
const gsize = this.gridSize;
if(
gpos.x < 0 || gpos.x >= gsize.x ||
gpos.y < 0 || gpos.y >= gsize.y )
return null;
gpos.x = gpos.x % gsize.x;
const arraypos = (gpos.x) + (gpos.y*gsize.x);
return arraypos;
}
getArrayPosition(realPos) {
const gpos = this.getGridPos(realPos);
return this.getArrayPositionFromGridPos(gpos);
}
getGridPos(realPos) {
if(realPos instanceof Vec2) {
return realPos.divideNew(this.#cellSize).floor();
}
// Throw an error
}
getSubPos(realPos) {
if(realPos instanceof Vec2) {
return realPos.modNew(this.#cellSize);
}
// Throw an error
}
getRealPos(gridPos) {
if(gridPos instanceof Vec2) {
return gridPos.multiplyNew(this.#cellSize);
}
// Throw an error
}
get size() {
return this.#size;
}
get gridSize() {
return this.#size.divideNew(this.#cellSize).floor();
}
get cellSize() {
return this.#cellSize;
}
get length() {
return this.#grid.length;
}
}
class BlueNoise {
static #defaults = {
size: config.dimensions.clone(),
offset: new Vec2(0,0),
r: 100,
k: 32,
d: 5,
initialList: [new Vec2(375,250)]
};
#activeList = [];
#newPositions = [];
#grid;
#r;
#k;
#d;
#size;
#offset;
constructor(settings) {
settings = Object.assign({}, BlueNoise.#defaults, settings);
this.#r = settings.r;
this.#k = settings.k;
this.#d = settings.d;
this.#size = settings.size;
this.#offset = settings.offset;
this.#grid = new Grid({
size: this.#size,
cellSize: this.#r / Math.SQRT2,
// cellSize: 1. / Math.SQRT2 / this.#r,
fill: -1
});
this.addElementAtPosition(...settings.initialList);
}
addElementAtPosition(...positions) {
positions.forEach((pos) => {
this.#grid.addChildAtPosition(pos, pos);
this.#activeList.push(pos);
this.#newPositions.push(pos);
});
}
draw() {
this.news.forEach((newPos, i) => {
const r = 3;
const pos = newPos.addNew(this.#offset);
vars.drawing.circle(pos, r);
this.news[i] = null;
});
this.#newPositions = this.news.filter(v => v !== null);
// this.news.length = 0;
}
step() {
const loopL = Math.min(this.active.length, this.#d);
for(let l = 0; l < loopL; l++) {
const ri = Math.floor(0, floatRandomBetween(this.active.length));
const c = this.active[ri];
let numfound = 0;
for(var i = 0; i < this.#k; i++) {
const a = floatRandomBetween(0, Math.PI*2);
const l = floatRandomBetween(this.#r, this.#r*2);
const pos = new Vec2(Math.cos(a)*l, Math.sin(a)*l).add(c);
// console.log(this.grid.getChildAtPosition(pos));
if(this.grid.getChildAtPosition(pos) === -1) {
const gridPos = this.grid.getGridPos(pos);
let tooClose = false;
for (var i = -1; i <= 1; i++) {
for (var j = -1; j <= 1; j++) {
if(i == 0 && j == 0) continue;
const p = this.grid.getChildAtGridPosition(gridPos.addNew(new Vec2(i, j)));
if(p !== -1 && p instanceof Vec2) {
const d = pos.distance(p);
if(d < this.#r*.5) tooClose = true;
}
}
}
if(!tooClose) {
this.grid.addChildAtPosition(pos, pos);
this.active.push(pos);
this.news.push(pos);
numfound++;
break;
}
}
}
if(numfound === 0) {
this.active.splice(ri, 1);
}
}
}
get active() {
return this.#activeList;
}
get news() {
return this.#newPositions;
}
get grid() {
return this.#grid;
}
get offset() {
return this.#offset;
}
}
const floatRandomBetween = (min, max) => {
return Math.random() * (max - min) + min;
};
const clamp = function(a, b, v) {
return Math.min(b, Math.max(a, v));
}
const lerp = function(a, b, progress) {
return a + progress * (b - a);
}
const hash21 = (p) => {
const o = p.dot(new Vec2(27.609, 57.583));
return fract(Math.sin(o)*config.seed);
}
const precisionRound = (n, p) => {
const ip = Math.pow(10, p);
return Math.round(n*ip)/ip;
}
const fract = (n, p = 6) => {
const ip = Math.pow(10, p);
const _n = Math.abs(Math.floor(n*ip)/ip);
if(_n < 1) return _n;
return Math.floor(_n % Math.floor(_n)*ip)/ip;
}
// https://github.com/mapbox/delaunator
//
// ISC License
//
// Copyright (c) 2017, Mapbox
//
// Permission to use, copy, modify, and/or distribute this software for any purpose
// with or without fee is hereby granted, provided that the above copyright notice
// and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
// FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
// OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
// TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
// THIS SOFTWARE.
//
const EPSILON = Math.pow(2, -52);
const EDGE_STACK = new Uint32Array(512);
class Delaunator {
static from(points) {
const n = points.length;
const coords = new Float64Array(n * 2);
for (let i = 0; i < n; i++) {
const p = points[i];
coords[2 * i] = p[0];
coords[2 * i + 1] = p[1];
}
return new Delaunator(coords);
}
constructor(coords) {
const n = coords.length >> 1;
if (n > 0 && typeof coords[0] !== 'number') throw new Error('Expected coords to contain numbers.');
this.coords = coords;
// arrays that will store the triangulation graph
const maxTriangles = 2 * n - 5;
const triangles = this.triangles = new Uint32Array(maxTriangles * 3);
const halfedges = this.halfedges = new Int32Array(maxTriangles * 3);
// temporary arrays for tracking the edges of the advancing convex hull
this._hashSize = Math.ceil(Math.sqrt(n));
const hullPrev = this.hullPrev = new Uint32Array(n); // edge to prev edge
const hullNext = this.hullNext = new Uint32Array(n); // edge to next edge
const hullTri = this.hullTri = new Uint32Array(n); // edge to adjacent triangle
const hullHash = new Int32Array(this._hashSize).fill(-1); // angular edge hash
// populate an array of point indices; calculate input data bbox
const ids = new Uint32Array(n);
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
for (let i = 0; i < n; i++) {
const x = coords[2 * i];
const y = coords[2 * i + 1];
if (x < minX) minX = x;
if (y < minY) minY = y;
if (x > maxX) maxX = x;
if (y > maxY) maxY = y;
ids[i] = i;
}
const cx = (minX + maxX) / 2;
const cy = (minY + maxY) / 2;
let minDist = Infinity;
let i0, i1, i2;
// pick a seed point close to the center
for (let i = 0; i < n; i++) {
const d = dist(cx, cy, coords[2 * i], coords[2 * i + 1]);
if (d < minDist) {
i0 = i;
minDist = d;
}
}
const i0x = coords[2 * i0];
const i0y = coords[2 * i0 + 1];
minDist = Infinity;
// find the point closest to the seed
for (let i = 0; i < n; i++) {
if (i === i0) continue;
const d = dist(i0x, i0y, coords[2 * i], coords[2 * i + 1]);
if (d < minDist && d > 0) {
i1 = i;
minDist = d;
}
}
let i1x = coords[2 * i1];
let i1y = coords[2 * i1 + 1];
let minRadius = Infinity;
// find the third point which forms the smallest circumcircle with the first two
for (let i = 0; i < n; i++) {
if (i === i0 || i === i1) continue;
const r = circumradius(i0x, i0y, i1x, i1y, coords[2 * i], coords[2 * i + 1]);
if (r < minRadius) {
i2 = i;
minRadius = r;
}
}
let i2x = coords[2 * i2];
let i2y = coords[2 * i2 + 1];
if (minRadius === Infinity) {
throw new Error('No Delaunay triangulation exists for this input.');
}
// swap the order of the seed points for counter-clockwise orientation
if (orient(i0x, i0y, i1x, i1y, i2x, i2y)) {
const i = i1;
const x = i1x;
const y = i1y;
i1 = i2;
i1x = i2x;
i1y = i2y;
i2 = i;
i2x = x;
i2y = y;
}
const center = circumcenter(i0x, i0y, i1x, i1y, i2x, i2y);
this._cx = center.x;
this._cy = center.y;
const dists = new Float64Array(n);
for (let i = 0; i < n; i++) {
dists[i] = dist(coords[2 * i], coords[2 * i + 1], center.x, center.y);
}
// sort the points by distance from the seed triangle circumcenter
quicksort(ids, dists, 0, n - 1);
// set up the seed triangle as the starting hull
this.hullStart = i0;
let hullSize = 3;
hullNext[i0] = hullPrev[i2] = i1;
hullNext[i1] = hullPrev[i0] = i2;
hullNext[i2] = hullPrev[i1] = i0;
hullTri[i0] = 0;
hullTri[i1] = 1;
hullTri[i2] = 2;
hullHash[this._hashKey(i0x, i0y)] = i0;
hullHash[this._hashKey(i1x, i1y)] = i1;
hullHash[this._hashKey(i2x, i2y)] = i2;
this.trianglesLen = 0;
this._addTriangle(i0, i1, i2, -1, -1, -1);
for (let k = 0, xp, yp; k < ids.length; k++) {
const i = ids[k];
const x = coords[2 * i];
const y = coords[2 * i + 1];
// skip near-duplicate points
if (k > 0 && Math.abs(x - xp) <= EPSILON && Math.abs(y - yp) <= EPSILON) continue;
xp = x;
yp = y;
// skip seed triangle points
if (i === i0 || i === i1 || i === i2) continue;
// find a visible edge on the convex hull using edge hash
let start = 0;
for (let j = 0, key = this._hashKey(x, y); j < this._hashSize; j++) {
start = hullHash[(key + j) % this._hashSize];
if (start !== -1 && start !== hullNext[start]) break;
}
start = hullPrev[start];
let e = start, q;
while (q = hullNext[e], !orient(x, y, coords[2 * e], coords[2 * e + 1], coords[2 * q], coords[2 * q + 1])) {
e = q;
if (e === start) {
e = -1;
break;
}
}
if (e === -1) continue; // likely a near-duplicate point; skip it
// add the first triangle from the point
let t = this._addTriangle(e, i, hullNext[e], -1, -1, hullTri[e]);
// recursively flip triangles from the point until they satisfy the Delaunay condition
hullTri[i] = this._legalize(t + 2);
hullTri[e] = t; // keep track of boundary triangles on the hull
hullSize++;
// walk forward through the hull, adding more triangles and flipping recursively
let n = hullNext[e];
while (q = hullNext[n], orient(x, y, coords[2 * n], coords[2 * n + 1], coords[2 * q], coords[2 * q + 1])) {
t = this._addTriangle(n, i, q, hullTri[i], -1, hullTri[n]);
hullTri[i] = this._legalize(t + 2);
hullNext[n] = n; // mark as removed
hullSize--;
n = q;
}
// walk backward from the other side, adding more triangles and flipping
if (e === start) {
while (q = hullPrev[e], orient(x, y, coords[2 * q], coords[2 * q + 1], coords[2 * e], coords[2 * e + 1])) {
t = this._addTriangle(q, i, e, -1, hullTri[e], hullTri[q]);
this._legalize(t + 2);
hullTri[q] = t;
hullNext[e] = e; // mark as removed
hullSize--;
e = q;
}
}
// update the hull indices
this.hullStart = hullPrev[i] = e;
hullNext[e] = hullPrev[n] = i;
hullNext[i] = n;
// save the two new edges in the hash table
hullHash[this._hashKey(x, y)] = i;
hullHash[this._hashKey(coords[2 * e], coords[2 * e + 1])] = e;
}
this.hull = new Uint32Array(hullSize);
for (let i = 0, e = this.hullStart; i < hullSize; i++) {
this.hull[i] = e;
e = hullNext[e];
}
this.hullPrev = this.hullNext = this.hullTri = null; // get rid of temporary arrays
// trim typed triangle mesh arrays
this.triangles = triangles.subarray(0, this.trianglesLen);
this.halfedges = halfedges.subarray(0, this.trianglesLen);
}
_hashKey(x, y) {
return Math.floor(pseudoAngle(x - this._cx, y - this._cy) * this._hashSize) % this._hashSize;
}
_legalize(a) {
const {triangles, coords, halfedges} = this;
let i = 0;
let ar = 0;
// recursion eliminated with a fixed-size stack
while (true) {
const b = halfedges[a];
/* if the pair of triangles doesn't satisfy the Delaunay condition
* (p1 is inside the circumcircle of [p0, pl, pr]), flip them,
* then do the same check/flip recursively for the new pair of triangles
*
* pl pl
* /||\ / \
* al/ || \bl al/ \a
* / || \ / \
* / a||b \ flip /___ar___\
* p0\ || /p1 => p0\---bl---/p1
* \ || / \ /
* ar\ || /br b\ /br
* \||/ \ /
* pr pr
*/
const a0 = a - a % 3;
ar = a0 + (a + 2) % 3;
if (b === -1) { // convex hull edge
if (i === 0) break;
a = EDGE_STACK[--i];
continue;
}
const b0 = b - b % 3;
const al = a0 + (a + 1) % 3;
const bl = b0 + (b + 2) % 3;
const p0 = triangles[ar];
const pr = triangles[a];
const pl = triangles[al];
const p1 = triangles[bl];
const illegal = inCircle(
coords[2 * p0], coords[2 * p0 + 1],
coords[2 * pr], coords[2 * pr + 1],
coords[2 * pl], coords[2 * pl + 1],
coords[2 * p1], coords[2 * p1 + 1]);
if (illegal) {
triangles[a] = p1;
triangles[b] = p0;
const hbl = halfedges[bl];
// edge swapped on the other side of the hull (rare); fix the halfedge reference
if (hbl === -1) {
let e = this.hullStart;
do {
if (this.hullTri[e] === bl) {
this.hullTri[e] = a;
break;
}
e = this.hullNext[e];
} while (e !== this.hullStart);
}
this._link(a, hbl);
this._link(b, halfedges[ar]);
this._link(ar, bl);
const br = b0 + (b + 1) % 3;
// don't worry about hitting the cap: it can only happen on extremely degenerate input
if (i < EDGE_STACK.length) {
EDGE_STACK[i++] = br;
}
} else {
if (i === 0) break;
a = EDGE_STACK[--i];
}
}
return ar;
}
_link(a, b) {
this.halfedges[a] = b;
if (b !== -1) this.halfedges[b] = a;
}
// add a new triangle given vertex indices and adjacent half-edge ids
_addTriangle(i0, i1, i2, a, b, c) {
const t = this.trianglesLen;
this.triangles[t] = i0;
this.triangles[t + 1] = i1;
this.triangles[t + 2] = i2;
this._link(t, a);
this._link(t + 1, b);
this._link(t + 2, c);
this.trianglesLen += 3;
return t;
}
}
// monotonically increases with real angle, but doesn't need expensive trigonometry
function pseudoAngle(dx, dy) {
const p = dx / (Math.abs(dx) + Math.abs(dy));
return (dy > 0 ? 3 - p : 1 + p) / 4; // [0..1]
}
function dist(ax, ay, bx, by) {
const dx = ax - bx;
const dy = ay - by;
return dx * dx + dy * dy;
}
function orient(px, py, qx, qy, rx, ry) {
return (qy - py) * (rx - qx) - (qx - px) * (ry - qy) < 0;
}
function inCircle(ax, ay, bx, by, cx, cy, px, py) {
const dx = ax - px;
const dy = ay - py;
const ex = bx - px;
const ey = by - py;
const fx = cx - px;
const fy = cy - py;
const ap = dx * dx + dy * dy;
const bp = ex * ex + ey * ey;
const cp = fx * fx + fy * fy;
return dx * (ey * cp - bp * fy) -
dy * (ex * cp - bp * fx) +
ap * (ex * fy - ey * fx) < 0;
}
function circumradius(ax, ay, bx, by, cx, cy) {
const dx = bx - ax;
const dy = by - ay;
const ex = cx - ax;
const ey = cy - ay;
const bl = dx * dx + dy * dy;
const cl = ex * ex + ey * ey;
const d = 0.5 / (dx * ey - dy * ex);
const x = (ey * bl - dy * cl) * d;
const y = (dx * cl - ex * bl) * d;
return x * x + y * y;
}
function circumcenter(ax, ay, bx, by, cx, cy) {
const dx = bx - ax;
const dy = by - ay;
const ex = cx - ax;
const ey = cy - ay;
const bl = dx * dx + dy * dy;
const cl = ex * ex + ey * ey;
const d = 0.5 / (dx * ey - dy * ex);
const x = ax + (ey * bl - dy * cl) * d;
const y = ay + (dx * cl - ex * bl) * d;
return {x, y};
}
function quicksort(ids, dists, left, right) {
if (right - left <= 20) {
for (let i = left + 1; i <= right; i++) {
const temp = ids[i];
const tempDist = dists[temp];
let j = i - 1;
while (j >= left && dists[ids[j]] > tempDist) ids[j + 1] = ids[j--];
ids[j + 1] = temp;
}
} else {
const median = (left + right) >> 1;
let i = left + 1;
let j = right;
swap(ids, median, i);
if (dists[ids[left]] > dists[ids[right]]) swap(ids, left, right);
if (dists[ids[i]] > dists[ids[right]]) swap(ids, i, right);
if (dists[ids[left]] > dists[ids[i]]) swap(ids, left, i);
const temp = ids[i];
const tempDist = dists[temp];
while (true) {
do i++; while (dists[ids[i]] < tempDist);
do j--; while (dists[ids[j]] > tempDist);
if (j < i) break;
swap(ids, i, j);
}
ids[left + 1] = ids[j];
ids[j] = temp;
if (right - i + 1 >= j - left) {
quicksort(ids, dists, i, right);
quicksort(ids, dists, left, j - 1);
} else {
quicksort(ids, dists, left, j - 1);
quicksort(ids, dists, i, right);
}
}
}
function swap(arr, i, j) {
const tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.