14 ms·

Show HN: An ASCII art music video animated with JavaScript

41 points by bejd 6y ago

rodw 6y ago
I don't know what I was expecting, but I was a little disappointed that the ASCII art seems to be generated from actual video. (I assume?) When I first clicked the link I guess in my head I was stressing the art part of ASCII art, and was expecting something other than a super-low-res version of regular video. I was imagining something more hand-crafted. Or at least more visually interesting (like that lego-ized bit in that White Stripes video, which was probably done from real video too I suppose, but surely with manual support in some way). That said, the video-to-ASCII-art tech is actually pretty neat (and looks like more than a naive convert-to-grayscale-and-map-to-characters approach that I've seen for still images). And so is the idea of displaying music video via live JavaScript, although that part didn't actually work for me, I had to use the YouTube link to view it. This probably says more about me than the linked video though. It is pretty cool and creative overall.
- easytiger 6y ago
  > That said, the video-to-ASCII-art tech is actually pretty neat (and looks like more than a naive convert-to-grayscale-and-map-to-characters approach that I've seen for still images The author used a third party application for that. I saw things like this in the 90s
- bejd 6y ago
  Thanks for checking it out. I'm absolutely not a true ASCII artist, so my primary method of creating the images was rotoscoping an initial frame of video, then duplicating and adjusting each frame by hand after that. I'd love to see some proper animated ASCII art by someone more talented than me!
  - kickscondor 6y ago
    You did a fantastic job - and very generous of you to release the code as well. Applause.
  - ggeorgovassilis 6y ago
    Great work though :-) Anybody looking for an easy, web-based editor to create animated ASCII art and export them to animated GIFs try my side-project https://animasci.com/ https://animasci.com/
- ape4 6y ago
  Doesn't ffmpeg have a ASCII output option?
- kickscondor 6y ago
  I dunno - the JavaScript player is really well done. There are some surprising touches - like the background changes with the video.
- rodw 6y ago
  BTW: I happened to re-watch that White Stripes video (for "Fell in Love with a Girl") and I misremembered it badly. Pretty much the whole thing is done in what looks like stop-motion animation with Lego blocks (but may actually be totally digital, I don't really know). I imagine that part was mostly done by hand. There is a tiny part that's clearly a genuine video clip that has been manipulated (via filter or hand, maybe both) to create a kind of pixelated roughly lego-style effect. That's actually the part I was thinking of, but had forgotten that the rest of the video is basically stop-motion lego (-eseque) anyway. That's actually more aligned with what I was expecting here I think.
tingletech 6y ago
I can't find the play button, but the video on youtube looks cool.
- blattinum 6y ago
  yeah, website doesn't work but looks cool
  - bejd 6y ago
    The play button should be above the video. It might be getting pushed off-screen if the viewport is wide but not too tall. I should have been less lazy with the CSS which currently only takes into account screen width for resizing the various page elements. I'll make some adjustments.
dec0dedab0de 6y ago
This was awesome, great job.
tomato2juice 6y ago
While the size of this file is >64kb, it reminds me of the demoscene which does impressive stuff like this, but with much less space. If you're not familiar, this is an introduction https://www.slideshare.net/dfox288/introduction-to-the-demoscene https://www.slideshare.net/dfox288/introduction-to-the-demos...
t0astbread 6y ago
I like how the presentation is sometimes ambiguous because of the low resolution. For example I first thought the black lines coming out of the skull (or was it a skull?) were ants but then they started sprouting blossoms. Very nice effect!
nihil75 6y ago
I like your music! Reminds me of early Sikth :)
- quickthrower2 6y ago
  +1 for the music. I’m not usually into this genre but I could see me adding this to my playlist
oefrha 6y ago
Anyone remember rickrolling over telnet? Or this: https://github.com/keroserene/rickrollrc https://github.com/keroserene/rickrollrc (Not over telnet, but same effect.)
dandep 6y ago
I like this aesthetic used in new ways, like https://boniver.withspotify.com/ https://boniver.withspotify.com/
dang 6y ago
Url changed from https://github.com/bejd/clad-ascii https://github.com/bejd/clad-ascii to the project page, which is nicer.
bishalb 6y ago
Related - AC/DC had released the music video for their song 'Rock n roll train' as an Excel spreadsheet https://www.rollingstone.com/music/music-news/ac-dc-turn-rock-n-roll-train-into-worlds-first-excel-video-79807/ https://www.rollingstone.com/music/music-news/ac-dc-turn-roc...

