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:
Getting Image Files from imgur.com
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
- 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
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:
See this example.