Tutorials / Processing Tutorials / Images

# Images

tutorial processing image

Now you know how to use objects and create your own classes. You know how to create an instance of a class, store it in a variable, and then call functions belonging to that instance.

For example, you’ve seen the predefined `PVector` class:

``````PVector circle = new PVector(100, 100);
circle.add(25, 50); // circle is now 125, 150
ellipse(circle.x, circle.y, 25, 25);
``````

Processing offers several other predefined classes. One of them is the `PImage` class, which lets you load, display, and manipulate image files.

Before you can use an image file in your code, you have to add it to your sketch. From your Processing editor, go to `Sketch > Add File`, and then choose the image file you want to add. That will copy the file into your sketch’s `data` directory (which you can view by going to `Sketch > Show Sketch Folder`).

You can also drag the file onto the Processing editor, and it’ll do the same thing.

After you’ve added an image file to your sketch, you can call the `loadImage()` function to create an instance of the `PImage` class.

For example, if you have an image file named `stanley.jpg`, you can create an instance of `PImage` like this:

``````PImage stanleyImage = loadImage("stanley.jpg");
``````

You can also reference an image on the internet using its URL:

``````PImage stanleyImage = loadImage("https://happycoding.io/images/stanley-1.jpg");
``````

# Drawing Images

Now that you have an instance of `PImage` stored in a variable, you can display it by calling the `image()` function.

The `image()` function takes three parameters: an instance of `PImage` and `x` and `y` coordinates that tell Processing where to draw the image.

``````PImage img;

void setup() {
size(300, 300);
}

void draw() {
image(img, 0, 0);
}
`````` Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The `image()` function is just like the other drawing functions you’ve already seen, like the `rect()` and `ellipse()` functions. Try experimenting with different x and y parameters!

``````PImage img;

void setup() {
size(300, 300);
}

void draw() {
image(img, mouseX, mouseY);
}

``````
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen. Note that these sketches declare the `img` variable at the top of the sketch, then initialize it inside the `setup()` function, and then display it in the `draw()` function. You should follow this pattern with your images as well. If you load your image in the `draw()` function, you’d be reading the same file 60 times every second, which could slow your program down or even cause it to crash.

Remember: declare your images at the top of the sketch, load them in `setup()`, and display them in `draw()`.

# Resizing Images

The `PImage` class contains several useful functions that let you manipulate images. For example, the `resize()` function resizes an image. Here’s an example that resizes the image whenever the user clicks the mouse:

``````PImage img;

void setup() {
size(300, 300);
}

void mousePressed() {
img.resize(mouseX, mouseY);
}

void draw() {
image(img, 0, 0);
}
`````` This is useful if you’re loading a large image and want to display it smaller.

Note that this only changes the size of the instance, not the file itself.

# The color Type

The next few sections use a type you might not have seen before: the `color` type!

The `color` type is similar to other types like `float` and `int`, but `color` represents an R, G, B color. You can create a `color` using the `color()` function. Then when you have a `color` value, you can pass it into any function that also takes R, G, B arguments.

``````size(300, 300);

color magenta = color(255, 0, 255);
background(magenta);

color cyan = color(0, 255, 255);
fill(cyan);
rect(100, 100, 100, 100);
`````` To convert from a `color` to individual R, G, and B, values, you can use the `red()`, `green()`, and `blue()` functions which take a `color` argument and return the corresponding R, G, or B value.

I personally avoid the `color` type because I prefer working with separate R, G, and B values. But the next few functions only work with the `color` type!

# Getting Pixels

After you load an image, you can get the color of an individual pixel by calling the `get()` function.

Here’s an example:

``````PImage img;

void setup() {
size(300, 300);
}

void draw() {
image(img, 0, 0);

// Get the color at the mouse position
color c = img.get(mouseX, mouseY);

// Change the fill to that color
fill(c);

// Draw a rectangle with that color
rect(mouseX, mouseY, 50, 50);
}

`````` This program uses the `get()` function to get the color of the pixel that’s under the cursor’s position, then displays a box showing that color. Think of it like a magnifying glass that shows you the pixel under the mouse.

