109. Colours, transparency
I think I’ve touched on colours a few times before, but they come up often in the forum. I deal with some common questions and issues in this post.
RGB
The colours in Codea have four numbers, all of which vary between 0 and 255 (why 255? See the footnote at the end).
Let’s talk about the first 3 numbers to start with. They are red, green and blue, giving us a colour system called RGB. The higher the number you give each of them, the stronger that colour. At one extreme, (0,0,0) is black, (255,255,255) is white, and any combination where R, G and B are the same will be gray. (255,0,0) will be red, (255,255,0) will be yellow, and so on.
When you select colours from Codea’s colour wheel, you are choosing these three colours. When you’re done, you’ll see Codea has given you the three RGB numbers. You can edit these if you like – the colour wheel is only there to make things easier.
Codea also gives you some shortcuts. One is if you type color(x) then Codea will assume that you want each of RGB to be x, ie it is the same as color(x,x,x). So you can choose white with color(255).
Alpha (transparency)
The fourth colour number is alpha, or transparency. The default is 255 (full strength, opaque, no transparency). At the other end is 0, which is totally invisible.
So you can fade a colour simply by reducing its alpha. Also, an alpha of about 100 makes a nice semi-transparent colour for balloons.
You can leave alpha out of the color command, and then Codea will assume it is 255, ie color(255,0,0) is the same as color(255,0,0,255).
One nice use of alpha is to tint a picture, or part of a picture. You could for example, draw a transparent pink rectangle over part of a picture, to give it a nice look.
Codea actually has a special tint command that does this, but it only tints the entire picture. However, this makes it easy to create a ghostly animation by using a white tint and varying the alpha. Codea multiplies the tint by the existing colour, so to make the image fade, you reduce the alpha towards zero, as shown below.
function setup()
img=readImage("Planet Cute:Character Princess Girl")
counter=0 --to control speed of fading
end
function draw()
background(255)
counter=counter+1
--make it take 10 seconds = 10 x 60 redraws
--so we want to go from 255 to 0 in 600 steps
--which is 256/600, let's say 0.5 per step
tint(255,255,255,math.max(0,255-counter*.5))
sprite(img,WIDTH/2,HEIGHT/2,img.width*2)
end
You can also use alpha to create the impression of a glass window, by drawing a very lightly coloured rectangle on top of an object, as in this example (the parameter at left lets you vary the transparency).
function setup()
img=readImage("Planet Cute:Character Princess Girl")
parameter.integer("Glass",0,255,75)
end
function draw()
background(0)
sprite(img,WIDTH/2,HEIGHT/2,img.width*2)
fill(255,255,255,Glass)
ellipse(WIDTH/2,HEIGHT/2,img.width*2.5)
end
Codea’s color functions
I’ve mentioned the tint function above.
Codea also has a blend and mix command, that both seem to do the same thing – mix two colours together in the proportion you choose.
Finally, Codea lets you change how colours mix together when you draw them on top of each other, The blendMode command has three settings
.
There is a demo project in Codea called Blend Modes that demonstrates these. I haven’t used them, so I’m not sure what they are useful for.
Transparent backgrounds
Images are rectangular. However, the pictures we want to use (eg a spaceship or a person) are not. So there is usually unused space around any picture, and I’ll call this the background.
All the library images have transparent backgrounds – the pixel colour is (0,0,0,0) – so when you draw them on the screen, all you see is the picture, without any background around it. This is usually what we want.
However, if you download a picture from the internet, it may have a background colour, and this is going to look strange when you draw it on your screen. How do you get rid of backgrounds?
Method 1 – avoid the problem
The best solution is to go back to the internet, include the word “transparent” in your Google search, and hopefully you will find a suitable picture which already has a transparent background. Note that the file format will usually be .png.
Method 2 – remove the background
Open the picture in a drawing program on your PC or Mac, and use the tools to remove the background. I have a (free) program called Paint.net for Windows, with a little wand that I can tap on the background, and it tries to select all of it, then I just press delete. Sometimes it deletes half the image, because the border between the image and the background isn’t well defined, and then I have to undo, and very carefully draw a thin line to separate the image from the background, before trying again.
Note that this only works well where the background is a uniform colour. If it’s a photo with lots of stuff in the background, you may be stuck with using the rubber to very carefully erase everything you don’t want. This is when you’ll start wondering whether you’d looked hard enough for a picture that was already transparent!
Method 3 – use Codea to remove the background
If the background is a flat colour like blue, you might consider programming Codea to look at all the pixels in the image and remove the background colour, by setting it to (0,0,0,0). There are two problems with this.
One is that the picture itself might contain the same background colour, and you don’t want to delete that. You can avoid this by starting at the edge of the image and stopping when you reach the picture, all the way round.
The more serious problem is that Codea does some anti-alising when loading images, that is, it smooths sharp colour transitions. So your image might have a sharp edge between the picture in the middle and the background colour, but Codea will add some fuzzy pixels all around which lead from one colour to the other. The result is that when you remove the background colour programmatically, you are left with a border of in-between pixels that wasn’t there to start with, and doesn’t look good. For this reason, editing images in Codea isn’t usually a good idea.
Importing transparent pictures to Codea
There’s another trap. It is easy to save a picture to your Picture library in the iPad, then import to Codea via the Documents library. However, the iPad will put a white background on the picture, arrggggh!
The only solution is to use Dropbox, ie use your PC or Mac to find and edit the picture, then save to your linked Dropbox account and then it’s available from Codea.
For the experts – advanced colour manipulation
Shaders can be used to do almost anything you want with colours, including lighting effects, deleting pixels altogether, and much more. I have a set of posts on this, if you are interested, starting here. But be warned, it’s not for beginners.
Footnote – why the colour values vary between 0 and 255
Computers like to work in powers of 2, because deep inside them, everything is reduced to bits – electronic switches that can either be 0 or 1 (off or on). We store large numbers by combining bits. So 5 bits can store a number as big as 2 * 2 * 2 * 2 *2 = 32. Well, actually, 31, because although 5 bits gives you 32 different combinations of 0’s and 1’s, we need 0 as well, so in practice, 5 bits will store any number between 0 and 31.
When you are designing something that is going to be used very widely – like colours – you try to make the most use of the available space. So if I decided I needed 225 different shades of red, the computer specialist would tell me that this would require 8 bits (0 – 255), as 7 bits would only go up to 127, and I might as well make it 255 shades because otherwise I would be wasting some of the space.
So choosing the number of colours came down to whether it should be 128, 256, 512, 1024,…, ie powers of 2. In the end, 8 bits were chosen, giving us 256 colours (ie 0 to 255).
Of course, combining red, green and blue gives us 256 * 256 * 256 = 16,777,216 possible colour combinations. Which is plenty.
coolcodea 