Hacker News Reader

Comment by busterarm | Hacker News Reader

This put such a huge smile on my face.

I was having a shit day, but now it's awesome. Thank you!

P.S. I will go build like 9 websites using this immediately.

Hit me up with the links and I'll put you in the gallery on the first page of the pitch. I still need 3 more screen-shots to swap out.

It's even better in full-screen mode.

Press F11 to experience the 80's.

Anyone have any advice for rendering images in a time/technology-appropriate fashion?

Lots of dithering, a 16 or 256 color palette, or just straight up convert to ASCII art.

An animated giv scanning through each line of the image one at a time?

If you're building a Macintosh System 6 or 7 style page, use this site[1] to create 1-bit Atkinson[2] dithered images which will fit perfectly.

[1] http://gazs.github.io/canvas-atkinson-dither [2] http://en.wikipedia.org/wiki/Bill_Atkinson

If you actually used a Mac back in the late 80's / early 90's, this site's output will give you a heady shot of pure, undiluted nostalgia. I wasted half an afternoon once, converting images for my imaginary Hypercard project.

Photoshop will also give you options and allow you to reduce colors down to an 8 bit or 4 bit palette, with a variety of dithering choices, or for the true lofi look (It's 1991 and I used the school's lab scanner for the first time!), no dithering at all.

If you happen to be writing your simulated vintage mac site on a modern mac, vImage (part of the Accelerate framework) supports Atkinson dithering from OS X 10.9 onward via vImageConvert_Planar8to[Planar|Indexed][124].

Not overly useful for one image, but if you have lots of them, it's nice to have a programmatic solution.

For instance, Atkinson dithering on video. Like Vine, but 8bit.

For that, you'll want the new vImage CV pixel buffer functions in iOS 8 and Yosemite =)

The only thing I was able to figure out cross-browser, and it's already in there, was this:

https://github.com/kristopolous/BOOTSTRA.386/blob/master/les...

    img {
     display: none;
     -webkit-filter: contrast(800%);
     -moz-filter: contrast(1000%);
     filter: contrast(1000%);
     -o-filter: contrast(800%);
     -ms-filter: contrast(800%);
    }

(In fact, I don't know what that display:none is doing there now ... I'll have to look into it)

There may be some brilliant visual hack to get images to look more faithful ... but this was the best I could figure out.

Reply on news.ycombinator.com