p5 Reference: preload()
p5 Reference: loadImage()
p5 Reference: image()
p5 Reference: tint()
p5 Examples: Pointilism
p5 Examples: Transparency
Syntax:
var img, preload(), loadImage(), image()
tint(), noTint()
image(name, x, y)
image(name, x, y, width, height)
We can use this syntax to scale (resize) the image according to absolute pixel values.
Called directly before setup(), the preload() function is used to handle asynchronous loading of external files. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls should be inside preload (loadImage, loadJSON, loadFont, loadStrings, etc).
We typically will make a new folder inside your project directory called "assets". That just a standard; really we can tell p5 to find our images anywhere, locally or externally.
The image() function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.
We can also scale the image according to its original size:
The tint() function allows us to color the image. Similar to fill() or stroke(), we just call the tint() function once before the image() function. The styling applies to all subsequent image() calls.
We can use for() loops to automate the placement of images on our canvas:
Complete the following code and submit it as Exercise 3.0: Screen Saver