Coding Challenge #47: Pixel Sorting in Processing

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

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

50% 1

In this coding challenge, I implement “Pixel Sorting” in Processing (Java). Using a “selection sort” algorithm, I sort the pixels of an image by brightness and hue. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #46.1...
🎥 Next video: • Coding Challenge #48: ...
🎥 All videos: • Coding Challenges
References:
🔖 Sorting Algorithms Visualized: bost.ocks.org/mike/algorithms/
Videos:
🎥 Livestream Archive: • Live Stream #70: Codin...
Related Coding Challenges:
🚂 #114 Bubble Sort Visualization: • Coding Challenge #114:...
Timestamps:
0:00 Introduction to Pixel Sorting!
0:38 You can download image and code from the code examples
1:00 Starting to Code!
1:27 Creating a blank image
1:50 Manually adding each pixel to a blank image
4:20 Discussing sorting algorithms!
5:18 Implementing the selection sort algorithm to sort the pixels by their brightness
12:23 Sorting by hue
13:12 Things you could do!
13:45 Animating the sorting process!
15:32 Testing and refactoring!
19:36 Conclusion!
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...
#pixelsorting #selectionsort #processing #java

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

30 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@atomicnumber80 6 лет назад

cringe...?? why, because he's a happier person than you? you're amazing, Dan!

@noelearlwatson2724 7 лет назад

This is the least "cringy" channel I have seen. I have been following you since the start of last summer and you really have inspired me to continue to program stuff.

@Sigfredagerbo 5 лет назад

Cringe cringe

@3mroos4 7 лет назад

Who writes cringe? Let me at him! No but seriously, I think Dan is like the coolest teacher ever!

@jibxjib 7 лет назад

I love this channel so much. Makes procrastinating better !

@Sigfredagerbo 5 лет назад

Cringe cringe

@abdulalhazred5924 5 лет назад

そうだね

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

You know, if you could reverse this sort by recording all the pixel sorting, you could make a really interesting way to cryptographically hide the contents of an image, with the reverse sort instructions being the key

@EdensPersona 7 лет назад

I found this channel not to long ago and it has quickly become one my favourites. I absolutely love following along to all of your coding challenge videos!

@ARatQuiRit 7 лет назад

I wil bingewatch all "Coding challenge" playlist tonight ^^ (not sure for spelling lol)

@davidramos5171 7 лет назад

I found this channel not to long ago, and I'm loving every video! I have watched almost every single video of your p5 tutorial playlist and the coding challenges and it has helped me a lot on my programming, keep the good work!

@letsgocamping88 7 лет назад

Coding challenge, sudoku puzzle solver. Either using recursion to solve or try to emulate a human method of solving! Great channel BTW

@OKay5067 5 лет назад

I wrote a blog about it so maybe you wanna have a look: opensourc.es/blog/sudoku

@FickPockLGD 7 лет назад

i've been watching this coding cahllenges for 2 hours now. One of the best channels i've seen and im waiting for more coding challenges videos. Excellent work, keep it up

@TheCodingTrain 7 лет назад

So nice to hear, thank you!!

@FickPockLGD 7 лет назад

I can't believe you replied to me! I'm so happy right now, literally you inspire me to be a programmer :DDD

@GG43V3R 7 лет назад

I LOVE YOUR SINGING AND DANCING AND FLOWER LOVING COMMENTS AND RAINBOWS!!

@zlyfer 7 лет назад

As a german hobby programmer these Coding Challenges are probably the best in the world.

@zawzero 7 лет назад

How does it matter you are German?

@zlyfer 7 лет назад

Because with english as my second language it's easy to understand what he says but not so easy to understand the jokes everytime. I think he is very funny and good in explaining things.

@zawzero 7 лет назад

zlyfer Geht mir genauso. Der Typ ist bombe.

@jakoblenke3012 7 лет назад

zlyfer ich verstehe alles super ;-)

@zlyfer 7 лет назад

GamerskingLP Ich eigentlich auch, aber manchmal verstehe ich ein paar Sachen erst nach ein paar Sekunden. :'D

