Coding Challenge #90: Floyd-Steinberg Dithering

Подписаться 1,7 млн

Просмотров 435 тыс.

50% 1

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: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #89: ...
🎥 Next video: • Coding Challenge #91: ...
🎥 All videos: • Coding Challenges
References:
📓 DHALF.txt: github.com/SixLabors/ImageSha...
📚 Processing Tutorial on 2D Arrays: processing.org/tutorials/2dar...
🔗 Dither on Wikipedia: en.wikipedia.org/wiki/Dither
🔗 Floyd-Steinberg dithering on Wikipedia: en.wikipedia.org/wiki/Floyd%E...
Videos:
🚂 My Tutorial on Pixels in Processing: • 10.4: Pixels! (The Pix...
🚂 My Video on 2D Arrays: • 9.15: 2D Arrays in Jav...
🔴 Coding Train Live 114: • Coding Train Live 114:...
Related Coding Challenges:
🚂 #50 Circle Packing: • Coding Challenge #50.1...
🚂 #85 The Game of Life: • Coding Challenge #85: ...
🚂 #107 Sandpiles: • Coding Challenge #107:...
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 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...
#dithering #stippling #floydsteinbergdithering #processing

Опубликовано:

10 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 354

@rzeka 5 лет назад

Dude I'm not even a programmer but this was really interesting! Kept my attention the entire time.

@joostvanrens 6 лет назад

"Sorry I lost my.... What I was doing here for a second" Pretty much sums up Dan's way of working. :-p

@rysea9855 4 года назад

You Dutch?

@tastyl2356 4 года назад

and that's a good thing

@dropdown77 6 лет назад

Curb Your Enthusiasm for Coding. Loving the intensity and your videos. Thanks Dan(LD)!

@ispringle 5 лет назад

I initially rewrote this in Python but it was S L O W. Re-rewrote it in C and not it's a very nice little utility that I use on a regular basis, thanks for the video dude. Keep up the great work! Love how you are making this stuff accessible to everyone.

@Rai2M 2 года назад

wiki makes this stuff accessible

@DrSpooglemon 11 месяцев назад

Python can be made to run more efficiently if you understand its idiosyncrasies.

@luigidabro 11 месяцев назад

@@DrSpooglemonbut never faster than efficient C

@DrSpooglemon 11 месяцев назад

@@luigidabro Sure, but it can be faster than people think!

@PressKribed 3 года назад

Your videos are not only comprehensive but also FUN. Thank you.

@sebastianrengelclaros3558 Год назад

Thanks for all the help, I was really struggling with this (this is part of my homework and I didn't catch the basics of the problem very much), but now I think I do understand a bit more. Thanks for all the work and effort you put in this.

@tommulvey4752 6 лет назад

Someday when I'm bored I'm going to recreate all these in python

@carterplasek498 6 лет назад

I have done so to a couple, and be warned, pixel manipulation is not as fast.

@tommulvey4752 6 лет назад

Carter Plasek I know, but it's still fun

@carterplasek498 6 лет назад

Oh, of course, python is certain to grant a good time :D

@tommulvey4752 6 лет назад

legobudgie it's okay! I'm just a freshman in University, and just learning as well:) I know python and c++ the best, and any java or js I know is from that hunk on screen

@simeondermaats 6 лет назад

Everybody started out like that. Even all those geniusses like Dan or Alan Turing or whoever.

@davidwu1907 4 года назад

I like this guy. he is so enthusiastic and full of energy.

@ChristianSchmid 6 лет назад

Hey Daniel, it's always impressive when you show us stuff in 30min, I use in Photoshop since 20 Years. Really love your channel and challenges and dithering ;-) .

@TheCodingTrain 6 лет назад

Thank you!

@CYON4D 4 года назад

Hey man, just wanted to say that your videos are simply awesome. Cheers!

@kilianlindberg 4 года назад

Darn, I love these coding videos 🙌🙌 well done

@MarcusHammarberg Год назад

I love these videos and think it a great introduction to algorithmic thinking. Your inspiration is contagious! If anything I would love to see a refactoring exercise of each to see it improved in maintainability and quality. Thanks a lot.

@101abuse 2 года назад

I love those "algorithm" video's, where you are putting them into processing!

@Wander4P 2 года назад

I've known about Floyd-Steinberg Dithering, but never looked into the algorithm. I never knew it was so simple!

@mariovelez578 2 года назад

Just made a cool application where I can convert any image into a LEGO mosaic, and it looks really cool when looking at a distance! Thanks for the coding challenge!

@slowdragon3023 3 года назад

I'm not great at coding but just found this channel and loving it. I feel like this guy would really like Return of the Obra Dinn since that's basically a game made with dithering.

@Hafgandil 6 лет назад

Wow.... this is actually helpful for my Shader Learning in GLSL :D Thank you!!!

@timofeyuvarov1267 Год назад

Thanks for the wonderful performance!

@atxorsatti 3 дня назад

i mean, the coding train, tsoding, and theprimagen are the gods of youtube programming

@Arrow6424 6 лет назад

Great the way you explain your thinking! So extremely helpful as i'm a beginner

@JakeFace0 6 лет назад

Really teaches me how much of a newB I am at programming

@dave6012 2 года назад

3 years later. Are you an oldG yet?

@capriguelleri Год назад

You're an eccentric genius!

@f55665566 2 года назад

thanks for great tutuorial! I"m attending the 2022 Genuary challenge and found your dithering challenge! Trying to translate the code from processing to P5js.

@electron7373 2 года назад

Fascinating! Go Dan!

@brocharognard 6 лет назад

Wow i've just discover your channel and it's awesomly pedagogically good and intertaining

@shayakoo1 6 лет назад

Dayum! I always wanted to make these.

@elikay2101 6 лет назад

I think it would be great if you did a challenge where you create an upscaling algorithm, similar to bilinear and linear upscaling you can find in programs like photoshop. There are some very advanced ones out there too that you can find in emulators for old pixel art games, although I don't know the names of them on the top of my head

@mateus44 6 лет назад

like hq4x

@leoweigand 6 лет назад

Loved the part where you posed for the thumbnail :D

@Samisage 6 лет назад

Keep up the good work! My coding club is now doing a lesson on Processing :)

