1-Bit Hokusai’s ”The Great Wave” | Hacker News Reader

1-Bit Hokusai’s ”The Great Wave”

hypertalking.com

391 pointsscraplab72 comments

This site design is one of the best retro Mac site designs I've seen. The author really nailed the pixel perfect fonts — it looks perfect on my low-DPI and high-DPI displays.

If anyone's interested, there's an active HyperCard community with some fun projects. There's a Discord server, too. https://hypercard.org/

I found that community through the Avara community, a port of the classic Mac multiplayer networked mech shooter from Ambrosia: https://github.com/avaraline/Avara

Also, if you're into retro Mac stuff or just want nostalgia, the Infinite Mac project is amazing. You can run all the major Mac OS Classic releases right in the browser, you can drag and drop files from Macintosh Archive or Macintosh Garden onto the window, and you can even create an AppleTalk network between browsers: https://infinitemac.org/

> The author really nailed the pixel perfect fonts — it looks perfect on my low-DPI and high-DPI displays.

It has some weird rainbow effect to it on mine, and the background flickers when I scroll.

Same here. Also a more minor issue for people like myself, the site causes some 'glare'(?) and is difficult to look at.

I've had this issue since my childhood, now that I think of it. On paper (especially grids) and websites. I should probably figure out what it is.

Do you have astigmatism?

I just looked it up and based off of anecdotal evidence, I think the answer is yes.

I have had glasses for nearsightedness in my left eye but it isn't bad enough for most situations. Never had an eye exam in my life.

I have astigmatism. I had the same issue with grids, certain fonts with lots of vertical lines, and other regular high contrast repeating patterns.

Got some glasses a few years ago for the first time from an optometrist, and now it doesn’t bother me anymore.

So I would recommend getting it checked out.

Thankyou for the recommendation! I'll go about scheduling that.