@jonplaza81 7 лет назад

Somehow found your channel and only regret it 30% of the time. Keep being you man, you're awesome. Subscribed

@ugh4719 7 лет назад

I've just discovered this channel, and I already love it. It's hard to understand but so fascinating

@matthehat 7 лет назад

I love these videos. I downloaded processing a couple of years ago and messed around with it but didn't really see much potential in it. Now that I've seen your videos I'm hooked!

@TheCodingTrain 7 лет назад

That's so nice to hear!

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

This is probably the only channel that teaches me something while grabbing my interest. Subscribed

@quassseabass2770 7 лет назад

Hi Daniel :) I'm loving this series! I only found your channel a couple of days ago but I've been working my way through these videos and trying to replicate your code in Python, which I'm learning at the moment. Thankyou so much for the inspiration, my understanding of concepts like working with canvases through Tkinter and Pyglet is coming on in leaps and bounds thanks to your videos. Keep up the amazing work! PS. My favourite flower is the French Hydrangea

@mohddanish3813 5 лет назад

i love u

@rydera3516 7 лет назад

happy new year, Daniel! keep going with the great videos!! P.S.: i wanted to thank you this way for these coding challenges, which inspired me to start learning to code.. and since you're so good at explaining stuff, i decided to do so with your tutorials, obviously:)) P.P.S.: i love those cringy moments when you start talking to yourself:))))) have a great year!

@gamingastronamy8615 5 лет назад

Sunflower: I don’t feel so good

@OMARYassin1 5 лет назад

😂 😂 😂

@kalebdesousa355 7 лет назад

Love seeing these videos!! Looking forward to the next one.

@Lostpanda123 7 лет назад

Great channel, and a great tutor! Thank you for being you. :)

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

Again, a life-saving video. True gold.

@ClaudiaOfTheWorld 7 лет назад

Dan your tutorials are so inspiring! Thank you so much for making these, you are the sunflower that brightens our day 🌻 my favourite flower is nigella! you're like the cool coding big brother I never had...

@TheCodingTrain 7 лет назад

SO nice to hear, thank you!

@MrSamisack 7 лет назад

Love your videos, keep making them :D

@marcusloar8307 7 лет назад

Really enjoy watching the videos! You're amazing. More Java please!

@97scuoch 7 лет назад

Daniel your not cringey! :)

@harleyspeedthrust4013 6 лет назад

You can have custom sorting with Java with the Comparator or Comparable interfaces.

@okie9025 5 лет назад

What about making the sorting algorithms yourself and not just making things even more complicated?

@livingfray2340 5 лет назад

In what world is reimplementing a sorting algorithm less complicated than using comparators, which are designed for exactly this sort of problem?

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

I didn't get a single word what you explain but watch the full length of video because it was interesting ... Good job gentle man

@eliascaceres3147 7 лет назад

Wow I have that feeling like I'm waiting for the next episode of the walking dead, in this case the next coding challenge xD

@TheCodingTrain 7 лет назад

That is maybe the nicest thing ever.

@iron05agario40 7 лет назад

+Daniel Shiffman hy im a kid and i love codin can you recomende me a logiciel

@Min3vidz 7 лет назад

You said you'd link to a document that explained a bunch about sorting algorhytms, but it isnt in the description. Could you please update it so that I can read it? :)

@iron05agario40 7 лет назад

+Daniel Shiffman can you defrich this code: 01101000 01111001 00100000 01100100 01100001 01101110 01101001 01100101 01101100 00100000 01101000 01100101 01110010 01100101 00100000 01101001 01110011 00100000 01111001 01101111 01101001 01110010 00100000 01100010 01101001 01100111 00100000 01100110 01100001 01101110 00100000 01110000 01101100 01110011 00100000 01100011 01100001 01101110 00100000 01111001 01101111 01110101 00100000 01110100 01100101 01101100 01101100 00100000 01101101 01100101 00100000 01100001 00100000 01101100 01101111 01100111 01101001 01100011 01101001 01100101 01101100 00100000 01110100 01101000 01100001 01110100 00100000 01100011 01100001 01101110 00100000 01101001 00100000 01110011 01110100 01100001 01110010 01110100 00100000 01110000 01110010 01101111 01100111 01110010 01100001 01101101 01101001 01101110 01100111