41 points by bejd 6y ago

rodw 6y ago

I don't know what I was expecting, but I was a little disappointed that the ASCII art seems to be generated from actual video. (I assume?) When I first clicked the link I guess in my head I was stressing the art part of ASCII art, and was expecting something other than a super-low-res version of regular video. I was imagining something more hand-crafted. Or at least more visually interesting (like that lego-ized bit in that White Stripes video, which was probably done from real video too I suppose, but surely with manual support in some way). That said, the video-to-ASCII-art tech is actually pretty neat (and looks like more than a naive convert-to-grayscale-and-map-to-characters approach that I've seen for still images). And so is the idea of displaying music video via live JavaScript, although that part didn't actually work for me, I had to use the YouTube link to view it. This probably says more about me than the linked video though. It is pretty cool and creative overall.

easytiger 6y ago
> That said, the video-to-ASCII-art tech is actually pretty neat (and looks like more than a naive convert-to-grayscale-and-map-to-characters approach that I've seen for still images The author used a third party application for that. I saw things like this in the 90s
bejd 6y ago
Thanks for checking it out. I'm absolutely not a true ASCII artist, so my primary method of creating the images was rotoscoping an initial frame of video, then duplicating and adjusting each frame by hand after that. I'd love to see some proper animated ASCII art by someone more talented than me!
- kickscondor 6y ago
  You did a fantastic job - and very generous of you to release the code as well. Applause.
- ggeorgovassilis 6y ago
  Great work though :-) Anybody looking for an easy, web-based editor to create animated ASCII art and export them to animated GIFs try my side-project https://animasci.com/ https://animasci.com/
ape4 6y ago
Doesn't ffmpeg have a ASCII output option?
kickscondor 6y ago
I dunno - the JavaScript player is really well done. There are some surprising touches - like the background changes with the video.
rodw 6y ago
BTW: I happened to re-watch that White Stripes video (for "Fell in Love with a Girl") and I misremembered it badly. Pretty much the whole thing is done in what looks like stop-motion animation with Lego blocks (but may actually be totally digital, I don't really know). I imagine that part was mostly done by hand. There is a tiny part that's clearly a genuine video clip that has been manipulated (via filter or hand, maybe both) to create a kind of pixelated roughly lego-style effect. That's actually the part I was thinking of, but had forgotten that the rest of the video is basically stop-motion lego (-eseque) anyway. That's actually more aligned with what I was expecting here I think.

tingletech 6y ago

I can't find the play button, but the video on youtube looks cool.

blattinum 6y ago
yeah, website doesn't work but looks cool
- bejd 6y ago
  The play button should be above the video. It might be getting pushed off-screen if the viewport is wide but not too tall. I should have been less lazy with the CSS which currently only takes into account screen width for resizing the various page elements. I'll make some adjustments.

dec0dedab0de 6y ago

This was awesome, great job.

tomato2juice 6y ago

While the size of this file is >64kb, it reminds me of the demoscene which does impressive stuff like this, but with much less space. If you're not familiar, this is an introduction https://www.slideshare.net/dfox288/introduction-to-the-demoscene https://www.slideshare.net/dfox288/introduction-to-the-demos...

t0astbread 6y ago

I like how the presentation is sometimes ambiguous because of the low resolution. For example I first thought the black lines coming out of the skull (or was it a skull?) were ants but then they started sprouting blossoms. Very nice effect!

nihil75 6y ago

I like your music! Reminds me of early Sikth :)

quickthrower2 6y ago
+1 for the music. I’m not usually into this genre but I could see me adding this to my playlist

oefrha 6y ago

Anyone remember rickrolling over telnet? Or this: https://github.com/keroserene/rickrollrc https://github.com/keroserene/rickrollrc (Not over telnet, but same effect.)

dandep 6y ago

I like this aesthetic used in new ways, like https://boniver.withspotify.com/ https://boniver.withspotify.com/

dang 6y ago

Url changed from https://github.com/bejd/clad-ascii https://github.com/bejd/clad-ascii to the project page, which is nicer.

bishalb 6y ago

Related - AC/DC had released the music video for their song 'Rock n roll train' as an Excel spreadsheet https://www.rollingstone.com/music/music-news/ac-dc-turn-rock-n-roll-train-into-worlds-first-excel-video-79807/ https://www.rollingstone.com/music/music-news/ac-dc-turn-roc...