Same here, I think it's caused by the font it's using (BitGeneva12 [1], which obviously is a geneva [2] clone but I can't find where it (the font) is from. Maybe the author created it themselves?).

[1]

    src: url(//www.hypertalking.com/wp-content/themes/hypertalking/fonts/bitgeneva12-webfont.eot);
    src: url(//www.hypertalking.com/wp-content/themes/hypertalking/fonts/bitgeneva12-webfont.eot?iefix) format('eot'),url(//www.hypertalking.com/wp-content/themes/hypertalking/fonts/bitgeneva12-webfont.woff) format('woff'),url(//www.hypertalking.com/wp-content/themes/hypertalking/fonts/bitgeneva12-webfont.ttf) format('truetype'),url(//www.hypertalking.com/wp-content/themes/hypertalking/fonts/bitgeneva12-webfont.svg#webfontx0MbJbLm) format('svg');

[2] https://en.wikipedia.org/wiki/Geneva_(typeface)

Yeah, it looks like the font is scaled slightly wrong along the x-axis, so that the displayed pixels don't quite line up with screen pixels. Specifically, the text is rendered about 0.5% too narrow, causing a moire-type pattern that repeats about every 200 pixels.

Adding this custom CSS rule seems to fix it for me:

    p { transform: scale(1.005, 1); }

This seems to be because Firefox has no way to disable text antialiasing (whereas Safari and Chrome support -webkit-font-smoothing), so Firefox is trying to antialias a pixel font which just looks weird

Nope, I'm using Chromium.

Digging into it, it looks like the various CSS font smoothing selectors only work on macOS, not Linux or Windows.

How I miss Escape Velocity and Ambrosia Software. It was the first game I bought. Had to call the US at some weird hour from Australia and pay with Dad's credit card over the phone.

I'm aware there are similar games like Endless Sky (which I've played quite a bit).

I really wish the people behind Ambrosia could be encouraged to open source everything.

The website is really good but the font is blurry on my windows machine, only in this blog post.

If I adblock the (beautiful) “Great Wave” image, the font reads perfectly.

It's beautiful, but unfortunate that the font is trying to use cleartype, which screws up the aesthetic bigly.

When viewing the site in Firefox, the font in the paragraphs has a very subtle rainbow effect. Here's a screenshot of it zoomed in: https://i.imgur.com/ir0MmPq.png

I was wondering how they achieved that effect, but it doesn't seem intentional. It's not part of the CSS, and I only see it in FF, doesn't happen in Chrome.

It goes away if I switch fonts, it looks like it's some weird result of how Firefox renders the site's "BitGeneva12" font. Another odd thing, it goes away when I used FF's "Take Screenshot" feature. Also only happens when the font is 12px in size.

I assumed this was intentional to sorta look weird and retro. Sorta wild it's just Firefox messing it up.

It's not just Firefox, it's reproducible on Chromium browsers on Windows (10) as well.

It's probably due to anti-aliasing. A similar thing happens on some versions of Windows with ClearType turned on: https://en.wikipedia.org/wiki/ClearType

Webkit browsers have `-webkit-font-smoothing: none`. Does an equivalent exist for FF?

font-smooth: never Should be working on Firefox.

caniuse says it only works on macOS

Sub pixel antialiasing gone wrong?

On your screenshot I can only see the fonts aren't quite sharp, the rainbow effect is probably from your display trying to render these subpixel differences.

Looks fine in firefox on Linux: https://imgur.com/lmxTyrt.png

If you're interested in showing photographs and paintings on a classic Mac, I actually made an app for that. It takes modern images, dithers them to 1-bit, and then exports the results to MacPaint format (encoded in MacBinary for easy transport). It works on modern versions of macOS: https://oaksnow.com/retrodither/

I wish I could run my entire display in retro dithering mode.

There's something very... right about the black and white rendering from those early macs. Can't exactly put my finger on it but they seem very natural in a way that I can't readily identify in any other setting.

My own sense is that black and white forced an economy of pixels. For glyphs, icons, artwork, I could labor over the placement of every single pixel.

A crisp, high contrast display and neat, little square pixels just reinforces that kind of regenerative feedback loop.

Yes. For me, part of it is the display tech in use. Those monochrome CRT displays look great! And that "white" phosphor helps augment the whole thing in a way an LCD misses the mark on, but just slightly.

Still looks great.

For what it is worth, an e-ink display will look fantastic! I have one and will view this eye candy on it soon enough.

Bill Atkinson of Apple developed a new dithering algorithm for early Macs. I wonder if it was used for this rendering.

https://beyondloom.com/blog/dither.html

The author says “Software-wise I use Aldus SuperPaint 3.0”, so I expect it was drawn 100% by hand.

You are probably right. Author could of course have neglected to mention their ThunderScan or whatever but looking closely at the image it does not show dithering but rather a concerted attempt at using regular but changing patterns to achieve, for example, the gradient in the background.

yes, I drew it 100% by hand :-)

Bill Atkinson's dithering algorithm is great, and I use it for photos when I put them on the blog, to keep them aesthetically in line with the rest of the site

I took my father to see the original in Tokyo today. It's a sight to behold and worth a look next time you're here. You can also watch a Sumo match nearby.

It must have been a thrill to see a PowerBook 100!

I thought he made and sold many prints of each piece, so that identifying the original one wouldn't really be possible.

The original are the woodblocks (it’s multi-colour, so I assume there were multiple blocks). Those wouldn’t show the full picture and would have been worn down, if we still had them. We don’t, though. The next best thing would be prints made by the artist.

https://www.britishmuseum.org/blog/great-wave-spot-differenc... has a nice description using wear and tear to distinguish earlier from later prints.

Edit: nowadays, artists write things like “3/50” on their prints (meaning they made fifty prints, and this is the third). That informs collectors/drives up prices for the low numbered prints.

Yep I also saw some in a Hokusai museum in Osube near Nagano

It's a woodblock print — there were thousands printed, and ~100 known to still exist. I've seen the British Museum's copy.

I saw an original copy yesterday in the Boston Museum of Fine Arts, along with the 50,000 piece LEGO version! They have a large exhibit about Hokusai, along with many of his contemporaries such as Hiroshige, works from his students and teachers, and many many examples of how the Great Wave has been reflected in art and culture over the years. They didn't have this beautiful little 1-bit piece though.

When I was getting started with my laser engraver, I used the Great Wave as my template image. It translates to black and white quite nicely. Since the laser has a power range, you normally use grayscale but dithering also works. The stucki and jarvis options are both very good.

To me, dithering reminds me of early Macs (just like the link).

Of possible relevance: https://en.m.wikipedia.org/wiki/24_Views_of_Mt._Fuji,_by_Hok...

Is it worth reading? :)

