BackForward Start Page Page List

Image Hacking


I started exploring image tools with a view to seeing what I could use with a group of students involved in workshops over the period of a week or so. We originally lined up the tools Twine, Livecode and Aurasma as potential means to “pull the students’ work together” into one coherent piece, creating a computer game, or an app or an Augmented Reality experience.


This document is my notes from researching which tools, approaches and skills we might want to look at. And to steal my own thunder, I spent a long time looking at quite complicated code-based solutions, mainly in Javascript, but then found a whole area of visual tools for Audio Visual Processing that have got me really enthused both about the power of these tools, and the possibility to share these tools with groups of students. 

Scroll to Audio Visual Processing Tools if you want to get straight to the good stuff or the pricing comparison.

The aim of the workshops is to give the students useful skills, but there is also, with that amount of time, effort and number of students the strong suggestion that we could create something very impressive collectively.

We haven’t decided on what format the images/videos/animations/visualisations might take, or where they would be hosted, but possibilities include:

Sources of Images

So before we start, whilst you may want, in a while be either capturing or making your own images, sometimes, especially when trying out tools it is a good idea to have some media, or assets, that mean something to you. 

Here are some good sources of royalty free, or creative commons images.

Ensure you keep track of which images you use so that you can properly cite the usage later.

Online Photo Editors and Design Tools

Photoshop is probably the most widely used tools used for photo and graphic manipulation. Rather than just settling on the industry standard tool, I thought it might be useful to explore other possibilities because:


The following tools all have web apps which means you can edit pictures and create banners etc straight from your browser:


Has an Express or Pro (includes face recognition photo editing) versions. 



Has Express (interesting filters and effects), Pixlr-o-matic (similar to Instagram) or Editor (like Photoshop of old) versions. Can load images directly from Google Drive.



Has Photo Editor or Collage Maker or Designer ( lots of templates for things like posters, cards, letterheads etc). Has advertising, well worth exploring the features, such as facial recognition image editing, mentioned earlier. 


Comes with lots of useful templates, such as Facebook header, or Twitter Card etc and you can work collaboratively.

See this 17 Best Photo Resources and Editors article for other tools and things to try.

Notable Desktop Editors That Aren’t Photoshop



Krita is a professional FREE and open source painting program. It is made by artists that want to see affordable art tools for everyone.

Krita caught my eye because it’s free, it has very powerful features and interestingly, you can script it (not on Mac yet) which opens up lots of interesting possibilities. 

Seashore (Mac) 


Seashore is a free image editor for Mac that resembles Photoshop in many ways but is much simpler.

Vector-based Editors

It’s important to understand the difference between bitmap editors, that work on images as pixels and vector editors that work on images as points.


With a bitmap editor, as you zoom in, the image becomes pixelated, but with a vector image, because the computer draws a line between the points, it is always crisp edged. Vectors are great for printing because of this. Photographs are of course bitmaps.

Many graphics you see might be a mixture of bitmaps (photos) and vectors (fonts, logos, design elements etc)

Often vector tools create SVG (Scalable Vector Graphic) files, but can output as PNG, PDF or JPG for use online etc.



Vectr is a free and easy to use vector tool. (can’t see ‘Bezier’ curve tool?)



Sketch is a popular paid for vector editing tool with which you would generally create designs and images that could be exported to a number of resolutions or file types.

Desktop Editors (You Can Hack)



It’s worth mentioning Apple’s little known product, Automator with which you can visually code all sorts of common actions on Mac. Above in an example of how to create an Automator action that takes a folder of PDFs and saves them as JPEGs. 

There are command-line tools to do these sort of “batch” conversions, but these can often be intimidatingly technical for most users.



Inkscape is a professional vector graphics editor for Windows, Mac OS X and Linux. It's free and open source.

Despite the slightly clunky interface, I think Inkscape is fantastic and well worth everyone getting to grips with.

For me, its best feature is that you can import a graphic image, and Path > Trace Bitmap, turning a bitmap image into a vector image where you can then edit, warp and change the points of the shape you have created. See the image below in which I have turned a photo of a tree into a vector object.


As well as a number of interesting filters and extensions that you won’t find anywhere else, you can create extensions with the Python programming language.

It is well worth working around any interface quirks to get access to its features. This is a great article about Inkscape,



Gimp is a free, open-source image editor, which is very powerful, and again, could be said to have some interesting interface quirks, and again, it is worth taking a little time to accommodate those quirks to benefit from its features.

You can write plugin for Gimp in Python too.


Acorn is a nice Mac image editor that has bitmap and vector tools available for £29.99. Interestingly, Acorn is an image editor that you can automate with Apple’s AppleScript language.

Just Coding Graphics

Whilst you will usually work with images “by hand”, sometimes you need to generate images. Examples of this might be where the image is so complex that it would simply be quicker, and more accurate to make it with code rather than drawing on screen, such as the creation of a clock face, or times when you need dozens or hundreds of graphics created.

You can create images with code using pretty much any programming language, but learning programming languages can be a difficult at times. There exist tools that are sort of “coding playgrounds” in which you might create images that you wouldn’t be able to do “by hand.


Processing is a simple scripting language and environment with which people create all sorts of images, animations and visualisations.



Because Javascript is such a ubiquitous language on the web, it is worth knowing about the possibility of manipulating images with Javascript code. There exist a number of libraries that do different sort of image processing, such as filters, colour balance etc.

An article introducing them here: 






Scripting and SVG

One “web-friendly” image format is SVG. This tutorial shows you how to start coding a simple image into shape with Javascript.


Here is some information about HTML5 and SVG:

And a longer tutorial:


There exist libraries to make making more complex SVG files, even animated and interactive ones, such as the one below, easier.


See also:

Javascript to HTML5 Canvas

One way to create images with code is to use what’s called a HTML5 canvas object. Working this way, using a coordinate system you simply tell the computer to draw from A to B, to change colours, or line thickness etc. 

This section begins with the simplest Javascript code but later reveals much more impressive Javascript libraries, which, although complex are often very easily integrated into your projects, without requiring lots of programming knowledge.

I hope the code below is fairly straightforward. 



There are many libraries that make drawing easier. See the code below that has the ability to draw shapes etc. 


Drawing simple shapes isn’t very inspiring though, and there are also free and easy to use libraries that have the ability to create visual elements that fade, warp, or have flocking behaviour, animation and 3D tools with which you can build a more complex visualisation  


And there are more sophisticated image filters that you can build into your application.



Often, people have created and shared code that generates stunning animations like this one above, 

Or this Zen Photo Garden code



Or this stunning bacteria-like Mitosis code.

And libraries that take your data, such as Sentence Visualisation below


Or Feedtank’s Particle Demo below.


And this impressive Particle Demo below.