BTC640/ProcessingTextImages

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