Coding Challenge #49: Photo Mosaic with White House Social Media Images

In this Coding Challenge, I use a collection of Obama Administration’s facebook images to create a “photo mosaic” of President Obama with Processing (Java).

My Coding Challenge about social media data visualization with the White House data:

The White House Social Media Data is available here:

The data and source code can be found with ITP “Obamathon” github repo:

Support this channel on Patreon:

Send me your questions and coding challenges!:


Links discussed in this video:
My Video on Pixel Arrays:

Source Code for the all Video Lessons:


For More Coding Challenges:
For an Introduction to Programming in the Processing Environment:

Help us caption & translate this video!






32 responses to “Coding Challenge #49: Photo Mosaic with White House Social Media Images”

  1. AdrienDepaillat Avatar

    THANKS so much for all the videos and the enthusiasm : it's made the use of Processing really accessible!
    As for the colors, I assigned a 3Dim-vector for each picture in the dataset (three values being R,G,B averaged over all the pixels). Then when it comes to picking up the image in the mosaic, I just find the closest vector to the current [R,G,B] vector, it works great, but it has to browse through the whole database to find the best fit, once for every piece of the mosaic. However, when I increase the size of the database Images in order to get a cleaner mosaic that I can zoom in on, I often get memory issues, even if I allow Processing to use more than 5Gb of memory.. Any suggestions regarding this issue? Apart from reducing the number of pictures in the database and reducing their size in the final display? Thanks 🙂

  2. Holden Greene Avatar

    If you dont like your code or you think you could be solving the problem better, I know i would rather see you take a little more time and show how you think the problem should be solved. Watching you write code that you constantly undermine makes me feel like whatever I learn is actually just a bad habit. That doesn't mean that you need to overly complicate with bloated solutions but watching you write simple elegant functional code that demonstrates good practices. Love your channel, keep up the great work!

  3. sometype Avatar

    I use python but you always manage to motivate me for some coding.

  4. Haider Ali Punjabi Avatar

    Any way to generate higher quality images. Sort of where you can zoom in and see each picture clearly

  5. M L Avatar

    can this be done in p5.js…i want to take a pixelated image and replace each block with something else.

  6. Jose Romero Avatar

    Is there a way to get an image from an array of images that you set up earlier in your code by using its name?
    For example something that would look like this: (allPhotos is an array of images initialized earlier in the code)
    PImage img = allPhotos.get( the name of the image instead of the index);
    This would place in img the correspondent photo that goes along with that name

  7. Martin Dinev Avatar

    but you could've loaded all images, but memorise only 256, instead of memorising them all and looking for the 256

  8. Gummans Gubbe Avatar

    This channel has so positive, amazing content. And watching its language to the degree that it is not "travelling salesman" but travelling salesperson. It cant mention cities in USA, it thinks a Mercator projection is western dominance.

    But showing pictures glorifying the largest mass murderer living on earth, OK?

  9. Jimmy Gunawan Avatar

    Will try to port this into Blender and Noding version! Thanks!

  10. Necromancer3000 Avatar

    If obama has such simple code then i do not wanna see the code for trump XD

  11. Xclusion Avatar

    Wait what language is this?

  12. Clément Cappelle Avatar

    I have a problem,
    I try to make a picture of Trump with pictures of walls, but when I arrive to the end, I execute and a grey screen appears and message say : "ArrayIndexOutOfBoundsException:10" I don't know where the problem comes.
    Can you help me ?
    The code is here:

  13. Luca Tagliavini Avatar

    Really Nice!!! After watching this video I couldn't wait to try it by myself in JAVA, and the result was nice. In Grayscale, like you did in the tutorial is not good because of many repetition of images (just little set of colors) but when I added color to the image mosaic it was wonderful. Just a little tricky to understand how to do it. My implementation was this: based on your tutorial I did avgRed, avgGreen, avgBlue for the tile of mosaic, and have 3 values. The candidate pixel to be replaced also has R,G,B so by evaluating the diff between candidate pixel(R,G,B) and tileAvg(R,G,B) with euclidean distance I could choose good Pixel replacement candidate between the Tiles. (the tiles are the images you loaded). Maybe is not clear but I can give some code if someone is interested.

  14. Shrek T Avatar

    why dont you add comments while you go. even a single word comment is invaluable.

  15. Val Avatar

    I felt let down when I found out (through many minutes of wondering why I couldn't use certain features) that Processing doesn't support an interactive console.

    Oh well, I learned some basic Python for my text input needs (since I didn't want to set up an IDE just to use a simple program). Probably could've used Batch as well, or C++ on my Ubuntu laptop. Still, it's a bit of a shame that Processing is limited in such a fundamental way.

  16. Ray Hey Avatar

    The Dataset is gone, at least the Files at Dropbox. Any Mirror available?

  17. Newbie MC Avatar

    can the app make 4d cube?

  18. RyanEDarras Avatar

    I did something similar a while back in C#. It was a really fun project.

  19. Exchange Avatar

    Your looking good today <3

  20. Chiel van den Boogaard Avatar

    Hey cool videos! are you going to make a follow up? with RGB colors? and better quality pictures as pixels?

  21. Maxtanie petit dol Avatar

    You share with us so much tuto, that I've never seen just Cool.

  22. Kotok TV Avatar

    he running on browser (?) somebody tell me please

  23. uchalka Avatar

    Great video man, congrats!

    I just happened to think, there are ~4000 images each at most 30kb and a total of ~117Mb. That's no big deal. Why do you think you got an OutOfMemory error?

  24. Kevin Stark Avatar

    Why did you change your name? I thought I was watching someone else for a second and I almost clicked away to not give a false view.

  25. starrycave Avatar

    I found your channel and am binge-watching now like nobody's business

  26. MrLuke255 Avatar

    What's that music at the end?

  27. MrLuke255 Avatar

    Don't you ever look into Processing documentation? It looks kinda suspicious. 😉 Do you prepare some proof-of-concept before recording? And another one – how do you know where to point on the green screen behind you? I like your "coding challenges" very much, they're very inspiring. 🙂

  28. Eli F Avatar

    Daniel! You can get rid of .DS_Store by typing the following in terminal 🙂
    sudo find / -name ".DS_Store" -depth -exec rm {} ;

  29. mr_os Avatar

    Wouldn't it be possible to use java8 streams to compute the averages?

  30. Aaron Meredith Avatar

    if you use Processing image function to shrink the image to 1 pixel it should be an average color or the image.

  31. Rekky Rek Avatar

    Dan please stop with all the political references. I don't support Donald or Hillary, i really don't like when you bring politics in to the video.

Leave a Reply

Your email address will not be published. Required fields are marked *