Tripod tutorial

Walkthrough

Topics covered in this walkthrough

Loading an image

Tripod comes built-in with a bunch of images you can use - check out their names in the sidebar. To create an image, enter this code in the editing window and hit Run.

var image = new TImage("elephant");

Besides "elephant", other images are available from the sidebar.

Getting image info

You can access basic information about the image with image methods. log lets you show numbers, words, or a mix of those on the screen.

Run this code to see image information in action.

Width (number of columns)

var image = new TImage("elephant");
var width = image.getWidth();
log(width);

Height (number of rows)

var image = new TImage("elephant");
var height = image.getHeight();
log(height);

Size (width × height)

var image = new TImage("elephant");
var size = image.getSize();
log(size);

Iterating over pixels

With Tripod, you can get a list of every pixel in the image and run some code on it. The basic syntax for this is:

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    // Run your code here
}

Getting pixel info

Each pixel you get out of an image - a TPixel - has many useful pieces of information you can access. Try these code chunks:

Color values

The main information about each pixel is its color values - red, green, blue, and alpha (opacity).

Here's a code snippet for printing the red value of a pixel. You can also try:

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    var pixel = pixels[i];
    var red = pixel.getRed();
    log(red);
}

Getting all color values at once

You can get all four color values of a pixel with pixel.getRGBA(). This yields an array where the first element is red, the second is green, the third is blue, and the fourth is alpha.

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    var pixel = pixels[i];
    var rgba = pixel.getRGBA();
    log(rgba);

    var red = rgba[0];
    var green = rgba[1];
    var blue = rgba[2];
    var alpha = rgba[3];
}

Editing pixels

The real fun of Tripod comes from editing the pixels in an image - this lets you change how the image looks!

Editing individual colors

The code for this is very similar to getting info from a pixel, except you use set instead of get and pass an argument to the set function. For instance, pixel.setRed(255) vs. pixel.getRed().

Like the get functions, you can use these functions to change color values:

The variables in parentheses (arguments) are numbers that you use to tell Tripod what to make the color value. pixel.setRed(255) makes the image's red value as high as possible; pixel.setRed(0) makes it as low as possible.

Note: make sure you write image.refresh() once you're done editing an image! This lets Tripod know to redraw the image on the screen.

Here's some code to make the entire image red:

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    var pixel = pixels[i];
    pixel.setRed(255);
    pixel.setGreen(0);
    pixel.setBlue(0);
    pixel.setAlpha(255);
}

image.refresh();

Editing all colors at once

Like when you used pixel.getRGBA() to get all the color values at once, you can use pixel.setRGBA(red, green, blue, alpha) to set all the color values at once.

pixel.setRGBA(red, green, blue, alpha) needs four arguments. Or, you can omit the alpha and Tripod will make the pixel fully opaque for you.

Here's how you can set a pixel to a certain color:

Here's a simpler way to write the previous example (turning the whole image red) using pixel.setRGBA(red, green, blue, alpha):

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    var pixel = pixels[i];
    pixel.setRGBA(255, 0, 0, 255);
}

image.refresh();

Alpha (transparency)

Red, green, and blue are pretty straightforward, but alpha (transparency) is more complicated.

To make a pixel fully opaque, use pixel.setAlpha(255).

To make a pixel fully transparent, use pixel.setAlpha(0).

Image transformations

The most powerful part of Tripod is image editing like you would do with Instagram - adjusting brightness and contrast, applying filters, etc. To do this, you need to combine all the skills you've learned so far.

Adjusting each pixel

A basic filter like brightness will increase change each pixel the same way. For this, loop over each pixel and use get and set functions.

Here's an example of how to increase brightness by increasing the red, green, and blue values of each pixel:

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    var pixel = pixels[i];
    var red = pixel.getRed() * 1.5;
    var green = pixel.getGreen() * 1.5;
    var blue = pixel.getBlue() * 1.5;   
    pixel.setRed(red);
    pixel.setGreen(green);
    pixel.setBlue(blue);
}

image.refresh();

Good practices with set

Remember that each color value must be between 0 and 255, inclusive. When you apply filters like you did above, you might move the pixel's color values outside this range. To keep the colors in this range, use these functions:

So, say you've used a filter to change a pixel's red value and stored it in a variable red. Before you store red in the pixel's red value, use Math.min(a, b) and Math.max(a, b) to keep the value of red between 0 and 255.

Here's a better version of the above example with brightness:

var image = new TImage("elephant");
var pixels = image.getAllPixels();
for (var i = 0; i < pixels.length; i++)
{
    var pixel = pixels[i];
    var red = pixel.getRed() * 1.5;
    var green = pixel.getGreen() * 1.5;
    var blue = pixel.getBlue() * 1.5;
    pixel.setRed(Math.min(red, 255));
    pixel.setGreen(Math.min(green, 255));
    pixel.setBlue(Math.min(blue, 255));
}

image.refresh();

Since we're increasing the color values, we need to stop the color value from going over 255. We're not decreasing the color value so we don't have to worry about the color value going under 0.