Triangles, Triangles and Some Triangles
Delaunay Triangulation With the Bowyer-Watson Algorithm

Link to
presentation
Johan Karlsson
- Coding for 30 years
- Lots of Microsoft and Azure
- Also dabbled with AWS
- Loves using JavaScript in the browser
- Active Solution since 2024
PROGRAM TABELL;
USES CRT;
VAR I, VAL:INTEGER;
STOPP:CHAR; {CHAR BETYDER CHARACTER OCH KAN VARA VILKET TECKEN SOM HELST}
BEGIN
CLRSCR;
TEXTCOLOR (LIGHTBLUE);
WRITELN('MED DETTA PROGRAM KAN DU FÅ EN GÅNGERTABELL UTSKRIVEN');
WRITELN('VILKEN TABELL ÖNSKAS?');
READLN(VAL);
FOR I:=1 TO 12 DO
BEGIN
WRITELN(I:2,' * ',VAL,' = ',I*VAL);
END;
WRITELN('TRYCK TANGENT!');
STOPP:=READKEY;
END.Turbo Pascal, 1994
What and Why?
Creative Coding


Inspiration

- Two values: x and y
- Angle and length
- Math operations:
- Addition
- Subtraction
- Multiplication
- Division
- ...
Vectors
- Addition
- Subtraction
- Multiplication
- Division
- Get angle/length
Vectors cont.
add(v) {
return new Vector(
this.x + v.x,
this.y + v.y);
}
addTo(v) {
this.x += v.x;
this.y += v.y;
}sub(v) {
return new Vector(
this.x - v.x,
this.y - v.y);
}
subFrom(v) {
this.x -= v.x;
this.y -= v.y;
}mult(n) {
return new Vector(
this.x * n,
this.y * n);
}
div(n) {
return new Vector(
this.x / n,
this.y / n);
}getAngle() {
return Math.atan2(
this.y,
this.x);
}
getLength() {
return Math.hypot(
this.x,
this.y);
}class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
}
...
}-
Trigonometry
-
Math.atan2(0, -1); // 3.14
-
-
Pythagorean theorem
-
Math.hypot(3, 4); // 5
-
Vectors cont.


Triangle
- Tree vertexes: a, b, c
- Circumcircle
- circumcenter
- circumradius
- Three edges:
- ab
- bc
- ca
HTML <canvas> basics
Delaunay Triangulation
- Triangulation - subdivision of a planar object into triangles
- Delaunay Triangulation - given a set of points, gives the "best" triangulation where each point is a triangle vertex. Best meaning avoiding sliver triangles
- Triangles because GPU's are good at drawing them
- Used in GIS, maps, graphics, games
Delaunay.js
import { bowyerWatson, Triangle } from 'delaunay.js';
import Vector from 'vectory-lib';
function getRandomPoints() {
let points = [];
let nrOfPoints = 10;
for(let i = 0; i < nrOfPoints; i++) {
points.push(new Vector(
Math.random() * 100,
Math.random() * 100
));
}
return points;
}
let points = getRandomPoints();
let superTriangle = new Triangle(
new Vector(-1000, 1000),
new Vector(1000, 1000),
new Vector(0, -1000)
);
let triangles = bowyerWatson(superTriangle, points);
// Do something fun with the triangles!From a consumer (caller) perspective
- Super triangle must be big enough to cover all points
- From Russia
- Mountain climber
- Mathematician
- 1890-1980
- Delaunay triangulation 1934
Boris Delaunay

Adrian Bowyer and David Watson
Each published a paper of their own in the same number of The Computer Journal, Volume 24, Number 2, May 1981
- Adrian Bowyer: Computing Dirichlet Tessellations. page 162-166
- D. F. Watson: Computing the n-Dimensional Delaunay Tesselation with Application to Voronoi Polytopes. page 167-172


function BowyerWatson (pointList)
// pointList is a set of coordinates defining the points to be triangulated
triangulation := empty triangle mesh data structure
// must be large enough to completely contain all the points in pointList
add super-triangle to triangulation
// add all the points one at a time to the triangulation
for each point in pointList do
badTriangles := empty set
// first find all the triangles that are no longer valid due to the insertion
for each triangle in triangulation do
if point is inside circumcircle of triangle
add triangle to badTriangles
polygon := empty set
for each triangle in badTriangles do // find the boundary of the polygonal hole
for each edge in triangle do
if edge is not shared by any other triangles in badTriangles
add edge to polygon
for each triangle in badTriangles do // remove them from the data structure
remove triangle from triangulation
for each edge in polygon do // re-triangulate the polygonal hole
newTri := form a triangle from edge to point
add newTri to triangulation
for each triangle in triangulation // done inserting points, now clean up
if triangle contains a vertex from original super-triangle
remove triangle from triangulation
return triangulationBowyer-Watson (Wikipedia)
Vector math
moveTowards(v, length) {
let delta = v.sub(this).setLength(length);
return this.add(delta);
}
Color Systems, RGB
Color Systems, HSL


Voronoi

Georgy Voronoy
- Russian mathematician
- 1868 - 1908
- Advisor of Boris Delaunay
Triangle Math, part of Triangle class
edges() {
return [
[this.a, this.b],
[this.b, this.c],
[this.c, this.a]
];
}
hasEdge(edge) {
for(const e of this.edges()) {
if(e[0].equals(edge[0]) && e[1].equals(edge[1]) ||
e[1].equals(edge[0]) && e[0].equals(edge[1])) {
return true;
}
}
return false;
}
sharesAnEdgeWith(triangle) {
for(const edge of triangle.edges()) {
if(this.hasEdge(edge)) {
return true;
}
}
return false;
}equals(v) {
return this.x == v.x && this.y == v.y;
}Part of Vector class
Questions?
More
- My CodePen profile
- Coding Train Youtube with Dan Shiffman
- Voronoi pixel shader on Shadertoy
- Delaunay.js on GitHub
Triangles, Triangles and some Triangles
By Johan Karlsson
Triangles, Triangles and some Triangles
- 2