Coding Challenge #90: Floyd-Steinberg Dithering

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=0L2n8Tg2FwI


Duration: 28:51
421,228 views
8,665

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/90-dithering

πŸ•ΉοΈ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/-YkMaf9Ea

πŸŽ₯ Previous video: https://youtu.be/G1EgjgMo48U?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Next video: https://youtu.be/JrRO3OnWs5s?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
πŸ““ DHALF.txt: https://github.com/SixLabors/ImageSharp/blob/master/src/ImageSharp/Processing/Processors/Dithering/DHALF.TXT
πŸ“š Processing Tutorial on 2D Arrays: https://processing.org/tutorials/2darray/
πŸ”— Dither on Wikipedia: https://en.wikipedia.org/wiki/Dither
πŸ”— Floyd–Steinberg dithering on Wikipedia: https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering

Videos:
πŸš‚ My Tutorial on Pixels in Processing: https://youtu.be/EmtU0eloTlE
πŸš‚ My Video on 2D Arrays: https://www.youtube.com/watch?v=OTNpiLUSiB4
πŸ”΄ Coding Train Live 114: https://youtu.be/iCxqLVm2H3w?t=8474s

Related Coding Challenges:
πŸš‚ #50 Circle Packing: https://youtu.be/QHEQuoIKgNE
πŸš‚ #85 The Game of Life: https://youtu.be/FWSR_7kZuYg
πŸš‚ #107 Sandpiles: https://youtu.be/diGjw5tghYU

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/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://discord.gg/hPuGy2g
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— 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-of-Conduct

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

#dithering #stippling #floydsteinbergdithering #processing



Other Videos By The Coding Train


2018-01-30Coding Challenge #91: Snakes & Ladders - Part 2
2018-01-29Coding Challenge #91: Snakes & Ladders - Part 1
2018-01-28Live Stream #116.2 - Snakes & Ladders Continued + 2048
2018-01-27Live Stream #116.1 - Snakes & Ladders
2018-01-2410.15: Neural Networks: Backpropagation Part 2 - The Nature of Code
2018-01-2310.14: Neural Networks: Backpropagation Part 1 - The Nature of Code
2018-01-2210.13: Neural Networks: Feedforward Algorithm Part 2 - The Nature of Code
2018-01-20Coding Train Live 115 - Backpropagation
2018-01-19Live Stream #114.2 - Revisiting the Feedforward Algorithm
2018-01-1810.12: Neural Networks: Feedforward Algorithm Part 1 - The Nature of Code
2018-01-16Coding Challenge #90: Floyd-Steinberg Dithering
2018-01-1510.11: Neural Networks: Matrix Class Improvements - The Nature of Code
2018-01-13Coding Train Live 114: Neural Networks Continued & Dithering Challenge
2018-01-11Reporting a WebGL Bug for p5.js
2018-01-1010.10: Neural Networks: Matrix Math Part 4 - The Nature of Code
2018-01-0910.9: Neural Networks: Matrix Math Part 3 - The Nature of Code
2018-01-0910.8: Neural Networks: Updating Code to ES6 - The Nature of Code
2018-01-08Coding Challenge #89: Langton's Ant
2018-01-06Live Stream #113: The Return of Neural Networks
2018-01-0318.8: 3D Custom Shapes - WebGL and p5.js Tutorial
2018-01-0218.7: Loading OBJ Model - WebGL and p5.js Tutorial


Tags:
live
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
live stream
itp nyu
class
processing coding challenge
challenge
codingtrain
processing
code challenge
dithering
stippling
floyd-steinberg dithering
floyd-steinberg algorithm
dithering algorithm
dithering art