Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.

This component can be downloaded with `npm install video2ascii`. Check out the Github and feel free to give it a star ⭐

It comes out of the box with additional features like mouse tracing, click effects, different character sets, modulating brightness by the sound in the video and more!

The converter works by splitting the video into a grid then averaging the pixels in each cell to get a brightness level and color. Then, it maps it to a color and ASCII character. WebGL 2.0 offers mipmaps and better texture handling to speed up rendering.

This currently only supports WebGL 2.0 devices but would love if someone could add support for more devices!

Shoutout to @PimDeWitte and @gen_intuition for the inspiration to build this out

@gen_intuition Check out some interactive examples on my website

@gen_intuition pretty cool, I have a gif to ascii generator and I also coded my own html2ascii generator that saves the html image by taking a screenshot of it using html2canvas all written in Pike, with the site being html,css, & javascript here's an example of both the gif and pixel to ascii

@gen_intuition nice

@gen_intuition From the video above it looks like most videos need brightness and contrast bump. For best effects I would also add Posterize effect where you reduce number of colors for more solid areas that look better as letters.

@gen_intuition The video doesn’t do it credit! The examples on my website look better but will take this feedback and put it in the next release!

@gen_intuition Lol does this even count as ascii art? Just looks like pixels. If you remove the colors, is anything legible?

@gen_intuition AND HE DOES IT AGAIN

@gen_intuition I made a similar tool for gifs.

@gen_intuition i made this too just a while ago @

@gen_intuition That’s not ascii art, that’s ansi art.

@gen_intuition wow, impressive effect love the vibe :-) dope you made this one oss let's launch you for fun on anytime btw

@gen_intuition this is sick!

I wrote a JavaScript thing that did this in like 2016. Wasn’t as cool as this. 1. I did not know what react was 2. You had to convert your videos with a python utility I wrote that turned them into massive json files. Besides those caveats it worked pretty well. You can see it on the archived version of I’ve got the code on GitHub too but it’s embarrassing 😂

@gen_intuition @Im_zo_sol @12g8ge

@gen_intuition Aight dope

@gen_intuition Reverse-engineering vibes into oss components. that's the real dev flex.

Cool. Creatively beautiful coding/work that expands on a nostalgic fidget-coding spinning pastime w a modern fun spin. This idea: output ASCII Art to multiple independent layers & we have hidden messages layered w breadth & 'depth' (reading into it pun intended) AND a 3D effect‽

@gen_intuition Cool

@gen_intuition Idk if I can Mickey Mouse a way to use this in square space I’m doing it 😭

@gen_intuition This is sick very cool work

@gen_intuition this is sick

@gen_intuition 😱😱😱

@gen_intuition um thank you I will put this to work immediately

@gen_intuition This is insane bro

@gen_intuition love this! ty for building and making it open source

@gen_intuition this is sick!!

@gen_intuition Immediately went to test it against our BADAS model, and it aced it! :)

@gen_intuition so damn good

@gen_intuition @tevoeatacid 👀

@cyb3rops @gen_intuition VLC has done this for years.

@gen_intuition THIS IS SO GOOD

@gen_intuition I was doing this over ssh in the early 2000s. Buying like showing your friends acsii porn in school 😂😂😂

@gen_intuition sickkkkkkkkkkk

@gen_intuition this is cool

@gen_intuition this is insanely tuff

@gen_intuition In my ollama file manager I convert and play all videos in ascii art mode. I made it originally to help me add folders to git and create a markdown to describe my repo: