1,234
edits
Changes
→Lab
= Lab =
We're going to make a simple slideshow with processing.js. You can use images from anywhere you like, or if you don't have your own set you can use these:
* http://littlesvr.ca/misc/lacloche/images/01-lumsdenlake.jpg
* http://littlesvr.ca/misc/lacloche/images/02-bf-tn-portage.jpg
* http://littlesvr.ca/misc/lacloche/images/03-threenarrows-from-south.jpg
* http://littlesvr.ca/misc/lacloche/images/04-deer.jpg
* http://littlesvr.ca/misc/lacloche/images/05-treeonrock.jpg
* http://littlesvr.ca/misc/lacloche/images/06-lily.jpg
* http://littlesvr.ca/misc/lacloche/images/07-swampflowers.jpg
* http://littlesvr.ca/misc/lacloche/images/08-narrowwater.jpg
* http://littlesvr.ca/misc/lacloche/images/09-cabin.jpg
* http://littlesvr.ca/misc/lacloche/images/10-abovefog1.jpg
* http://littlesvr.ca/misc/lacloche/images/11-abovefog2.jpg
* http://littlesvr.ca/misc/lacloche/images/12-lookingsouth.jpg
* http://littlesvr.ca/misc/lacloche/images/13-lookingsouth2.jpg
* http://littlesvr.ca/misc/lacloche/images/14-lookingsouth3.jpg
* http://littlesvr.ca/misc/lacloche/images/15-littlemountainlake1.jpg
* http://littlesvr.ca/misc/lacloche/images/16-littlemountainlake2.jpg
* http://littlesvr.ca/misc/lacloche/images/17-boundaryswamp1.jpg
* http://littlesvr.ca/misc/lacloche/images/18-boundaryswamp2.jpg
* http://littlesvr.ca/misc/lacloche/images/20-south-of-silver.jpg
* http://littlesvr.ca/misc/lacloche/images/21-norwestlake.jpg
* http://littlesvr.ca/misc/lacloche/images/22-acrosslake.jpg
* http://littlesvr.ca/misc/lacloche/images/23-lastseriousclimb.jpg
Here's what you need to do (everyone):
# The images are all 300x200
# Make sure your canvas is as big as will fit in the browser page.
# Figure out how to use the '''requestImage()''' function. This will load the image asynchronously so that you can display one image while another is loading. Using my images would be good here because my server's connection is slow and it will take visible time to download the images.
# Display the images one at a time for a couple of seconds at a random position in the canvas, but make sure they are fully visible and not clipped.
# When switching the images first fade out the old one (same way as I did in the lecture).
Degree students (optional for diploma students):
# Display the filename (not the entire URL) of the image floating over it, you may need a rect behind the text (but in front of the image) to make sure the text is readable.
== Submit ==
Submit your html file and the pde file (if your code is in a separate file) to Moodle (Lab 8).