Week 8

Plan for Week 8

Simple Image Example

To display an image, you need to load the image into a variable. Then use the image function to draw the image on the canvas.

In this example, we introduce a new function, preload, which is called before setup. It uses loadImage to convert a URL for an image into an image object that is saved in the variable img. Unlike every other function you’ve learned about so far, loadImage returns and program execution continues before loadImage finishes loading the image! This somewhat bizarre behavior allows programs to be responsive even if it takes a long time to download the image from the URL.

However, we probably do not want the program to run until the image is available. The preload function is called before setup, and P5 waits for all images to load before calling setup. That way, img.width and img.height give the size of the image. (If you did not use preload to load the image, the program would request img.width and img.height in draw before the image was even loaded, and the values would be undefined or at best wrong.)

Draw an image using the image function. With 3 parameters (image, x, y), you get a full-size image. With 5 parameters, the extra two give the width and height. The image is scaled along X and Y to fit. If you want a full size image, you can also use img.width, img.height. In this code, I scaled the width and height using the mouse coordinates. Each dimension of the image should be greater than zero! To ensure that the size does not become 0 or negative, I used the max function to return at least 1 for each mouse coordinate.

Move the mouse inside the canvas:

image

var img;

function preload() {
    img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg");
}

function setup() {
    createCanvas(400, 400);
    frameRate(10);
}

function draw() {
    background(100);
    var scaleX = max(1, mouseX) / width;
    var scaleY = max(1, mouseY) / height;
    image(img, 10, 10, img.width * scaleX, img.height * scaleY);
}

Using Images Locally

Simple Local Image File Access with Firefox

To use an image locally on your computer, you can simply put the image file in the same directory and refer to it by name. E.g. if I have the file "rbd-hats.jpg" in my sketch directory, I can write: loadImage("./rbd-hats.jpg"). (The prefix “./” means “load the file relative to the current directory or folder”.) This works on Firefox, but you cannot load images locally into Chrome!

Getting Image Files from imgur.com

If you put images on imgur.com, these images can be accessed by your p5js program, even running on Chrome. Most image-sharing sites will not work. (The restrictions on composing a web page with sources from multiple sites is related to security — there are sneaky ways for websites to inject code into your webpage and use the code to extract secrets from another website you might be logged into, but only if your Browser allows mixing of websites. imgur.com adds some extra information to images telling your browser “it’s really ok for anyone to access this image” so the browser allows Javascript to access the image.)

One advantage of imgur is that the URL will be the same when you move your project to WordPress.

Running a Local Server

You can create your very own web-server to serve your code and images. I recommend Python as the simplest, but there are several options. See this explanation.

Posting Code with Images

When you post your code on WordPress, you must name the image with a full URL:

Name the image beginning with your andrew ID (e.g. “rbd-hats.jpg”, not “hats.jpg”) because we’re all sharing the same directory in WordPress, and you do not want to confuse your images with someone else’s, especially if they have the same name.

Use Add Media to upload the image to WordPress.

In the Add Media page, select your image and click the “Insert Into Page” button. This will add some code to your blog page and you will see something that looks something like this: <img src="https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2016/10/rbd-hats.jpg" alt="rbd-hats" width="640" height="426" class="alignnone size-medium wp-image-8226" /> (You have to click on the “Text” rather than “Visual” mode — upper right in the page editor — to see this.)

After “href=”, you can find the correct URL for your image. In this example, it is “https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2016/10/rbd-hats.jpg”.

Copy this URL into your code (keep the quotes) as the argument to loadImage.

Now that you’ve got the URL, you can delete everything that Add Media inserted into your blog page (otherwise, the static image will appear in your blog page).

Post your code as usual. Note that your code will no longer run locally.

Rotating an Image

Images obey translate and rotate similar to rect and other drawing functions.

image-rotate

function preload() {
    img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg");
}

function setup() {
    createCanvas(400, 400);
    frameRate(10);
}

function draw() {
    background(100);
    var scale = max(1, mouseX) / width;
    push();
    // we will rotate about the upper left corner of the image
    // that we will place at 10,10:
    translate(10, 10);
    // use mouseY value to determine rotation angle
    rotate(radians(90 * mouseY / height));
    // since we translated by 10,10, the "origin" for the image
    // is 0, 0:
    image(img, 0, 0, img.width * scale, img.height * scale);
    pop();
}

Selecting Part of an Image

The get method can extract a pixel or a subimage from an image. Here’s an example to magnify a portion of the image depending on the location of the cursor:

image-clip

var img;

function preload() {
    img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg");
}

function setup() {
    createCanvas(400, 400);
    frameRate(10);
}

function draw() {
    background(100);
    image(img, 10, 10, img.width / 3, img.height / 3);
    var x = constrain(mouseX, 0, img.width - 1);
    var y = constrain(mouseY, 0, img.height - 1);
    // get a subrectangle from image. x and y (upper left corner)
    // should be within the image.
    var smaller = img.get(x, y, 100, 100);
    image(smaller, 10, 200, 180, 180);
}

Accessing Pixels

See this example from p5.js.

See this example from class.