From Accessibility to Zope

It’s a well known computer graphics technique that blobby shapes can be drawn as the isosurface of a scalar field.

It’s actually possible to create a similar effect using SVG filters:

The field is created using Gaussian-blurred circles. Where these soft edges overlap, the alpha channels are composited and this creates the necking effect which is key to blobby shapes like this.

The thresholding is done using a high-contrast filter on the alpha channel. The specular highlight was added just to emphasise the gooey, ketchup-y effect.

If you have a copy of Inkscape, it’s fun to play with dragging the circles. Feel free to download the SVG.

One of the most stunningly powerful features of the recently release Inkscape 0.46 is the ability to design SVG filters. SVG filters are a section of the SVG language for connecting simple, well-defined raster operations and applying those to rasterised vector shapes in the document.

What this entails is that it’s possibly to take very simple vector shapes, bung on a filter, and get some very pretty artwork which can still be edited as paths.

Inkscape’s 0.45 release saw the implementation of its first filter: Gaussian blur. On its own, Gaussian blur was an incredible useful filter, offering soft edges and powerful shading techniques. But with the collection of other filters provided, it also provides a building block for constructing some very complicated and useful graphical operations that could previously only be done with a raster tool like The Gimp.

Unfortunately, you will need a fairly deep knowledge of 2D image processing to make use of SVG filters. Fortunately I have one of these. Allow me to walk you through creating a filter in Inkscape 0.46.

I want to start with an example of a graphic I created way way back with Inkscape 0.38.

I created this graphic by drawing a blob, adding some text (in a font called “Balcony Angels”) and then painstakingly drawing out the highlights (specular lighting) as partially-transparent white paths. It’s also got a drop shadow.

Let’s start again in Inkscape 0.46. I’m using the star tool with a bit of randomness to start me out with a blob. The wording is just normal text but I’ve tweaked the kerning a little this time. Also notice the gradient. Depending on how you wire up your filters you can preserve the colours and using a bit of gradient will always help to give a word-art logo like this a bit more richness.

To add lighting, you need a height map. The simplest way to create a height map is by applying a gaussian blur. SVG uses the alpha channel to represent the height map. Without a blur you can imagine that the height is 0% outside the shape and 100% inside - like a cliff or a plateau. With a blur you have a partially transparent edge, so it smoothly rises from the 0 to the 100%, like rolling hills. I usually apply the blur to the alpha channel as the colour channels aren’t relevant.

You can only see a 3D shape appear when we wire up a lighting filter. Specular lighting is what we’re shooting for. The output of specular lighting is just the highlights so make sure the document background is set to opaque black before you start experimenting.

Specular lighting is very sensitive to some of the settings you’re using.

• Surface scale - here’s where we say what the 100% height of the height map actually is. Generally you should stick to small positive numbers. Try 10. The gradient of the bumpy edges can be thought of as this number over the blur radius. If you’ve got 10px of blur, and a surface scale of 10, your bumpy edges should have a 1:1 gradient.
• Constant - this number combines two ideas: how bright the light source is, and how much light the object reflects. 0 means that the light is off, so that’s not what you want. Numbers between 0 and 1 mean the object reflects a fraction of the light, or the light is dim. Numbers over 1 mean that the light is brighter. It’s all relative, obviously.
• Exponent - this is the glossiness of the surface. The higher the exponent, the tighter the highlights. Metals have quite low exponents - say 10. 30ish gives a soft plastic. Higher gives the effect of ceramics and polished surfaces.
• Light Source - start with distant light, azimuth 225, elevation 25 and experiment from there. That will give you the kind of lighting from the top-left that mimics the user interface of most computers.

The outer halo, if you’re wondering, is where the light catches off the bottom of the slope. We can clip that away at the same time as we apply it to the shape. To do this, we use an atop filter. The top input is the highlights, the bottom is the source graphic. Atop draws the highlights only over the source graphic. This is equivalent to (specular in source alpha) over source grahic.

We can also add the outline from the original. If we added it before the filtering, it would have also been shaded because the outline would be part of the alpha channel that we bumpmapped. We need a raster outline. We can do this using the morphology filter.

We dilate the source alpha channel and composite the original over the top. Voila:

And then there’s a slight drop shadow. Gaussian blur the same morphology filter, add a couple of pixels of offset. Then composite the previous stage back on top of it.

If the shadow - or indeed the highlights are too bright, you can make them slightly transparent with a colour matrix filter. The fourth row of the colour matrix is the alpha channel, and the fourth column of that row is how much of the alpha channel to pass through. Change it to any number between 0 and 1 to make it partially transparent.

I’ve got one last trick up my sleeve, and it’s the most complicated one.