# Setting Pixels

Just like you can get the color of a specific pixel using the `get()` function, you can also set the color of a specific pixel using the `set()` function. Here’s an example that turns a random pixel black every frame:

``````PImage img;

void setup() {
size(300, 300);
}

void draw() {

// Get a random position in the image
int x = int(random(img.width));
int y = int(random(img.height));

// Set that pixel to black
color black = color(0);
img.set(x, y, black);

image(img, 0, 0);
}
`````` # Manipulating Images

You can create effects like image filters by looping over the pixels in the image, calling the `get()` function to get the color of each pixel, doing some logic with that color, and then calling the `set()` function to change the color of each pixel.

Here’s an example that inverses the color of the image:

``````PImage img;

void setup() {
size(300, 300);

// Loop over every pixel in the image
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
color in = img.get(x, y);

// Inverse the color
color out = color(255-red(in), 255-green(in), 255-blue(in));

// Set the pixel's color
img.set(x, y, out);
}
}
}

void draw() {
image(img, 0, 0);
}
`````` This code might seem complicated, but try to read through it one line at a time.

This line loops over every row in the image:

``````for(int y = 0; y < img.height; y++) {
``````

For each row, this line loops over each column in that row:

``````for(int x = 0; x < img.width; x++) {
``````

Given a row and a column (in other words, a `y` and an `x`), this line gets the color of that pixel:

``````color in = img.get(x, y);
``````

Now that you have the pixel’s color, you can inverse that color by subtracting the R, G, and B components from 255:

``````color out = color(255-red(in), 255-green(in), 255-blue(in));
``````

If this part is confusing, try writing down some example colors and doing this math to see how it creates the inverse!

Finally, this line sets the color of the pixel to the newly calculated color:

``````img.set(x, y, out);
``````

Try modifying the logic to swap the blue and green of each pixel, or to divide the red by two, or to rearrange the pixels. # Other Image Functions

The `PImage` class contains several other useful functions. Check out the reference for more info about them. Don’t be afraid to experiment!

# Homework

• Take a colored image and display it as black and white.
• Take a black and white image and display it in color. Don’t worry too much about getting the colors correct!
• Show a character that walks around when you press the arrow keys. Use different images for the different poses.
• Take an image and apply a custom filter to it.
• Resize an image to display in the `width` and `height` of the window while maintaining its aspect ratio. Tall image should show a border on the left and right. Wide images should show a border on the top and bottom.
{"ft_lang_label":"__label__en","ft_lang_prob":0.7691435,"math_prob":0.9307308,"size":8093,"snap":"2022-27-2022-33","text_gpt3_token_len":2047,"char_repetition_ratio":0.14303374,"word_repetition_ratio":0.10274964,"special_character_ratio":0.26689732,"punctuation_ratio":0.15786386,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.95260364,"pos_list":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18],"im_url_duplicate_count":[null,4,null,4,null,4,null,4,null,4,null,4,null,4,null,4,null,4,null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2022-07-03T04:51:55Z\",\"WARC-Record-ID\":\"<urn:uuid:e216ab38-0f83-4df9-99ab-e46498352b28>\",\"Content-Length\":\"94389\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:eb0726ec-0527-43ac-8bb7-75938150ae24>\",\"WARC-Concurrent-To\":\"<urn:uuid:8cdaf2b0-d3e3-4fbf-9118-d084b03dfff9>\",\"WARC-IP-Address\":\"185.199.109.153\",\"WARC-Target-URI\":\"https://happycoding.io/tutorials/processing/images\",\"WARC-Payload-Digest\":\"sha1:TTTRDAOSQVKQJYKZNXUKNGXTLS33CAZ3\",\"WARC-Block-Digest\":\"sha1:G7GARVUM3KSVOSIKNR2QH5ZJDWK2WPTU\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2022/CC-MAIN-2022-27/CC-MAIN-2022-27_segments_1656104215790.65_warc_CC-MAIN-20220703043548-20220703073548-00037.warc.gz\"}"}