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

Video Description

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). Code: https://thecodingtrain.com/challenges/49-photo-mosaic-with-white-house-social-media-images 🎥 Previous video: https://youtu.be/UrznYJltZrU?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/QHEQuoIKgNE?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 🔗 The White House Social Media Data: https://obamawhitehouse.archives.gov/blog/2017/01/05/new-lenses-first-social-media-presidency 🔗 ITP 'Obamathon' Github Repo: https://github.com/ITPNYU/Obamathon/tree/master/examples/P5/TweetsByMonth Videos: 🎥 10.4: Pixels! (The Pixels Array) - Processing Tutorial: https://youtu.be/EmtU0eloTlE 🔴 Coding Train Live 71: https://youtu.be/pF0cadg2mg0?t=10548s Related Coding Challenges: 🚂 #47 Pixel Sorting in Processing: https://youtu.be/JUDYkxU6J0o 🚂 #50 Circle Packing: https://youtu.be/QHEQuoIKgNE 🚂 #90 Floyd-Steinberg Dithering: https://youtu.be/0L2n8Tg2FwI Timestamps: 0:00 Introduce the coding challenge 0:24 Mention the 'White House Social Media Data Visualization' coding challenge 0:38 Introduce the dataset 1:08 Explain the goal of the coding challenge 1:39 Set up a Processing project 2:00 Draw an image 2:42 Explain how to pixelate the image 3:00 Copy the image at a smaller scale 4:36 Loop through the pixels of the smaller image 5:30 Consider the color of each pixel 6:03 Draw a larger rectangle with the same color 7:02 List files from a local directory 9:08 Filter files to consider only images 11:00 Load all images 11:42 Test code with a subset of images 12:25 Consider the brightness of the pixels instead of color 12:54 Explain the logic behind the mosaic 13:10 Consider the brightness of the images 14:05 Create an array of brightness values 14:20 Compute the average brightness of each image 15:24 Store the average brightness 17:02 Create an array of possible brightness values 17:17 Associate values to the image with the closest average brightness 20:06 Draw images instead of rectangles 21:11 Test code 22:10 Explain `OutOfMemoryError` 22:54 Sample images down 24:52 Suggest improvements and creative possibilities 26:40 Conclude the coding challenge 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://thecodingtrain.com/discord 💖 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 #pixelarray #imageprocessing #java #processing