moof
August 29, 2012 10:56 AM   Subscribe

Working on a shareware game in Hypercard but just can't find the right image for your About box? Give your photographs the System 6 treatment with Gáspár Körtesi's in-browser drag-and-drop dither tool.
posted by theodolite (43 comments total) 44 users marked this as a favorite
 
Nifty!
posted by grubi at 11:02 AM on August 29, 2012 [1 favorite]


Awww man, why you got to remind me about HyperCard? Now I'm all sad that it's not around any more.

HyperCard was like the Mr Rogers of Mac software.
posted by Deathalicious at 11:02 AM on August 29, 2012 [14 favorites]


Atkinson Dithering is a nifty little algorithm. I used the explanation from the bottom of this page to implement my own in matlab. Fun times...
posted by garethspor at 11:07 AM on August 29, 2012


Neat!
posted by brundlefly at 11:08 AM on August 29, 2012


I love this. I'm unreasonably fond of the System 6 look.

Hey, remember that "how to use this computer" program that came with the Mac SE, which included the game where you use your mouse cursor to tell pigeons to fly away? That was so relaxing. Soooooo relaxing.
posted by Sticherbeast at 11:18 AM on August 29, 2012 [8 favorites]


Somebody at the Wall Street Journal is probably updating his resume right now.
posted by boo_radley at 11:21 AM on August 29, 2012 [4 favorites]


I don't think there are any browsers that support HTML5 Canvas and also run on a Mac SE?
posted by miyabo at 11:26 AM on August 29, 2012


The nostalgia, it's overwhelming!
posted by tommasz at 11:27 AM on August 29, 2012 [1 favorite]


More on Atkinson dithering, including Python code, from Metafilter's own Mike Miguski.
posted by Nelson at 11:31 AM on August 29, 2012


Er, Mike Migurski.
posted by Nelson at 11:32 AM on August 29, 2012


Heh. The creator is my flatmate and he's quite in awe right now.
posted by KTamas at 11:32 AM on August 29, 2012 [5 favorites]


KTamas...Buy him a beer for us! This is sweet.
posted by Thorzdad at 11:33 AM on August 29, 2012 [3 favorites]


Bah, it doesn't work for me! I'm on a brand new firefox, so it ought to, I think.
posted by BungaDunga at 11:35 AM on August 29, 2012


Also, why isn't the desktop dithered?
posted by miyabo at 11:36 AM on August 29, 2012


Bah, it doesn't work for me! I'm on a brand new firefox, so it ought to, I think.

Had the same problem when I "browse" for a file rather than drag and drop. When I did the drag and drop it worked for me.
posted by msbrauer at 11:37 AM on August 29, 2012 [1 favorite]


Yeah, if your pal wants his beer he needs to get the browse button working.
posted by shothotbot at 11:39 AM on August 29, 2012 [2 favorites]


So great.
posted by Rock Steady at 11:44 AM on August 29, 2012


Hi all! So after years of lurking here my flatmate finally convinces me to register and the first thing I see is a bug? This was written way back when the FileReader API was bleeding edge --- I'm suprised it works as well as it does actually -- so it's probably related to that. I'm going to look into it now that there's some interest.

miyabo, the deskop isn't dithered because at today's resolution the tiny but neatly organized dots is really straining your eyes. At least it made my eyes water.
posted by Gazs at 11:49 AM on August 29, 2012 [4 favorites]


my flatmate finally convinces me to register and the first thing I see is a bug?

Yes, but we promised beer in exchange for bug-fixing!

Promises are not legally binding. Only one beer per household. Beer is only offered to coders of legal drinking age. Please consult an entomologist before approaching any bugs. Maybe the guy who camped out with the brown recluse spiders, he seemed nice.
posted by shothotbot at 12:00 PM on August 29, 2012 [2 favorites]


I played a bit with Migurski's Python code. It looks like the "blown highlights/lost shadows" problem is exactly due to diffusing only 6/8 of the error instead of 100% of the error.

