Podmen and PNGs

Sometimes I think we threw the baby out with the bathwater. An animation that weighs in at less than 100KB in Flash, currently weighs in at around 8MB in Processing. Admittedly it's made using pngs rather than vectors but that does seem a little huge. I used 122 pngs to make the animation above, in Processing. It turns out that each frame in the Podman animation weighs in at around 20KB, work it out for yourself, that's pretty huge. So I had a look at how I could compress the pngs to their smallest possible size. I turned to the two big hitters Photoshop and Fireworks but they have next to no PNG24 compression control. If my Podman is to have a nice fluffy drop shadow and a soft edge, I needed the semi-transparency available in the PNG24 format, with some extra control over the compression. PNG24 is billed as a lossless format, meaning it doesn't throw away any information, it just tries to compress the file, with no data loss. I remembered dealing with IE6 and it's buggy handling of transparent pngs. I stumbled upon a tool called ImageAlpha written by a clever bloke called Kornel Lesi?ski. This brilliant free application adds a whole suite of extra compression options to those that ship with Photoshop and Fireworks. You can specify the number of colours, choose from range of compression algorithms, toggle dither and specifically ensure that the exported image is IE6 compatible. Pretty amazing if you ask me. Why these features aren't in either of Adobe's products is beyond me.


Although I was well on my way to success. My woes weren't over yet. I had 122 pngs to re-export and ImageAlpha, doesn't seem to support batch processing of multiple files. After consulting the ImageAlpha website I stumbled across this tantalising statement:

"Batch processing
ImageAlpha is mostly based on pngquant. You'll find compiled pngquant executable in ImageAlpha.app/Contents/Resources directory."

This was music to my ears. After visiting the GitHub link, I realised that png heaven was close.

Follow these steps.

1) Do a test export of a .png using the ImageAlpha application. Make a note of the number of colours etc.
2) Select the ImageAlpha application in the Applications directory, right click / ctrl+click the application icon and select "Show Package Contents".
3) In the "Resources" directory you will find a magical executable file called "pngquant" the path to this files will be something like: "/Applications/ImageAlpha.app/Contents/Resources/pngquant" right click / ctrl+click and select "Get Info" to be sure. You will find the path under the "General" drop down arrow. Copy down the path, including the name of the application itself "pngquant".
4) Open Terminal.
5) Paste in the path to "pngquant" adding "-h" immediately afterwards, in my case it looked like this:
/Applications/ImageAlpha.app/Contents/Resources/pngquant -h
This will print out some information onto your Terminal window. It's actually a set of instructions on how to use pngquant, and to perform the batch processing of our 122 pngs.

This is the most useful part of what gets printed out on the Terminal window.

usage: pngquant [options] [ncolors] [pngfile [pngfile ...]]
--force overwrite existing output files (synonym: -f)
--nofs disable Floyd-Steinberg dithering
--ext new.png set custom suffix/extension for output filename
--speed N speed/quality trade-off. 1=slow, 3=default, 10=fast & rough
--quality min-max don't save below min, use less colors below max (0-100)
--verbose print status messages (synonym: -v)
--iebug increase opacity to work around Internet Explorer 6 bug
--transbug transparent color will be placed at the end of the palette

I know it looks complex, displayed there on a spooky Terminal window, but it's really simple honest. Each one of these options is an instruction, that gets sent to "pngquant"