@mattcaimi 7 лет назад

I cracked your code Agar Mobile "hy daniel here is yoir big fan pls can you tell me a logiciel that can i start programing"

@seancpp 5 лет назад

I love these videos and I love Processing/p5.js

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

1:54 Presenter: "Ooh look, there's a weird bar there. That's a glitch with my camera." Hipster NFT collectors in 2021: "I'll give you 420 ETH for it."

@djune_ 7 лет назад

That outro clip with the dancing Dans is top-notch

@MistahBradley 7 лет назад

I wish I could see this guy stoned as hell doing a challenge.

@LastRellik 7 лет назад

In your 800 * 400 pixel picture using selection sort, your algorithm is doing (800 * 400) ^ 2 calculations, which is 102,400,000,000 calculations. If you were to use a more efficient algorithm, like mergesort, heapsort or quicksort, you would drop the number of calculations down to Log(800 * 400) * (800 * 400), which is 1,761,648 calculations in the worst case. That's 5,812,738% more expensive than it needs to be because of your poor choice of sorting algorithm. That's why your program was running so slow.

@TheCodingTrain 7 лет назад

+LastRellik thanks for the thorough evaluation!!

@LastRellik 7 лет назад

Daniel Shiffman I love your videos, but even the fastest computer in the world couldn't solve that problem that way faster than my desktop could with a more efficient algorithm. I was blown away when you started using selection sort.

@lithiumfrost9498 7 лет назад

He did mention that it was just for simplicity's sake and that he could make great use of a fancy alg... 5:02

@LastRellik 7 лет назад

LithiumFrost True, but it could barely even solve the problem on a relatively small picture. I recreated this in just Java and can do huge resolution pictures in 2 seconds max. This could have been a great opportunity to show how important big O really is when it comes to solving large problems. 5,812,738% is no insignificant percentage.

@lithiumfrost9498 7 лет назад

Well, I think you're missing the entire point of this series. The goal isn't to create beautiful and efficient programs or teach people the best way of doing something, the goal is to showcase some problem or concept and inspire the viewer to go out and create their own, better way of doing it. (which is exactly what you've done) Expecting this series to always use best practices is a little unrealistic. Just my opinion though.

@alekmoth 7 лет назад

int j = i + 1; // start with the next pixel. why compare with yourself?

@kamoroso94 7 лет назад

alekmoth Also the outer loop should loop while i

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

what if i is already the brightest pixel? then you end up swapping it with the second brightest

@BenRangel 7 лет назад

This is like arrays, for-loops and sorting basics in a nutshell. Think I'll show this to my friend who's just getting into programming

@howardbaxter2514 7 лет назад

BenRangel I might recommend this to my old Comp Sci/Calculus teacher.

@SaarN1337 7 лет назад

You're so great at teaching! I mean, besides being sharp (and hyperactive? lol) it's all very down to earth and very easy to understand. Sadly, I'm not really into flowers (besides edible veggies?) but I do love your positive vibe. Happy Hanukkah ;)

@TheCodingTrain 7 лет назад

Thanks so much for the nice feedback!

@Joshk326 7 лет назад

This was actually helpful for a project I'm doing

@trumanknight873 7 лет назад

Love the videos. Keep up the awesome work! You should do a coding challenge for Doodle Jump.

@K-Cylion 7 лет назад

Could you make a machine learning program that will load a picture and try to recreate it?

@OMARYassin1 5 лет назад

What do you mean by "recreate" it? It can already copy it and paste it

@iamlulu6196 7 лет назад

Just recently discovered your Videos But you are the reason i wanna get into coding Thank you :)

@TheCodingTrain 7 лет назад

I'm excited to hear that!

