October 19


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, imgimage give the size of the image. The image is scaled along X and Y to fit. If you want a full size image, use img.width, img.height. In this code, I scaled the width and height using the mouse coordinates. There appears to be a bug in this version of P5.js: 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 over the canvas.


Using Images Locally

Simple Local Image File Access with Firefox

To use an image locally on your computer, you might be able to simply put the image file in the same directory and refer to it by name. This works with Firefox, but unfortunately not with Chrome. E.g. if I have the file “rbd-hats.jpg” in my sketch directory, I can write: loadImage("rbd-hats.jpg").

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.

Annoyingly, if I put an image in the same directory as index.html, I can say loadImage("rbd-test1.jpg") when using Firefox, but in Chrome, I have to say loadImage("./rbd-test1.jpg"). The “./” prefix to the image file says “look in the current path.”

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 that looks something like this: <a href=”http://cmuems.com/2015c/wp-content/uploads/2015/10/rbd-hats.jpg”><img src=”http://cmuems.com/2015c/wp-content/uploads/2015/10/rbd-hats-640×426.jpg” alt=”rbd-hats” width=”640″ height=”426″ class=”alignnone size-medium wp-image-8226″ /></a> (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 “http://cmuems.com/2015c/wp-content/uploads/2015/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.


    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:


    Accessing Pixels

    See this example.