@oi_faen 6 лет назад

this is nice for those who wants to show nice things on e-paper :)

@gimeron-db 3 года назад

Интересно будет попробовать использовать фиксированные палитры или поменять распределение цветовой ошибки на картинке (распределить с другим соотношением или по большему количеству пикселей). PS: Классный канал, где программирование и творчество встречаются вместе.

@exxzxxe 2 года назад

Best channel on RU-vid.

@em00k 4 года назад

Just a note on this, if translating to another language the "r = r + errR * 7/16.0" parts can give you values 255 which will cause artefacts. your rgbs need to be clamped so if 255 =255.

@xylonbeta4517 6 лет назад

wow... so this is the power of computer science... impressive...

@guinea_horn 6 лет назад

Where do you get all these awesome ideas? I'd love to attempt something like this myself but I wouldn't know where to start

@simonwillover4175 3 года назад

Oof! color pallete dithering? I didn't think of that genius artistry when I instantly came up with my own algorithm(s).

@some._earth 6 лет назад

That awesome dithering effect at 14:44.

@sigmareaver680 5 лет назад

For what it's worth, you can also explicitly make a float by appending 'f' to the number: 7/16f

@Alessandro-nq3tm 6 лет назад

A question Dan: why do that in the draw function? It's better do the loop once in the setup. Right?

@TheCodingTrain 6 лет назад

Yeah, since this is generating a static image it makes sense for it all to happen one in setup!

@xnick_uy 5 лет назад

I had the same question. Now I would like to see how the dithering behaves as we slowly introduce slight variations in the palette thresholds and definitions (or also mixing the RGB channels).

@Gabirell 6 лет назад

I love this guy. He is hilarious... And a programmer!? Xd

@LifEsYouTubeChannel 6 лет назад

When mum asks you "what are you doing?" you answer "Watching quantized kittens" and she's going to be like "wow... he's learning some kind of a quantum physics..." :D

@Skaggco 5 лет назад

@LifE's RU-vid Channel She can't prove that the cat is not alive if she can't see the screen

@FSFITA 5 лет назад

@@Skaggco Quantized schrodinger

@AlexandrBorschchev 3 года назад

goddamn nerd

@Brahvim 3 года назад

@@FSFITA xDDDDDDDDD