@MrBittu92 7 лет назад

This is awesome. I like your style. Not my serious C++ professor from the college.

@kosmic000 7 лет назад

amaizng as always :)

@GalHorowitz 7 лет назад

I must say you are the best teacher I ever "had". :)

@kevnar 7 лет назад

I made a program that creates artificial life out of pixels. Each pixel only has one trait: color. It uses a target image to test which pixel is more "adapted" to its environment. The pixels fight it out, and whichever pixel is closer to the color of the target image in that position wins and has a slightly mutated offspring. Repeat a million times and eventually the pixels have formed a civilization that looks pretty much like the target image, except it's writhing with life. See my channel for a video called Pixel Evolution.

@EDToasty 6 лет назад

that is really cool!

@santiagoboada9843 6 лет назад

Can you upload some video showing the code working?

@Kitulous 6 лет назад

Have you deleted or hidden the video?

@Memory_Blanks 6 лет назад

kevnar checking out!!

@LetTheWritersWrite 5 лет назад

Dude I can't find it!

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

u r sooo cool for making this tutorial

@TheGammaFrog 7 лет назад

This guy is the greatest!

@Q_20 7 лет назад

That outro is dope

@Yogurdenaranja 7 лет назад

This is so coollll t_t I did one program similar, but it was a random paintings generator, choosing one background (that was basically a landscape, a Monet or whatever you want) + a portrait, and analysing the pixels the contrast and hue changed to make it logical :)

@TheCodingTrain 7 лет назад

cool! Would love to see this!

@jacodicarlo6490 7 лет назад

love your vids

@egvegvegvegv 7 лет назад

You man are great fun!

@baqikenny 7 лет назад

Love this

@ARatQuiRit 7 лет назад

Game of life next episode !

@quassseabass2770 7 лет назад

ARatQuiRit I'll second that!

@pazka 7 лет назад

I love what you do ! I don't know if it already has been said but could you use a counting sort ? It would be much faster and with the correct diplay , fun to watch ( for example seeing a pink pixel go trough the image and seeing the color counter updating, etc.. ). I just don't know if an array of 16 million int is allowed in Processing. Or create a dynamic array ?

@Holobrine 5 лет назад

Image sorting sounds like an interesting way to visualize sorting algorithms.

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

Hey Dan!! Very nice ideas. Does processing (or p5.js) work with DICOM images (DICOM is kind of digital images used in medicine, mainly in diagnostic images like x-ray or CT images?

@Tortuex_ 7 лет назад

I LOOOOVE THE OUTRO 😍😂

@squishedtopieces185 7 лет назад

My favourite flower is a dandelion P.S I also am a supporter of rainbows, flowers etc.

@TheCodingTrain 7 лет назад

Oh, I love dandelions!

@squishedtopieces185 7 лет назад

;-)

@WinterGibbs 7 лет назад

i dont even code and these are cool as shit. love this channel.

@TheMaxstick 7 лет назад

i love black rose :3 it's look cool :p and nice video you have there love your videos

@sinomirneja771 7 лет назад

you could cheat to make the animation run faster. calculate you result picture in setup, an in draw replace the pictures. (so you are not sorting in draw)

@eldronado 7 лет назад

Yeaaah...that's what we see in every video game trailer

@TheCodingTrain 7 лет назад

yes, good suggestion.

@sinomirneja771 7 лет назад

haha

@xXOMwtfFGXx 7 лет назад

+Daniel Shiffman (why doesn't this work anymore?!) Is it possible to calculate the algorithm with a gpu? I'm just a "hobby programmer" and don't know much about processing but there should be a way to use something like openGL.

@carlossoto9511 7 лет назад

JohnSchnee you could, but I'm not sure how efficient it'd be on a gpu, as you'd have to find a way to paralellize it on each pixel. I might try doing quicksort on opengl though, you just gave a new coding challenge

@Shiro-ii6nw 7 лет назад

I saw your purple rain challenge and lighting was missing so, why not do a lighting challenge. One that strikes everywhere few second from 1 strike to 3 or 4 that would look cool

@kamoroso94 7 лет назад

Aero I was inspired by that video and made a demo with lightning :) You can check it out at kamoroso94.github.io/thunderstorm

