Stippling is an artistic technique that uses numerous dots to craft an image. In this coding challenge I attempt to implement a weighted Voronoi stippling algorithm with p5.js along with the Delaunay triangulation package from d3.js. Code: thecodingtrain.com/challenges...
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-...
p5.js Web Editor Sketches:
🕹️ Weighted Voronoi Stippling: editor.p5js.org/codingtrain/s...
🕹️ Circumcircle: editor.p5js.org/codingtrain/s...
🕹️ Delaunay Triangulation: editor.p5js.org/codingtrain/s...
🕹️ Voronoi Diagram: editor.p5js.org/codingtrain/s...
🕹️ Voronoi Phyllotaxis: editor.p5js.org/codingtrain/s...
🕹️ Voronoi Diagram colored by area: editor.p5js.org/codingtrain/s...
🕹️ Lloyd's relaxation: editor.p5js.org/codingtrain/s...
🕹️ Weighted Stippling - Size and Color: editor.p5js.org/codingtrain/s...
🕹️ Weighted Stippling - Abstract Pattern: editor.p5js.org/codingtrain/s...
🕹️ Weighted Stippling - Video: editor.p5js.org/codingtrain/s...
🎥 Previous: • Coding Challenge 180: ...
🎥 All: • Coding Challenges
References:
🔗 d3-delaunay: d3js.org/d3-delaunay
🔗 Weighted Voronoi Stippling: www.cs.ubc.ca/labs/imager/tr/...
🔗 Sweep Line Algorithm: en.wikipedia.org/wiki/Sweep_l...
🔗 Lloyd's algorithm: en.wikipedia.org/wiki/Lloyd%2...
🔗 Polygons and meshes by Paul Bourke: paulbourke.net/geometry/polyg...
🎨 Pablo Jurado Ruiz: / pablojuradoruiz
🔗 Stippling: en.wikipedia.org/wiki/Stippling
🔗 Voronoi Diagram: en.wikipedia.org/wiki/Voronoi...
🔗 Delaunay Triangulation: en.wikipedia.org/wiki/Delauna...
🔗 Mike Bostock's Voronoi Stippling: observablehq.com/@mbostock/vo...
Videos:
🚂 Pixel Array: • 11.3: The Pixel Array ...
Related Coding Challenges:
🚂 C4 Worley Noise: • Coding Worley Noise
🚂 33 Poisson-disc Sampling: • Coding Challenge #33: ...
Timestamps:
0:00 Hello!
0:37 What is a Delaunay triangulation?
2:31 d3-delaunay package
2:49 Coding the delaunay triangulation.
6:38 What is a Voronoi diagram?
9:17 voronoi function on the delaunay object
10:25 Things you could try with the Voronoi diagram
10:56 Lloyd's "relaxation" algorithm
12:07 Calculate the average of a polygon's vertices
15:30 Calculate the area of a polygon
16:45 Calculate the proper centroid of a polygon
18:47 What is stippling?
19:45 Draw dots based on brightness value of pixel
21:50 Calculate a weighted centroid
24:51 Using delaunay.find()
27:52 Ideas for you to try!
28:47 Goodbye!
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: kzitem.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#delaunaytriangulation #imagestippling #voronoi #sweepalgorithm #lloydsalgorithm #p5js #javascript
Негізгі бет Coding Challenge 181: Weighted Voronoi Stippling
Пікірлер: 193