Category Archives: Photography

Glitch Your Images with ImageGlitcher

ImageGlitcher allows you to glitch any image and save the result. Glitched images look like they are being displayed on a broken analog TV. Check it out here.

This demo was built using Peter Nitsch’s BitmapData.js – a very useful JS port of ActionScript’s BitmapData class which makes it easy to manipulate canvas image data. After playing around with it for a while I got some pleasing glitched image results, so I figured it would be useful to wrap it up as a little app. The glitch effect is achieved by:

  • Slicing the image horizontally and randomly offsetting the slices
  • Randomly selecting a color channel and offsetting again
  • Brightening the image
  • Adding a ‘scan lines’ overlay.

All the source code is viewable via ‘View Source’. Surprisingly, cross browser development wasn’t too much of a pain once I ignored IE. One of the cool features of HTML5 is native drag and drop support. On Chrome and Firefox you can drag in an image from the desktop.

One issue that came up was that the canvas tag does not allow you to getImageData() on images that are from a different web domain. This is supposedly a security feature to prevent hackers copying images, although I fail to understand why. If a hacker has the URL of an image on your website he already has a local copy of the image – right? Anyway $.getImageData gets around this feature by routing image data through Google App Engine using JSONP.

If I get time there are a few features I want to add in the next version:

  • Add ‘Instagram’ style filters
  • Add more granular filter options
  • Use web workers to avoid hang time

Let me know if you find any issues or if you create any nice images, post a link in the comments.

UPDATED – 9 May 2013

  • Removed loading remote images via $.getImageData. Their service appears to be down.
  • Added additional controls
  • Removed image size limit
  • Improved  messaging

SimpleViewer 2.0 Released!

Big news over at SimpleViewer.net – SimpleViewer, the free customizable Flash image gallery has been upgraded to version 2.0. Check out a run-down of the new features here and grab yourself a copy here.

SWFAddress Gotcha: Navigating Directly to a Deep Link Breaks Preloader

There is a known issue with SWFAddress 2.2: When navigating directly to a deep link, the preloader does not display or jumps straight to 100%. When using the ‘#’ symbol in the URL, the browser loads the main SWF twice which cause the preloader to break.

The fix is to use a mini pre-preloader as supplied in the SWFAddress samples (‘samples/cs3/c.fla’). The mini-loader is loaded twice but since it’s so small it doesn’t matter. I’m adding this information here since the issue is pretty buried in the SWFAddress forum.

[UPDATE] OK, another SWFAddress gotcha by virtue of obscurity: If your back button is not working, check you have specified the ‘id’ attribute in the swfobject.embedSWF() call. The ‘id’ attribute can be any string.

swfobject.embedSWF('c.swf?path=main.swf', 'flashContent', '100%', '100%', '9.0.45', null, {}, {}, {id: 'myId'});

New Photoshop Scripts for Airtight Viewers

script ui

Jeff Tranberry over at Adobe just built a new set of Photoshop scripts for SimpleViewer, TiltViewer, AutoViewer and PostcardViewer. These scripts allow you to easily create Airtight galleries with Photoshop CS3 and up. Just select your image folder and gallery options to instantly create a gallery.

Custom Portraits by Paul Turner

portrait

I just built a website for my dad, Paul Turner. He’s a very talented portrait painter (among other things) who is starting to sell custom portraits on the web. I sent him a digital photo of my son, Caspar, and 2 weeks later I received a very nice pop-art style portrait printed on fibreboard and ready to hang. It always get compliments from guests. So support an independent artist and get yourself a portrait!

Another talented artist in my family is Abby Stiglets, who has some of her strange and beautiful paintings on display here.

PostcardViewer Update

PCV

I completed the viewer update trifecta – PostcardViewer has been updated to v1.2.

I actually re-wrote the code from scratch, since the previous code was starting to show it’s age. The main new feature is captions. Since the images are rotated slightly the text requires an embedded font to render. This means that non-english characters, italics and bold are not supported (PostcardViewer-Pro allows you embed different character sets as required). View the complete list of updates here.

I always liked this viewer since it is very simple but fun and effective. It uses Flash’s fast scaling code to produce nice zooming transitions. About the image rotation in PCV – a few people have complained that the rotation degrades image quality. I think the slight rotation adds a subtle real-world cue that makes the images more visually interesting and ‘real’. Think about it – when you look at a set of actual photos, they are not all perfectly perpendicular to each other. Your brain does a fine job of working out which direction is up and which direction is down within the image. Let’s break free of the tyranny of the 90 degree angle 😉 (PCV-Pro allows you to disable the image rotation).

PostcardViewer-Pro customers are notified via email when there is an update. All 1.x updates are provided free of charge.