@kyleyael9482 2 года назад

InstaBlaster

@ScarlettNour 6 лет назад

Hmmm, this reminds me... have you ever seen Raven Kwok's work for Karma Fields? The videoclip for Greatness and the one for Skyline are just beautiful. Would love to see you try something like those. Anyway, thanks for the one more coding challenge!

@Wander4P 2 года назад

Really interesting how the video compression on the dithered cat @25:40 is completely lossless when viewed at the original 1080p scale. The pixel perfect black and white detail is completely preserved!

@islandcave8738 2 года назад

Yes a function is what I was thinking for that very similar block of code and repeated 3 times. And just pass the variations as parameters.

@DashNothing 6 лет назад

The beard is getting more and more majestic

@R4ngeR4pidz 4 года назад

Again super interesting and learned a lot, would have liked to see an example on the whiteboard to see what the formula of 7/16, 3/16, 5/16 and 1/16 on those surrounding dots was doing though You can sort of imagine it, but visualizing it would have been cool

@AJMansfield1 5 лет назад

For another challenge, you could try using k-means to select an optimal set of palette colors, if you haven't done that in a video already.

@WyMustIGo Год назад

k means sucks for photos, octree and median cut are better.

@fairydragonbreath9192 6 лет назад

I like processing. I've been playing with it for a bit, it's just that for some reason visual Studio doesn't like it. My apache server no prob. Thanks these videos are helping me get better.

@Driftload 5 лет назад

23:25 how I feel any time I finish writing in JavaScript and don't want to break it with missing closures again

@wojtek4351 4 года назад

Dan is looking good with the beared

@Max-yv2ws 6 лет назад

24:51 when you reach the bitrate limit because of the noise

@d_v_d1070 6 лет назад

YIPPI! Processing3 is used = +1000 points

@ThankYouESM 4 года назад

Would also love to see the curvy lines version that sort of looks like a maze... better yet... that is a maze.

@aryamankejriwal5959 6 лет назад

I can’t stop staring at the floating tuft of hair at the beginning...😅

@joeedh 6 лет назад

If you're interested in image stippling, look up "poisson dart throwing" and "void-cluster method". A little trade secret, if you mean to apply relaxation to a stippled image, you might have to sharpen it a bit. Error diffusion will sharpen it a bit for you (that's partly why it's so popular), but other methods won't.

@TheCodingTrain 6 лет назад

Thank you for these great tips!

@brascoarts2634 2 года назад

Nerdiest guy I know ❤!

@dappermink 6 лет назад

All of your coding challenges are great, they are so much entertaining and give tons of ideas to beginners wondering what to code. Plus you really make them easy to follow..... but perhaps a little bit too easy. I definitely know you do that for the sake of clarity, but sometimes it makes your code choices really ugly and unseemly. I honestly think it would be really important for your viewers to see you working more on the code rather than the ouput only, even though it doesn't make it more impressive.

@TheCodingTrain 6 лет назад

Thanks for this feedback, I completely understand what you mean and will consider this in the future.

@dappermink 6 лет назад

Thanks a lot for your reply and even more for your consideration, I'll look forward to it!!

@absolutedogy346 6 лет назад

I love watching his videos just for entertainment but I would love to see more practical approaches to some subject

@marcellomarianetti1770 6 лет назад

Too Easy? AHAHAHAHAH

@TheBytesCode 6 лет назад

Sitting here bored @ 12:30am... sees an upload from this mint fella! I love your attitude and enthusiasm, actually makes me interested in Hungary.

@TheBytesCode 6 лет назад

Damn autocorrect, meant to say that it makes me interested in things I would otherwise not.

@TheMazyProduction 6 лет назад

Checked your time zone you are off.

@TheBytesCode 6 лет назад

Mazeyar Moeini I'm not in Hungary. That was autocorrect, I decided to leave it in there for the giggles.

@jtkyber 5 лет назад

I saw dithering as an option in a Skyrim ENB and always wondered what it did

@LordMeIVdulindraxe 6 лет назад

I like your videos! And I was wondering if you could make an hypercube animation on Processing...

@ruchisheth9430 5 лет назад

It would be interesting to have a video on index mode of photoshop in processing. To get custom colors with dithering types in an image.

@erichomsy 3 года назад

