title
Coding Challenge 166: ASCII Text Images

description
Let's make ASCII art in p5.js together! In this video, I demonstrate a variety of techniques for translating the pixels of an image into text and finish with rendering video as text ASCII characters in a DOM. https://thecodingtrain.com/challenges/166-image-to-ascii p5.js Web Editor Sketches: 🕹️ ASCII video: https://editor.p5js.org/codingtrain/sketches/KTVfEcpWx 🕹️ ASCII image canvas: https://editor.p5js.org/codingtrain/sketches/r4ApYWpH_ 🕹️ ASCII image dom: https://editor.p5js.org/codingtrain/sketches/ytK7J7d5j 🕹️ ASCII text: https://editor.p5js.org/codingtrain/sketches/LNBpdYQHP 🕹️ ASCII weather api: https://editor.p5js.org/codingtrain/sketches/DhdqcoWn4 🎥 Previous video: https://youtu.be/PbPUgyql5p4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH Links discussed in this video: 🔗 ASCII play by ertdfgcvb: https://play.ertdfgcvb.xyz/ 🔗 HTML Entity: https://developer.mozilla.org/en-US/docs/Glossary/Entity 🔗 HTML div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div 🔗 p5.js loadPixels(): https://p5js.org/reference/#/p5/loadPixels 🔗 p5.js brightness(): https://p5js.org/reference/#/p5/brightness 🔗 CodingTrainChooChoo on Twitch: https://www.twitch.tv/codingtrainchoochoo Other videos mentioned in this video: 🎥 The Pixel Array: https://youtu.be/nMUMZ5YRxHI 🎥 Basics of CSS: https://youtu.be/zGL8q8iQSQw 🎥 p5.js Web Editor - Uploading Media Files: https://youtu.be/rO6M5hj0V-o Timestamps: 0:00 Welcome! Choo choo! 0:28 Introducing Today’s Topic 1:39 Pixel to ASCII 4:52 Pixelating an image 7:03 Pixel Array Explanation 8:40 Back to the code 10:18 Adding Text 11:04 Mapping Brightness to Characters 13:26 Switching from canvas to DOM 18:10 Real-time ASCII video 20:10 Some refinemens 21:29 See you next time! 🚂 Website: http://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html 🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://discord.gg/hPuGy2g 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 📚 Books: https://www.amazon.com/shop/thecodingtrain 🖋️ 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/website/issues/new

