Canvas Cycle | Hacker News Reader

Canvas Cycle

effectgames.com

56 pointsantonios19 comments

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

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.

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..

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

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

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

Thanks :)

There's an accompanying blog post that explains this effect: http://www.effectgames.com/effect/article.psp.html/joe/Old_S...

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

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.

That talk is one of my favorites in recent memory. It is inspiring to see such mastery of a technique.

> 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?

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.

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.

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?

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.

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

Why? How does webgl make indexed pelletes more efficient?

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.

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.

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

Reply on news.ycombinator.com