It's fairly simple to diffuse much closer to 100% of the error without adding much overhead or losing that "clustered" look that is so characteristic of Atkinson dithering, so I suppose that the blown highlights / lost shadows look must have been desired.

Basically, after computing err = (old - new) >> 3, you computer err = err + (err>>2), diffusing 93.75% of the error instead of 75% of the error; Referring to the MC68000 User's Manual that I just happen to have on my bookshelf, it looks like to do this you'd need an ASR, ADD and maybe a register MOV, or about 18 cycles, or 3 microseconds per pixel at 6MHz.
posted by jepler at 12:10 PM on August 29, 2012 [4 favorites]


Ok, it should now work on at least the latest Firefox and Chrome.
posted by Gazs at 12:58 PM on August 29, 2012 [1 favorite]


The next step of course, would be to combine it with the recent getUserMedia stuff to get the live feed from webcams. The only problem is that I can't get the processing any faster than 10fps on anything bigger than a stamp....
posted by Gazs at 1:01 PM on August 29, 2012


Now that's service!
posted by theodolite at 1:01 PM on August 29, 2012


That is service and this is awesome. I'm all misty-eyed for my old SE now. It was boxy, but it was good.
posted by The Bellman at 1:08 PM on August 29, 2012


Wonder if it's possible to write a pixel shader that does this.
posted by hellojed at 1:11 PM on August 29, 2012


I have no use for dithering images, and I don't have masses of nostalgia for it, but damn this is cool. I'm going to find more pictures to ditherate (or whatever the word might be).
posted by milkb0at at 1:55 PM on August 29, 2012


Wonder if it's possible to write a pixel shader that does this.

It's elementary to write a pixel shader for a halftone effect, so I would think: yes.
posted by alex_skazat at 2:00 PM on August 29, 2012


Don't pixel shaders need that each pixel's output be independent from every other pixel's? Here every pixel needs to touch 6 others, so I'm not sure you can parallelize this particular dithering method at least
posted by Gazs at 2:03 PM on August 29, 2012


Hey Gazs, as long as you're here, how hard would it be to add Load from URL?
posted by theodolite at 2:06 PM on August 29, 2012


theodolite, not hard but cumbersome enough that I'm not promising anything right now.

There's a really annoying Canvas limitation that I can only read image data from files that either I create (or the user uploads) or that comes from the same domain. To load from an external URL would require some sort of server component that handles the cross-domain communication, which would mean moving the hosting from github, which is too much trouble for tonight. And then you might as well just do a standalone API and process the images serverside.... (But maybe this weekend if the WebAudio microphone stuff doesn't get into a Chrome nightly by then... I *really* want to do a Dalek vocoder in Javascript!)
posted by Gazs at 2:23 PM on August 29, 2012


Hey cool, I love obnoxious alerts!

But the dithering is fun. Ordinarily I don't much like gimmick site designs, but Thomas Brand's Newton-inspired Egg Freckles, complete with Atkinson dithering, is a favourite.
posted by dumbland at 3:39 PM on August 29, 2012 [1 favorite]


Wow, the results from this are quite surprisingly good. I used to have the Thunderscan Digitizer for my first Mac (essentially a black & white scanner that rather ingeniously replaced the printer ribbon in your Imagewriter with a scanner) but the results were (ahem) spotty. Granted, the original Mac had only 256x256 resolution, which is practically the size of a postage stamp these days.

This ditherer really does a great job of halftoning. I'd swear I seem some grey pixels in there, but nope.
posted by ShutterBun at 4:15 PM on August 29, 2012


Wasn't the first Mac 512x384?
posted by Malor at 4:48 PM on August 29, 2012


Gazs, I looked into it a while back and I came to the same conclusion: an Aktinson pixel shader would not be easy to write, because it’s a serial algorithm over the pixels of an image.
posted by migurski at 6:11 PM on August 29, 2012


Malor: yeah.