detail
{'title': 'Coding Challenge 166: ASCII Text Images', 'heatmap': [{'end': 531.925, 'start': 503.265, 'weight': 0.884}, {'end': 560.646, 'start': 544.592, 'weight': 0.796}, {'end': 586.038, 'start': 569.854, 'weight': 0.87}, {'end': 670.809, 'start': 613.101, 'weight': 0.945}, {'end': 1213.182, 'start': 1199.922, 'weight': 0.964}], 'summary': 'Covers a coding challenge update, rendering ascii art with shader code, loading and working with images in p5, transforming images into ascii art, optimizing nested loops for pixel manipulation, and converting ascii art to video, involving adjustments in line height, font size, and image resizing.', 'chapters': [{'end': 59.878, 'segs': [{'end': 59.878, 'src': 'embed', 'start': 1.53, 'weight': 0, 'content': [{'end': 6.635, 'text': 'Hello! Choo choo! Welcome to another coding challenge video.', 'start': 1.53, 'duration': 5.105}, {'end': 8.597, 'text': 'I am, I want to let you know something before I get started.', 'start': 6.695, 'duration': 1.902}, {'end': 10.939, 'text': 'Thinking about changing the name of the coding challenges.', 'start': 8.937, 'duration': 2.002}, {'end': 15.323, 'text': 'To me, the idea of a challenge is something you have to beat or like defeat.', 'start': 11.139, 'duration': 4.184}, {'end': 20.468, 'text': 'I want something more exploratory and collaborative and train themed, like maybe a journey.', 'start': 15.623, 'duration': 4.845}, {'end': 21.369, 'text': "But I don't know if that works.", 'start': 20.508, 'duration': 0.861}, {'end': 23.831, 'text': 'You got any ideas? Let me know in the comments.', 'start': 21.549, 'duration': 2.282}, {'end': 27.814, 'text': 'I would love to hear what should these be called going forward.', 'start': 23.851, 'duration': 3.963}, {'end': 30.696, 'text': 'But today, boy, do I have an exciting one for you.', 'start': 27.874, 'duration': 2.822}, {'end': 39.903, 'text': "It is one that I made during a live stream about a year ago, translating an image's pixels to ASCII characters like you're seeing right here.", 'start': 30.796, 'duration': 9.107}, {'end': 41.484, 'text': 'So I want to do this again.', 'start': 40.043, 'duration': 1.441}, {'end': 45.387, 'text': "I have no memory of doing this a year ago, so I'm kind of starting fresh.", 'start': 41.504, 'duration': 3.883}, {'end': 48.309, 'text': "We'll see if the result I get is the same as what I have here.", 'start': 45.647, 'duration': 2.662}, {'end': 52.092, 'text': 'And then hopefully you will make your own creative version of this.', 'start': 48.769, 'duration': 3.323}, {'end': 58.897, 'text': 'and share it with me on the Coding Train website, or in the comments, or on social media, or all the ways people share things with each other.', 'start': 52.352, 'duration': 6.545}, {'end': 59.878, 'text': "Let's get started.", 'start': 59.138, 'duration': 0.74}], 'summary': 'Coding challenge video featuring image to ascii translation with audience participation.', 'duration': 58.348, 'max_score': 1.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1530.jpg'}], 'start': 1.53, 'title': 'Coding challenge update', 'summary': 'Discusses potential name change for coding challenges, seeks input for new names, and presents a challenge of translating image pixels to ascii characters from a previous live stream, encouraging participation and sharing on coding train website and social media.', 'chapters': [{'end': 59.878, 'start': 1.53, 'title': 'Coding challenge update', 'summary': 'Discusses a potential name change for coding challenges, seeks input for new names, and presents an exciting challenge of translating image pixels to ascii characters from a previous live stream, encouraging viewers to participate and share their versions on the coding train website and social media.', 'duration': 58.348, 'highlights': ['The chapter discusses a potential name change for coding challenges, seeking input for new names.', 'Presenting an exciting challenge of translating image pixels to ASCII characters from a previous live stream.', 'Encouraging viewers to participate and share their versions on the Coding Train website and social media.']}], 'duration': 58.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1530.jpg', 'highlights': ['Presenting an exciting challenge of translating image pixels to ASCII characters from a previous live stream.', 'The chapter discusses a potential name change for coding challenges, seeking input for new names.', 'Encouraging viewers to participate and share their versions on the Coding Train website and social media.']}, {'end': 324.309, 'segs': [{'end': 96.154, 'src': 'embed', 'start': 60.018, 'weight': 0, 'content': [{'end': 75.64, 'text': 'First, I would like to thank This is a wonderful example, I believe, of some shader code to render some beautiful ASCII art.', 'start': 60.018, 'duration': 15.622}, {'end': 81.184, 'text': 'And it all relies entirely on this array of characters.', 'start': 76.001, 'duration': 5.183}, {'end': 89.75, 'text': 'This array of characters is ordered from either brightest to darkest or darkest to brightest,', 'start': 81.704, 'duration': 8.046}, {'end': 93.172, 'text': "depending on what color you're sort of rendering the background or the character.", 'start': 89.75, 'duration': 3.422}, {'end': 96.154, 'text': 'So I believe that what I can do..', 'start': 93.633, 'duration': 2.521}], 'summary': 'Shader code creates ascii art using an ordered array of characters.', 'duration': 36.136, 'max_score': 60.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI60018.jpg'}, {'end': 262.309, 'src': 'embed', 'start': 214.013, 'weight': 1, 'content': [{'end': 223.022, 'text': 'first of all, there are so many possible one beautiful abstract generative kinds of images we could make just using these ASCII characters.', 'start': 214.013, 'duration': 9.009}, {'end': 225.565, 'text': 'So I would encourage you to go in that direction.', 'start': 223.182, 'duration': 2.383}, {'end': 231.991, 'text': "But I'm going to go in a different direction, which is to say the denser the character, the more pixels it uses.", 'start': 225.825, 'duration': 6.166}, {'end': 234.553, 'text': "I'm going to match that to a bright pixel.", 'start': 232.011, 'duration': 2.542}, {'end': 245.339, 'text': 'So essentially, I could create some sort of mapping where if the color is 255, the brightness value, then I would render this particular character.', 'start': 235.254, 'duration': 10.085}, {'end': 251.082, 'text': "If the brightness value were zero, I would render whatever character I didn't get to down here.", 'start': 245.839, 'duration': 5.243}, {'end': 255.044, 'text': 'And then 137 would be appropriately somewhere here.', 'start': 251.502, 'duration': 3.542}, {'end': 257.826, 'text': 'So like 127 would be exactly in the middle.', 'start': 255.064, 'duration': 2.762}, {'end': 262.309, 'text': 'So maybe 137, this is like highly approximate might be.', 'start': 258.185, 'duration': 4.124}], 'summary': 'Using ascii characters to create generative images based on pixel density and brightness values, with 127 being the middle point.', 'duration': 48.296, 'max_score': 214.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI214013.jpg'}], 'start': 60.018, 'title': 'Rendering ascii art with shader code', 'summary': 'Delves into using shader code to render ascii art based on brightness values of pixels from an image, enabling creative generative images and character mapping.', 'chapters': [{'end': 324.309, 'start': 60.018, 'title': 'Rendering ascii art with shader code', 'summary': 'Discusses using shader code to render ascii art based on brightness values of pixels from an image, with the potential for creative generative images and mapping characters to match brightness values.', 'duration': 264.291, 'highlights': ['Using shader code to render ASCII art based on brightness values of pixels from an image The speaker explores using shader code to render ASCII art, relying on the brightness values of pixels from an image to determine the characters to be used.', 'Potential for creative generative images using ASCII characters The speaker highlights the potential to create beautiful, abstract generative images using ASCII characters, encouraging exploration in that direction.', 'Mapping characters to match brightness values of pixels The speaker discusses creating a mapping where the brightness value of a pixel determines the character to be rendered, allowing for creative representation of images.']}], 'duration': 264.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI60018.jpg', 'highlights': ['Using shader code to render ASCII art based on brightness values of pixels from an image', 'Potential for creative generative images using ASCII characters', 'Mapping characters to match brightness values of pixels']}, {'end': 609.859, 'segs': [{'end': 374.014, 'src': 'embed', 'start': 324.309, 'weight': 0, 'content': [{'end': 332.016, 'text': 'right now, before i start trying to load a video into my p5 jess sketch, i have got this nice little photo of gloria pickle,', 'start': 324.309, 'duration': 7.707}, {'end': 337.6, 'text': 'And I quickly just removed the background from the image in Photoshop,', 'start': 334.378, 'duration': 3.222}, {'end': 342.903, 'text': "which I think will make the ASCII version of this image pop a bit more in terms of what I'm about to try to do.", 'start': 337.6, 'duration': 5.303}, {'end': 350.287, 'text': 'So I uploaded a very small 48 by 48 pixel size image to this P5 project.', 'start': 343.163, 'duration': 7.124}, {'end': 354.95, 'text': "I've got a separate video about how to upload files to the editor if that's something that you haven't done before.", 'start': 350.528, 'duration': 4.422}, {'end': 359.473, 'text': 'And then all I need to do is add a preload function to load the image.', 'start': 355.31, 'duration': 4.163}, {'end': 366.946, 'text': 'And we can see that Gloria has been loaded.', 'start': 364.744, 'duration': 2.202}, {'end': 367.927, 'text': "It's kind of fuzzy.", 'start': 367.106, 'duration': 0.821}, {'end': 370.99, 'text': "It's blurry because I'm using this very low resolution version.", 'start': 368.047, 'duration': 2.943}, {'end': 374.014, 'text': "That's going to make translating it over to ASCII easier.", 'start': 371.271, 'duration': 2.743}], 'summary': 'Preparing a 48x48 pixel image of gloria pickle for ascii conversion in p5 project.', 'duration': 49.705, 'max_score': 324.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI324309.jpg'}, {'end': 491.517, 'src': 'embed', 'start': 457.537, 'weight': 4, 'content': [{'end': 469.843, 'text': 'But since every single pixel has four numbers associated with it, the actual array storing all the information is RGBA for pixel 0,', 'start': 457.537, 'duration': 12.306}, {'end': 477.847, 'text': 'then RGBA for pixel one, then RGBA for pixel two, et cetera, et cetera.', 'start': 469.843, 'duration': 8.004}, {'end': 491.517, 'text': 'So that translates back to this really nice formula where I can say the column plus the row times the width times four gives me the red value for any given column and row pixel.', 'start': 478.288, 'duration': 13.229}], 'summary': 'Using the formula column + row * width * 4, we can calculate the red value for any pixel.', 'duration': 33.98, 'max_score': 457.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI457537.jpg'}, {'end': 531.925, 'src': 'heatmap', 'start': 503.265, 'weight': 0.884, 'content': [{'end': 508.369, 'text': 'What I would suggest, if this is confusing to you, go find a piece of graph paper or any regular paper.', 'start': 503.265, 'duration': 5.104}, {'end': 513.352, 'text': 'make your own little 5x5 image and just try numbering everything and trying things manually.', 'start': 508.369, 'duration': 4.983}, {'end': 517.255, 'text': "That's really the way I learned this stuff and kind of was able to wrap my head around it.", 'start': 513.573, 'duration': 3.682}, {'end': 520.317, 'text': 'And you can also check out that other video where I explain it in more detail.', 'start': 517.355, 'duration': 2.962}, {'end': 523.74, 'text': 'Just to make sure this worked, let me now try to draw every pixel as a square.', 'start': 520.477, 'duration': 3.263}, {'end': 527.743, 'text': 'So first thing I need to do is figure out what is the size of the squares.', 'start': 524.14, 'duration': 3.603}, {'end': 531.925, 'text': "For the moment, I'm still working on this for canvas.", 'start': 529.684, 'duration': 2.241}], 'summary': 'Suggest making a 5x5 image on paper, explains learning method, and mentions another detailed video.', 'duration': 28.66, 'max_score': 503.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI503265.jpg'}, {'end': 586.038, 'src': 'heatmap', 'start': 544.592, 'weight': 1, 'content': [{'end': 548.214, 'text': 'What did I do wrong? What did I do wrong here? I messed something up.', 'start': 544.592, 'duration': 3.622}, {'end': 550.496, 'text': 'I guess I need to call loadPixels.', 'start': 548.915, 'duration': 1.581}, {'end': 555.12, 'text': 'Ah, I need to call loadPixels.', 'start': 553.018, 'duration': 2.102}, {'end': 560.646, 'text': "So if I'm going to use the pixel array of that image, I've got to alert P5 to it and call loadPixels.", 'start': 555.38, 'duration': 5.266}, {'end': 563.068, 'text': 'So there you can see pixelated Gloria.', 'start': 560.906, 'duration': 2.162}, {'end': 569.634, 'text': 'I think for changing this into ASCII, having an even lower resolution image of Gloria is going to improve things.', 'start': 563.388, 'duration': 6.246}, {'end': 574.379, 'text': "So I quickly made one that's just 20 by 20 and uploaded that, and I'm using that instead now.", 'start': 569.854, 'duration': 4.525}, {'end': 581.774, 'text': "Now, again, there's so many visualization possibilities we could do here with RGB color, with multiple images, with varying degrees of resolution.", 'start': 574.727, 'duration': 7.047}, {'end': 584.677, 'text': "I'm not going to go down all of those roads.", 'start': 581.794, 'duration': 2.883}, {'end': 585.518, 'text': "It's a train.", 'start': 584.937, 'duration': 0.581}, {'end': 586.038, 'text': "It's a train.", 'start': 585.578, 'duration': 0.46}], 'summary': 'Troubleshooting image processing, switched to 20x20 resolution for better results', 'duration': 29.787, 'max_score': 544.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI544592.jpg'}, {'end': 624.41, 'src': 'embed', 'start': 592.525, 'weight': 2, 'content': [{'end': 597.31, 'text': "So let's now look at the brightness value of each of these just by doing the average of RGB.", 'start': 592.525, 'duration': 4.785}, {'end': 600.132, 'text': 'Now, there is a p5.js function called brightness.', 'start': 597.95, 'duration': 2.182}, {'end': 602.253, 'text': 'We could try that and see if we get a different result.', 'start': 600.212, 'duration': 2.041}, {'end': 607.137, 'text': 'This is actually taking the color value and converting it to hue, saturation, brightness.', 'start': 602.854, 'duration': 4.283}, {'end': 609.859, 'text': 'But just to keep things simple for me, just going to do the average.', 'start': 607.337, 'duration': 2.522}, {'end': 615.984, 'text': 'Now we can see a grayscale version of Gloria.', 'start': 613.101, 'duration': 2.883}, {'end': 617.585, 'text': 'Now to add text.', 'start': 616.444, 'duration': 1.141}, {'end': 624.41, 'text': 'So what if I were, instead of drawing a square, were just to draw an individual character, just the character G for Gloria?', 'start': 618.025, 'duration': 6.385}], 'summary': 'Analyzing brightness of colors using rgb values and p5.js function, converting to grayscale, and adding text.', 'duration': 31.885, 'max_score': 592.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI592525.jpg'}], 'start': 324.309, 'title': 'Loading and working with images in p5', 'summary': 'Discusses loading a 48x48 pixel image into a p5 project for easier ascii translation and working with pixel arrays in p5.js, covering pixel manipulation, brightness calculation, and visualization possibilities.', 'chapters': [{'end': 374.014, 'start': 324.309, 'title': 'Loading image into p5 sketch', 'summary': 'Discusses preparing and loading a 48x48 pixel image into a p5 project for easier translation into ascii, with a mention of a separate video on file uploading.', 'duration': 49.705, 'highlights': ['Preparing a 48x48 pixel image of Gloria Pickle for easier translation into ASCII.', 'Mention of a separate video on how to upload files to the P5 editor.', 'Adding a preload function to load the image into the P5 project.']}, {'end': 609.859, 'start': 374.114, 'title': 'Working with pixel arrays in p5.js', 'summary': 'Discusses the process of working with pixel arrays in p5.js, explaining the concept of pixel manipulation, the structure of pixel arrays, and the process of converting images to ascii art, with a focus on brightness calculation and visualization possibilities.', 'duration': 235.745, 'highlights': ['Explaining the structure of pixel arrays and the formula for accessing RGB values Detailed explanation of the structure of pixel arrays in p5.js, including the formula for accessing the RGB values of each pixel and the impact of pixel dimensions on the array size.', 'Demonstrating the process of converting images to ASCII art and the importance of lower resolution for improved results Demonstration of converting images to ASCII art, emphasizing the significance of lower resolution images for better visual output.', 'Considering visualization possibilities and focusing on the concept of brightness calculation using RGB values Discussion on the diverse visualization possibilities with RGB color and multiple images, while emphasizing the calculation of brightness using the average of RGB values.']}], 'duration': 285.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI324309.jpg', 'highlights': ['Preparing a 48x48 pixel image of Gloria Pickle for easier translation into ASCII.', 'Demonstration of converting images to ASCII art, emphasizing the significance of lower resolution images for better visual output.', 'Discussion on the diverse visualization possibilities with RGB color and multiple images, while emphasizing the calculation of brightness using the average of RGB values.', 'Adding a preload function to load the image into the P5 project.', 'Explaining the structure of pixel arrays and the formula for accessing RGB values.']}, {'end': 830.403, 'segs': [{'end': 693.46, 'src': 'heatmap', 'start': 613.101, 'weight': 0, 'content': [{'end': 615.984, 'text': 'Now we can see a grayscale version of Gloria.', 'start': 613.101, 'duration': 2.883}, {'end': 617.585, 'text': 'Now to add text.', 'start': 616.444, 'duration': 1.141}, {'end': 624.41, 'text': 'So what if I were, instead of drawing a square, were just to draw an individual character, just the character G for Gloria?', 'start': 618.025, 'duration': 6.385}, {'end': 628.925, 'text': "Let's not draw the image anymore.", 'start': 627.403, 'duration': 1.522}, {'end': 632.93, 'text': "Let's make the font the size of the square.", 'start': 630.227, 'duration': 2.703}, {'end': 639.879, 'text': 'And then I will need to shift everything down because I want the letter to appear in the center of the square.', 'start': 632.95, 'duration': 6.929}, {'end': 647.133, 'text': 'I think this would probably be much more clear if I used a black background.', 'start': 643.55, 'duration': 3.583}, {'end': 651.536, 'text': 'And we could kind of see Gloria peeking out there from all of those Gs.', 'start': 647.913, 'duration': 3.623}, {'end': 653.977, 'text': 'But again, this is not what I want to do.', 'start': 651.956, 'duration': 2.021}, {'end': 657.139, 'text': "This is something I could do, and there's plenty of possible outcomes.", 'start': 654.157, 'duration': 2.982}, {'end': 663.144, 'text': 'Maybe I could start writing some poetry or having the text change or pulling from a live data feed, so many things.', 'start': 657.179, 'duration': 5.965}, {'end': 670.809, 'text': 'But instead, I want to take the brightness value and map it to one of these characters in my density string.', 'start': 663.444, 'duration': 7.365}, {'end': 674.107, 'text': 'So I can get the length of the string.', 'start': 672.264, 'duration': 1.843}, {'end': 680.178, 'text': 'So now I need the mapping to go from 0 to that length, or length minus 1.', 'start': 674.568, 'duration': 5.61}, {'end': 689.718, 'text': 'So that character index is Take the brightness value, which has a range between 0 and 255,', 'start': 680.178, 'duration': 9.54}, {'end': 693.46, 'text': 'and map that to some number between 0 and the length of the string.', 'start': 689.718, 'duration': 3.742}], 'summary': 'Converting image brightness to character index for text display.', 'duration': 80.359, 'max_score': 613.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI613101.jpg'}, {'end': 774.74, 'src': 'embed', 'start': 745.308, 'weight': 3, 'content': [{'end': 747.229, 'text': 'One thing is, this is inverted right?', 'start': 745.308, 'duration': 1.921}, {'end': 754.313, 'text': 'So remember the brightest characters are at the front, the beginning of the string, and the darker ones are at the end.', 'start': 747.529, 'duration': 6.784}, {'end': 757.855, 'text': 'So I want to reverse this from length down to zero.', 'start': 754.613, 'duration': 3.242}, {'end': 762.176, 'text': 'There Now that looks quite a bit more like Gloria.', 'start': 758.675, 'duration': 3.501}, {'end': 766.298, 'text': "I think there's an issue here with the spacing between the characters.", 'start': 762.676, 'duration': 3.622}, {'end': 770.479, 'text': 'Maybe I want to have the spacing between the characters to be less.', 'start': 766.738, 'duration': 3.741}, {'end': 772.7, 'text': 'I want to arrange them in a different way.', 'start': 771.279, 'duration': 1.421}, {'end': 774.74, 'text': 'I want to use a different font, a different scale.', 'start': 772.72, 'duration': 2.02}], 'summary': 'Inverting string brightness, adjusting spacing, arranging in a different font and scale.', 'duration': 29.432, 'max_score': 745.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI745308.jpg'}], 'start': 613.101, 'title': 'Transforming images into ascii art', 'summary': 'Demonstrates transforming an image of gloria into individual characters, exploring the possibility of using a black background, and generating various outcomes such as poetry or live data feed. it also explores mapping brightness values to characters in a density string to represent contours using ascii art and experimenting with rendering text on a web page instead of a canvas image.', 'chapters': [{'end': 663.144, 'start': 613.101, 'title': 'Gloria in grayscale with text', 'summary': 'Demonstrates transforming an image of gloria into individual characters, exploring the possibility of using a black background, and generating various outcomes such as poetry or live data feed.', 'duration': 50.043, 'highlights': ['The chapter explores transforming an image of Gloria into individual characters, indicating the possibility of using a black background and generating various outcomes such as poetry or live data feed.', "The speaker suggests the idea of drawing an individual character, specifically the character 'G' for Gloria, and adjusting the font size to match the size of the square.", "The speaker mentions the possibility of using a black background to make Gloria peek out from the characters, indicating it's not the intended outcome but one of the possible outcomes.", 'The speaker mentions the potential of writing poetry, changing the text, or pulling from a live data feed, suggesting multiple possibilities for outcomes.']}, {'end': 830.403, 'start': 663.444, 'title': 'Mapping brightness to ascii art', 'summary': 'Explores the process of mapping brightness values to characters in a density string, aiming to represent contours using ascii art and experimenting with rendering text on a web page instead of a canvas image.', 'duration': 166.959, 'highlights': ['The mapping of brightness values to characters in the density string is discussed, aiming to represent contours using ASCII art.', 'The process involves reversing the order of characters to achieve the desired visual representation, indicating a need for character spacing adjustments.', 'The exploration extends to rendering text on a web page instead of a Canvas image, considering the potential value for different applications.']}], 'duration': 217.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI613101.jpg', 'highlights': ['The chapter explores transforming an image of Gloria into individual characters, indicating the possibility of using a black background and generating various outcomes such as poetry or live data feed.', 'The mapping of brightness values to characters in the density string is discussed, aiming to represent contours using ASCII art.', "The speaker suggests the idea of drawing an individual character, specifically the character 'G' for Gloria, and adjusting the font size to match the size of the square.", 'The process involves reversing the order of characters to achieve the desired visual representation, indicating a need for character spacing adjustments.']}, {'end': 1033.761, 'segs': [{'end': 868.635, 'src': 'embed', 'start': 830.843, 'weight': 0, 'content': [{'end': 835.967, 'text': "One thing I'm curious about actually is can I get Gloria to show up just in the console?", 'start': 830.843, 'duration': 5.124}, {'end': 841.011, 'text': "Right?. Because ultimately, what I'm doing is for every row.", 'start': 836.647, 'duration': 4.364}, {'end': 842.532, 'text': 'Now, I need to do the rows.', 'start': 841.091, 'duration': 1.441}, {'end': 849.719, 'text': "And I just realized that my algorithm is in reverse because I'm taking for every column.", 'start': 842.712, 'duration': 7.007}, {'end': 851.961, 'text': 'No, I need to do all of the columns.', 'start': 849.899, 'duration': 2.062}, {'end': 859.027, 'text': "In other words, currently the way I've written those nested loops, I'm going to this pixel, then this pixel, then this pixel, then this pixel,", 'start': 852.381, 'duration': 6.646}, {'end': 859.947, 'text': 'then this pixel.', 'start': 859.027, 'duration': 0.92}, {'end': 860.928, 'text': 'then back up to here.', 'start': 859.947, 'duration': 0.981}, {'end': 866.273, 'text': 'And what I want to do instead is go through all of the columns, then down to the next row.', 'start': 861.329, 'duration': 4.944}, {'end': 868.635, 'text': 'So I think I could just flip those two lines of code.', 'start': 866.433, 'duration': 2.202}], 'summary': 'Algorithm needs adjustment to process all columns before rows.', 'duration': 37.792, 'max_score': 830.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI830843.jpg'}, {'end': 928.444, 'src': 'embed', 'start': 900.805, 'weight': 3, 'content': [{'end': 908.529, 'text': "So the reason it's squashed is because each pixel takes up the same amount of space, horizontally and vertically,", 'start': 900.805, 'duration': 7.724}, {'end': 911.89, 'text': 'but these particular pixels are spread out.', 'start': 908.529, 'duration': 3.361}, {'end': 915.632, 'text': "There's more spacing between each line than there is between each character.", 'start': 912.41, 'duration': 3.222}, {'end': 921.034, 'text': 'So I could have more control over manipulating that by rendering my own text into the browser page.', 'start': 915.852, 'duration': 5.182}, {'end': 928.444, 'text': "Now, I can't see it because I've got a dark gray background and very small characters that are black text.", 'start': 923.154, 'duration': 5.29}], 'summary': 'Pixels are squashed due to uneven spacing, leading to difficulty in text rendering and visibility.', 'duration': 27.639, 'max_score': 900.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI900805.jpg'}, {'end': 973.298, 'src': 'embed', 'start': 946.05, 'weight': 5, 'content': [{'end': 950.271, 'text': 'And I do have a video tutorial a bit about the basics of CSS that you could refer to.', 'start': 946.05, 'duration': 4.221}, {'end': 955.732, 'text': "One thing that's kind of critical here that I haven't addressed is that I'm using the font Courier on purpose.", 'start': 950.711, 'duration': 5.021}, {'end': 962.214, 'text': "For me it's a little bit easier right now to just use a fixed width font, meaning every character, no matter what it is,", 'start': 956.113, 'duration': 6.101}, {'end': 964.975, 'text': 'takes up the same amount of horizontal space.', 'start': 962.214, 'duration': 2.761}, {'end': 968.816, 'text': 'This makes just sort of the math of arranging the pixels much easier,', 'start': 965.695, 'duration': 3.121}, {'end': 973.298, 'text': 'although it is an interesting problem to think about how we would do this without a fixed-width font.', 'start': 968.816, 'duration': 4.482}], 'summary': 'Using fixed-width font for easier pixel arrangement in css tutorial.', 'duration': 27.248, 'max_score': 946.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI946050.jpg'}, {'end': 1011.536, 'src': 'embed', 'start': 985.103, 'weight': 4, 'content': [{'end': 993.087, 'text': 'Why is this? Well, if we go back to here, you might notice that this character at the very end of the density string is a space.', 'start': 985.103, 'duration': 7.984}, {'end': 1002.432, 'text': "And if I put a space into a web page, it's not actually going to necessarily render it unless it's in between characters in a particular way.", 'start': 993.407, 'duration': 9.025}, {'end': 1011.536, 'text': 'So what I need to do here is instead of rendering a space, actually use the non-breaking space character thingamabob.', 'start': 1002.772, 'duration': 8.764}], 'summary': 'Use non-breaking space character to render spaces on web pages.', 'duration': 26.433, 'max_score': 985.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI985103.jpg'}], 'start': 830.843, 'title': 'Optimizing nested loops for pixel manipulation', 'summary': 'Discusses the need to optimize nested loops for pixel manipulation, highlighting the reverse algorithm and the necessity to iterate through columns first before moving to the next row.', 'chapters': [{'end': 868.635, 'start': 830.843, 'title': 'Optimizing nested loops for pixel manipulation', 'summary': 'Discusses the need to optimize nested loops for pixel manipulation, highlighting the reverse algorithm and the necessity to iterate through columns first before moving to the next row.', 'duration': 37.792, 'highlights': ['Realization of reverse algorithm for column iteration', 'Importance of iterating through all columns before moving to the next row', 'Desire to have Gloria show up in the console']}, {'end': 1033.761, 'start': 870.096, 'title': 'Rendering text and css basics', 'summary': 'Explores rendering text and css basics, including manipulating the spacing between characters and addressing issues with font and background color. it also discusses the use of non-breaking space characters in html.', 'duration': 163.665, 'highlights': ['The chapter discusses rendering text and CSS basics, including manipulating the spacing between characters and addressing issues with font and background color. It explains how to manipulate the spacing between characters to address the squashed appearance caused by horizontal and vertical pixel spacing discrepancies.', 'The chapter addresses the use of non-breaking space characters in HTML. It delves into the use of non-breaking space characters and HTML entities to address rendering issues caused by standard spaces in web pages.', 'The chapter mentions the use of a fixed-width font, specifically Courier, to simplify arranging the pixels. It highlights the use of a fixed-width font, such as Courier, to simplify the mathematical arrangement of pixels, facilitating easier manipulation.']}], 'duration': 202.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI830843.jpg', 'highlights': ['Importance of iterating through all columns before moving to the next row', 'Realization of reverse algorithm for column iteration', 'Desire to have Gloria show up in the console', 'Explains how to manipulate the spacing between characters to address the squashed appearance caused by horizontal and vertical pixel spacing discrepancies', 'Addresses the use of non-breaking space characters in HTML to address rendering issues caused by standard spaces in web pages', 'Mentions the use of a fixed-width font, specifically Courier, to simplify arranging the pixels']}, {'end': 1348.763, 'segs': [{'end': 1097.753, 'src': 'embed', 'start': 1070.894, 'weight': 0, 'content': [{'end': 1077.341, 'text': 'What I love about this now is I can take this hit Copy, make just a plain text file and paste it in.', 'start': 1070.894, 'duration': 6.447}, {'end': 1080.504, 'text': 'This is definitely looking much better kind of white on black.', 'start': 1077.421, 'duration': 3.083}, {'end': 1083.127, 'text': 'Let me try to recreate that in my version here.', 'start': 1080.664, 'duration': 2.463}, {'end': 1089.867, 'text': 'Ta-da! Gloria Pickle as ASCII art.', 'start': 1086.584, 'duration': 3.283}, {'end': 1097.753, 'text': 'Now, I want to show you how easy I think this will be to take this from a static image to a video.', 'start': 1090.527, 'duration': 7.226}], 'summary': 'Making ascii art from a static image and converting it to a video.', 'duration': 26.859, 'max_score': 1070.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1070894.jpg'}, {'end': 1231.834, 'src': 'heatmap', 'start': 1199.922, 'weight': 0.964, 'content': [{'end': 1202.855, 'text': "And we've done it! We can stop the timer.", 'start': 1199.922, 'duration': 2.933}, {'end': 1204.256, 'text': 'I mean, I have some more things to say.', 'start': 1202.875, 'duration': 1.381}, {'end': 1205.276, 'text': 'I want to clean this up a little bit.', 'start': 1204.276, 'duration': 1}, {'end': 1206.977, 'text': 'But we can stop the timer.', 'start': 1205.316, 'duration': 1.661}, {'end': 1209.339, 'text': 'This is pretty close to whatever I did a year ago.', 'start': 1207.158, 'duration': 2.181}, {'end': 1213.182, 'text': "Looking at this, I'd like to sort of see if I can fix this up a bit.", 'start': 1209.879, 'duration': 3.303}, {'end': 1220.687, 'text': 'One of the things that I can immediately do is work with that string of characters that I have in my density string.', 'start': 1213.562, 'duration': 7.125}, {'end': 1231.834, 'text': 'For example, since I have this kind of locked in green background, I think I can use many more blank characters, blank spaces for darker characters.', 'start': 1221.147, 'duration': 10.687}], 'summary': 'The speaker is making adjustments to a timer and plans to use more blank spaces for darker characters in a string of characters.', 'duration': 31.912, 'max_score': 1199.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1199922.jpg'}, {'end': 1249.732, 'src': 'embed', 'start': 1221.147, 'weight': 2, 'content': [{'end': 1231.834, 'text': 'For example, since I have this kind of locked in green background, I think I can use many more blank characters, blank spaces for darker characters.', 'start': 1221.147, 'duration': 10.687}, {'end': 1241.283, 'text': 'So, for example, just adding a lot of spaces here we can start to see that I am kind of reducing.', 'start': 1233.055, 'duration': 8.228}, {'end': 1249.732, 'text': "I'm essentially thresholding the image in a way so that only the brightest pixels get kind of going with a particular character.", 'start': 1241.283, 'duration': 8.449}], 'summary': 'Using green background, increasing spaces reduces image, applies thresholding for brightest pixels.', 'duration': 28.585, 'max_score': 1221.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1221147.jpg'}, {'end': 1342.134, 'src': 'embed', 'start': 1310.752, 'weight': 3, 'content': [{'end': 1311.593, 'text': 'I want to stop here.', 'start': 1310.752, 'duration': 0.841}, {'end': 1317.838, 'text': 'I want you to explore this, and I want to see what kind of ASCII art you create from this video.', 'start': 1311.893, 'duration': 5.945}, {'end': 1321.3, 'text': 'please share it with me on the Coding Train website, on social media.', 'start': 1317.998, 'duration': 3.302}, {'end': 1323.822, 'text': 'All the links and various things are in the description.', 'start': 1321.68, 'duration': 2.142}, {'end': 1325.243, 'text': 'Thanks for tuning in.', 'start': 1324.342, 'duration': 0.901}, {'end': 1327.304, 'text': 'I hope you enjoyed this coding challenge.', 'start': 1325.483, 'duration': 1.821}, {'end': 1329.406, 'text': 'Ah, the boiler just came on.', 'start': 1327.704, 'duration': 1.702}, {'end': 1330.947, 'text': "There's a loud buzzing sound.", 'start': 1329.666, 'duration': 1.281}, {'end': 1331.987, 'text': "I'm leaving it in.", 'start': 1331.187, 'duration': 0.8}, {'end': 1333.468, 'text': "We're leaving it in.", 'start': 1332.368, 'duration': 1.1}, {'end': 1334.449, 'text': 'This is in.', 'start': 1333.769, 'duration': 0.68}, {'end': 1337.631, 'text': "I'm in a freezing cold garage right now.", 'start': 1334.889, 'duration': 2.742}, {'end': 1342.134, 'text': 'I had the heat off during this whole time just so I could record this coding challenge with you.', 'start': 1337.871, 'duration': 4.263}], 'summary': 'Coding challenge completed in a freezing garage, with instructions to create and share ascii art from the video.', 'duration': 31.382, 'max_score': 1310.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1310752.jpg'}], 'start': 1040.492, 'title': 'Converting and creating ascii art', 'summary': 'Demonstrates converting ascii art to video, involving adjustments in line height, font size, and image resizing, leading to dynamic visual representation. it also discusses converting images to ascii art, utilizing techniques such as manipulating character strings, adjusting image resolution, and exploring color values, while encouraging audience participation and engagement.', 'chapters': [{'end': 1167.036, 'start': 1040.492, 'title': 'Converting ascii art to video', 'summary': 'Demonstrates the process of converting an ascii art to a video, involving adjustments in line height, font size, and image resizing, leading to the creation of a dynamic visual representation using javascript.', 'duration': 126.544, 'highlights': ['The process of converting ASCII art to a video involves adjustments in line height, font size, and image resizing, leading to the creation of a dynamic visual representation using JavaScript.', 'The demonstration includes the use of the line height property to adjust the spacing between lines, with a specific example of setting it to 12 points and then making further adjustments for better visualization.', "The speaker explores the creation of ASCII art by adjusting font size and image resolution, eventually achieving a recognizable representation of 'Gloria' in the ASCII art.", 'The speaker discusses the transition from a static image to a video, involving the use of JavaScript to manipulate the visual elements and dynamically represent the ASCII art.', 'The process involves addressing challenges such as improper element creation and adjustment, leading to the need for updating the text of each div and optimizing the display of the visual representation on the page.']}, {'end': 1348.763, 'start': 1167.416, 'title': 'Creating ascii art from images', 'summary': 'Discusses the process of converting images to ascii art, utilizing various techniques such as manipulating character strings, adjusting image resolution, and exploring color values, while also encouraging audience participation and engagement through sharing their ascii art creations.', 'duration': 181.347, 'highlights': ["By manipulating character strings and adjusting spacing, the image is thresholded and retains its original aspect ratio and dimensions, such as when it's 64 by 48.", 'Encouraging audience participation and engagement by inviting them to create ASCII art from the video and share it on various platforms.', 'Exploring techniques to convert images into ASCII art, including manipulating character strings and exploring color values of pixels.', 'Discussing the process of converting images into ASCII art and the use of HTML tags for formatting.']}], 'duration': 308.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/55iwMYv8tGI/pics/55iwMYv8tGI1040492.jpg', 'highlights': ['The process of converting ASCII art to a video involves adjustments in line height, font size, and image resizing, leading to the creation of a dynamic visual representation using JavaScript.', 'The speaker discusses the transition from a static image to a video, involving the use of JavaScript to manipulate the visual elements and dynamically represent the ASCII art.', "By manipulating character strings and adjusting spacing, the image is thresholded and retains its original aspect ratio and dimensions, such as when it's 64 by 48.", 'Encouraging audience participation and engagement by inviting them to create ASCII art from the video and share it on various platforms.']}], 'highlights': ['Using shader code to render ASCII art based on brightness values of pixels from an image', 'The process of converting ASCII art to a video involves adjustments in line height, font size, and image resizing, leading to the creation of a dynamic visual representation using JavaScript.', 'The chapter explores transforming an image of Gloria into individual characters, indicating the possibility of using a black background and generating various outcomes such as poetry or live data feed.', 'The chapter discusses a potential name change for coding challenges, seeking input for new names.', 'The process involves reversing the order of characters to achieve the desired visual representation, indicating a need for character spacing adjustments.', 'Demonstration of converting images to ASCII art, emphasizing the significance of lower resolution images for better visual output.', 'Explains how to manipulate the spacing between characters to address the squashed appearance caused by horizontal and vertical pixel spacing discrepancies', 'Encouraging viewers to participate and share their versions on the Coding Train website and social media.', 'The speaker discusses the transition from a static image to a video, involving the use of JavaScript to manipulate the visual elements and dynamically represent the ASCII art.', 'The mapping of brightness values to characters in the density string is discussed, aiming to represent contours using ASCII art.']}