Coding Challenge #50.2: Animated Circle Packing - Part 2 (Kitten Addendum)

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

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

50% 1

In this multi-part coding challenge, I demonstrate how to use a circle packing algorithm. Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Animated Circle Packing - Text: editor.p5js.org/codingtrain/s...
🕹️ Animated Circle Packing - Image: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #49: ...
🎥 Next video: • A* Pathfinding Algorit...
🎥 All videos: • Coding Challenges
References:
💻 Various Circle Packing Tutorials: julienleonard.com/tutorials.html
🗄 Circle Packing on Wikipedia: en.wikipedia.org/wiki/Circle_...
Videos:
🎥 Part 1: • Coding Challenge #50.1...
🎥 Livestream Archive: • Coding Train Live 71: ...
Related Coding Challenges:
🚂 #47 Pixel Sorting in Processing: • Coding Challenge #47: ...
Timestamps:
0:00 Introduction
1:10 Pull the color value from the image
1:55 Add color variable to Circle class
2:35 Look up pixel color
3:58 Possible refinements
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...
#loadpixels #circlepacking #processingpixels #processing

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

30 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@paulkerrigan9857 6 лет назад

I love your videos. Don't listen to your audience when they say "cringe", the way you teach is fun and engaging. I particularly like the fact that you build the program in iterations, running the code each time, explaining as you go. I don't want to watch someone spend forty minutes inside of a text-editor without once compiling and running the thing they're working on!

@TheCodingTrain 6 лет назад

Thanks for the nice feedback!

@johnielus8682 7 лет назад

That kitten has some balls, man.

@jayjayxl604 7 лет назад

You're like the Bob Ross of coding.

@techy4198 7 лет назад

Jay Jay XL so true

@Skatuser 7 лет назад

Fantastic work! Your code challenges helped me to move in this "nowadays code languages". Please, continue your work!

@TrollingAround 7 лет назад

Love these videos, not least because I can watch them without wearing my glasses and still read the code :-)

@88Timur88Bahmudov88 3 года назад

At the end, when you said "Think about ways to draw bigger circles where there is not much details and smaller circles where you need details" I immediately thought that it's the definition of image file size shrinking algorithm, because if you know where to put larger circles and where to put small circles, then you can use it to compress images :)

@beefywhale4397 7 лет назад

Oh My Gosh, the new Icon, Channel Art, and Name is AMAZING I LOVE IT

@TheCodingTrain 7 лет назад

oh, i'm so glad to hear!

@shararmahmood380 7 лет назад

Mother of coding. Thanks for the series. Owe u a lot Dan

@cprogramming5640 7 лет назад

Thought the rainy, cold day ruined my plans. Then I found this great coding challenge. Absolute fun! Thank you.

@xnick_uy 7 лет назад

Since you already have used the Laplacian operator in the past, it could provide an interesting way to choose regions for the random locations of the centers. A low value for the Laplacian indicates a smooth part of the image, and conversely, a high value appears near borders or sharp changes in the image. Then you'll have to generate the random points based on a (2D) probability distribution that depends on the Laplacian, which could easily entail a whole challenge video on its own.

@TheCodingTrain 7 лет назад

This is an excellent suggestion, thank you!!

@skaterzero807 7 лет назад

You can also look into similar "feature detectors" which are much like the Laplacian kernel, two suggestions are the Hessian and Harris detectors.

@bartoszmeister6163 7 лет назад

You can also combine a Laplacian with a DFT and create differently shaped/colored objects.

@aidan00ah 7 лет назад

You should definitely do a coding challenge on the minimax algorithm, and possibly alpha-beta pruning!

@colobaggins5789 7 лет назад

Excelent Video Daniel, thanks a lot !!! Love your Work

@goatzillablue 7 лет назад

Very nice!! Congrats!

@toadfrommariokart64 7 лет назад

I love that your motivation to make a part 2 is that the first part was lacking kittens :D

@tommasobonvicini7114 6 лет назад

If you're interested in finding details at different granularities you could go with a simple edge-detection method, as you said, however using Fast-Fourier-Transforms would be interesting too: the frequency domain actually gives you all kind of information about detail in a single shot.

@onebeartoe Год назад

Excellent!

@khaledchaban 7 лет назад

Great video

@tommulvey4752 7 лет назад

I only know C++, but love these videos. Thanks man

@gazzaka 7 лет назад

Awesome ! You are a GURU :-)

@justmark8040 7 лет назад

*OOOOOooooooo* New channel art :)

@mikapeltokorpi7671 6 лет назад

maximum entropy is probably the key to get small circles where the details are and big circles to areas, where is no details.

@maxer1375 7 лет назад

nice short vide. keep it up :D

@Yarquen 7 лет назад

Nice new channel name!

@Zxios 7 лет назад