I used Pagemaker on those tiny screens.
posted by migurski at 6:12 PM on August 29, 2012 [2 favorites]


Wasn't the first Mac 512x384?

512 x 342.

The epitome of the original Mac experience, though, was the Portable with a huge 640 x 400 screen that you could read for days (assuming a convenient outlet.)
posted by ChurchHatesTucker at 6:12 PM on August 29, 2012


I stand corrected. Turns out I was inadvertently quoting specs from the original prototype, not the production model. (the aspect ratio alone should have tipped me off that I was wrong)
posted by ShutterBun at 6:48 PM on August 29, 2012


<bigassedsmile>

First time I encountered the drag-drop feature in a browser. Worked perfectly.

Too bad the submitted images aren't stored; would make an interesting slideshow.
posted by porpoise at 7:00 PM on August 29, 2012


My favorite gimmicky iPhone camera app, 1-Bit Camera, shoots single-bit-depth images with a choice of Bayer or Atkinson dithering. It can also pull in and convert existing images from your camera roll. The real-time preview is like having a set of Old-School-Mac-o-Vision Goggles!
posted by Lazlo at 12:58 AM on August 30, 2012 [2 favorites]


I used Pagemaker on those tiny screens.

God, those were the days. Going into my college newsroom and working on their portrait displays for the first time was a revelation.
posted by Huck500 at 7:08 AM on August 30, 2012 [2 favorites]


No you guys, seriously this thread is breaking my heart. HyperCard is what led me to where I am now. Although I'd fiddled with AppleSoft Basic (which also tugs on my heartstrings from time to time) it really was in HyperCard that I first started making interfaces that did something. In high school I created a stack for creating hypertext stories. It was based almost entirely on the interface used for Afternoon, a story which was written in StorySpace. I spent hours and hours, creating a fake floating palette, writing scripts in HyperTalk, drawing tiny black and white icons.

When the web came around I started creating a few pieces in HTML. I was really excited about the idea of a giant interlinked space of content. I eventually got a job somewhere doing minor HTML work. From there I fell into web programming and have never left it.

Bill Atkinson is just this incredible guy. Early Mac software had just this very personal feel to it.

HyperCard is also how I got addicted to the Internet. Time for more uncomfortable feelings -- I spent literally hundreds of dollars of my parents' money on AOL in the HyperCard forums, which at the time were the best possible place to learn about HyperTalk and swap tips, tricks, and code. It was really the first time that I felt like I could be on this equal level with people who were also passionate about this thing. A big thing was external commands and external functions (XCMDs and XFCNs). Maybe the most famous was Rinaldi's Externals (holy crap, he's still around and still making them!).

Interesting trivia note: one of the real gurus of HyperCard was Bob West. Fairly well known in HC circles. He also had a pretty cool looking website for its time, Dog and Pony. But he's most famous for being the voice of Barney the Dinosaur.
posted by Deathalicious at 9:19 AM on August 30, 2012 [6 favorites]


Interesting trivia note: one of the real gurus of HyperCard was Bob West. Fairly well known in HC circles. He also had a pretty cool looking website for its time, Dog and Pony. But he's most famous for being the voice of Barney the Dinosaur.

No shit.

There was a HC based roll-your-own Interactive Fiction generator (whose name escapes me) and one of the tropes of the resulting games was a hatred for Barney.
posted by ChurchHatesTucker at 11:49 AM on August 30, 2012


Here's my internal dialogue as I clicked on the link and uploaded a picture (which worked fine in Chrome by the way):

"What is this? What's dithering? This interface takes me back, but I'm not really sure that I understand what OH MY GOD MY LOST YOUTH."

I have a Mac SE that still works, by the way. Every once in a while I fire it up to play Tetris. I also have a set of near-mint copies of all 14 issues of Shatter.
posted by ErikaB at 11:57 AM on August 30, 2012 [2 favorites]


« Older The New American Industry   |   The secret allure of the spoiler. Think you don’t... Newer »


This thread has been archived and is closed to new comments