Color Wheel (~400 colors, low-res and hi-res)

[Jeffrey]

This is a demo showing a colorwheel with around 400 colors.

# Low res screenshot

low-res_screenshot.png (23.97 KiB) Viewed 1915 times

# High res screenshot

high-res_screenshot.png (27.42 KiB) Viewed 1915 times

This was done by re-creating the original image by re-drawing all polygons (diamonds) and sorting all colors from top to bottom (which is 396 colors excluding black and white). Then re-arrange the color indexes so that the top 142 polygons and the bottom 142 polygons share the same palette indexes.

This is then loaded into VRAM and (for each frame) when the scanline is at the middle of the screen the 142 palette entries are changed on-the-fly. At the end of the frame it is changed back again.

For the high-res version (640x480) two tilemaps are used: L0 for the first 18 row of (16x16px) tiles and L1 for the remaining rows, by re-using the tiles at the top (but v-flipping them).

This then creates a nice and colorful image on the X16 that would normally not be possible to show. No dithering was needed.

[Jeffrey]

To give you an idea what are the top and bottom 142 polygons look here:

image-6.png (54.44 KiB) Viewed 2257 times

The top 142 yellow polygons share the same palette indexes as the bottom cyan polygons. In the gap between them, the palette is modified each frame. And at the end of each frame (so below the cyan polygons) the palette is changed back again.

The difficulty/challenge with the hi-res version is that the pixels needed to be exactly the same for the top and bottom polygons, so tiles could be used that were flipped, since a bitmap of 640x480 @ 8bpp is impossible on VERA (not enough vram). But that was tricky because those polygons had to be sorted in reseverse while still correctly attaching to the middle polygons.

Anyway. It is more tricky than it looks

[desertfish]

How did you draw the polygons?

[Jeffrey]

How did you draw the polygons?

I drew them in Python (pygame) first to re-create the original image/bitmap. Then I tiled it so the X16 could fit it into vram.

This was to make sure that I had 396 colors. The problem with the original image is that its basicly a jpeg with many thousands of colors. I first tried to reduce those colors, but was getting bad results. So I ended up redrawing the image myself. Which also have me great control over the order of the polygons/colors.

As to how: I figured out that each diamond had the same length on each side. And each circle/layer of diamonds consisted of 36 evenly distributed polygons: every 10 degrees.

As it turns out, what I had to do is first to create 11 layers of 36 points. You start with middle point as first "layer" then the inner layer (simply 36 points around this middle point).

Each next layer of points is then created by doing this:

- you are at a certain angle (out of 36) and you want to create a new point in layer n
- you take the point at layer n-2 at the same angle (this is your base point)
- you take the 2 points that are closest to that angle (both 5 degrees away from your angle: one left the other right) in layer n-1.
- this basicly gives you 2 vectors: base->left and base->right vector.
- you add those 2 vectors and add that new vector to your base point. You now have your new point.
- you iterate to the next angle

You then use all these points to create all of the diamonds and color them (which, for now, I still pick from the original image).

[voidstar]

Does this override the interrupt handler, or use $0400 - $07FF for anything in particular?

Running it seems to stop my own handler, so was just curious.