@Shiro-ii6nw 7 лет назад

Kyle Amoroso nice that was cool, where do you write the code?

@Nadeem460 7 лет назад

Nice, Can you share the code ?

@kamoroso94 7 лет назад

Nadeem 460 It's on GitHub, github.com/kamoroso94/thunderstorm

@Nadeem460 7 лет назад

Kyle Amoroso Ok Thanks I'm learning JS on my own I know C we learn it on school its a little bit similar.

@aSameplayer 7 лет назад

it would be very great if you would do some videos on how to create cone particle effects with Sin and Cosine. i love watching videos like this

@TheLifeofAdamOnYoutube 7 лет назад

Hey Dan, I was wondering if you have any videos to explain programming from the very start? You explain about downloading like templates but i dont get how that works etc, cheers :)

@monish1478 7 лет назад

+Daniel Shiffman, can you further elaborate on your "typo" at the end of your video? Why wouldn't you swap in the outer for loop? Thanks!

@xnick_uy 7 лет назад

I like this one's simple program yet appealing results. I am curious about how would this benchmark against a native sorting function ( with improved algorithms). But I'm not sure how to get the same animation effect out of a single call to the sorting function.

@anandsuralkar2947 5 лет назад

I came up with swapping algorithm myself when doing a introductory programs in python actually making a phibonacci series

@minarashad511 5 лет назад

YOU ARE ***AWESOME*** AND ***INSPIRING***

@bobke0007te 7 лет назад

please do a coding challenge for the koch snowflake, but then also with every other possible shapes

@TheCodingTrain 7 лет назад

that's a great idea.

@mattcaimi 7 лет назад

Hi Dan, Couldn't you use any "off-the-shelf" sorting algorithm you like and customize how the pixels compare to each other? I'm sure lots of coding beginners appreciate you showing the implementation of selection sort, although they should also get used to trusting black boxes. Wonderful videos dude! Matt

@TheCodingTrain 7 лет назад

Yes that's absolutely correct!

@Akhbash 7 лет назад

An idea to speed up the sorting algorithm would be to decrease the images resolution and then make each pixel bigger, so it's more notable what's going on. Also for this matter it would be nice to see something about how to increase an images dimensions by types of interpolation like bicubic interpolation. BTW: Sunflowers rules!

@TheCodingTrain 7 лет назад

+Akhbash great suggestions! 👍

@Smittel 7 лет назад

What if you make the hue the vertical position and the brightness the horizontal?

@YawnAmphi 7 лет назад

Would be interesting to also focus on the coding practice itself. How about a test-driven coding challenge? :)

@typhlosion_the_volcano_pokemon 5 лет назад

I’m from KS, so I love sunflowers! 😀

@PotatoKaboom 7 лет назад

My favorite flower is the Caesalpinia pulcherrima

@TheCodingTrain 7 лет назад

oh, nice one!

@lamo440 5 лет назад

How can I get binary image using threshold selection concept after converting rgb to greyscale.. is it required to read pixel values of greyscale if so how an I do it Java plss help.

@5-meo-dmt299 5 лет назад

Why Selection Sort??? Why not Counting Sort???

@Taras195 7 лет назад

Woooo! Really nice! I'm thinking about using the Processing in my student's semester work. What image formats does Processing work with?

@TheCodingTrain 7 лет назад

Processing can read JPGs, PNGs, and more. It can also work with video files as well as live video capture.

@Taras195 7 лет назад

Daniel Shiffman Omg, i'm soo excited! I absolutely LOVE your videos, and processing looks very interesting and much more easier comparing to winapi's MFC or Qt. Thank you a lot for answer! I'll be waiting for next video!

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

I don't know about flowers but I like kittens And I'm searching for the people that write "cringe". I'm coming for you

@lukasnejezchleb1550 7 лет назад