Internet archive is your friend here. Yes very much so, especially if you can get the book Zelazny based the story on.

That story rules, as does the collection it's in (Frost and Fire).

I’ll have to find that, rather I used IA to find the back issue of the magazine it was published in.

Inspired by this thread, I just reread it. There's a reproduction with the original woodblock print images, which was useful because I didn't have that when I read this story as a teenager.

https://fictionbooks.top/24-views-of-mt-fuji-by-hokusai-3016...

Hokusai (1760 - 1849) also did tentacle porn

NSFW art -

https://en.m.wikipedia.org/wiki/The_Dream_of_the_Fisherman%2...

Book -https://pulverer.si.edu/node/277/title

Damn! That's super cool. I have shown the wave to my kids but I often tell them that artists are not always what we know of them. This is a superb demonstration ! Thanks for posting ! (usually I'd use l' "origine du monde" by Courbet)

This painting was prominently featured in several episodes of "Mad Men".

Of course, you can close the blog post (top left corner of the window), or click the floppy icon, which will reveal more posts. There aren't more Hokusai posts, though.

I don't understand- in what sense is this "1 bit"?

2 colors per pixel - black or white.

Every pixel has 1 bit of color depth, basically black or white.

If you transmitted it one pixel at a time left to right top to bottom scan, or boudestrophon l r l r l r if you prefer then the pixel stream would equal a 1 bit value toggling on or off.

Generally, "n bit" describes the color depth of an image by the number of bits used to store the color information of a pixel.

Some common formats:

  1 bit .... b/w  (foreground or background color set per pixel)
  4 bit .... 16 colors (indexed color palette or 16 shades of grey in 1 channel)
  8 bit .... 256 colors (indexed color palette or 1-channel greyscale image)
  12 bit ... 16 x 16 x 16 colors, 3 color channels at 4 bits for 4,096 colors total
  24 bit ... 256 x 256 x 256 colors, 3 color channels at 8 bits for 16,777,216 colors total
  32 bit ... as above, but including an extra alpha channel (mask) for 256 levels of transparency

There are also high-resolution color modes (e.g. in Photoshop) using either 16 bits or even 32 bits per color channel. (So 8-bit, 16-bit or 32-bit may also describe the depth for each individual color channel in imaging software.)

"8-bit" is also used for graphics on 8-bit computers, most often a palette of 8 or 16 indexed colors in some sort of sub-palette (e.g., 2 bit = 4 out of 8 or 16 colors), in rare cases even 128 colors (like on the Atari 2600). Here, "8-bit" relates to the platform and not to image depth or a specific implementation.

The property that a good font should have: on or off, present or not present.

Very cool drawing, as a side note I’ve seen Stable Diffusion be able to achieve very good pixel art with some Loras and textual embeddings plus some skill. Also seen it able to do amazing img2img art like pictured here.

Does anyone know of any modern linux desktop environments that are specifically designed for 1-bit or grayscale? I really like the nice clean look as demonstrated here.

I love 1bpp pixel art and the whole site looks great! Nice work, or shall I say labor of love?

On a whim, I picked up an e-ink display, 1800x1400 that has 16 grey shades, though I am unclear whether that is per pixel. Should know soon.

As I learn to use the display, throwing some of this art on it should look great.

That is all really. Just wanted to say nice work from one bit per pixel lover to another.

Thanks! :-)

I know this isn't the point, but if anyone wants to make pictures like this automatically you can use dithering.

You’re going to miss the pixel perfect lines. There’s a whole subtle esthetic in this version from the careful manipulation of pixels…

I love how it’s still beautiful…

"Return of the Obra Dinn" game gives similar vibes.

The author, Lucas Pope, went into deep detail describing the dithering process and shader used in Return of the Obra Dinn. It's outstanding work.

https://forums.tigsource.com/index.php?topic=40832.msg136374...

Thanks, that looks amazing, never heard of it before!

When I have a bit of time, I'll compare dither algorithms to that human version. Would be cool to see how they compare !

Holy cow, that web site takes me back...

Holy dogcow, even!

moof moof!

Reply on news.ycombinator.com