Tag Archives: data

Create your own glitch typeface

Posted on by

Making Dataface was really quite an exciting journey. What started off as an attempt to make a typeface inspired by glitch art turned out to be a story of collaboration, exploration and hours of research. Here, I will go through my process.

As you may have seen from my previous experiments in vector databending it’s totally possible to manipulate vector files. My original method for creating Dataface was to save each glyph in the Liberation font to an SVG file and then go through the process of glitching it for each file. Obviously this would’ve taken me a long time, hence why there was very little activity between my original announcement in January and when I started work on it again a few weeks ago.

At this time I thought about writing a script to do this for me. sed is a great command-line utility for Linux that essentially does the same as using find/replace on a character. As it’s command-line it means I can do a lot of automation with it. So, I wrote this simple script that attempted to solve the problem

#!/bin/bash
rand=$(($RANDOM % 9))
sed -i s/[0-9]/$rand/g fontfile.svg

The only problem was that it would replace all numbers in the file with whatever random value was chosen by $rand as the script was executed. Not only is this bad because it would result in a lot of strangely similar glyphs but also because it would modify the header data of the font file, thus rendering it unreadable. I soon remembered that recently the SVG Font specification was finished, which aided my cause by putting all of the glyphs in one big file, but I still couldn’t find a way to efficiently randomise values in the file.

Thankfully fizzPOP came to my rescue. I’m glad that hackerspaces have people with a range of abilities in hardware and software, as I was soon presented with a solution to my problem by GB. After a few revisions he created a script that would replace only specific values in the file and wold even let you specify how much it should be randomised. You can download the finished script and source files and have a go for yourself.

Click to download

 

Simplified instructions on compiling the script:

  • Unzip the file in a clean folder. This will give you three files:Font_Sample_-_Liberation_Sans.svg, glitch.l and makefile
  • Type “make” into the command line (without the quote)
  • If you haven’t got make, type: 
    flex -t glitch.l >glitch.c
    gcc -o glitch glitch.c

in either case, you will get a program called “glitch”.

Please note this has only been tested on Linux, requires Flex (available in the Ubuntu repository) and it is designed to work on SVG font files. I only know FontForge that is able to create these fonts files. To run the script do the following

./glitch 0.50 outputfile.svg

That tells the script to glitch the file by 50%. I have noticed that sometimes you get errors if you put in 1.00 or more.

Once you have generated the file you can import it back into FontForge to save as a .ttf, .otf or whatever font type you choose!

(I still hate Comic Sans)

Here’s everyone’s favourite Comic Sans glitched at 50%

It’s Just Noise!

Posted on by

As readers of my blog will know by now you can easily import any data into audacity and play it as audio. However, most data that you’ll import and then play will just turn out as noise. That is simply because there’s too much noise in the image i.e. too many colours and too much data. So, if you reduce the amount of colours and data in theory you get something a little bit more pleasing to the ear. Experimentationing time!

These were my initial two shapes that I worked with:

And the resulting sound, when looped a lil’ bit:

It’s not much but it shows definite potential. I’ve yet to work out how colour affects the sound, but I’m getting there

The next logical step is to of course run a glitched image through this process! I worked with this image for the sound then used ImageMagick to crop the image to 30x30px squares and used FFmpeg to arrange them into a video.

It’s noise, but I like it 🙂

Streams of data

Posted on by

One of my overall goals is to find a way to databend live video. I’m sure there’s a way to do it with Processing and PureData but I’m not yet proficient in those programs so they’re out of the question for now. In the meantime I thought to try and hack the Echobender script to databend my webcam images.

>tonyg provides a great tutorial on how to convert live webcam images into audio, which I’ve used as a starting point for my hack.

The process for making it works is as follows:

  • Images from the webcam are saved to the computer
  • These are converted to a .bmp file then renamed to a .raw file
  • Sox applies an audio effect to the .raw file
  • The .raw file is converted back to a .bmp then to a .jpg
  • The updated webcam image is displayed to a window and updated once every second

Sound overly complicated? It probably is. Like the Echobender script you’ll need ImageMagick and Sox but we’ll also be using Webcam, which you can install via sudo apt-get install webcam

If you haven’t already, create a file called .webcamrc in your home directory (/home/yourusername) and enter this text into it:

[grab]
delay = 0
text = “”

[ftp]
local = 1
tmp = uploading.jpg
file = webcam.jpg
dir = .
debug = 1

Now create a file called grabframe, place it in your home directory and fill it with this:

#!/bin/sh

while [ ! -e webcam.jpg ]; do sleep 0.1; done
convert webcam.jpg frame.bmp
cp frame.bmp frame.raw
sox -r 482170 -e u-law frame.raw frame2.raw echos 0.8 0.9 5000 0.3 1800 0.25
convert -size 640x240 -depth 4 rgb:frame2.raw -trim -flip -flop output.bmp
convert output-0.bmp output.jpg

To start things running, open up three terminal instances:

  • In shell number one, run webcam.
  • In shell number two, run “while true; do ./grabframe ; done.
  • In shell number three, run display -update 1 output.jpg

Voila!

I know it’s quite slow, but I haven’t yet found a way to update faster and it’ll still be restricted by the time it takes Sox/ImageMagick to perform their conversions.

Thanks again to tonyg, Imbecil and Mez for their help and inspiration

Databending using Audacity

Posted on by

