
True 8-bit Color Cycling with HTML5 - zeppelin_7
http://www.effectgames.com/demos/canvascycle/
======
ajross
It's a nit, but this demo is "true" color cycling only in the sense of "faked"
color cycling. The original hack used a series of color cells in the pallet to
represent the object that was "moving", then updated the pallet (and _only_
the palette) per-frame to effect the animation.

An HTML canvas has no palette. And in fact, for didactic emphasis, I just
tried this on my phone -- where it works -- that has no color palette hardware
at all. This code can only do what it does by doing what the original did not:
modifying all the changed pixels every frame. It's emulating the original
hack, not duplicating it.

~~~
FreeFull
Would you say that if I write a colour cycling program and run it in dosbox,
it isn't real colour cycling because it is being emulated?

~~~
ajross
Given that dosbox is an "emulator" (says so right there in the man page!),
yes. You expected a different answer? Dosbox doesn't support "true" palette
animation either (well, unless you give it access to the real VGA registers of
real hardware, which can be done in some emulators).

The point was that the programming technique required to make this work is
_not_ the same as the one used on palette hardware, so calling it the "true"
effect is going to be confusing to people who don't know exactly how this
works.

------
sehugg
I think pixel art looks awesome even in 2012. What do modern
developers/artists think about its future, given that high-DPI displays may
become the norm? Will there be 264 DPI pixel art?

~~~
antihero
I think it would be an interesting and awesome project to make a 3D renderer
that generates 256-colour(per scene? per frame) graphics in this style.
Perhaps it could be done with shaders? Imagine playing through Skyrim and it
looking as pretty as this?

~~~
BitMastro
It already exists, it's called toon shading <http://en.wikipedia.org/wiki/Cel-
shaded_animation> and it was used also in a commercial game called XIII
<http://en.wikipedia.org/wiki/XIII_(video_game)>

~~~
antihero
That's not quite it though.

