
Canvas Cycle - antonios
http://www.effectgames.com/demos/canvascycle/
======
feiss
I love indexed mode. I painted a lot with deluxe paint and played with palette
rotations and tweaks in Pascal+asm in the old times, it brings me a tear
remembering all this. But I love it not only for the nostalgia factor, but
also because indexed mode allows very cool stuff almost for free.

By modifying the rgb of a color index (like the demos in op's link), you
change the color of all pixels in screen that index color. So you can make
some pixels blink, flash, oscillate.. You name it. It's cool also for fading
the whole screen to black/whatever, turn everything into night or hell..

Also, it was a very cheap and easy way of providing collision and mouse
picking, by just comparing the index of specific pixels, without the need of
any additional buffer.

Today you can make color adjustments very easily, with shaders or some
library, but I don't know of a way of tweaking rgb values of certain pixels in
the same way, and as easy and cheap as it was in indexed mode (if you do,
please tell!)

In this years of pixel art revival, I find it very sad that indexed mode is
dead.

Edit: forgot to mention that I recently did tried to make a library for
handling indexed mode in html5, with 2d canvas and webgl support. It kinda
works, but it needs more love and work. Also, it's difficult to maintain high
framerates with today's high resolution screens and fps standards (60fps are
the norm today, back in the old days 30fps were wonderful)

[https://github.com/feiss/indexed](https://github.com/feiss/indexed)

~~~
gavanwoolery
I still use palette indexing! However, I use floating point indexing (which in
essence is similar to the smooth cycling you see in these demos). It allows
many of the same tricks, such as cycling, blinking, perceived animation, etc.

You can do a "true" simulation of palette indexing in modern shaders simply as
a deferred shading process or even as a step within the main render pass. You
simply write a palette entry and an index to the screen (rather than a color),
and then you can modify that index over time or by some other variable. In the
final pass (or the immediate pass) you can compute a final color from the
resulting palette entry, palette index, and shift amount.

~~~
feiss
Very cool! Do you have any example? It's not very available by hardware
nowadays but you can work in indexed by software, or doing the trick you say
(that sounds similar to what I do in my library --sorry if I'm wrong, I'm an
opengl shaders newbie--, but the workarounds are slower or more complex than
traditional indexed mode by hardware, making it less accessible to the
newcomers. Maybe my laments are just nostalgia..

~~~
gavanwoolery
Not the best example, but at about 5 minutes in you can see how I construct
palette entries and how those entries automatically get applied to the screen
without recomputing the underlying voxels. I construct two dimensional
palettes actually, with just a few entries and it blends between those
entries. This allows cycling along two axes of the palette - i.e. one axis can
be used to represent shading by amount of light, and the other can represent
cycling over time or variations in the underlying pattern.
[https://youtu.be/X7MYf01X1Y4?t=5m](https://youtu.be/X7MYf01X1Y4?t=5m)

If you are using a shader, it takes only one texture lookup (into your
palette) to do this, so it is extremely cheap.

~~~
feiss
Cool!! Awesome, thanks for sharing. The bidimensional palette is clever!
Congrats for the hard work in your voxel engine.

~~~
gavanwoolery
Thanks :)

------
zevyoura
There's an accompanying blog post that explains this effect:
[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)

~~~
corysama
The artist gave a talk at the last GDC explaining his technique.

[http://www.gdcvault.com/play/1023586/8-Bit-8-Bitish-
Graphics](http://www.gdcvault.com/play/1023586/8-Bit-8-Bitish-Graphics)

He really is a master of a lost art. Even back in the PlayStation 2 days, the
artists I worked with had never learned how to directly manipulate palletized
images.

~~~
wodenokoto
> Even back in the PlayStation 2 days, the artists I worked with had never
> learned how to directly manipulate palletized images.

Did they need to?

~~~
corysama
Nearly all of the textures used on the PS1 and PS2 were palletized. But, the
artists were raised on Photoshop so they had no concept of how to take
advantage of the techniques afforded by the format. If they had spent at least
some time being introduced to Deluxe Paint, the games' textures could have
been much more animated and varied with nearly zero time or memory cost.

------
ubertaco
These feel like the fond memories of a past I didn't actually live. Like, I've
never seen these images before, but I have a particular kind of nostalgia for
them, like I remember seeing them in a kind of awe at a time when they would
have been technical marvels to me.

------
amelius
I can imagine this being efficient on an architecture that actually uses a
palette for color lookup. But on a HTML canvas, how can this be an attractive
technique?

~~~
corysama
It's not a good match for Canvas. This is just a demo that uses Canvas to
remind the masses of something we are on the edge of forgetting.

------
jepler
needs a (2011); now this should be much easier to achieve at high frame rates
using webgl.

~~~
toomim
Why? How does webgl make indexed pelletes more efficient?

~~~
corysama
The lookup can be done in a trivial shader that runs on the GPU 10-100x faster
than a C implementation on the CPU instead as a JS function that runs 10x
slower than a C implementation.

Additionally, instead of uploading the complete, 24bit-per-pixel, post-indexed
image across the PCI bus every frame; you only need to send the updated
pallete. The CPU work approaches zero at that point.

------
dietrichepp
There was a link to a presentation by Mark Ferrari (the artist) which surfaced
on HN within the past couple months which showed these pictures. These aren't
just animated, but for some of these pictures, you can also animate the
transition from day to night and back with the palette.

They were apparently made for a screensaver which would display daylight or
nighttime according to the computer's clock.

------
harel
This reminds me of my Amiga days and Deluxe Paint. Someone should recreate
Deluxe Paint as a Javascript application. Great stuff.

