BackForward Start Page Page List

Image Hacking


Introduction


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:




1NhbelZGLH8KzRhwYGobGhSy6tmmDZH_xG6zwW0suS9fDger3bSZO59usWfWuNNyof6JizaWTQ_vPsFZdnjI1CoZvwcduIrTFgeXxPS0zKxUnKqQy-TwfVzUhtWpiEfRetx7gdER.png

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

Polarr

https://photoeditor.polarr.co/ 

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


Pixlr

Pixlr 

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.


Befunky

Befunky 


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. 


Canva

https://www.canva.com/ 

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

LipNBkxabXKPBbE5AQLCuLc5tut9pzE8NDEv-6EKOWaRYqyZ-YXwa6eJRf3BB6elzoFz6dl4YBa4scuJ6fFW2KNH5TgEJycmPAe0SSW4R1qSwSrB01aAutM3UE1SCUkZsliIZtkw.png

https://krita.org/en/ 

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)

http://seashore.sourceforge.net/The_Seashore_Project/About.html 


X9_pxzk5xAM7g4B95d_to0w7QVyrszf6NpMVfyC2QosY6jJgI3z1FyVpQEvSQQEr4qgrvgOgjBSCTlehc2h6sVvhVW3IJm_M2VjA7cl4MIAs765KhkqQufbTvq9dbhWaDS3Bxiar.png


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.


rkGqy7Z1Dlii_zOOEWpEgftBpvEr-oSsNGmmULC6fZZgvmIsHgeMv0LjXmcYAarj398WWhRvHdjKvv0prLtOk5i_YUofzQ2Vho1DNkCj4McRW_poDyA6Ff2f-kcexM0ogO9cCASN.png


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

https://vectr.com/


S1Cn7AzIRWHyKezBiXigWn4RN-0hwsWQksKwCAPi3AsSyXpxtdxYazPc13KQIKODFaNE7WXBPSs9g3u6TH3rQ1Quurv0NCphq7XInaoinipM0Qo5foKAS4A_Y9WUOSzS1wUk1D91.png



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


Sketch

https://www.sketchapp.com/



46dsmr4s6bjfMNfW-j8rzKS1xRwKFZWT9vFGxUi2Pb2nDn7HEox8q_mTCeWFYOgNnLD5V2I19n3v-IjSPpatDZHNoNAQQc6sLGLVYq25aIQsMZlpq0Jz3OnuCVsAwDJtcqxPfn_d.png


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)


hBljvt5zpZyeeH8y0z8uAGnt219f1vXFgUa1ormf4qrvskFyYxJ0zFM6Ui_K09gxJb5PnWDTHvjqZWmAidpAAGvEehvfFu9y-t-9h_piC_qIlquQ7vkBxIEKqLwnOQM4oQ51qcz8.png


Automator

https://support.apple.com/en-gb/guide/automator/welcome/mac 

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

https://inkscape.org/en/


oETmoszfQaFuS3hwO_Hhhzv7T0-l0qZyR-G9pwWklQgndfdUEtuk2En-8BbR7KkDUfE1JmSVC1w-DP1ICtynTAN_uSEi_eb8eJAD2NM1JXhH8ll2ZDpKcQc2QkeH2ddFIQWOruAu.png


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.



UA3yPFMHok9uxyB3lPQPxovLXNCaGKpVBxWW8zAXvXhMwZ8_Xyy00vnEPGSRNKlQO6XXJk_DAA-d0CIMYLfEb5hrT4K8c4VZwjVZG0WUVkT5Ctkq1FBS8AQ04yeIGQtlcRXHT3YS.png


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, https://wikivisually.com/wiki/Inkscape

Gimp

https://www.gimp.org/ 

KAJBX7j2iJ5ok4D-l8vGJz4WfisfSyaOlmWn5XxURfUrhrNc35j4nXKTYlBYBHh-KEf1fCaN3dpp7fkA_7tpSq8m5ZffWBX8k3Yzr_08jHSWeG_CSN1VsJgGgyz3jNVR0E4p-sD3.png


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 

https://flyingmeat.com/acorn/


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

http://processingjs.org/exhibition/


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


1SMMCjm-_zYfE67C5VPt6bak1Lba5cET_QQOvjcxBOPI4yW9SBEXDsNJHJyCDi4QoHFnoLst1Qgr9JwdTuQFUlIcgd4vjv6SM1wVFJVLqGi9gQvmpMhRJqO0Ex91MaS66pTENFmF.png

Javascript 


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: https://blog.webkid.io/image-processing-in-javascript/ 


 JIMP


PaintbrushJS

https://github.com/mezzoblue/PaintbrushJS

h4yV-r-Ow1uhj8wMLIyw2B7coJIc4BxCIKWaAmseN2sn0myvFhMd6iSijn4cbSSIYRU9Mg9IQi7ne_6a3u_baxcmE0hQsiSc7Ub37IjyRDy0Hp0WgCuqluidrK6fzYoP0947y8OB.png

 http://mezzoblue.github.io/PaintbrushJS/demo/index.html 


GLFX.js

http://evanw.github.io/glfx.js/ 

