Satromizer Online is able to accept many types of extensions and plugins. However, because of the Same Origin policy in Javascript, these plugins must be hosted by Satromizer.com. Submit your best code snippets today, to see them running in the most powerful glitch software suite in the world.

Filters

SOL supports image filters, which can be applied to an image directly, or layered on top of a project in a nondestructive layer. In either case, the core code is very simple. SOL passes your function raw RGB image data, along with its width and height, and you pass back a canvas element with the same dimensions which contains the new image.

With the canvas element, you can do many types of procedural drawing, or you can filter pixel values directly. Here is an example filter which takes a color input and converts it to grayscale:

var grayscaleFilter = function(sourceImageData, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var newContext = canvas.getContext("2d");

    var dstImageData = newContext.getImageData(0, 0, width, height);

    for (var y = 0; y < dstImageData.height; ++y) {
        var index = (dstImageData.width * 4) * y;
        for (var x = 0; x < dstImageData.width; ++x) {
            var luma = parseInt((sourceImageData.data[index] * 0.2126) +                (sourceImageData.data[index + 1] * 0.7152) + (sourceImageData.data[index + 2] * 0.0722));
            dstImageData.data[index]    = luma;
            dstImageData.data[index+1]  = luma;
            dstImageData.data[index+2]  = luma;
            dstImageData.data[index+3]  = 255;
            index += 4;
        }
    }
    newContext.putImageData(dstImageData, 0, 0);
    return canvas;
}

Brushes

It's also possible to create a brush which can alter either the image or its underlying data. Brushes use a few simple primitive data types:

var Brush = new function() {
    this.brushCanvas = null;
    this.width = 64.0; /* Size of brushCanvas in pixels */
    this.size = 1.0; /* brush pixel size = (brush.size * brush.width) */
    this.softness = 1.0; /* 1.0 is soft, 0.0 is hard */
    this.opacity = 1.0;
};

var Color = new function() {
    // Maximum: 1.0;
    this.red = 0.0;
    this.green = 0.0;
    this.blue = 0.0;
};

var Location = new function() {
    // Location is normalized; 1.0 == image width, 1.0 == image height.
    this.x = 0.0; 
    this.y = 0.0;
};

Your brush function is passed the current image canvas, the raw image data, the UTI of the image data, a Brush object, a Color object and a Location object. A simple RGB brush would look like this:

var myBrush = function(canvas, data, dataUTI, brush, color, location) {
    canvas.getContext('2d').drawImage(brush.brushCanvas, \ 
        (location.x * canvas.width) - (brush.width / 2.0), \
        (location.y * canvas.height) - (brush.height / 2.0));
};

Custom File Types / Glitch Modes

SOL allows the user to manipulate the underlying data representation of an image. Modes such as JPEG and PNG are built in, but SOL also supports arbitrary filetypes. By implementing a new file type, you will enable native glitching in that format, as well as import and export functionality.

var customDataFromImage = function(anImage) {
    // Here you need to receive a Javascript Image object,
    // and return a Base64 encoded version of it. The file
    // format can be anything, as long as you end up with
    // Base64 data.
    var base64 = null;
    return base64;
};

var imageFromCustomData = function(base64Data) {
    // Here you need to convert the base64 data (a String)
    // into a Javascript Image object, probably by
    // decoding the image data to a raw image buffer, then
    // using a canvas context's putImageData method,
    // before finally retrieving an image from the canvas.
    var anImage = new Image();
    return anImage;
};