BTC640/ProcessingTextImages

From CDOT Wiki
Revision as of 08:14, 27 March 2012 by Andrew (talk | contribs) (→‎Lab)
Jump to: navigation, search

Lecture

This week we'll be looking at how to work with text and images with processing.js.

Text

Support for text in processing.js is pretty flaky, and the best you can rely on is that you can set the size of the font. Probably support for other fonts will be improved in future releases.

None of the HTML tags you're used to, nor CSS will work in processing.js. All the text is displayed literally - including anyting that looks like an HTML tag.

The documentation for text API functions is not as good as for other functions in processing.js but it's good enough and there are examples that you can relatively easily figure out how to use it.

Images

You should preload images before the sketch starts animating so that there wouldn't be a huge delay in the middle of an animation while an image is being downloaded from the server (remember that processing.js code is client side code). The syntax for this is similar to Java annotations, and looks like this:

/* @pjs preload="myimage.png"; */

You should put that in front of your setup. Processing.js is very picky about the syntax of this statement, including spaces and the types of comments, so just copy-paste the above (or from a reference page).

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:

Here's what you need to do (everyone):

  1. The images are all 300x200
  2. Make sure your canvas is as big as will fit in the browser page.
  3. 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.
  4. 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.
  5. When switching the images first fade out the old one (same way as I did in the lecture).

Degree students (optional for diploma students):

  1. 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).

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=BTC640/ProcessingTextImages&oldid=83648"