GLlKFpTraUM2lvdsFpLA3TPAQKBDgYL2u8munA0VpNzhKMIa-ef-xn_Mb-AyzxJLX7Ey9iLKqiTc-gQR7LyJX2lMkXDGxuBgP2aspJOqvUHLGl2cwBooruMFT6iE2ZhjirwBSVgM.png


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.


nGy1VKQbyX40GvEuKjYZ3HZ6W_oifK9DOhGrzblpF65BCbw3pDgdDi-h6ODeBt22Ry2aGT1f0Ezf31j_tgPpFX5UHpKpv3Dr1le4rcwmBMp781vjMcWv5qdVzBl-nUBNsGKlOTY4.png


http://xahlee.info/js/js_scritping_svg_basics.html


Here is some information about HTML5 and SVG: https://www.w3schools.com/html/html5_svg.asp

And a longer tutorial: https://www.w3schools.com/graphics/svg_intro.asp

SNAP SVG

http://snapsvg.io/demos/#game 


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


JJuy5lX5dEpzPlecwFgtsEoCZjQo86CB6N2BqmURNzCbYM6jwB7IZEgAkKhSwggxaR3ALwfE52BVzNejb_PB7Dn9oiPFTLxEx96OLRlMWce6CDhcgNPV9j53FIu8N_kXud12yvLQ.png


See also:


http://svgjs.com/elements/#svg-mask 

https://www.tutorialspoint.com/svg/image.htm

https://www.visualcinnamon.com/2015/05/gooey-effect.html

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. 



DIC2RP3RyK6hq1kkv9sIDAxLZtx8ciYYrUexUbxbR3fYIFGI3044M8risvBNCWvRaSBFOlEZBn3fhb2I9F6PTie7mFxlxFYsJvHggRqZ2sXyVeOamAEIu53MkJzqVgWC8XUwz0V2.png


http://www.programmingbasics.org/en/downloads/html5canvas/index.htm


GraphicsJS

http://www.graphicsjs.org/ 


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



-lv12TPSCxo9kdMLjEI7swblhCSzvs44oP6Kvc52JfLIGAar8u3SZ3ZDNjM34ldObADdUqP1_wDjN076C5PVYQEZ7pXyrh7VftaRzVV0NXMzqxLRSztH_eN0d4UTRoPtsIDu7nZh.png



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  


See: https://p5js.org/examples/ 


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

9_j_YkMEjxFA0WB_ToZexjuaJ4YP_uVB1fDNQT2bmggxhvJkb9i-GWwG595b1edRft7nFb8xbS0J--yPMj9VYylPdFQPNZ1zQf-SXZWgIEXaL1p4ECXUqQONHBZ3how_mDXka3Wp.png

https://www.html5rocks.com/en/tutorials/canvas/imagefilters/ 



0x9D3XWSdVswFyH0MSzbJzoNDPexK_cZ7DFn8ufgrnapRRMpZrs1sSuUYkATZBBzCRDqkrADO6Us6emzqJsPmgM7aUXUWZMHulkDMNaHcdMKIzgbQt1fqGENHwQbJVCy9KzPtTqP.png


Often, people have created and shared code that generates stunning animations like this one above, https://codepen.io/ara_node/pen/nuJCG 

Or this Zen Photo Garden code  https://davidwalsh.name/canvas-demos


deTI1_v8j3AdrMpbeL3dfBkFnNiaTIe3CV-OlkLgfKczjtp4TCRRrVp0uSVboPnx4zQvGyAnHer6EojH1_1398MBbgl_Ql3T-F8CkE0xz7u14YntjRfpm92taODP3hvX3DnNf9Wb.png




a8YzQ0aFLFmVjJuVw1sgYc0mqD9OtPe0-pETevUTeQdtEhwEt0wp3jw8f_FpPlirnozgp3L7zkLBK-dFAic_eQph7KE6iKr8SSBe1Boqt8-HMP4FCxgDoyv8WvEq1opYfcN1Hpk0.png



Or this stunning bacteria-like Mitosis code. 

https://codepen.io/darrylhuffman/pen/oEQbPb


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

6LgCAhrciXSh3PftydjsS2P8UyrXr36I3CbSDUo7_93recVyoyFJJGlgqpZewGpurGOCyMToo0OSKAG3t9-CmklylCTpIB6aepZcUc5dsrOuGC-wSQi9xvN8R8B5Rwt7-taULl1J.png


https://github.com/twitter/SentenTree 


Or Feedtank’s Particle Demo below.


2JzBaVpC0ez7_TAWntIkApK2NVwR1pZ0Ms1vlExmDUa3m8_mV0fHRGI-_UNZgGLAK06097CicBG1FbARtgSfEXqKdYzVTo8DgJansdwuUovHK1JR_qegrMVzJHfcomjkRofB6AAp.png


http://www.feedtank.com/labs/html_canvas/ 




And this impressive Particle Demo below.


ELmlpWnNyxDwxbQ_6FK1Te3iepndR9Lw-7zhqgWSeXt6wOlEZGmiB5NK6K7PvONF2SwAkGF08GWN94FhnviAq9l5XUjco2w8DhobOgACC9B1zklm3GolRSvGZVVMGYWpR4sIkX0K.png


https://codepen.io/eltonkamami/pen/ECrKd