Thanks to some help on the Audacity forum I finally know out how to use Audacity to databend. Previously I’d been using mhWavEdit, which has its limitations and just doesn’t feel as familiar as Audacity. From talk on the various databending discussion boards I found that people would often use tools like Cool Edit/Adobe Audition for their bends. Being on Linux and restricting myself to things that run natively (i.e. not under Wine) presented a new challenge. Part of my task was to replicate the methods others have found but under Linux. My ongoing quest is to find things that only Linux can do, which I’m sure I’ll find when I eventually figure out how to pipe data through one program into another!

Here’s some of my current results using Audacity:

Gabe, Abbey, L and me (by hellocatfood)

Liverpool (by hellocatfood)

Just so you don’t have to go trawling through the posts on the Audacity forum here’s how it’s done. It’s worth noting that this was on using Audacity 1.3.12-2 on Linux. Versions on other operating systems may be different. Before I show you this it’s probably better if you work with an uncompressed image format, such as .bmp or .tif. As jpgs are compressed data there’s always more chance of completely breaking a picture, rather than bending it. So, open up GIMP/your faviourite image editor and convert it to an uncompressed format. I’ll be using this picture I took at a Telepaphe gig awhile back.

Next, download Audacity. You don’t need the lame plugin as we wont be exporting to mp3, though grab it if you plan to use it for that feature in the future. Once you have it open go to File > Import > Raw Data and choose your file. What you’ll now be presented is with options on how to import this raw data, which is where I would usually fall flat.

Import Raw Data

Import Raw Data

Under Encoding you’ll need to select either U-Law or A-Law (remember which one you choose). When you choose any other format you’ll be converting the data into that format. Whilst you want to achieve data modification this is bad because it’ll convert the header of the image file, thereby breaking the image. U/A-Law just imports the data. The other settings do have significance but I wont go into that here. When you’re ready press Import and you’ll see your image as data!

Image as sound

Image as sound

Press play if you dare, but I’d place money on the fact that it’ll probably sound like either white noise or Aphex Twin glitchy goodness. This is where the fun can begin. For this tutorial select everything from about five seconds into the audio. The reason for this is because, just like editing an image in a text editor, the header is at the beginning of the file. Unless you know the size of the header and exactly where it ends (which you can find out with a bit of research), you can usually guess that it’s about a few seconds into the audio. The best way to find it out is to try it out!

Anyway, highlight that section and then go to Effect > Echo

Apply the echo

Leave the default settings as they are and press OK

You’ll see that your audio has changed visually. It still wont sound any better but the magic happens when you export it back to an image file, which is the next step.

Once you’re happy with your modifications go to File > Export. Choose a new location for your image and type in the proposed new file name but don’t press save just yet. You’ll need to change the export settings to match the import settings.

screenshot_11_16_110037

Change the file format to Other Uncompressed Files and then click on the Options button.

Export settings

Export settings

Change the settings to match the ones above (or to A-Law if you imported as A-Law). With that now all set you can now press Save! If you entered a file extension when you were choosing a file name you’ll get a warning about the file extension being incorrect, but you can ignore it and press Yes. If you didn’t choose a file extension, when the file is finished exporting, add the appropriate extension to the file. In my case I’d be adding .bmp to the end.

Here’s the finished image:

Freaky!

Freaky!

There’s of course so many different filters available in Audacity, so try each of them out! If you’re feeling really adventurous try importing two or more different images and then exporting them as a single image.

Bending a penguin

Posted on by

Awhile back I did a quick vector illustration of a penguin. It was nothing much really but as far as penguins go I quite liked this one. Recently (as in, the last four months) I’ve been interested in databending. Have you ever had an image you’ve taken come out like it’s been through a shredder? That’s the effect that most databenders are after. In a way it’s like trying to reproduce an error. Once you’ve done it a few times you get to learn what effects different methods can produce but even then it’s very unpredictable. For a short tutorial on databending an image, take a look at the one I wrote for fizzPOP.

Penguin

My curiosity lead me to see what can be done to databend an SVG file. In a similar way to a jpg or gif they’re just data but the difference is it’s human-readable. That is, someone could look at how an SVG is created and understand it. For example this code:

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Created with Inkscape (http://www.inkscape.org/) -->

..Produces this circle:

Vector Circle

With a bit of time you could easily read and write that code yourself.

So, with that in mind, using similar methods to this databending tutorial, can we apply a similar effect to the penguin? Like jpg’s etc the SVG has a header that, if modified, completely destroys the file. Using the above example the header is from lines 01 to 10. Open up your SVG in a text editor (for Windows I recommend Notepadd++, for Ubuntu/Linux Scite), cut those lines (a simple Ctrl+X will do) and then begin to edit your document!

You’ll notice that you have little flexibility with how you can modify it. With a jpg you can replace or delete any character and replace it with (almost) any other one. In an SVG if you change any of the letters then you render it useless. For example, fill is a function that defines the colour of a shape. If you changed each instance of fill to say fail it would just simply break the file. Epic Fail. What you want to do is replace numbers with other numbers. There is a danger that replacing #090909 with #0909999909 could break the colour values but so far I have encountered no problems.

Once you have replaced a few numbers paste back in the header and then save it again. Open it back up and take a look at the results! Below are a few modifications I made. The process is described in the link.

Penguin - Delete 8 Penguin - Replace 8 with 15 Penguin - Replace 8 with 1

You may find that each shape has become very warped or that the dimensions of your document have increased tenfold! That’s the beauty of the randomness that is databending.