i wanna smoke with this guy i feel like he'll talk your ear off then fall asleep eating a microwave burrito

@unoriginalpun Год назад

In the p5 web editor, for some reason, even though you’re dithering it after displaying the original, it is showing the original dithered as well.

@ROVAKAN 2 года назад

thats fun

@wing-it-right 6 лет назад

I ran into a toolbar today, which is a plugin for atom to quickly setup a server and quickly create new P5 projects. Nothing special but kind of cool. I am not related to the project. just a quicktip - "p5js"or sth in atom package manager. And HEY I totally love your channel. :)

@OG_CK2018 4 года назад

"Dithering Dithering Dithering" -- The coding train 2018

@mrmeowbeats7842 5 лет назад

i feel like this would be a very handy method for increasing the resolution of an image (if you added pixels between each existing one to create a larger image)

@moritzheinzel815 4 года назад

there wouldnt be more detail tho

@VrIgHtEr 4 года назад

You need to keep a temporary row of floats to buffer error values for the next row (you only need one float for the pixel to the right, since it's always going to be the next one to be processed). A pixel is made up of its own value, as well as the errors of 4 other pixels. With each partial error you're adding you're doing "max(0, min(255, round(current_value + error)));" . Also, suppose a (for the sake of simplicity, assume grayscale) pixel has a value of 255, and its top left neighbour has an error of 16. This means that it would propagate 1 to the pixel in question, making the color (which can go from 0 to 255) into 256... this is a value that can't be stored in a value of type color, which only has 8 bits per color. Processing will do its clamping et voila: the error wasn't propagated at all. It looks like it's working. It's not working right though. You need to add all the errors and *then* convert back to a color. Converting to a color after adding each partial error results in lost information

@_zEuS0390_ 5 лет назад

How did you learn all this stuff? You're super awesome.

@esebrooks9411 6 лет назад

My man Daniel looking like Luke Skywalker

@ZombieBrainz 6 лет назад

Ese Brooks Luke or Chewbacca - I can’t make up my mind... ;-)

@rayredondo8160 6 лет назад

22:00 Order of operations. errR gets multiplied by 7, and that float is divided by 16. It is all floating point in the end because the float comes first. I know this because I often get wrecked with integer division, but I know this is safe. Also, consider consolidating the definition of r and the addition on to one line.

@TheCodingTrain 6 лет назад

Thanks for this correction!

@skyslasher6267 2 года назад

I did this years ago in highschool for a project, i didnt know it was a thing that actually existed. I used processing also, thats so weird

@electronicfeelings5832 6 лет назад

Set that factor to 50, while using Greyscale. 50 shades of Gray!

@gustaf_2611 4 года назад

1:24 lands perfectly on the nose

@GuslucasPlay 2 года назад

Awesome content!! I have a question though.. If there would be 2 '(255,255,255)' pixels next to each other, when quantizing the first, wouldn't it try to add 7/16th of the red (255) (and also for the other channels) to the next pixel, extrapolating 255? Is that being corrected by the library or did I get something wrong?

@cmyk8964 2 года назад

The fractions are of the INACCURACY between the original color and dithered color. So if you can use 255,255,255 in the dithered image, the difference will be 0. You should probably include that in the finished palette anyway, since if not, the difference could explode to infinity unless clamped.

@keen_nocap 2 года назад

I think I learned more about coding concepts from this video than I did from my $70,000 master's degree education.

@filipemecenas 2 года назад

Thanks im studing dither

@superarcherg5320 3 года назад

you murdered youtubes compression lol

@celivalg 6 лет назад

