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

IKEA September 2019

Virginia Kraljevic

virginiakraljevic.com

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 triangulation

Bowyer-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

 

Triangles, Triangles and some Triangles

By Johan Karlsson

Triangles, Triangles and some Triangles

  • 2