I had a lot of fun and learned a lot creating this project! □ Future additional features, in approximate order of implementation difficulty, could include: I might write a future post about that if there's interest in it. The UI for this project is built in React ⚛ and mostly isn't as interesting as the algorithm itself. For example, a 2×2 image in these colors (the last pixel is transparent):Ĭonst perceivedLuminance = Įnter fullscreen mode Exit fullscreen mode With the HTML5 Canvas API, we can do all this without leaving the browser! □ĬanvasRenderingContext2D#getImageData gives a Uint8ClampedArray of channels in the order red, green, blue, alpha. Render the resulting 2d matrix of characters in a monospace font. Map the resulting luminance value of each pixel onto the character closest in density value. Render the target image in the required aspect ratio, then calculate the relative luminance of each pixel.Īpply brightness and contrast modifying functions to each pixel value, based on the configured options.Īs before, normalize the absolute values into relative values in the range 0.1 (0 is the darkest and 1 is lightest). This way, you get light pixels mapped to dense characters, suitable for light text on a dark background.Ĭalculate the required aspect ratio (width:height) in "char-pixels", based on the rendered width and height of the characters, where each char-pixel is a character from the charset.įor example, a charset composed of half-width characters will need to render more char-pixels vertically to have the same resulting aspect ratio as one composed of full-width characters. If the "invert" option is selected, subtract the relative values from 1. Normalize the resulting absolute values into relative values in the range 0.1, where 0 is the sparsest character in the charset and 1 is the densest. is very sparse, whereas # is very dense, and a is somewhere in between. The output will be highly customizable, with options for increasing brightness and contrast, width in characters, inverting the text and background colors, and even changing the character set we use to generate the images.Īll the code is available on GitHub, and there's a live demo you can play around with too!Ĭalculate the relative density of each character in the character set (charset), averaged over all its pixels, when displayed in a monospace font. You've probably seen it in the terminal output of some of your favorite command line apps.įor this project, we'll be building a fully browser-based text art generator, using React and TypeScript. Text art, often called " ASCII art", is a way of displaying images in a text-only medium.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |