Late at Tate Britain: Echoes

A night exploring myths and morality, inspired by Margerite Humeau’s Echoes

Late at Tate Britain April explores the Ancient Egyptians’s relationship with mortality and its parallels with contemporary society, inspired by Margeritue Humeau. Ancient Egyptians looked at preserving life trough spirituality. In current times, do we try to achieve this through digital formats.

The series will kick off on 6 April with an evening exploring the current Art Now installation by Marguerite Humeau. The work entitled Echoes is conceived as a confrontation between life and death, with the gallery transformed into part temple, part laboratory for the industrial production of an elixir for eternal life.

Tired

Posted on 07/10/2013 by hellocatfood

New Everything

Posted on 01/02/2013 by hellocatfood

The making of Comic Sans Must Die

Posted on 28/12/2012 by hellocatfood

Comics Sans Must Die ended some time during the week of GLI.TC/H 2112. Although it only lasted just over a month long, the creation of Comic Sans Must Die actually started in July 2010 when I stumbled across the Geomerative library for Processing as a way to manipulate SVG files. After a bit of fiddling with one of the example files I was able to take (almost) any SVG file and gradually reduce it over time.

This “destruction” is exactly what happens when you press Ctrl + L or Path > Simplify in Inkscape. It reduces the amount of nodes in the paths to simplify their construction, resulting, at times, in a very polygonal shape.

Processing Sketches

In the two years that followed I experimented with ways to export the on-screen destruction of the files to an animation (either gif or video file). I came across the gifAnimation library, which did exactly that. Soon after I was able to able to combine the two libraries to produce an animation of a SVG file being gradually destroyed. With the help of Richard Clifford this script was modified to also work on a folder full of SVGs. You can download both sketches from my Open Processing portfolio or below:

Sketch for multiple files. Click to download

Sketch for single file. Click to download

At the moment these sketches only work with Processing 1.5. They’ve been tested against gifAnimation from January 2008 and Geomerative rev 34 and were originally developed on Ubuntu 12.04. They can only be used on the Desktop, though the challenge is there for someone to make a version for web browsers.

Working with Comic Sans

With the Processing scripts in place I needed a way to destroy each individual glyph of Comic Sans. For this I turned to FontForge. Using the following command (on Linux) I was able to output each glyph to an SVG file:

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export(&quot;svg&quot;); endloop;' Comic_Sans_MS.ttf

Of course, you can replace Comic_Sans_MS.ttf with any font file on your computer. Quite handy!

I then came across another another problem. The Processing scripts work by reducing the number of nodes until there are almost none. If there are very few to begin with then the process will be over very quickly and you’ll have a very short animation! Inkscape has the capability to add nodes, but so far this can only be done using the GUI. Luckily Inkscape Verbs came to the rescue. Using the script below I was able to mimic a user manually selecting the shape and adding more nodes:

#!/bin/bash
for file in *.svg
do inkscape -f $file --select=path6 --verb ToolNode --verb EditSelectAll --verb org.ekips.filter.addnodes.noprefs --verb FileSave --verb FileClose
done

Save that to a file and run it inside a folder full of SVGs.

Before: 47 nodes. After: 1317 nodes.

For some reason all of the paths in the file were called path6. You may want to change that for your own SVG files. This script, and Verbs in general, have the drawback of always launching a GUI. The developers are aware of this and hopefully this will change in the future.

Destroy your own…

These sketches and scripts can be run on more than just font files. Any SVG that Geomerative can handle (not .ai files) can be used, even logos and jpg/gif photos converted to SVG.

Ubuntu Lego

New deviantART ID

Posted on 28/12/2009 by hellocatfood

I’ve been a part of the deviantART community for a lot longer than I have had a blog or website. I used to be very active but then drifted slightly away ’cause of the whole blogging thing though recently found myself at one of the devMeets. It’s a great way to meet other amateur, hobbyist and even professional artists, photographers and creative types. In an attempt to get back into the swing of things I created myself a new ID image:

You probably will recognise some of the styles used in there from previous tutorials that I’ve written. Well, they’ve finally been of use to me! Expect more stuff like this from me in the future.

If you’re on deviantART too why not stop by my page

Databending: Where next?

Posted on 29/10/2009 by hellocatfood

I’ve been exploring databending for awhile now and whilst I quite like it I do wonder where it can go next, or rather, where I can take it next. Whilst I like the chaos and apparent random results achieved in opening up an image file in a hex/text editor and mucking around I feel that more could be done with the result. I feel that the modified image (or sound) should part of a design, not the design itself. With that in mind I’ve been doing an experiment mixing the chaotic but more controlled output of Alchemy and several modified images

Essentially what I have done with the images is applied a clipping path to them using a few of the shapes present in the original image. There of course is then scope for editing the SVG in similar ways.

This is a very similar technique to preparing a .psd with many layers and then modifying it. It has been discussed whether this way of using the resultant image constitutes databentbending, but you could argue that with databending you’re attempting to reproduce and control the output of a glitch or error and so if you’re then able to control it it is no longer an error.

Regardless of classifications I’d really like to see where I can take databending next and how I can incorporate errors into design.

Family Portrait

Posted on 06/10/2009 by hellocatfood

After seeing some of my recent work I was asked to do a family portrait. The last time I did a portrait on such a large scale was in 2007 in Adobe Illustrator and the last time I did a realistic portrait was probably back in 2006 of an old photographer buddy. I’ve been using Inkscape for just over a year now and whilst I’ve been doing little bits and pieces I haven’t actually done a major illustration.

As always I started with the outline first and filled it in with basic colours. I used GIMP and a very useful cutout filter to help me visualise how I was going to layer the colours and shapes that I needed. From there it was a simple case of refining and perfecting! Have a look at some of the progress shots:

The finished product looks like so and is probably my favourite piece this year:

The finished family portrait

The finished result was printed onto a canvas and is mounted on their wall. Yay!

If you’re that kinda person you can have a look at the wireframe of the image:

Overall working in Inkscape was quite easy in terms of drawing. One bit of praise I often hear about it is its drawing and node editing tools, and it really did feel quite easy to draw this. However, there are two areas where I feel Inkscape hindered my creativity in creating this piece.

The first is how it implements brushes. Inkscape does this by using the Pattern Along Path Live Path Effect, which in some instances can be more useful than Illustrator’s brush tools. What I feel some users want is for the pattern to act as the stroke of a path and to still be able to edit the fill of a path. This would’ve been very useful for me when drawing the hair.

The second is it’s lack of extensive layer blending modes. Currently Inkscape has five layer blend modes, which includes normal/no blend and these can only be implemented on layers, not individual objects. As far as I know you were able to set the blend mode for each paths in 0.44, but it was removed for technical reasons. I achieved the effects in my earlier work by, at times, combining over ten different blend modes on individual objects. Take a look at this walkthrough by popular vector artist verucasalt82 and you’ll see why it can be quite handy. So, in the absence of blend modes for individual paths could we see a few more blend modes, overlay in particular?

With all of that said, you can see that Inkscape is still a very capable program. I overcame many of the problems I described by just doing things a little different than usual.

Making a Disco Ball using Blender and Inkscape

Posted on 01/10/2009 by hellocatfood

Awhile back I started doing a few experiments using Blender and Inkscape together. One of my creations from this was a ball.

Recently one Inkscape user created a tutorial describing how to make a disco ball directly in Inkscape. Looking back at that ball that I made it kinda resembles a disco ball, so I decided to write a tutorial on how I did it.

This tutorial assumes that you know at least something about Blender and Inkscape. If not, go look at these tutorials for Inkscape and these tutorials for Blender. As with any program, the more you use it, the better you get at it.

We’re going to need three things before we begin. First install Blender. It’s available for Mac, Windows, Linux and probably any other system you can think of. Did I mention that it’s completely free? Next, install the VRM plugin for Blender. This is a free Blender plugin that allows you to export your Blender objects as an SVG (the file format that Inkscape uses by default). I’ve discussed the usefulness of this plugin before. Lastly, install Inkscape, if you don’t have it already. I’ll be using a beta build of 0.47, which should be officially coming out within the next two weeks. If not, just grab a beta build as it’s pretty stable.

Once you’ve installed these programs open up Blender and you’ll see the cube on screen.

The cube is usually the first thing you see.

Depending on how best you work you may want to switch to Camera view. You can do this by either clicking on View > Camera or pressing Num0 (the 0 key on the keypad). What we now see is what the camera sees. If you were to export this as a jpg or SVG this is the angle that you’d see it from.

oooh, shiny 3D!

We need remove this cube and add a UVsphere to the screen. Right-click on the cube and press X or Del to delete it.

Bye bye cube!

To add a UVSphere, in the main window press the Spacebar and then go to Add > Mesh > UVSphere.

Add a UVsphere

You’ll now see another dialogue box asking you to specify the rings and segments. This is important as it’ll define how many tiles there are in your disco ball. Think of these options in this way. The segments option is like the segments of an orange and cuts through the sphere vertically. The rings option cuts through it horizontally. These diagrams might explain it better:

Segments go vertically

Rings go horizontally

Put the two together...

The default is for both to be 32, but, if you want more tiles increase the value and if you want less decrease it. Once you’ve chosen press ok and your sphere should be on screen.

UVsphere

You can reposition, rotate or scale your sphere if needed. To reposition it, with the sphere selected (right-click it if it isn’t selected) press the G key. This grabs the object that’s selected and allows you to move it freely. Try moving your mouse about. This can be useful, but we’re working in a 3D environment which…er.. has three dimensions that you can move along. To move it along a set axis you can either left-click the arrows coming out from the sphere or, after pressing the G key, press the key that corresponds to the axis that you want to move it along. For example, if I wanted to move the sphere along the X axis (the red line) I’d press the G key, the the X key. Now, no matter how I move the mouse the movements of the sphere are constrained to the X axis.

Similarly, to rotate the sphere press the R key and to scale it press the S key. The same rules about constraining it to a certain axis can still apply.

You can do things such as repositioning the camera other such trickery but for that you’ll need to learn more about Blender for that.

With your sphere now ready go to Render (at the top of the screen) and then press VRM.

The VRM options window

I left the options as they are, but if you feel adventurous have a mess around. When you’re ready press the Render button and then choose the place on your computer to save it and what name to give it and finally press Save SVG. You’ll notice the egg timer appears in place of your mouse cursor to let you know that something’s happening but otherwise there’s a handy progress bar at the top of the screen.

Open up the saved object in Inkscape and voila!

It's an SVG Sphere!

That’s the first part of this tutorial done! The next part draws upon some of my own experiments but is also taken from the original tutorial.

When you’ve opened up the sphere you’ll notice that it’s all one object. This is because all of the paths (the tiles) are grouped into one. You can ungroup it if you want but for this tutorial you don’t need to. Give your object a base a fill and stroke colour. You can do this using either the colour palette at the bottom of the screen or the Fill and Stroke dialogue (Object > Fill and Stroke or Ctrl + Shift + F).

Applying fill and stroke colour

The final step of this tutorial from me is the following. With the base colour selected we’re now going to randomise the colours but within that hue. To do this we’re going to use the randomise filter which is located in (in Inkscape 0.47) Extensions > Color > Randomise.

Leave the Hue option unchecked (unless you want a multicoloured sphere) and then press Apply.

Your finished disco ball!

There is of course more that you can do to make this disco ball look more realistic but take a look at the tutorial that inspired this one and come up with something of your own 😉

Click to download the SVG

Blending Inkscape and Blender

Posted on 16/08/2009 by hellocatfood

One of the things I’ve always wanted to do is to work on an image in a 3D environment but then export the resultant image to an svg. Being the open source nut that I am my main weapons of choice are Blender for 3D work and Inkscape for vector. These programs have their advantages and their disadvantages. The main advantage they have over many similar programs is that they’re open source and free. They’re very capable products and are used quite widely and are being actively developed. In fact, Inkscape is getting ready to release version 0.47 (I’ve used a prerelease and it’s awesome)

For my task of exporting 3D models to SVG Blender falls slightly short because it doesn’t natively support this. There are a few plugins that have attempted to offer this and do well, but sometimes crash or give unexpected output. That, and for some users going through the hassle of finding the plugin might be too much.

The disadvantage Inkscape has is it’s handling of lots of nodes. The moment you hit around 10,000 nodes the program begins to noticeably slow down. For most simple logo work this isn’t a problem, but when you come to illustration and highly detailed artwork it gets in the way. This was the main thing stopping me from using the SVG that can be generated from Blender. To test it yourself, import an SVG into Blender and then export it as an SVG using either Pantograph or VRM. You’ll notice that it is now made up of about several hundred smaller shapes.

Before Import to Blender: 11 Objects, 124 nodes

After Blender import: 2264 objects with 6792 nodes

This makes colouring or modifying the shape really hard. Sometimes, in Inkscape you can just highlight all of the shapes, go to Path > Union (Ctrl + Shift + +) to combine them all but sometimes it makes it all disappear.

Luckily there is a technique to get this to work. If you import an SVG be sure to apply the ~~Ninja~~ Decimate modifier to the shape and drag the Ratio slider down (thanks to heathenx for this tip). Please note that this only work if you shape is a mesh, so hit Alt + C and convert your shape to a mesh.

If you’re working with text you may notice that after you’ve applied the Decimate modifier and dragged the slider down all of your text looks… crap.

screenshot_15_01:24:52

This is because the modifier is treating the text as a whole shape and thus reducing the face count of the whole combine shape rather than treating each character as an individual shape. You need to separate them. To do this, in Edit mode (hit TAB to get there) hit P (don’t do this in normal mode. It runs the Blender game engine and will most likely crash Blender).

Separate menu

From the Separate menu choose All Loose Parts and now each character is an individual shape. Now, if you run the Decimate modifier on each individual character you have a lot more control over its final appearance.

After Modifications: 324 objects, 972 nodes

I exported the text to an SVG using VRM but you can do so using that script, Pantograph or the 3D Polyhedron extension in the Render extension menu in Inkscape. Here’s another render showing exactly why you might want to go through this procedure:

70 objects, 36601 nodes

After basic modification, 4042 nodes (text from an upcoming project)

The Decimate modifier has its limits. Where a human would simply combine two big triangular faces into a rectangle the modifier sometimes misses this and just over-complicates things and sometimes completely destroys a shape. This is where I ask the Blender community for assistance. Is there a script to easily reduce the face count of an object?

I think native SVG export is something that Blender should work towards in the future. There’s just too many possibilities and opportunities!

Inkscape tutorial: text manipulation

Posted on 07/08/2009 by hellocatfood

I’ve been messing around with Inkscape a lot recently and have found a few cool tricks. This all originally started as an attempt to recreate an effect I saw on the Inkscape website but quickly evolved into something different.

Here’s an example of the output I achieved.

Something I did earlier

What’s interesting about this is that it’s mostly the work of filters. For this tutorial we’ll be working with text in Inkscape 0.47pre0. To illustrate things better use a font that is very think. Even Arial Black will do. Create two different text objects

The original unmodified text

The manipulations we’re going to apply to this text will be affecting paths, so we need to convert this text to a path. To do this go to either Path > Object to path or press Ctrl + Shift + C. This separates the text into individual paths as a group. Ungroup them (Object > Ungroup or Ctrl + Shift + G) and then combine them as a single path using Ctrl + K. Next, position the text wherever you want it.

We want to create an extrude between to the two paths. For this you need two separate paths (you created these when you created the text). Click on both of them and then go to Extensions > Generate from path > Extrude.

Extrude window

Clicking on Lines will attempt to link each node of one path to the node of another path with just lines, whereas clicking Polygons will do something similar but link them with shapes. Click on Polygons then press Apply.

Text with extrude effect applied

With the new polygons selected pick a hue for it. The reason I specify hue is because we’re going to be modifying the colour next and the filters we will be using will work with the current hue and modify it. As far as I’m aware it can’t modify shades i.e. black or white.

Colour on the extrude effect

Click on Extensions > Color > Randomise.

Randomise extension window

From this window you have several choices. Randomising the Hue lets you have random colours. Randomising the Saturation will randomise the saturation i.e. if it’s a very vibrant colour or slightly dull. Randomising the Lightness will randomise the brightness i.e. if it is completely bright it will go white, if not it will go black. For this I recommend randomising the Saturation and Lightness. To get a preview of the output check the Live Preview option. If you’re not happy with the combination they’ve given you uncheck then recheck the Live Preview. Press Apply when you’re done.

Finished text

For a finishing touch add a background and change the stroke colour

Completely finished!

Voila!

What else can be done with this effect? Well, you know that you need two different objects for this to work, so why not work with one object but then split it into two. In the example below I split a rounded square into two shapes then repeated this procedure.

Stained glass square

One thing to note is that the more nodes you have the more polygons that will be created

I hope this tutorial has been useful. To extend this try messing around with the Jitter Nodes effect under Generate from Path 😉 For more of my experiments feel free to check out my flickr stream.

Antonio Roberts

(hellocatfood)

Tag Archives: vector