In this coding challenge, I attempt to implement the Floyd-Steinberg Dithering algorithm and create a "image stippling" effect on an image (kitten, of course) using Processing. Code: https://thecodingtrain.com/challenges...

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...

🎥 Previous video:    • Coding Challenge #89: Langton's Ant  
🎥 Next video:    • Coding Challenge #91: Snakes & Ladder...  
🎥 All videos:    • Coding Challenges  

References:
📓 DHALF.txt: https://github.com/SixLabors/ImageSha...
📚 Processing Tutorial on 2D Arrays: https://processing.org/tutorials/2dar...
🔗 Dither on Wikipedia: https://en.wikipedia.org/wiki/Dither
🔗 Floyd–Steinberg dithering on Wikipedia: https://en.wikipedia.org/wiki/Floyd%E...

Videos:
🚂 My Tutorial on Pixels in Processing:    • 10.4: Pixels! (The Pixels Array) - Pr...  
🚂 My Video on 2D Arrays:    • 9.15: 2D Arrays in JavaScript - p5.js...  
🔴 Coding Train Live 114:    • Coding Train Live 114: Neural Network...  

Related Coding Challenges:
🚂 #50 Circle Packing:    • Coding Challenge #50.1: Animated Circ...  
🚂 #85 The Game of Life:    • Coding Challenge #85: The Game of Life  
🚂 #107 Sandpiles:    • Coding Challenge #107: Sandpiles  

Timestamps:
0:00 Introducing today's topic
1:20 Let's start coding!
2:44 An image is a grid of pixels
3:25 Quantizing an image to reduce the number of possible colors
6:24 Pull the red, green, and blue values of the pixel
7:11 Quantize the r, g, b values
8:21 Add loadPixels() and updatePixels()
9:11 Filter the image to make it greyscale
11:01 Add more color possibilities
13:01 Quantization of the error
16:01 Funnel the error
17:10 Write an index function
21:08 Update r, g, b values
24:13 Deal with the edges
26:55 Conclusion and suggstions for variations

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord:   / discord  
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#dithering #stippling #floydsteinbergdithering #processing