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.

Inkscape 0.46

I'm a bit late with this blog post, but now that Inkscape 0.46 is out, all these nice features I've worked on are available in a release version of Inkscape, not just in SVN and nightly builds.

Of course there's also plenty of other great features: paint bucket tool, 3D box tool, new grids... Way too many to describe here, so check out release notes for more info.

Inkscape 0.46 is available at your nearest package management system (well, hopefully) or at inkscape.org

Timing tool

Since getting myself a copy of In The Groove and a carrying bag for my dance mats, I've played dance games quite a lot. Both at my home by myself and at university with some friends.

A couple days ago, while listening to a song, I felt that I had an idea, what kind of steps it should have. I tried making those steps with the StepMania editor. Well, it proved to be nearly impossible to sync the arrows with the music, as the song was recorded by a live band and thus the beat rate wasn't exactly constant. So, I built a program to make the synching easier. It took around ten to fifteen hours to make a fairly usable program, and that time included plenty of testing and playing around with different versions.

So, if anyone wants to give it a shot, the program is available here: smsync.tar.gz. It's a source package, so you'll have to compile it yourself. I've built it on Linux, but I'd believe, it could be usable on other platforms, too.

And the stepfile I wanted to create? Well, it din't turn out nearly as good as this program, so I don't think I'll be publishing it any time soon.

Maybe I could claim this as modern art

I was goofing around with testing Inkscape today. This one is brought to you by filter effects and tweak tool.

New Filter Effects Examples

I've created a couple more examples of using Filter Effects in Inkscape or in SVG generally. This time I focused on feTurbulence filter primitive, which fills the filter effects area with Perlin noise.

Perlin noise is often used for texture generation and modeling natural phenomena like clouds and smoke. In SVG drawings it can provide uneveness and noisiness, that is otherwise hard to create.

Each of these six stars has a different feTurbulence based filter applied:
(click on the image for nice & large version)

This example file will be available in SVG format in examples directory in Inkscape 0.46 release. Should you want it already, or you don't want to download all of Inkscape, it's already available in SVN.