------
ge0rg
[http://www.effectgames.com/effect/article.psp.html/joe/Old_S...](http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5)
is the article describing this amazing hack of the limited graphics hardware
of the early 90ies.

~~~
lloeki
The author mentions it does not work on IE6/7/8, and I suppose the lack of
canvas is the cause, but would using excanvas do the trick?

~~~
TazeTSchnitzel
Don't think so, I don't think it supports ImageData.

------
heywire
The 8-bit dithered look brings back some great video game memories of my
childhood. I really enjoy this type of artwork...

------
jonah
Ian Gilman worked on the original and has a writeup about it here:
<http://iangilman.com/software/seizetheday.php>

Hopefully he'll jump in and comment.

~~~
iangilman
I don't know that I really have much to add about the color cycling; seems
like everyone's covered the topic pretty well! Delightful to see so many
people interested in these old techniques.

The thing that unfortunately gets a little lost in the demo is the way in
which the color cycling (along with clever color palette fading and some
sprite animation) was used as a means to create a world that looked like it
was really alive for the whole month long… When you started the app up in the
morning, you saw the sunrise. If you tuned in at night, you could see the
fireflies. Each day the moon progressed in its cycle. Some days it was sunny,
others it rained. Clouds slowly marched across the sky. The whole effect was
quite enchanting. Regardless of if we use color cycling or not, I'd love to do
something like that again.

------
TazeTSchnitzel
Blog post:

[http://www.effectgames.com/effect/article.psp.html/joe/Old_S...](http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5)

FAQ with artist (quite fascinating):

[http://www.effectgames.com/effect/article.psp.html/joe/Q_A_w...](http://www.effectgames.com/effect/article.psp.html/joe/Q_A_with_Mark_J_Ferrari)

------
joss82
Please, Mark Ferrarri, find a coder and start a project on kickstarter.

I would love to play a game with these artworks!

~~~
jonah
Try Heaven & Earth: <http://iangilman.com/software/heavenearth.php>

------
Joeboy
If you think this is a clever hack, you also might be interested about the way
programmers of 8-bit '80s machines used to increase the number of colours they
could display at a time. My first computer, the ZX spectrum, had video memory
that was laid out in such a way that you could only assign two colours to any
8x8 pixel block. However by changing the colours of that square in sync with
the TV raster signal, you could get it to display 8 miraculous stripy colours
in the same block. You could use a similar technique to get stripes in the
theoretically one-colour border. I think some people even managed to do these
things and still have time for some semblance of a game, which is fairly
impressive on a 3.5MHz machine.

------
protopete
The article[1] linked from the demo mentions an optimization that the image is
preprocessed so that the javascript code only updates the pixels that are
cycling. I wonder how another method would compare - modify the palette table
in the PNG or GIF in Javascript, then redecode the image for each animation
frame using the browser's decoder (native code).

1\.
[http://www.effectgames.com/effect/article.psp.html/joe/Old_S...](http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5)

------
tlrobinson
This is awesome.

I turned it into an OS X screensaver using
<https://github.com/tlrobinson/WebSaver>

------
primigenus
The guys at Effect Games were actually making a pretty kickass javascript game
engine in basic non-HTML5 HTML, using all kinds of Flash hacks to get sound
and other advanced stuff working... until libraries like impact.js came out
and browsers made a jump forward to support canvas and HTML5 better.

So they shut it down and started a game development company:
<http://www.goldcartridge.com/>

I wonder what they're up to?

~~~
itsmin
Hi there, I won't speak for Joe nor Mark (the color cycling demo was their
baby, but I'll pass along the sentiments), but thanks for the kind comments
about Effect Games.

As far as Gold Cart is concerned, we're working mainly on some short
"experiments". By way of a preview,
<http://itsmin.com/portfolio/goldcart/gbasp/> Again, thanks for remembering
us.

------
aidenn0
Okay now I need to see if my Deluxe Paint II floppies still work

~~~
moe
Hands up who else spent way too many half-hours drawing "rainbow snakes" and
psychedelic cycling dots with the spray can.

Well, ok. Maybe it was just me.

~~~
geon
I did that a lot in Autodesk Animator on my 3/486. And it did palette cycling!

<http://en.wikipedia.org/wiki/Autodesk_Animator>

~~~
ZenPsycho
I have been trying to revive that program. I have the original source code on
github if you want to help. <http://animatorpro.org>

------
manuscreationis
I would give anything to be able to draw this well...

Pretty cool demos

~~~
mistercow
>I would give anything to be able to draw this well...

Not to be a smartass but if you'd give _anything_ , why not buy some art books
and put in a few hundred hours of practice?

~~~
manuscreationis
Not to be a smart ass, but what makes you think I haven't tried, and found
that I lack a certain artistic eye for shapes, shadows, and colors that
prevents me from even having the slightest chance at reproducing things from
my imagination, or even physical source material, in any recognizable way?

Although I pretty much gave up on trying to improve years ago. I switched
focus to creating things with code, and have been faaaar more successful. So
your comment is fair, in that I certainly could put time in to learn to draw
and animate well, but I have a lot of other focuses for my life right now that
can't spare that kind of time.

But, it doesn't stop me from dreaming :)

~~~
mistercow
> Not to be a smart ass, but what makes you think I haven't tried, and found
> that I lack a certain artistic eye for shapes, shadows, and colors

Well, mostly the fact that most people lack "a certain artistic eye" until
they develop it, including people who later become competent artists.

>So your comment is fair, in that I certainly could put time in to learn to
draw and animate well, but I have a lot of other focuses for my life right now
that can't spare that kind of time.

A valid choice. So when you said you'd "give anything" what you really meant
was not that you would actually give anything, but rather that you just wish
that you could draw well.

------
joejohnson
Every time I see a color-cycling example, it's this pretty waterfall picture.
Does anyone know what game it was originally from?

~~~
corysama
I don't think it's from a game. I think the pics are all stand-alone paintings
from Mark Ferrari <http://www.markferrari.com/> He worked on several classic
PC games
[http://www.mobygames.com/developer/sheet/view/developerId,60...](http://www.mobygames.com/developer/sheet/view/developerId,6000/)

~~~
jonah
It's the monthly art from a calendar app.

~~~
corysama
And here it is: <http://www.iangilman.com/software/seizetheday.php>

Link from the bottom of a technical interview about the pics:
[http://www.effectgames.com/effect/article.psp.html/joe/Q_A_w...](http://www.effectgames.com/effect/article.psp.html/joe/Q_A_with_Mark_J_Ferrari)

------
jebblue
It's pretty to look at, using Ubuntu 64 bit and nVidia 6800 here. It used
about 60% to 80% CPU time. It reminds me of palette animations in games like
King's Quest series from the 1980's.

------
aidos
Does anyone know how you go about creating the images? Do you create a static
image and then figure out how to animate it? Is it software assisted?

~~~
aidenn0
I used a program caled Deluxe Paint to do it back in the late 80s/early 90s.
Back then pretty much all pictures used a pallete anyway; it was a matter of
creating a static image and just making sure you use a specific range for the
parts you want animated. A lot of times it's just highlights you want to
sparkle, lights you want to blink, or water you want to shimmer, and you'll
create a range (with e.g. a gradient) for those specifically anyway). More
complex effects are possible, but can be a bit time-consuming.

[edit] To clarify I did not do the drawings on this page. Also if you want to
see a good example of slightly fancier effects than just shimmering, look at
the "swamp cathedral - Day" sample there and hit options. See how there is one
range that is just for the rippling water, but then a different more
complicated range for making the reflection shimmer appropriately; in that one
they had to cycle very specific regions from purple to green for the boundary
between the reflection of the hill and the reflection of the building.

------
tome
These are beautiful! Are they from an actual game?

(Also for me the Standard cycle mode is very jerky, but Blend is smooth).

~~~
eridius
Yes, that's kind of the point of Blend mode. AFAIK from looking at it, Blend
mode makes the colors smoothly animate from one color to the next, which
basically bumps the frame rate. Standard makes it change instantly, and since
the frame rate is actually pretty low, it appears jerky.

------
gdonelli
Very cool, now could anyone recommend a good read about this technique and how
it is/was used?

------
dasht
What ever become of "Doug's Math Aquarium"?

------
tferris
Back to the 80ies

