Note
This repository is mostly discontinued, but I have created an add-on library p5.asciify
that includes the functionalities showcased here and much more. It will be in active development for the foreseeable future. :) Make sure to check it out, as it only requires the import of the add-on library to asciify your existing WEBGL
sketches without any hassle.
This repository contains a rendering pipeline implemented in p5.js
, that converts an input buffer into an ASCII representation based on the brightness and edge detection of the input buffer. The renderer is highly customizable and allows for adjustments of various parameters during runtime, such as font size, character set, colors, and more.
The project is inspired and based on the ideas and concepts shown in the YouTube video "I Tried Turning Games Into Text
" by Acerola
.
If there are any questions regarding this project, feel free to reach out to me via email (travellingwithoutarriving@gmail.com) or instagram (@humanbydefinition
).
Note: The demo should work on all types of devices and screens. Let me know if you experience any issues!
🎮 Control
Adjust parameters during run-time through an overlay.🎬 Capture
Capture and export the canvas into various image formats, aswell as videos in gif- or webm-format.🎨 Customize
Upload your own fonts & customize font size, character set, colors and more during run-time.♻️ Re-use
Import and export presets inJSON
-format for re-use.
/
: Containsindex.html
,sketch.js
,characterset.js
(used for creating a 2D texture from a font file), andgrid2d.js
(used for managing grid dimensions).libraries/
: Contains libraries unavailable on CDNs like jsdelivr.com, that are redistributable under the MIT License.shaders/
: Contains the GLSL shaders necessary for the rendering loop.ui/
: Contains the code for the Tweakpane user interface.utilities/
: Contains utility functions, specifically for translating color formats.
To get started with the p5.js ASCII Renderer, follow these steps to set up a local or remote web server and run the project:
- Clone the Repository:
git clone https://github.com/humanbydefinition/p5js-edge-detection-ascii-renderer.git cd p5js-edge-detection-ascii-renderer
- Set Up a Web Server:
- For local development, you need a web server to run the project. Refer to the p5.js Wiki for detailed instructions on setting up a local server.
- Open the Project:
- Once the server is set up, open
index.html
in your browser to see the renderer in action.
- Once the server is set up, open
Personally, as described in the above wiki article, I recommend using VS Code with the Live Server extension for a smooth development experience.
p5.js (1.9.3)
(licensed under the LGPL-2.1 License)p5.Capture (1.4.1)
(licensed under the MIT License)Tweakpane (3.1.10)
(licensed under the MIT License)Essentials Plugin (0.1.8)
(licensed under the MIT License)Infodump Plugin (0.3.0)
(licensed under the MIT License)File Import Plugin (0.1.7)
(licensed under the MIT License)Table Plugin (0.3.1)
(licensed under the MIT License)
For a complete list of dependencies, please refer to the repositories linked above.
Besides this awesome font, I am unfortunately not allowed to redistribute any other fonts here. However, here are some other textmode/pixel fonts that have been successfully tested without any issues:
Font | Description |
---|---|
C64 Pro Mono | Includes all 304 unique C64 glyphs. |
DOS/V re. JPN12 | Japanese versions of IBM (PC-)DOS / MS-DOS. |
Retromoticons | Bitmap emoticon dingbat font containing 77 glyphs. |
og-emoji-font | Based on the original DoCoMo emoji set, designed in 1999 by Shigetaka Kurita. |
pixelated-wingdings | Pixelated/8-bit version of the Wingdings font. |
FROGBLOCK-V2.1 | Monospaced 8x8 textmode font with 256 glyphs. |
CHUNKY | 8x8 textmode font with 366 glyphs. |
Kitchen Sink | Monospaced 8x8 textmode font with 256 glyphs. |
CozetteVector | 6x13 bitmap programming font. |
PixelCode | Monospace pixel art style programming font. |
ark-pixel-font | Open source pan-Chinese, Japanese and Korean pixel font. |
Vonwaon | Chinese pixel font with thousands of glyphs. |
unscii-16 | Bitmapped Unicode fonts based on classic system fonts. |
Feel free to test your favorite fonts, but keep in mind that the current implementation for creating a 2D character tile map texture from a p5.Font
object may not work properly with all fonts. For fonts not mentioned here, characters might overlap into other tiles on the texture.
If you have font suggestions to share, I'd love to hear them! 😊
Contributions are welcome. Please open an issue
or submit a pull request
on GitHub.
This project is licensed under the MIT License. See the LICENSE
file for more details.