The ZipZap Picture Editor

Our vision for ZipZap is to provide a unified online experience, in which web browsing integrates seamlessly with other online activities. With that goal in mind, we are in the middle of building (and fine-tuning) our newest feature — an image editor. While we don’t see any cats radiating rainbows from their furry little mouths anytime in the future, we do think that a powerful and intuitive image editor will be a welcome addition to the ZipZap experience. We’ll unveil details of our rapidly growing feature set in due time, but for now we’d like give you an early glimpse of our image editor.
IMG_1049This is the editor UI.  The picture being edited is of course on top.  There are several ways to get the picture into the image pane, but I’ll explain those in some future post.

(As a sidenote, this picture is just something I happened to like on Tumblr.  I am pretty sure that using it for this demonstration constitutes fair use.  However, I am an engineer and not a lawyer.  So if you own the rights to this picture, and you don’t want me to use it, let me know and I’ll rectify the situation.)

Just below the image pane is the caption editor.  This is (surprise!) where you edit the caption.

Below the editor pane are four buttons, which operate somewhat like the analog joystick on an Xbox.  Each button applies a two-dimensional transformation (except for the “CO” button, which is single dimensional).

Instead of rolling our own algorithms, or using the Core Image framework, we decided to use the more portable openCV library.  The primary reason for our choice is the already-mentioned portability, which will be key when we expand the ZipZap app onto other platforms.  A secondary reason is that openCV provides an unusually rich set of algorithms.  Actually I want to delve into the openCV library in some detail in the future, but that’s not today’s discussion, so I’ll resist the temptation.  Also for another time is a description of using C++ within an Objective C project (it’s pretty straightforward).

Here is an example of the effect of each joystick on the image.  As already mentioned, each joystick (except for the color overlay) is two dimensional.  Not in the sense that it transforms the image in both dimensions, but in the sense that the x axis makes one transformation, and the y axis makes a closely related, but (generally) orthogonal transformation.

IMG_1050 IMG_1051 IMG_1052 IMG_1053
 Brightness/Contrast  Hue/Saturation  Color Overlay  Smooth/Sharpen
 The x axis provides contrast control, and the y axis provides brightness control.  This is pretty self explanatory.  The x axis provides hue control, and the y axis provides saturation control.  A total lack of saturation makes the image black and white, and full saturation makes the image quite vibrant.  A change in the hue actually rotates the colors around the color wheel.  So in this example all of the blues became purple. Color overlay is a single-dimension operation.  The full angular motion of the joystick corresponds with the color wheel (RGB), and the travel of the joystick represents the intensity of the overlay. Smooth-Sharpen is somewhat self explanatory, but not entirely.  Moving in the negative x direction sharpens, and moving in the positive x direction blurs.  The y axis controls “smear” — that is how big (pixel-wise) the blur/sharpen filter window is.


Leave a Reply

Your email address will not be published. Required fields are marked *