Ahhhhh! New branding!!! I DONT LIKE CHANGE just kidding lol

@rarr4669 6 лет назад

wowooooooooooooooooooooooooow man !

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

Sir, i have one doubt. Some circles in the image 2017 are going out of that part.. Can u give the code to rectify that.. Pls..

@aSameplayer 7 лет назад

the coding train... Sounds interesting

@DiegoSayron 7 лет назад

Dan, transformando programadores em powerful programmers

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

Try to use Wavelets for determining the detailed region

@mohammedyusufshaikh5603 7 лет назад

hey daniel i have been watching your videos for a long time i would really like to know how to you setup camera and everything since it looks great !. can u make video for it ??

@hydrantdude504 7 лет назад

Hey, could you do Conway's game or life or Langton's ant in a future coding challenge? They seem like interesting but simple programs to make.

@maximilientirard1720 7 лет назад

To preserve more detail: Maybe have the circles grow slower according to how much detail there is? So circles with less uniform colors grow slower or something. Standard deviation, is that even possible on length three vectors?

@paraglide01 7 лет назад

Big Balls Kitten, the latest Ninja warrior movie from Tom Cruise ;-)

@JoshArc1 7 лет назад

I've just gotten into coding starting c++ on windows but now that I see Java it seems a lot easier I think I'm going to get into java instead

@ast_rsk 7 лет назад

So, I have a midi controller that I use for some music stuff. Since it's just a simple command interface, would it be possible to make a p5.js program that can take the midi interface as input, so I can make a light weight soundboard (simple hard-coded) that uses my midi controller presses?

@carlosloayza9484 7 лет назад

Hey 'Dann' make us a tutorial about how we could use processing (java version) in our favorite IDE, 'cause personally i dont like that feeling that i am depending of a specific software to make something! pls pls pls

@xxdylanxx6258 7 лет назад

do you do tutorials on how to do basic coding and such. I'm sixteen and I would love to know how to do this, but I have been searching all over RU-vid for videos on his to code (like a long series that shows step by step and in detail how to code) and if you don't could you start one lol.

@mirandnyan 7 лет назад

Hey Dan, where can I watch your streams live?

@TheCodingTrain 7 лет назад

@eaglebound2120 7 лет назад

Will you be doing the pixel density you talked about? I think it would be interesting.

@TheCodingTrain 7 лет назад

I would like to sometime, yes!

@dlcisaballer 7 лет назад

Works nicely with Quadtrees :)

@henrik7192 7 лет назад

how about video on some algorithm for circle packing free circle spots

@Nulono 7 лет назад

Wouldn't you want the early circles where there's _less_ detail?

@TheCodingTrain 7 лет назад

Yes, you may be right! The point is to have some sort of logic to where the circles are rather than just random. Thanks!

@jimmahoney9482 7 лет назад

Nulono n

@dowrow6898 7 лет назад

I would just blur the image and separate into few svg shapes and then I would just fill shapes with blobs and grow them until they hit the edge of the svg

@sebastianmestre2145 7 лет назад

Dow Row wouldn't that get similar results to cell voronoi?

@dowrow6898 7 лет назад

Sebastián Mestre // isn't that the similar result to what we actually want?

@sebastianmestre2145 7 лет назад

Dow Row maybe

@crimsonzodiac908 7 лет назад

Could someone tell me where to learn to code in javascript like Daniel Shiffman? I know somewhat about Javascript, but I have not learned stuff like void. Anyplace I can learn stuff like this?

@mohitaggarwal1134 Год назад

hi sir, i learnt a lot from ur videos and it's really awesome. I need a help that i want to make a input field in it so that user can upload images and no need to go to code to change the image can u please help me.

@paraglide01 7 лет назад

Did you remake this part, now I get whats happening.

@connorp123 7 лет назад

I'm having trouble running this application after exporting it. I'm assuming it has something to do with the image not being found. Can anyone help with this?

@connorp123 7 лет назад

Fixed it by putting my image in a folder called "data"!

@TheCodingTrain 7 лет назад

glad you solved it!

@ronaldorulez 7 лет назад

Anyone able to do this only on JS without any libraries...?

@antoniocvetkovic7878 7 лет назад

Hi guys! I need some help,I copied the code from github,I changed the size and I changed the 2017.png to the name of a picture that I want to be circle packed.But when I run it,it just opens a blank browser tab,any solutions?

@antoniocvetkovic7878 7 лет назад

the name of the image is 123.jpg if thats what you mean

@antoniocvetkovic7878 7 лет назад