for " r = round(r/255)*255", if you are in optimization, I think that an if statement is better, since you only do one test rather than a division, a test and a multiplication (the test come from the round function, i'm not sure how it's implemented in java, but the fastest way that I can think about comes with a test... and a few more number manipulations (I'd guess a truncation, a subtraction, a test and an addition)... In this case the optimization doesn't matter much since you only compute a relatively small image once on a powerful enough computer, but I had once a occasion where little optimizations like this helped a small computer do image processing much faster, reduced the time by a factor of at least 50... Or you could do it with 'r = r/128' if r is an integer (which I think it is) to get only one line, I think it should be a bit slower than the if statement, though I'm not sure, not too too familiar with assembly yet

@TheCodingTrain 6 лет назад

Thanks for the feedback!

@naxaes7889 3 года назад

You have to consider when you do branching, the processor have to do a branch-predication. Basically, when it can take two different code branches, it'll guess which path the program will take and load code for one of the branches. This is so it can do optimizations as *out of order execution*, and *parallelism*. However, guessing wrong branch means that everything it has loaded and calculated in advance must be discarded, and the correct code has to be loaded. This is **slow**! So to know whether an if-statement is faster, you'll have to do what all optimization questions require; you have to measure it yourself!

@YoBro230 6 лет назад

I love seeing the quality dropping at 25:02 because of the fixed bitrate and the crazy detail :D

@phookadude 5 месяцев назад

I had an idea, take a dithered image and reverse it back into a continuous image but make it so that new image is much smaller than the original but still approximates the dithered image so it could be recreated from the smaller data set. A sort of lossy compression.

@tessler9710 5 лет назад

So I just learned how to unHDify a picture and I can't resist the urge to implement it myself

@delyodobrev3382 5 лет назад

Hey Dan! Great video. I have a question: since I'm more acquainted with JS, I tried coding it in p5, following those instructions (and checking p5 ref to verify the commands exist). Even stippling alone doesn't seem to work at all. I then checked your GitHub source and saw that it was much quicker to code in .pde than in p5, what with all the long functions. I was wondering, is that because of the difference between JS and Java array structure? You can't simply grab a pixel from the array and get its blue value with one line of p5 code? Keep on being awesome ;)

@TheCodingTrain 5 лет назад

check this video about pixel array in p5 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nMUMZ5YRxHI.html

@datababy8031 2 года назад

Hi Dan (or other members of the coding train community), I was wondering how you choose which language to use ? whats the deciding factor between p5.js and processing for this project? and which projects are stereotypically best suited to which language ?

@TheCodingTrain 2 года назад

Hi! I often pick Processing for image processing applications b/c canvas can be quite slow (w/o the use of shaders), but otherwise it's often arbitrary. I like using p5js especially when I want to make sure I can run the result in the browser!

@MrRys 6 лет назад

Lol... I just had a final exam from this topic

@pranav_r 6 лет назад

I wish I had final exams on topics like this

@MrRys 6 лет назад

it's not as exiting when it's only theory and pseudocode :D :D

@varunnagnure9643 3 года назад

@@MrRys right

@elijahknightskye3175 5 лет назад

LOVE WHAT YOURE DOING =)

@ophello 4 года назад

Would this have been more efficient if you converted the image to grayscale first, then operated on just brightness values?

@UweEichel 6 лет назад

Since you didn't go to the very right and the very bottom of the image, will those pixels still be quantized? I feel like they are not because those pixels are never checked, right?

@PerMortensen 5 лет назад

Correct.

@FixTronics 3 года назад

Great video But how do we extract the resulted Image to be used in a different location.. Laser engraver for example Thanks

@mystica-subs 6 лет назад

int MewR... your kitten has imprinted itself on your brain ;)

@numero7mojeangering 5 лет назад

you could use PVectors to store the RGB colors

@darcipeeps22 6 лет назад

I like dis

@Morszczux 6 лет назад

I'm going to do this in OpenFrameworks in C++! :D

@NatetheAceOfficial 6 лет назад

The easiest way to achieve this effect? GameBoy Camera.

@Bodyja 5 лет назад

"The times you have to see duplicate code before extracting it into a function is 1" Hmmmm 🤔 23:00 Not gonna lie, I cried when I saw it xD

@Alex4n3r 6 лет назад

Is this helpful when you have a beamer presentation but the resolution change makes your images look bad?

@Holobrine 5 лет назад

You should make a quantize function that takes a number and a factor.

@SellusionStar 6 лет назад

Two questions: when you round the color values, isn't that also a function which uses an if statement? If so, is round() not only more elegant to write, but also faster though? And by that I mean something that's going on under the hood in the implementation of processing.

@dappermink 6 лет назад

You don't need to use an if statement in order to code your round function, for instance: int round(float x){ return x+0.5; }

@SellusionStar 6 лет назад

Quentin Januel oh yes, I see. Cool trick. Thanks for The answer. :)

@dappermink 6 лет назад

SellusionStar You are very welcome :)