Hello, I have a question. can you import an excel document into the processing? and how? thank you very much

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

my favorite flowers are hibiscus, but sunflowers are gorgeous as well :)

@TheCatull Год назад

Danke!

@TheCodingTrain Год назад

Thank you for the support!

@dudemanzero 7 лет назад

Looks like you made a program that makes cool glitch art instead of sorted images :o

@Alan-th6og 7 лет назад

I really like daffodils... You should code checkers!

@ramil17998 7 лет назад

Hello Daniel. Didn't really know where to write about it. You know how in Processing Code-Completion is Ctrl-Space on mac? That combination is already used by OS if one has a bilingual keyboard, so I can't use code-completion. I think it would be better if it was some other combination. Most commonly developers use TAB for that purpose. What do you think?

@persus2001 7 лет назад

Hey guys! I'm learning js but could some tell me what's the difference between null and undefined

@a.krishna3924 7 лет назад

hi why does it say "Could not find a method to load (file name)"?

@theoriginalone6011 7 лет назад

Your chanel is blowing up xD

@sven_93 7 лет назад

If you want to understand the sorting algorithms some more, i suggest you look up the RU-vid channel "AlgoRythmics". Really great visualization

@TheCodingTrain 7 лет назад

thanks for the tip!

@robertcoyle1532 7 лет назад

Yea! Processing again!!

@kuskus_th13 7 лет назад

Is Processing actually yours? Just asking because I was wondering recently. BTW grats for 165K subs and Merry Christmas!

@ingrimmmm 7 лет назад

processing.org/people/ 'Ben Fry and Casey Reas started Processing in Spring 2001 and continue to obsessively work on it. In 2012, they started the Processing Foundation along with Dan Shiffman, who formally joined as a third project lead.'

@kuskus_th13 7 лет назад

ingrimmmm ok

@ScruffyKiwi99 7 лет назад

How did you find such a beautiful outro?!

@ore2236 6 лет назад

A bubble sort would of looked super cool ! And maybe a counting sort would be faster ?

@cicciobombo7496 5 лет назад

Counting sort is good when there are relatively few options, here every pixel has 3 value 0-255, so you'd have 256^3 possibilities, not doable.

@Mikelectric 5 лет назад

how does the sorter know that its the brightest pixel if it cant look further down the line? or does it look at all the remaining pixels every time before deciding which one is brightest?

@umbertohe5723 5 лет назад

U are so funny 😂

@ikeepbees5563 7 лет назад

Daniel said that this process is very CPU heavy.. Is there a way you could utilize the power of your GPU to run programs such as this?

@TheCodingTrain 7 лет назад

There probably is a way with "shaders" yes!

@tobeypeters 6 лет назад

I don't understand ... The swap ... In JavaScript u can use tuples. There's different ways. You can: let swap = ([a,b]) => [b,a]; swap([1,2]); or [a[1], a[0]] = [a[0], a[1]]; There's always many ways.

@Forseti2 7 лет назад

The Coding Train: what causes those artifacts in sorted result?

@storm_osrs 7 лет назад

I'm new to processing but not to Java and I tried to do "size(img.with, img.height);" I only wanted to sorting picture to show but I get the error that I can't define size like that?

@ax3lscyth389 7 лет назад

Storm You can't define the canvas size with variables. You can only use ints.

@storm_osrs 7 лет назад

I know but it's kinda stupid because you could in processing 2 apparently

@Moinsen0815 7 лет назад

have a look: github.com/processing/processing/wiki/Changes-in-3.0#things-that-may-break-your-2x-sketches

@TheMashmeister 7 лет назад

Hey Let me ask a question if you can help me out here(Trying to make path planing using googlemaps for a robot in sea waters ) , So I am using Android studio. basically java , I open up the maps and take a snapshot, then I make that snapshot black and white, and then I have to remove the noise I figured out Ill use openCV and threshold , after that Ill use a small function to turn that byteArray and then use an algorithm for pathpalning, what would your suggestions be in approaching all this ?"