Explore the artistic technique of weighted Voronoi stippling in this 29-minute coding challenge video. Learn to implement the algorithm using p5.js and the d3.js Delaunay triangulation package. Dive into concepts like Delaunay triangulation, Voronoi diagrams, and Lloyd's relaxation algorithm. Discover how to calculate polygon vertices, areas, and centroids. Apply these techniques to create stippled images based on pixel brightness. Gain hands-on experience with coding examples, including drawing dots, calculating weighted centroids, and using delaunay.find(). Get inspired by various applications and extensions of the technique, with multiple p5.js Web Editor sketches provided for further experimentation.
Overview
Syllabus
Hello!
What is a Delaunay triangulation?
d3-delaunay package
Coding the delaunay triangulation.
What is a Voronoi diagram?
voronoi function on the delaunay object
Things you could try with the Voronoi diagram
Lloyd's "relaxation" algorithm
Calculate the average of a polygon's vertices
Calculate the area of a polygon
Calculate the proper centroid of a polygon
What is stippling?
Draw dots based on brightness value of pixel
Calculate a weighted centroid
Using delaunay.find
Ideas for you to try!
Goodbye!
Taught by
The Coding Train