I’m going to decrease the exponent on the specular filter a little to give me bigger highlights. Then I want to increase the contrast on the alpha channel. This can be done with a colour matrix filter. I set the last row to (0, 0, 0, 4.0, -1.5). This means that the alpha channel will be mapped a -> 4a - 1.5. This will to some extent remove the partial shades in the specular highlight and give me a more cartoon effect:

This is how the final filter is wired:

Inkscape 0.46 is drawing close. There’s a whole wealth of new features, some of which are incredibly exciting. I’ve not been using the SVN version since I replaced my desktop machine 5 months ago, so I’m only now discovering what these new features will let me achieve. It’s a process of discovering not so much how each tool works, but identifing useful little ways of combining features.

To whet your appetite, here’s a two-minute doodle demonstrating a turbulent displacement filter.

Update: here’s a more realistic style using a specular lighting filter.

My assistant Maxine took it upon herself to produce a poster advertising a promotion at her local pub. She was curious as to how I would draw a bottle of champagne in Inkscape.

This is how I responded:

I’m watching the London 2012 logo fiasco with interest because it’s very rare for the public to take an interest in graphic design in this way. The criticism of it has covered almost every aspect, and there are remarkably few people who actually like it. This logo represents £10 billion of investment so it’s crucial that they get it right. On that basis, £400,000 isn’t unreasonable.

If we are talking about a budget of £400,000 for just the branding (and I believe that figure covers the production costs for the entire marketing campaign), we’re in a very different league to the kind of ad-hoc logo design I usually deal with. Normally with logo design, I come up with a few ideas, as different as possible, based on what I perceive the brandee’s identity to be, and there’s usually one or two in there that are decent enough for the client to want to run with.

Trusted with a budget as large as this, and forced to provide some measure of accountability rather than just using Inkscape’s random polygon tool and stuffing the cash into my pockets, I would probably conceive of a procedure like:

1. Write down design criteria that the marketing campaign must meet, both at a technical and an aesthetic level.
2. Production of a whole load of logos that meet the formalised criteria.
3. Allow LOCOG to narrow it down to a few candidate logos.
4. Pitch each campaign and logo to a separate focus group comprising a proportion of foreign nationals, Brits and Londoners, to judge public response to each. At this stage, you can not only ask whether they like it, but actually collect feedback on how it can be improved.
5. Repeat steps 3 and 4, unless the response is so poor that you have to return to step 2.

I cannot imagine that this logo has come through any such process. Focus groups are cheap and they can prevent mistakes which cost millions! I can conceive of how the graphic designer might submit this to LOCOG, but not how this could have been selected as the final logo unless the alternatives were truly dreadful, but that does not constitute endorsement and focus groups responses would have reflected that.

I would envisage that design criteria for any Olympics logo would be along these lines:

• MUST incorporate the Olympic rings device unaltered and preferably in full colour.
• MUST incorporate the name of the host city in legible roman script, and optionally local script.
• MUST incorporate contain the year 2012 in legible Arabic or Roman numerals.
• MUST NOT incorporate other text.
• MAY convey a mild national theme or style, contemporary if possible.
• SHOULD convey athletic achievement and/or Olympic tradition.
• SHOULD remain identifiable as the Olympic logo regardless of treatment, orientation and low-fidelity reproduction.
• MUST NOT exhibit any image likely to cause offense to any group, particularly with a view to avoiding cross-cultural faux pas.
• SHOULD NOT exhibit anachronism.
• SHOULD be distinctive, worldwide.

I finished updated my brother’s blog over New Year, and I’m now quite happy with it. I spent ages on a graphical title block in Inkscape. I’m not totally satisfied with the caricatures who are a little more cartoony than I would have liked. The new theme is based on K2, which I do think is pretty.

I had a strange bug with the Google Maps on the gallery which I found after a bit of searching was caused by Google Maps not supporting embedding within XHTML. But I’m pleased that the thumbnailing/unthumbnailing works so well. Previously the map enlarged and reduced; this is much less intrusive in either state.

I did have to disable all of K2’s shiny Javascript features to make it work with my Javascript (for map markers) But they were a UI disaster anyway. One of the advantages to JS over Flash is that it allows us not to create horrific new UI paradigms. So going to great lengths to do so is missing the point.

Was playing around with Inkscape last night and ended up doodling some clip art of some fruit and veg.

Enjoy!

The other day I doodled some ideas for themes for this blog. Not really based around web design. Just interesting concepts, hopefully.

Sometimes - increasingly perhaps - I find myself using Inkscape for constructing program assets.

Program assets are a different beast to standalone artworks because you start to have to recombine artistic elements in new ways programmatically.

Most of the time, when web programming, you don’t really need to generate completely original artwork on the fly, but you often need to composite some selection of pre-drawn assets. There are a variety of ways to do this, but Inkscape doesn’t seem to make any of them very easy for me.

(more…)