6) Finally I constructed the following line to complete my task:
/Applications/ImageAlpha.app/Contents/Resources/pngquant --nofs --iebug 64 Documents/Processing/Podland/Podland/test/*.png
it breaks down as follows:

[Path to "pngquant"] [--nofs = no dithering] [--iebug = fix the ie bug] [number of colours] [path to my directory ending in the wildcard "/*.png" to process all images ending with the ".png" extension at this location]
7) Hit return.

8) Check out your directory and enjoy your freshly exported images.

NOTE: My animation is still 1MB though. Next stop: SVG.

Processing in WordPress

[pjs4wp] //Info: https://processingjs.org/reference void setup(){ size(110, 110); background(#444444); stroke(#00ff00); font = loadFont(“Akkurat-Bold-32.vlw”); textFont(font, 20); text(“draw”, 10, 30); } void draw() { if(mousePressed==true){ line(0, 0, mouseX, mouseY); } } void mousePressed(){ cursor(CROSS); background(#444444); } [/pjs4wp] [pjs4wp] //Info: https://processingjs.org/reference int xPos=0; PFont font; void setup() { size(112,112); xPos=0-width/2; strokeWeight(2); fill(255, 100, 0); background(#444444); } void draw() { background(#444444); createBlob(); ellipse(xPos, height/2, random(100), random(100)); xPos++; if(xPos>width*1.5){ xPos=0-width/2; fill(255, 100, 0); stroke(0); } } void createBlob(){ font = loadFont(“Akkurat-Bold-32.vlw”); textFont(font, 20); text(“click”, 10, 30); } void mousePressed(){ fill(random(255), random(255), random(255)); } [/pjs4wp]

I’ve been fiddling around with Processing for a couple of months. It’s quite honestly the most excited I’ve been about any technology since ActionScript arrived in Flash 5. Here’s a little embedding experiment using Keyvan Minoukadeh’s excellent Processing JS plugin for WordPress. Make sure your get the right one!

It’s quite a simple plugin, all it does is add a “Processing” button to the WordPress text editor. It injects sample JavaScript snippet into your page or post, allowing you to paste in your own Processing code. It took me a while to work out the best way to use the button. The default formatting is pretty basic so I tried editing the PHP in order to wrap canvas elements in a styled div but nothing seemed to work properly. In the end I just wrapped the injected javascript code in divs with inline styles. I guess this is ultimately the more flexible approach, allowing me to format canvases individually to fit the layout of specific posts.

These are the first, rather rubbish, Processing Sketches I ever wrote; saved here for posterity and encouraging me to pull my finger out and post the recent stuff, when it’s finished.

Looking white in the face

“Fear of the White Page”
(Oil on canvas)
by Erik Pevernagie

I went to boarding school between the age of eleven and thirteen. Although essentially a comprehensive school with a tagged-on boarding house in the car park, it held onto many of the old grammar school traditions, including a culture in which prefects would mete out time-consuming punishments for minor misdemeanours. For example: for drawing comics when I should have been doing homework, I was instructed to describe in not less than 1,000 words: “WHITE“, thus preventing me from finishing either my comic or my homework. It is with some surprise that I find myself, half a lifetime later, sitting down to write the 2013 version. The title may be a little different, but it is essentially the same subject. “WHITE“, or to be more specific, the fear of it.

Do you ever feel afraid of the white page, the blank canvas or the empty Photoshop™ document? A lot of people do. There’s even a word for it: vacansopapurosophobia. It’s a common complaint among creatives, similar to writers’ block. It is the inability to get the ball rolling, a crippling lack of confidence at the outset of a project or a sense that anything you try, will fail. Where do I start? How do I start? Should I bother starting at all?

All of us struggle with a sense of worth. Is it the fear of failure that makes us feel uneasy or, as Franklin D Roosevelt said, fear itself? Perhaps those who manifest these feelings into a pathological fear of the colour white may be extreme cases, but ultimately their fear is no more irrational than the fear of failure.

The psychologist Abraham Maslow in his 1943 paper “A Theory of Human Motivation” proposed that human desire can be divided into a hierarchy of needs. Maslow argued that once we have achieved the baser needs and desires of life, we strive to achieve a state of self-actualisation; the psychical manifestation of all our potential. Effectively the metamorphosis from what is possible, to what is.

Maslow placed “self-actualisation” at the pinnacle of his pyramid. His critics point out that the penniless painter, slapping paint onto canvas, may be pre-occupied with self-actualisation above all else. The tortured artist may forgo food and drink to buy the paint he needs or more blank canvases.

“Just slap anything on when you see a blank canvas staring you in the face like some imbecile. You don’t know how paralyzing that is, that stare of a blank canvas, which says to the painter, ‘You can’t do a thing’. The canvas has an idiotic stare and mesmerizes some painters so much that they turn into idiots themselves.”
Vincent Van Gogh

Van Gogh’s coping strategy appears to have been immediate eradication of the offending blank canvas. Anyone who has watched children play will recognise this technique. The first thing a child does when settling down to play is to empty their toy box all over the floor.

The child revels in choice. They instinctively recognise the importance of inspirational resources. A pile of toys is like a pile of ideas. Unrelated and disparate thoughts, building blocks to be assembled into a meaningful pattern. They do not start with nothing, they organise the chaos.

“The blankness of a new page never fails to intrigue and terrify me. Sometimes, in fact, I think my habit of writing on long yellow sheets comes from an atavistic fear of the writer’s stereotypic “blank white page.” At least when I begin writing, my page isn’t utterly blank; at least it has a wash of color on it, even if the absence of words must finally be faced on a yellow sheet as truly as on a blank white one. Well, we all have our own ways of whistling in the dark.”
Memoirist Patricia Hampl, in an essay called “Memory and Imagination.”

Although many artists and writers combat this fear of the blank page by spoiling or filling the page as quickly as possible, there are a considerable number of artists who practice the exact opposite; instead of adding to the canvas, they subtract.

Tintin in Tibet
by Hergés

Hergés, the celebrated creator of Tintin, was plagued by recurring nightmares, filled with whiteness. He consulted a Swiss psychoanalyst, who advised him to give up working on Tintin. Instead, he finished Tintin in Tibet, started the year before. Hergés, actually transformed the white from his nightmares into snow, literally revealing the potential of the fear itself. Converting it into minimalist scenes, of tremendous power, with economy and clarity. We are transported to another world, a world of Hergés’ creation; something that may never have existed if the author had not struggled, and ultimately triumphed, over his fear. Hergés made a choice to continue and in so doing exorcised his phobia forever.

The blank canvas or document is a portal into another world. Potential manifest. The artist, as the creator of this world, must make choices. Every brush stroke, key press or movement makes the world more solid, for better or worse. A single brush stroke in the wrong place can subvert or transform that world. Every choice is a doorway to another reality but beware, for every door that opens an infinite number of alternate doors close.

It is said that Michelangelo stared at a single 18-foot block of marble for four months. When asked what he was doing he calmly answered ‘sto lavorando,‘ (I’m working). Three years later that block of marble was the statue of David. Michelangelo held a belief that a sculpture already exists inside every block of marble. He believed that it was the sculptor’s job to chip away the superfluous, in order to free the idea inside.

Did Michelangelo ever feel afraid during those long months spent gazing at that virgin block of marble? I’m sure he did.

‘A sculptor is chiseling a statue out of a raw stone when he is asked “What are you making? Is it Ganesh? Is it Lakshmi? Is it a man? Is it an elephant?” He replied ”I do not know; there is already a statue inside and I am only removing the extraneous material. It will come out on its own!”’

You could describe the coping strategies of Michelangelo and Hergés as ‘subtractive’. Their creative process sets about revealing the idea by subtracting the extraneous white space.

Alternatively, Van Gogh adopts an ‘additive” approach by slapping on the paint, as carelessly as possible in order to avoid confronting the blank canvas at all.

Whether we choose to embrace or eradicate the white page, we must avoid becoming consumed by it. The blank page is a Mirror of Erised, reflecting idealised versions of our ideas back at ourselves, ultimately transfixing us into inactivity.

Ideas can be blinding and dazzling but they can also consume us. We should view them with caution; as a child peers at an eclipse through a pin-hole in a piece of card.