Old School Color Cycling with HTML5
July 26, 2010 2:38 AM Subscribe
Old School Color Cycling with HTML5
This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.
(Apparently works in all browsers except Internet Explorer. Sorry.)
This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.
(Apparently works in all browsers except Internet Explorer. Sorry.)
But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory.
From what I can make out from the article, this is really just a simulation of actual colour cycling as it used to be done, in that he's manually setting an array of pixels rather than actually manipulating the bits of an indexed palette in memory.
Looks nice, though
posted by le morte de bea arthur at 2:55 AM on July 26, 2010 [2 favorites]
From what I can make out from the article, this is really just a simulation of actual colour cycling as it used to be done, in that he's manually setting an array of pixels rather than actually manipulating the bits of an indexed palette in memory.
Looks nice, though
posted by le morte de bea arthur at 2:55 AM on July 26, 2010 [2 favorites]
These are actually quite beautiful, in an 8-bit sort of way!
posted by Salvor Hardin at 3:05 AM on July 26, 2010
posted by Salvor Hardin at 3:05 AM on July 26, 2010
Internet Explorer 6, 7, 8 : Does not work, unless of course you have Google Chrome Frame, hehe.
Chrome frame is pretty badass. It's basically a plug in version of Chrome for I.E. which only activates if your page requests it, so you can use HTML 5 just as easily as you can flash (i.e. the user needs a plugin)
I've always figured that in a few years pages will just select and download their own rendering engine rather then trying to work out all the quirks and incompatibility on the web. This is a step in that direction, except I figured the layout engines would work in JS, rather then being native plugins.
posted by delmoi at 3:11 AM on July 26, 2010 [1 favorite]
Chrome frame is pretty badass. It's basically a plug in version of Chrome for I.E. which only activates if your page requests it, so you can use HTML 5 just as easily as you can flash (i.e. the user needs a plugin)
I've always figured that in a few years pages will just select and download their own rendering engine rather then trying to work out all the quirks and incompatibility on the web. This is a step in that direction, except I figured the layout engines would work in JS, rather then being native plugins.
posted by delmoi at 3:11 AM on July 26, 2010 [1 favorite]
From the original artists website:
Perhaps some new internet tool will come out that allows us to show these old drawings to you in motion. ... Not this month though. Sorry.
These look lovely. I'm a sucker for stuff like the twinkling stars on the night scenes, and those fire effects. Magic Desert Cave looks like a game I would love to play. Having "Show Options" at the top uncover the palette and show the colours as they are cycling is a great touch.
posted by WhackyparseThis at 3:35 AM on July 26, 2010
Perhaps some new internet tool will come out that allows us to show these old drawings to you in motion. ... Not this month though. Sorry.
These look lovely. I'm a sucker for stuff like the twinkling stars on the night scenes, and those fire effects. Magic Desert Cave looks like a game I would love to play. Having "Show Options" at the top uncover the palette and show the colours as they are cycling is a great touch.
posted by WhackyparseThis at 3:35 AM on July 26, 2010
This looks better than any 256-color game I ever saw.
I wish they'd make good old 2D point-and-click in this kind of retro style. Those demos really need Guybrush Threepwood!
posted by Harry at 4:27 AM on July 26, 2010 [1 favorite]
I wish they'd make good old 2D point-and-click in this kind of retro style. Those demos really need Guybrush Threepwood!
posted by Harry at 4:27 AM on July 26, 2010 [1 favorite]
It's funny to see Guybrush mentioned, since Mark Ferrari actually worked on the backgrounds in the original EGA versions of Monkey Island and Loom. I recognised his artwork mostly because of the puzzle game Heaven & Earth. (Particularly its main menu.)
posted by seikleja at 5:12 AM on July 26, 2010 [2 favorites]
posted by seikleja at 5:12 AM on July 26, 2010 [2 favorites]
256 colors? Luxury! On the Amiga we had 32 (plus assorted tricks like HAM, copper bars and RGB plasma)
posted by Artw at 5:26 AM on July 26, 2010 [3 favorites]
posted by Artw at 5:26 AM on July 26, 2010 [3 favorites]
I used to piddle around with programming on Amiga's many years ago. I use the world "piddle" because it was with AMOS Professional which was, in short, BASIC.
I distinctly remember writing routines which would plot pixels onto the screen at varying positions and then colour cycle them to generate an animation. Parallax scrolling star fields were a popular one.
The advantage of doing this kind of thing with AMOS was that you could cycle the colour palette asynchronously - in other words, draw a static image, turn colour cycling on and then forget about it.
Given that AMOS wasn't exactly the fastest BASIC in the world, speed up tricks like this were always helpful.
posted by mr_silver at 5:37 AM on July 26, 2010
I distinctly remember writing routines which would plot pixels onto the screen at varying positions and then colour cycle them to generate an animation. Parallax scrolling star fields were a popular one.
The advantage of doing this kind of thing with AMOS was that you could cycle the colour palette asynchronously - in other words, draw a static image, turn colour cycling on and then forget about it.
Given that AMOS wasn't exactly the fastest BASIC in the world, speed up tricks like this were always helpful.
posted by mr_silver at 5:37 AM on July 26, 2010
Drawing big fat worms of colour cycling stuff in Deluxe Paint was always fun.
posted by Artw at 5:41 AM on July 26, 2010
posted by Artw at 5:41 AM on July 26, 2010
I'm very disturbed by how the fast pace of technology has left behind so much brilliant artwork (not just visual; games themselves are art) that can no longer be accessed. I reviewed video games games professionally in the 90s (I ran a site called AllAboutGames.com). I still have binders with hundreds of games from back then, many of which were as deep and engaging as titles being released today. Hardware manufactures don't make money if people don't buy new gear, so there's a huge push to upgrade, upgrade, upgrade which means new operating systems which eventually leave compatibility behind, and so left behind are not only productivity titles of some merit, but more importantly entertainment titles which are just as entertaining now as they were back then... but unlike paintings or sheet music from 50, 100, 400 years ago, we have no access to them.
These cultural artifacts from just 10-20 years ago are basically dust in the wind, and it is profoundly saddening. Not just as a consumer of such things (how could I revisit them when I can't play them again), but as a creator! People making games today for a living have to accept that unlike today's musicians, authors, movie makers, etc...... their works will never be appreciated by the next generation.
Something should be done about this.
posted by seanmpuckett at 5:47 AM on July 26, 2010 [19 favorites]
These cultural artifacts from just 10-20 years ago are basically dust in the wind, and it is profoundly saddening. Not just as a consumer of such things (how could I revisit them when I can't play them again), but as a creator! People making games today for a living have to accept that unlike today's musicians, authors, movie makers, etc...... their works will never be appreciated by the next generation.
Something should be done about this.
posted by seanmpuckett at 5:47 AM on July 26, 2010 [19 favorites]
seanmpucket: Google "retrogaming". There are more people playing these games than you think. The older it is, the more likely there is to be an emulator that supports it.
posted by baf at 6:09 AM on July 26, 2010 [2 favorites]
posted by baf at 6:09 AM on July 26, 2010 [2 favorites]
There's an emulator for just about every computer and game console more than a few years old. All those games should be playable with a little effort. What we've really lost is all the source code, which is unfortunate, since low resources breeds creative solutions.
Color cycling is cool, but what I found really impressive was changing the CLUT between scanlines.
posted by ecurtz at 6:14 AM on July 26, 2010 [2 favorites]
Color cycling is cool, but what I found really impressive was changing the CLUT between scanlines.
posted by ecurtz at 6:14 AM on July 26, 2010 [2 favorites]
It's good that there are emulators. However emulators themselves must be continually maintained to keep current with the computers they run on. Yes, this is leveraged technology: making one emulator run can recover the utility of thousands of old programs, so there is a strong pull for keeping emulators current.
However, it does take a conscious effort to seek out an emulator. You have to know about the possibility of emulation, then find an emulator, then get it running, then find a copy of that old game, then get that installed too. And then worry about does the emulator support the game properly. Sure, this can be simple if it's made simple, e.g. I have a PS2 disc which is a collection of old arcade games running in emulation; we still enjoy a family game of Gauntlet now and then.
Now, I understand that the same efforts must be made re music and video. Witness the demise of the VCR and cassette tape. There's unknowable amounts of stuff that died with those formats. DVDs and now BluRay discs are created for old movies because there's merit in those old movies and profit to be made in re-releasing them.
I do hope we see the same "brought forward" efforts put into more games, but I think my main worry is the foreshortened lifetime of computer software in general.
I find it an interesting aside that many websites and games written in Javascript from 10 years ago are still playable in today's browsers. Games and websites written today should also be playable ten years from now. "The web" as an operating system already has more legs for its native software than the operating systems that run the browsers to access it.
Food for thought.
posted by seanmpuckett at 6:37 AM on July 26, 2010 [1 favorite]
However, it does take a conscious effort to seek out an emulator. You have to know about the possibility of emulation, then find an emulator, then get it running, then find a copy of that old game, then get that installed too. And then worry about does the emulator support the game properly. Sure, this can be simple if it's made simple, e.g. I have a PS2 disc which is a collection of old arcade games running in emulation; we still enjoy a family game of Gauntlet now and then.
Now, I understand that the same efforts must be made re music and video. Witness the demise of the VCR and cassette tape. There's unknowable amounts of stuff that died with those formats. DVDs and now BluRay discs are created for old movies because there's merit in those old movies and profit to be made in re-releasing them.
I do hope we see the same "brought forward" efforts put into more games, but I think my main worry is the foreshortened lifetime of computer software in general.
I find it an interesting aside that many websites and games written in Javascript from 10 years ago are still playable in today's browsers. Games and websites written today should also be playable ten years from now. "The web" as an operating system already has more legs for its native software than the operating systems that run the browsers to access it.
Food for thought.
posted by seanmpuckett at 6:37 AM on July 26, 2010 [1 favorite]
This reminds me of a trick used on the C64 to make for smooth scrolling. With a 1MHz processor you couldn't get too intensive with anything you did, esp. graphics. So when you wanted to scroll the 40-character-wide screen you did it one large 8-bit chunk at a time. Not visually smooth at all. Then someone noticed a location in the video chip registers that would change the location of the screen border by up to 7 pixels. So the way to do smooth scrolling was to do seven steps of shifting the screen border, then one step of shifting the 40 x 25 screen full of characters and draw a new column of text. Simple, elegant, speedy. Necessity is a mother.
You could also use this trick on the C64 for a different kind of water effect.
posted by Hardcore Poser at 6:49 AM on July 26, 2010 [2 favorites]
You could also use this trick on the C64 for a different kind of water effect.
posted by Hardcore Poser at 6:49 AM on July 26, 2010 [2 favorites]
Skramble_C64_Smooth_Scrolling
Lordy, I had that game. Never got past the cave.
posted by Artw at 7:01 AM on July 26, 2010
Lordy, I had that game. Never got past the cave.
posted by Artw at 7:01 AM on July 26, 2010
People making games today for a living have to accept that unlike today's musicians, authors, movie makers, etc...... their works will never be appreciated by the next generation.
I actually think the same cultural effect is in place with respect to movies and music; the amount of content that is remembered drops with each generation, and as medium change, so do artist whose works aren't worth converting from beta to mp4.
I mean, Super Mario Bros. (the originals) continues to find its games converted to the latest and greatest; they're the Beethoven of the games world. For every Beethoven, however, there are several John Q. Composer whose work never survived to be remembered.
The speed at which this is happening is definitely faster, however the effect, I think, has always been happening to consumable media.
posted by Hiker at 7:13 AM on July 26, 2010 [1 favorite]
I actually think the same cultural effect is in place with respect to movies and music; the amount of content that is remembered drops with each generation, and as medium change, so do artist whose works aren't worth converting from beta to mp4.
I mean, Super Mario Bros. (the originals) continues to find its games converted to the latest and greatest; they're the Beethoven of the games world. For every Beethoven, however, there are several John Q. Composer whose work never survived to be remembered.
The speed at which this is happening is definitely faster, however the effect, I think, has always been happening to consumable media.
posted by Hiker at 7:13 AM on July 26, 2010 [1 favorite]
> I've always figured that in a few years pages will just select and download their own rendering engine rather then trying to work out all the quirks and incompatibility on the web.
I remember badges on websites that told you which browser to use, what size to scale the window to, and what color depth to use. More arrogant website owners would kick you over to a standby page with text telling you to upgrade, if your computer wasn't compatible.
This might be one of the worst aspects of the Internet of the past to revive.
posted by ardgedee at 7:15 AM on July 26, 2010
I remember badges on websites that told you which browser to use, what size to scale the window to, and what color depth to use. More arrogant website owners would kick you over to a standby page with text telling you to upgrade, if your computer wasn't compatible.
This might be one of the worst aspects of the Internet of the past to revive.
posted by ardgedee at 7:15 AM on July 26, 2010
These make me feel like I'm in the back of a dusty importer's shop in Chinatown looking at the electrified 'art'.
posted by CynicalKnight at 7:32 AM on July 26, 2010 [1 favorite]
posted by CynicalKnight at 7:32 AM on July 26, 2010 [1 favorite]
Is there actually a JavaScript browser game from ten years ago? Browsers are partly backward compatible because they support so many "quirks", which basically just emulate past buggy behavior.
Twelve years ago I wrote a tool for importing models into Bungie's Myth games. Three weeks ago somebody emailed me to get the source for it. No new gadget is truly hacked until the first time it runs Quake. The best old games will remain playable, because smart, nostalgic people still want to play them.
It's fun to see this old color cycling art, because it was well done, but I don't miss or need to see the 5000 crummy pictures of platonic solids sitting in shimmering chrome lakes that are also out there.
posted by ecurtz at 7:40 AM on July 26, 2010
Twelve years ago I wrote a tool for importing models into Bungie's Myth games. Three weeks ago somebody emailed me to get the source for it. No new gadget is truly hacked until the first time it runs Quake. The best old games will remain playable, because smart, nostalgic people still want to play them.
It's fun to see this old color cycling art, because it was well done, but I don't miss or need to see the 5000 crummy pictures of platonic solids sitting in shimmering chrome lakes that are also out there.
posted by ecurtz at 7:40 AM on July 26, 2010
beautifool.
posted by blue_beetle at 7:53 AM on July 26, 2010
posted by blue_beetle at 7:53 AM on July 26, 2010
People making games today for a living have to accept that unlike today's musicians, authors, movie makers, etc...... their works will never be appreciated by the next generation. --- As a web designer, I have been lately trying to come to grips with the fact that my work is as ephemeral as these games. But really, isn't that true for the work most people do? Car mechanics, restaurant chefs, grocery store workers, office workers. The day-to-day stuff most of us do to earn our money won't make much difference to the people who live 50 or 100 years from now.
posted by crunchland at 7:57 AM on July 26, 2010 [1 favorite]
posted by crunchland at 7:57 AM on July 26, 2010 [1 favorite]
Yeah, the smooth scrolls in a lot of LucasArts games still look 5000 times better than panning on DVDs or (especially) streaming netflix on my computer. No scanlines.
posted by mike_bling at 8:01 AM on July 26, 2010
posted by mike_bling at 8:01 AM on July 26, 2010
However emulators themselves must be continually maintained to keep current with the computers they run on.
Not really - you only need to emulate the computer/operating system the emulator originally ran on! So, if Windows X won't run the final version of say, NESticle, you can just boot up VirtualBox or one of various other PC emulators and run NESticle from an emulated version of Windows XP instead.
(By the year 2100, I wonder if we will emulate things five or more layers down)
posted by ymgve at 8:25 AM on July 26, 2010 [2 favorites]
Not really - you only need to emulate the computer/operating system the emulator originally ran on! So, if Windows X won't run the final version of say, NESticle, you can just boot up VirtualBox or one of various other PC emulators and run NESticle from an emulated version of Windows XP instead.
(By the year 2100, I wonder if we will emulate things five or more layers down)
posted by ymgve at 8:25 AM on July 26, 2010 [2 favorites]
What's this? 256 colors, all for one little bitmapped wimp?
posted by The Great Big Mulp at 8:34 AM on July 26, 2010
posted by The Great Big Mulp at 8:34 AM on July 26, 2010
Lordy, I had that game. Never got past the cave.
The sad thing is I've picked it up on X-Box Live and still can't get past the cave. Only could do it in the arcade.
posted by yerfatma at 8:41 AM on July 26, 2010
The sad thing is I've picked it up on X-Box Live and still can't get past the cave. Only could do it in the arcade.
posted by yerfatma at 8:41 AM on July 26, 2010
crunchland: "As a web designer, I have been lately trying to come to grips with the fact that my work is as ephemeral as these games."
Oh, man. I know exactly what you mean. I was always a film/video guy, but within the last three or four years I've fallen into web development. As much fun as I often find it (it was originally a hobby for me), the ephemeral nature of it is really starting to get to me. The first large site I built was recently taken down and replaced, and I was surprisingly affected by it. I worked so hard on it! That actually lit a fire under my ass to get back into film. Which is good, I suppose.
posted by brundlefly at 9:18 AM on July 26, 2010 [1 favorite]
Oh, man. I know exactly what you mean. I was always a film/video guy, but within the last three or four years I've fallen into web development. As much fun as I often find it (it was originally a hobby for me), the ephemeral nature of it is really starting to get to me. The first large site I built was recently taken down and replaced, and I was surprisingly affected by it. I worked so hard on it! That actually lit a fire under my ass to get back into film. Which is good, I suppose.
posted by brundlefly at 9:18 AM on July 26, 2010 [1 favorite]
Ha. As a website developer I can say that my work being as ephemeral as these games would be a gross over-estimation of it's non-ephemeralness.
posted by Artw at 9:26 AM on July 26, 2010
posted by Artw at 9:26 AM on July 26, 2010
This reminds me of a trick used on the C64 to make for smooth scrolling. With a 1MHz processor you couldn't get too intensive with anything you did, esp. graphics. So when you wanted to scroll the 40-character-wide screen you did it one large 8-bit chunk at a time. Not visually smooth at all. Then someone noticed a location in the video chip registers that would change the location of the screen border by up to 7 pixels. So the way to do smooth scrolling was to do seven steps of shifting the screen border, then one step of shifting the 40 x 25 screen full of characters and draw a new column of text. Simple, elegant, speedy. Necessity is a mother.
In fact, those registers were made for allowing for just the kind of scrolling you suggest. To use it for a water effect, you change the horizontal position between scanlines.
Actually, it was slightly different from what you say. You aren't changing the position of the border, you're changing the precise pixel location of the actual screen. The border is largely unchangeable (with the notable exception of tricks to remove parts of it), but it does have a slight "overlap inward" function that changes the screen effectively to 38 columns and/or 24 rows. You have to use that to make scrolling truly smooth, in fact, since it gives the graphics characters space to scroll in from.
posted by JHarris at 11:35 AM on July 26, 2010
In fact, those registers were made for allowing for just the kind of scrolling you suggest. To use it for a water effect, you change the horizontal position between scanlines.
Actually, it was slightly different from what you say. You aren't changing the position of the border, you're changing the precise pixel location of the actual screen. The border is largely unchangeable (with the notable exception of tricks to remove parts of it), but it does have a slight "overlap inward" function that changes the screen effectively to 38 columns and/or 24 rows. You have to use that to make scrolling truly smooth, in fact, since it gives the graphics characters space to scroll in from.
posted by JHarris at 11:35 AM on July 26, 2010
JHarris: "Actually, it was slightly different from what you say. You aren't changing the position of the border, you're changing the precise pixel location of the actual screen."
I had a hunch I was remembering that wrong. Thanks for the fix. This lack of attention to the nuts and bolts was why I stuck to the BASIC side of things and called someone else's machine code for the fancy bits.
COMPUTE magazine was a great resource for machine language things like that. One time they published a snippet of ML that would split the screen into about 168 lines of bitmap, and 4 text lines at the bottom. The educational software company I worked at made a ton of games with very brief 4-line questions just to shoehorn in this little trick and have the mixed-mode graphics that their competitors of the day did not.
posted by Hardcore Poser at 12:41 PM on July 26, 2010
I had a hunch I was remembering that wrong. Thanks for the fix. This lack of attention to the nuts and bolts was why I stuck to the BASIC side of things and called someone else's machine code for the fancy bits.
COMPUTE magazine was a great resource for machine language things like that. One time they published a snippet of ML that would split the screen into about 168 lines of bitmap, and 4 text lines at the bottom. The educational software company I worked at made a ton of games with very brief 4-line questions just to shoehorn in this little trick and have the mixed-mode graphics that their competitors of the day did not.
posted by Hardcore Poser at 12:41 PM on July 26, 2010
I was an Atari guy, so you'll have to excuse my ignorance here.
This was a character based video mode that had what was essentially a one character wide "frame" around it? So you could offset the origin of each row by up to a character and use that to simulate single pixel scrolls? Clever. Did it work in both directions, or only horizontally?
Hmm, looks like the Atari did this as well - "fine scrolling". I guess I should have spent more time learning programming and less time wandering around the City of Xebec's Demise.
posted by ecurtz at 12:43 PM on July 26, 2010
This was a character based video mode that had what was essentially a one character wide "frame" around it? So you could offset the origin of each row by up to a character and use that to simulate single pixel scrolls? Clever. Did it work in both directions, or only horizontally?
Hmm, looks like the Atari did this as well - "fine scrolling". I guess I should have spent more time learning programming and less time wandering around the City of Xebec's Demise.
posted by ecurtz at 12:43 PM on July 26, 2010
In a hundred years, after everyone has forgotten that stuff like this was necessary to do sophisticated visual effects using simple technology, some artist is going to rediscover tricks like this, do it as a large scale installation and be hailed as a cutting edge genius.
I'm just mad I (probably) won't be there to see it.
posted by quin at 2:28 PM on July 26, 2010 [3 favorites]
I'm just mad I (probably) won't be there to see it.
posted by quin at 2:28 PM on July 26, 2010 [3 favorites]
The big downside of the Amstrad CPC, in fact, was that it didn't have a register to shift the screen relative to the border by a pixel, so smooth-scrolling was basically impossible.
It had a much nicer BASIC interpreter than the competition, though.
posted by Jimbob at 4:12 PM on July 26, 2010
It had a much nicer BASIC interpreter than the competition, though.
posted by Jimbob at 4:12 PM on July 26, 2010
seanmpuckett: "However, it does take a conscious effort to seek out an emulator. You have to know about the possibility of emulation, then find an emulator, then get it running, then find a copy of that old game, then get that installed too. And then worry about does the emulator support the game properly. "
It's been getting easier, thankfully. For instance, TheSmartAss.info (a site I posted about last year) has 5,000+ retro games from Atari to Sega Genesis that can be played in the browser using a Java emulator, no download or installation required.
posted by Rhaomi at 6:12 PM on July 26, 2010
It's been getting easier, thankfully. For instance, TheSmartAss.info (a site I posted about last year) has 5,000+ retro games from Atari to Sega Genesis that can be played in the browser using a Java emulator, no download or installation required.
posted by Rhaomi at 6:12 PM on July 26, 2010
Man, that made me really, really nostalgic.
posted by spiderskull at 7:37 PM on July 26, 2010
posted by spiderskull at 7:37 PM on July 26, 2010
I remember writing a C-64 program that would smooth scroll text for the purpose of dubbing it onto VHS home movies I made with my friends.
Makes me realize it has been 19 years since I've shot a home movie.
posted by meinvt at 8:08 PM on July 26, 2010
Makes me realize it has been 19 years since I've shot a home movie.
posted by meinvt at 8:08 PM on July 26, 2010
« Older Mad Men: A conversation | Concept Unification Complete Newer »
This thread has been archived and is closed to new comments
posted by Jimbob at 2:47 AM on July 26, 2010