Tint and Transparency
tint() function tints images using a specified colour. This is like taking a sheet of colour transparency film and placing it over a given image. It’s simple enough to use and best explained with few code snippets.
Create a new sketch and save it as “tints”. Download this guardian lion photograph (Forbidden City, Beijing) and place it your sketch’s “data” sub-directory.
Setup the sketch with the following code:
The tint function accepts three
255 (RGB) values as arguments.
Alternatively, you could use a single argument of the
color() data type:
Run the code to confirm that the tint is working.
tint function can accept a fourth
255 argument for transparency (alpha). Create a new
orange50 variable, with an opacity of 50%, then add a new
tint line followed by a second instance of the
If you need to affect the image transparency but retain the colour, use a white tint and your desired alpha value. Once you’ve set a tint it remains in effect for any further images, unless you include a subsequent
tint() line or a
If you are wondering to yourself, “this looks a lot like a multiply blend mode”, you’d be correct. The effect can be replicated manually by using the loop arrangements from the “blend_modes” exercises. This would entail an additional alpha argument in the
colorMode() function and some adapted loop code. For example:
alpha() function is used to separate out an alpha channel from a
That concludes another lesson. You now understand how to manage colour on a channel and bit-level, and have gained insights into how popular image formats work along the way.