Animal test subjects

I noticed some time ago that using five pointed stars as example material is growing a bit old. I needed something new to test these filters with. So, I came up with the idea of using animal test subjects. Here are the two: Max and Gina.

While animal testing can be cruel and inhumane, I promise to treat my two test subjects kindly. You'll be seeing them in new Filter Effects tutorials shortly.

Fun with markers

Almost two weeks ago I was looking to buy more colour pencils, as my old set of 12 pencils didn't include any skin tones. Well, I found me a nice 24 piece set, which still doesn't contain many skin tones and actually I already had half of those colours. I would probably been better off finding a retailer with loose pencils and buying a couple skin tones.

Well nevertheless, colour pencils weren't what I was going to blog about. Markers are. At the same trip, I noticed some sets of markers next to the colour pencils. There were sets in different styles: bright colours, grays, skin tones... Wait, that's what I wanted, wasn't it? Well, I ended up buying a comic art set with one skin tone, brown, blue, red and black so I could test them out.

I tested those five markers out and I totally liked them. They're rather fast to work with and they produce strong and brilliant colours. But, five colours is rather limiting. So, after weekend I went and bought some more and now I'm a happy owner of some twenty Letraset ProMarkers. Nothing too much, but as even those cost a bit much for my budget, they'll have to do for now.

But, let's cut the long story short, here's a picture I drew with those markers:Well, ok. I did use a bit more than markers: black ink pen for the lines and colour pencil to smooth out the background somewhat.

One thing I can't seem to figure out, is how to draw areas of flat colour. Look at the floor in previous image, for example. While using special paper meant for marker drawing alleviates this problem somewhat, it's still really easy to get visible stripes.

Filter effects: Color Matrix

This is part of my filter effects tutorial series.

Color Matrix is an interesting filter, that can mix up the colours in your image in many ways. Blanc and white images, sepia toning, hue rotation and removing one of the basic colours from image are a couple examples, what kind of modifications this filter can do.

The mathematical idea behind Color Matrix is, that it multiplies the colour of each pixel by a 5×5 matrix. SVG won't let you to specify the whole matrix, but only the first four rows. The last row is always "0 0 0 0 1", which means that the imagined fifth colour value will always be one. (red, green, blue and alpha are the four actual colour values)

Nevertheless, you don't need to know much about the mathematics to be able to use this filter. Let's take an example image from Inkscape Filter Effects user interface:
Here I've specified an sepia tone filter. Not too good one, but it'll make for an good example about how these work.

So, what are all these numbers?
The basic concept here, is that each column represents an input colour: red, green, blue, alpha and constant addition. Each row in turn represents an output colour: red, green, blue and alpha. For example, the first row means "Take 0.14 times the red value of a pixel, 0.45 times the green value a pixel, 0.05 times the blue value of a pixel and zero times the alpha value of a pixel, sum these and add zero. The result is the red value of output pixel"This same process is applied to all primary colours of a pixel for every pixel in the filtered area.

The fourth row of this example filter is also noteworthy. Not only it defines the modification applied on the alpha channel, it also is an identity modification. Here on the alpha row, alpha is multiplied by one and all other inputs by zero, thus preserving the original alpha channel. With the same idea, you could for example swap the contents of green and blue channels:

Besides the matrix mode, the Color Matrix filter provides also three convenience modes, so you won't have to create the whole matrix every time:
Saturate: this is a bit funny name, as this Saturate actually desaturates the image. You are provided with a slider allowing you to choose from full scale between full saturation and zero saturation (black and white).
Hue Rotate: this does just what it says, it rotates the hues of your image. If you rotated the colour wheel in Fill and Stroke dialog same amount for every colour in filtered object, the effect would be just about the same.
Luminance to Alpha: this can be handy as part of bigger filter, it turns the luminance of input image as opacity of output image. White areas become totally opaque, black areas totally transparent and everything other becomes something in between.

I've found Color Matrix especially handy for adjusting the output from Turbulence filter, as Color Matrix can change the colour of an image, make areas with low alpha values completely transparent etc. The following examples are from turbulence_effects.svg included in Inkscape distribution and they use both Color Matrix and Turbulence:

Filter effects: Blend

This is part one of my filter effects tutorials, where I'll describe the filter effects existing in Inkscape and general information about using and creating filter effects.

The blend filter composites two images pixel by pixel. It provides four compositing modes common in raster graphics editors: multiply, screen, darken and lighten. Also, it can be used to do the normal alpha compositing used in SVG.

Blend is also other one of the filters, that can be used without going to filter effects dialog in Inkscape: it is used to provide the layer blending modes.

The different blending modes work as follows:
Multiply: works like mixing pigments. Magenta and yellow make red, red and cyan make black etc.
Screen: works like mixing lights. Red and blue make magenta, magenta and green make white etc.
Darken: works like normal compositing, but composites both first image on top of second and second image on top of first and takes the darker result for each pixel and each colour channel, efficiently making the resulting image darker than either of source images.
Lighten: like darken, but takes the lighter results.

For multiply and screen, the following image might explain this better than I can:
On left: red, green and blue (RGB) circles composited with Screen.
On right: cyan, magenta and yellow circles (CMY) composited with Multiply.

For more complex effects, blend can be a handy tool when collecting several parts of the filter effects chain together.

There are a couple gotchas with blend filter in Inkscape and in general:
First, while Inkscape provides you with layer blending modes, such a concept doesn't actually exist in SVG 1.1. When you specify a layer blending mode, Inkscape creates a blend filter, that takes everything with lower z-index as your layer and composites that with your layer contents. This is the filter result. The filter result is then composited on the canvas, on top of everything with lower z-index. If your drawing has a solid background, this is just fine. If the background is not solid, it will be drawn twice. You may end up with funny looking results like in the following image:
On the top, over solid white background, everything works just fine. But on the bottom over transparent background, you can see a box appearing around the small star.

The other gotcha is the enable-background property. If you want to use background image as part of any filter, that property must be set. Some parent node of the object, you are applying the filter to, has to have this so that SVG renderers know, what part of background you want to use for compositing. This only applies to hand-made filter effects, if you use the layer blending mode combo box, Inkscape will take care of setting this property for you. For now, the easiest way to set enable-background so that you can use background in your filters, is to set some blending mode from layers palette.