var circles; var img; function preload() { img = loadImage("123.jpg"); } function setup() { createCanvas(720, 720); var density = displayDensity(); pixelDensity(1); img.loadPixels(); circles = []; console.log(img.width); console.log(img.height); console.log("pixels", img.pixels.length); console.log(density); } function draw() { background(0); var total = 100; var count = 0; var attempts = 0; while (count < total) { var newC = newCircle(); if (newC !== null) { circles.push(newC); count++; } attempts++; if (attempts > 1000) { noLoop(); console.log("finished"); break; } } for (var i = 0; i < circles.length; i++) { var circle = circles[i]; if (circle.growing) { if (circle.edges()) { circle.growing = false; } else { for (var j = 0; j < circles.length; j++) { var other = circles[j]; if (circle !== other) { var d = dist(circle.x, circle.y, other.x, other.y); var distance = circle.r + other.r; if (d - 5 < distance) { circle.growing = false; break; } } } } } circle.show(); circle.grow(); } } function newCircle() { var x = random(0, img.width); var y = random(0, img.height); var valid = true; for (var i = 0; i < circles.length; i++) { var circle = circles[i]; var d = dist(x, y, circle.x, circle.y); if (d < circle.r) { valid = false; break; } } if (valid) { var index = (int(x) + int(y) * img.width) * 4; var r = img.pixels[index]; var g = img.pixels[index+1]; var b = img.pixels[index+2]; var c = color(r,g,b); debugger; return new Circle(x, y, color(c)); } else { return null; } }

@antoniocvetkovic7878 7 лет назад

but the problem is it that it expects a semicolon ";" in the funcion preload() colon

@igalkolihman6326 7 лет назад

i tried to follow your code by writing my self, and then there was an error which said: ArrayIndexOutOfBoundsException: 1107829 and it pointed my to the line where i give the color to the newCircle. how can i fix this? (sorry for bad english)

@TheCodingTrain 7 лет назад

Check if the image and window size match.

@igalkolihman6326 7 лет назад

thank you! its working now

@Antiork 7 лет назад

i did not follow the the code myself, but my first guess for your problem would be a typing error in one of the loops that search thorugh that given array. It is probably just a typo.

@igalkolihman6326 7 лет назад

***** no, the problem was with the window size, it didn't match the size of the picture. But still thank you for trying to help

@polosatus 7 лет назад

3:45 Some quality nightmare fuel here.

@akdune 7 лет назад

Mr. Shiffman, can I request a tutorial in the implementation of processing for Android app creation?

@tcocaine 7 лет назад

This is why you should learn to code before you use processing for other things. I don't know if Processing even has support for that kind of thing. Using Java for App programming - awesome. Using 3rd party library/framework in an unknown environment - not good. (Remember I'm just guessing here, could be totally wrong.) Try C# Xamarin for android app dev if you're just getting into it. C# is very similar to Java.

@akdune 7 лет назад

Processing does support Android development. I'm a C/C++ programmer; Daniel has sparked my interest in processing, hence I've been side coding in processing for about three months now.

@techy4198 7 лет назад

Not only does it very much support it in the IDE on the PC, but there's also an app that lets you code Android Processing apps from within Android. Besides, Android apps natively use an embedded form of Java, so Processing gives you direct access to the API exactly as Android presents and specifies it.

@trittbrettfahrer9262 7 лет назад

Wish you would do other languages than only processing everytime

@justskillfull 7 лет назад

He's only teaching the concepts. Processing is great for this as not many languages have built-in update and draw functions. Why not try yourself to convert the code into different languages?

@satibel 7 лет назад

now let's do it in assembly. (actually it's quite easy as you are writing directly to a pixel array.)

@justskillfull 7 лет назад

Just FYI, I would not advise doing this in assembly. Interesting idea though, If you are going to do it, why not write it for WebAssembly?

@satibel 7 лет назад

ah, simpler times when looping towards 0 and comparing with not (vs >) was faster.

@trittbrettfahrer9262 7 лет назад

Yeah sure, but i could also just do these things on my own then, i'm here to see him ;)

@tazzadk8363 7 лет назад

is this c++?

@persus2001 7 лет назад

Why did you change the name of the channel

@TheCodingTrain 7 лет назад

Trademark issue with "Coding Rainbow"

@dibayuin7859 7 лет назад

somebody please tell me what's the language ? java (?) c (?)

@maxer1375 7 лет назад

Bayu Cakil java

@edshark3515 7 лет назад

The kitten end up being quite ... creepy ?

@ceddesokk2718 7 лет назад

third

@amirhosseinrafiee2926 7 лет назад

Coding challenge : make a glsl rain drop particles like this one tympanus.net/Development/RainEffect/

@satibel 7 лет назад

using the fireworks and removing the initial velocity and the "boom" might work for a starter.

@amirhosseinrafiee2926 7 лет назад

manaquri It's a complex particle so i think it does worth a challenge

@satibel 7 лет назад

I think too, I was suggesting to start somewhere as it seems complex. maybe just render a random water drop first, then combine a drop falling on window pysics simulation with the water drop render .