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

Channel:
United States The Coding Train
Subscribers:
1,750,000
Published on ● Video Link: https://www.youtube.com/watch?v=nnlAH1zDBDE


Category:
Tutorial
Duration: 27:01
134,284 views
2,766

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



Other Videos By The Coding Train


2017-01-31Coding Challenge #53: Random Walker with Vectors and Lévy Flight
2017-01-30Live Stream #74: Processing, p5.js and more Random Walks
2017-01-27Coding Challenge #52: Random Walker
2017-01-26Live Stream #73: Random Walk
2017-01-18Coding Challenge 51.3: A* Pathfinding Algorithm - Part 3
2017-01-17Coding Challenge 51.2: A* Pathfinding Algorithm - Part 2
2017-01-16Coding Challenge 51.1: A* Pathfinding Algorithm - Part 1
2017-01-13Live Stream #72: A* Pathfinding Algorithm
2017-01-10Coding Challenge #50.2: Animated Circle Packing - Part 2 (Kitten Addendum)
2017-01-09Coding Challenge #50.1: Animated Circle Packing - Part 1
2017-01-06Coding Challenge #49: Photo Mosaic with White House Social Media Images
2017-01-06Coding Challenge #48: White House Social Media Data Visualization
2017-01-05Coding Train Live 71: Coding Challenges: Circle Packing and White House Data Visualization
2016-12-23ITP Winter Show 2016
2016-12-21Coding Challenge #47: Pixel Sorting in Processing
2016-12-20Guest Tutorial #3: Spring Animations and p5.js with Val Head
2016-12-19Guest Tutorial #2: Web Animations and Mo.js with Sarah Drasner
2016-12-16Coding Challenge #46.2: Asteroids with p5.js - Part 2
2016-12-15Coding Challenge #46.1: Asteroids with p5.js - Part 1
2016-12-14Live Stream #70: Coding Challenges: Asteroids and Pixel Sorting
2016-12-11Coding Challenge #45: Saving p5.js Drawings to Firebase


Tags:
programming
daniel shiffman
creative coding
coding challenge
tutorial
algorithms
processing load pixels
coding
challenges
pixel array
pixel sorting brightness
processing
challenge
programming challenge
processing tutorial
white house data
white house social media data
obama social media data
obama administration data
photo mosaic
photo mosaic java
photo mosaic processing
loadPixels processing
image analysis processing