Tutorial 13: Working with Images

Images in Processing.js

Images are handled in Processing and Processing.js through the PImage class. In Processing.js, we have to include a special comment at the beginning of the sketch code to instruct the browser to load the image from a given URL. The Processing.js directive looks like this:

    /* @pjs preload="/path/to/image.jpg"; */

    Once we've instructed the browser to load an image for us, we can load that image into our sketch using the loadImage() function:

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img;
    // Image must be preloaded by the browser
    img = loadImage("/uploads/1/kitty.jpg");
    image(img, 0, 0);

    The image() function draws the image to the display window. If we provide only the x and y parameters it will draw the image at it's natural size, as shown in the sketch above. If we provide the x, y, width and height parameters it will draw the image at the size specified:

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img;
    // Image must be preloaded by the browser
    img = loadImage("/uploads/1/kitty.jpg");
    image(img, 50, 50, 100, 100);

    Practice uploading an image to your Peep account and displaying it using the technique above.

    To upload an image, go to your profile page and click on uploads. Select the file that you want to upload using the "Choose file..." button and then click "Upload". A link to the uploaded image file will be listed to the left, the name may have been changed, click on the link to see the uploaded image file and copy the URL in the address bar of your browser.

    You only need to copy the part of the URL after http://www.peepproject.com but you need to include the first / character after the address if you do, i.e., it should look something like: /uploads/XX/image.jpg, where XX is a number.

    Extend your sketch to load and draw two different images.

    Tinting Images

    Images can be recoloured by Processing using the tint() function. All images drawn after calling tint() will be tinted by the colour specified in the parameters. This has no permanent effect on the images. Running the noTint() function disables the coloration for all images drawn after it is run.

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img = loadImage("/uploads/1/kitty.jpg");
    tint(0, 153, 204);  // Tint blue
    image(img, 0, 0);
    noTint();  // Disable tint
    image(img, 100, 0);

    The easiest way to think about tint is to understand that that the colour that you specify is what any white in the original image will be mapped to and all other colours will be mapped similarly. Consequently, if we specify a greyscale value it will transform white to grey and all of the other colours in the image will become darker as a consequence:

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img = loadImage("/uploads/1/kitty.jpg");
    tint(102);  // Tint gray (darkens the image)
    image(img, 0, 0);
    noTint();  // Disable tint
    image(img, 100, 0);

    Similarly, if we specify red, i.e., tint(255, 0, 0), as the colour that we want white to be mapped to, this will remove all but the red component of all of the other colours in the image:

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img = loadImage("/uploads/1/kitty.jpg");
    tint(255, 0, 0);  // Tint red (selects only the red channel)
    image(img, 0, 0);
    noTint();  // Disable tint
    image(img, 100, 0);

    Create a sketch that loads a single image and draws it three times with different tints, e.g., to show the red, green and blue components of the image separately.

    RGB Channels

    HSB Tints

    Like fill() and stroke() the parameters for tint() are based in the current colour space determined by colorMode(), for example, using the HSB colour space tints can be specified in terms of hue.

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(320, 200);
    PImage img = loadImage("/uploads/1/kitty.jpg");
    colorMode(HSB, 360, 100, 100);
    for (int i = 0; i <= 120; i += 30) {
      tint(i, 100, 100);
      image(img, i, 0);
    }

    Create a sketch that loads and draws four different images, each with a different tint based on the HSB colour space.

    Transparent Tints

    The opacity of an image can also be changed using tint(). To make an image transparent without changing its colour, set the tint to white with an alpha value.

    • Show Sketch
    /* @pjs preload="/uploads/1/kitty.jpg"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img = loadImage("/uploads/1/kitty.jpg");
    background(255);
    tint(255, 51);
    // Draw the image 4 times
    for (int i = 0; i < 4; i++) {
      image(img, i*width/4, 0);
    }

    Load and draw a single image multiple times with a trasparent tint. Try using the drawing transformation functions to create a complex pattern.

    Rotated Kitty

    Images with Transparency

    GIF & PNG images keep their transparency when displayed in Processing. GIF images have only 1-bit transparency. PNG format supports 8-bit transparency, which makes the transition to any background colour smoother.

    • Show Sketch
    /* @pjs preload="/uploads/1/earthfromspace2.png"; */
    /** @peep sketchcode */
    size(200, 200);
    PImage img = loadImage("/uploads/1/earthfromspace2.png");
    background(0);
    image(img, 0, 25);
    image(img, 50, 25);

    Load a GIF or PNG image with transparency and create a collage by layering the image multiple times.

    Comments

    Nobody has said anything yet.