View Full Version : Graphics.spin - how to use colorwidth arguements

John Kauffman
11-10-2010, 09:46 PM
I am trying to understand how shapes are colored in Graphics_demo.spin. I have broken the PUB start down to a very simple section (other blocks unchanged). Graphics.spin is instantiated as ‘gr’.
'draw small box with text
It runs, putting a box on the screen which is tri-colored shades of green.

I am trying to understand the concept of colorwidth. There are no hits in the Help search and the term is not listed in the Prop Manual or the McGraw text. It does not show up in Wikipedia, so I assume it is a Prop-specific concept.

I traced the gr.colorwidth method back to Graphics.spin where there is:
'' Set pixel color and width

I traced that to graphics.color and get:
'' c - color code in bits[1..0]
setcommand(_color, @colors[c & 3]) 'set color

Traced to SetCommand, I get following, which I am guessing puts the command into the memory of the raster map.
PRI setcommand(cmd, argptr)
command := cmd << 16 + argptr 'write command and pointer
repeat while command 'wait for command to be cleared

I traced the @colors to DAT which is:
colors long %%0000000000000000
long %%1111111111111111
long %%22222222222202222
long %%3333333333333333

Here I get lost. I expected in the DAT something like “red = %10101010”

How does gr.colorwidth determine the color of the box?


11-11-2010, 06:10 AM
Colorwidth only sets the color INDEX number. Those are 0 - 3. Each tile gets it's color from a colors array, which holds the 4 colors possible for the tile, and that array is indexed with a value that's part of the tile display address contained in the 'screen' array. It's somewhat convoluted, but quite powerful. Most drivers do not use two levels of indirection, and this one does. Lots of simple display tricks possible with it.

I've created a commented graphics_demo.spin that can help explain this. It has the more complex color and screen definition code removed from the Parallax demo, replaced with a simple color list, some demo code that shows color and tile manipulation, and a few methods, which can be added to graphics_demo.spin.

...or, that commented one can be used as a template to build on, which ever makes sense.

Long story short, the color numbers in colorwidth only reference the color number within the tile. What color that actually ends up being on the screen is determined by the color palette assigned to that particular tile. All the propeller colors can be put on the screen this way, but only 4 at a time per tile...

Let me track that down... it used to be in my signature on the old forum.

Here's the thread:


Looks like I'll have to track down my old signature stuff and get it sorted for this forum. Sorry all. Been busy.

You should run that, watch it go, then go read the comments, then change values to see what does what. From there, you probably can plan out your display.

Edit: I just re-read this. To answer your question, you would find "red" in the colors array, defined by the math at the start of the demo program. In my commented one, I got rid of that complex color init code, replacing it with a simple list of color longs in the DAT section, where it's easy to see the relationship between those, the on screen tiles, and the color index.

The actual color of a pixel is related to the color index 0-3, which tile it's in, and then that index refers to bytes in the color palette array, which itself is indexed by the upper 6 bits of the tile address, stored in the screen array.

The commented one I linked to, has all the screen tiles, but for one pointed at the Propeller ROM, pointed to the same color palette array, turning the screen into a 4 color one. Then it changes the palette definition for various tiles, showing the user how the color index is related to the palette entries.

John Kauffman
11-12-2010, 02:47 AM
Your file potato-commented-graphics_demo.spin is super. Thanks for taking the time to share that research and background knowledge.

I have some further clarifications that I am am posting separately.

11-12-2010, 05:49 AM
check Ray's site:

It has a color calculator for the graphics object