the free-range psuedorandom glitchy pixel ravager
r: g: b: mono:
0 x 0

the program

what is pixlshift?

pixlshift is a web-based image editor created in Javascript and HTML5. It allows you to manipulate images with results similar to glitch art or databending. Working with it is a little bit skill and a little bit luck.

who made it?

It's a labor of love by Matt from the Owlmoth Collective; a musician, graphic artist, web developer, and glitch enthusiast.

why does it/why doesn't it ____?

The answer is either 'because I wanted it to', 'because I didn't know it was like that', or 'because it was too hard to fix'. If you're curious which, send me an email about it.

how can i help?

I'm glad you asked. pixlshift is free, but web hosting and bandwidth aren't. I'm just a guy that likes messing up pictures, and I'm sharing the tool I developed with everyone because I want you to mess up your pictures, too. But that means I get stuck footing the bill, so if you can, I'd really appreciate you chipping in a dollar or two if you've enjoyed using pixlshift.

the tools

pixel dupe

The pixel dupe (short for 'duplicator') tool will duplicate the first pixel of the selection a random number of times in the range defined by the 'min' and 'max' values. Then it will duplicate the next pixel after that a different random number of times, and so on, until the end of the selection. It gives a grainy or smeary effect, depending on how large the min and max values are. Try setting the min and max to the same number for a nifty blocky kind of thing.

pixel sort

Pixel sorting is a technique popularized by an artist named Kim Asendorf. The basic premise is you take a chunk of pixels from an image, order them by some criteria (in pixlshift's case, the value of the R, G, and B channels averaged together), and then put them back where you found them, all reordered like. Then you do it again and again, until it's art. It produces a very distinctive look that's showing up in a lot of places. You can't do it by hand easily, so Kim did it in a program called Processing. pixlshift is the first JavaScript implementation that I know of (if you know of another one, don't tell me, I'm really proud of myself and some of us prefer an illusion over despair). The 'Threshold' sliders will set a minimum and maximum value that the pixel's channel data (red, blue, green, or 'monochromatic' for 'any') has to fall between to get grabbed for sorting. So, for instance, if you set the minimum very low and the maximum very high, very dark colors and very light colors will be left in their original position, and everybody else gets sorted.

red shift

Colors on pixel-based displays are defined by their red, green, and blue values. The red shift tool displaces the 'red' data in the selection by the number of pixels specified in the 'amount', a common effect in glitch art. With a small offset the image will look like one of those 3d pictures you need the red and blue glasses for, and with a larger offset it looks something like an overlay or double exposure of the same image.

viridian

Blue-green. Hydrated chromic oxide. Actually, the viridian tool, besides being the only one with no customizable controls, is a simple blue/green swap. It changes the green value of each pixel to its blue value, and vice versa, creating an almost lomographic effect. But 'blue/green swap' wouldn't fit on the button, so it's called 'viridian'.

invert

Those pixel values I mentioned earlier are represented by a number in the range of 0-255. The invert tool will inverse that value in the specified channel (or in all three channels, if you pick 'all') for the selected pixels. So a value of 0 would become 255, 255 would become 0, 64 would become 191, and so on. If you invert all the channels, you get the familiar photo negative effect. Inverting single channels can give you some weird color effects, whether black is white or blue is brown, the colors in my life are all different somehow. It can also be a good way to get unusual results from the pixel sort tool - invert one or more channels, do a pixel sort, and then invert it back.

noise

'Noise' is a random variation of brightness or color information in images. One example most people are familiar with is that grainy look of digital photos taken in low light. Most image editors offer a noise generation tool, this one works in a way particularly suited to pixel ravaging. The 'amount' slider controls how much noise is generated, the 'r', 'g', and 'b' sliders control the noise color and intensity. With 'monochromatic' selected, the r, g, and b sliders move in sync, and the resulting noise is in grayscale.

scan lines

Back in the dark ages, before the turn of the century, PCs and game consoles used to send images 240 pixels tall to displays that were built for images 480 pixels tall. The result was every other line was black. Now we don't have that problem anymore, but apparently we miss the black lines. This tool will add some. The 'spacing' slider controls how far apart they are (leave it set at the minimum value for that authentic look) and the 'intensity' slider controls how dark they are. These can be especially fun if you add some scan lines and then pixel sort them.

blur

The blur tool is a smudgy linear blur. It's not drastically different than a linear (or 'motion') blur you'd find in any photomanip software (other than it's probably slower and you can't change the direction), but it works nicely alongside the other tools, and does edge-wrapping for a little extra flair.

offset

The offset tool will shift all the pixel data in the selection by the specified amount. Within a selection, you can use it to displace sections with a small offset, or create duplicates of other parts of the image with a large offset. Used on the entire image after utilizing the tile tool, you can also reposition your tiles.

resize

The resize tool works differently than in traditional image editors, and would really be undesirable in any other situation. In many image formats, the pixels are stored as one long stream of data, and the file header information tells your computer how wide the image should be, so it knows where to start the next row. Think of it like writing on an old typewriter, you get to the end of a line, it dings, and you start the next line. A common technique in databending is to change that width information, so the 'line breaks' are in the wrong places, and the pixels don't line up anymore. If you change the width by just 1 pixel larger or smaller, you'll see your image skew 45 degrees to the left or right. Doubling the width will create two side-by side tiles that are half as tall as the original image. Values in between can make the image unrecognizable and super glitchy looking.

rescale

The rescale tool will condense or stretch your image to fit the specified dimensions. It completely disregards the image ratio, so pull or squish images at will.

rotate

Another common tool implemented a little differently, this rotate tool will overlay a duplicate image, rotated by the specified amount, on top of the existing image. Applying it multiple times can create almost a kaleidoscope effect.

tile

The tile tool will downscale the image by the specified amount and duplicate it across the canvas, a little like "tile and zoom" effects in video editing. Setting the scale to 50%, for instance, will tile the image four times (two rows of two).

the tech

Traditionally, glitching or databending is taking a file and finding ways to corrupt it while keeping it just intact enough for the software to not give up entirely on reading it. The results can be unpredictable, and sometimes beautiful. pixlshift doesn't do that, specifically, so it's not 'glitching' in the purest sense, but in working with HTML5's canvas element and the getImageData function, I've found some interesting ways to create images visually similar to those you'd see with more conventional databending.

pixlshift was developed in Notepad2 without the use of an API. That was probably a mistake, but there you have it. I try to make sure it works nicely in the latest versions of Firefox and Chrome. It might work in Safari, Opera, or IE, who knows. ¯\_(ツ)_/¯

Most of what pixlshift does is just grabbing the canvas image data, iterating through it pixel-by-pixel in Javascript, and making different alterations. Canvas image data is particularly suited to manipulation this way, because it's retrieved as a Javascript array, in which each pixel is represented by four values, one for each channel; red, green, blue, and alpha (or opacity). Since it has to walk through the image pixel-by-pixel, the bigger your picture is, the longer it will take to apply effects. Additionally, being fully Javascript-based, all the heavy lifting is done on your computer instead of on the server, so the beefier your machine is, the bigger the pictures you'll be able to edit. I usually get the best results on images around 1024x768, but your mileage may vary.

The benefit of pixlshift over 'real' glitching is a shorter learning curve than you'd generally have with more feature-rich image editing software, and no need to wade through the tech specs of different file formats in order to glitch by hand. It's also a little more predictable, and undo/redo features make it trivial to tweak effects until they're perfect. In simpler terms, it's a toy just about anybody can drag an image into and make something glitchy-looking and cool with a few clicks.