Images

PImage class PImage is a class for loading and displaying an image in Processing. Declare a PImage type: PImage img; Make a new instance by loading an image (in sketch’s data folder) Img = loadImage(“ImageName.jpg”); Processing accepts gif, jpg, tga, and png images. Display the image at a location image(img, 0, 0); 2

Getting Started with Images Save your program first Sketch --> Add File Or you can manually create the data folder Or you can specify the absolute path 3 PImage img; void setup() { size(320,240); img = loadImage("mysummervacation.jpg"); } void draw() { background(0); image(img,0,0); }

Getting Started with Images Be sure not to load the images in draw()! “Out of Memory” errors! Two arguments can be added to resize the image to a certain width and height. image (img, 0, 0, 320, 240); 4 PImage img; void setup() { size(320,240); img = loadImage("mysummervacation.jpg"); } void draw() { background(0); image(img,0,0); }

Your First Image Processing Filter The tint() function sets the color and transparency for displaying an image The image equivalent of shape’s fill() 5 PImage sunflower; PImage cat; void setup() { size(200,200); sunflower = loadImage("sunflower.jpg"); cat = loadImage(“cat.jpg"); } void draw() { background(cat); tint(255); // controls the brightness of the image image(sunflower,0,0); }

6 tint(100); // controls the brightness of the image image(sunflower,0,0); tint(255, 127); // The second argument controls the transparency of the image image(sunflower,0,0); tint(255, 0, 0); // controls the brightness of red, green and blue component image(sunflower,0,0); tint(255, 0, 0, 100); image(sunflower,0,0);

An Array of Images Set up an array of images, as global variable Load each image file in setup() 7 int[] numbers = new int[10]; PImage[] images = new PImage[5]; images[0] = loadImage(“cat.jpg”); images[1] = loadImage(“mouse.jpg”); images[2] = loadImage(“dog.jpg”); images[3] = loadImage(“kangaroo.jpg”); images[4] = loadImage(“porcupine.jpg”); String[] filenames = {“cat.jpg”, “mouse.jpg”, “dog.jpg”,... }; for (int i = 0; i < filenames.length; i++){ images[i] = loadImage(filenames[i]); }

An Array of Images Number the image files as “animal1.jpg”, “animal2.jpg”, “animal3.jpg”,... Display each image, in draw() 8 for (int i = 0; i < images.length; i++){ images[i] = loadImage(“animal” + i + “.jpg”); } image(images[0], 0, 0); int index = 0; draw(){ image(images[index], 0, 0); index = index + 1; }

9 int index = 0; PImage[] images = new PImage[10]; void setup() { size(200,200); frameRate(1); // Load the images into the array for (int i = 0; i < images.length; i ++ ) { images[i] = loadImage("animal" + i + ".jpg"); } void draw() { image(images[index], 0, 0); // Increse the image index by one each cycle index = index + 1; }

Can you modify the program, so that it displays a new image (randomly picked) when the mouse is clicked? 10 int index = 0; PImage[] images = new PImage[10]; void setup() { size(200,200); frameRate(1); for (int i = 0; i < images.length; i ++ ) { images[i] = loadImage("animal" + i + ".jpg"); } void draw() { image(images[index], 0, 0); index = (index + 1) % images.length; }