CS 101 Media (Images, Video, etc) Lecture 20

Transcription

1 CS 101 Media (Images, Video, etc) Lecture 20 1

2 Images Though we ve displayed many shapes and colors to the screen, we have yet to display an actual image! Processing has a special type called PImage, for storing image files in the computer s memory Additional functions loadimage and image for loading and displaying 2

3 Images First step: create a PImage variable PImage img; 3

4 Images First step: create a PImage variable Next, load the image from the file into the computer memory that your program is using PImage img; void setup() { img = loadimage("something.jpg"); 4

5 Images First step: create a PImage variable Next, load the image from the file into the computer memory that your program is using We put this in setup PImage img; void setup() { img = loadimage("something.jpg"); 5

6 Images First step: create a PImage variable Next, load the image from the file into the computer memory that your program is using We put this in setup Then, display it! PImage img; void setup() { img = loadimage("something.jpg"); void draw() { image(img, 0, 0, width, height); 6

7 Images First step: create a PImage variable Next, load the image from the file into the computer memory that your program is using We put this in setup Then, display it! Make sure something.jpg is in same directory as the code file PImage img; void setup() { img = loadimage("something.jpg"); void draw() { image(img, 0, 0, width, height); 7

8 Images loadimage() Takes one argument, the name of the file to load Must use an = to tell it which variable to save the loaded image to image() Takes five arguments: A PImage variable, x- and y-coordinates, width, and height (just like rect) Can use any numeric values for these four, just like with shapes! 8

9 What will it do? ICA PImage img; something.jpg is: void setup() { size(560, 300); img = loadimage("something.jpg"); int k = 0; void draw() { for (int i = 10; i < 550; i+= 110) { image(img, i, k, 100, 100); k += 2; 9

10 What will it do? ICA 10

11 Create a sketch that does this: ICA 11

12 Create a sketch that does this: ICA 12

13 Image formats Processing can display multiple types of formats jpg, png, and others Some image formats support transparent pixels (see-through) and some do not Can use images with some parts transparent so that the image doesn t always just look boxy 13

14 Image formats Processing can display multiple types of formats jpg, png, and others Some image formats support transparent pixels (see-through) and some do not Can use images with some parts transparent so that the image doesn t always just look boxy 14

15 Using png images ICA Go to the lectures page Download the solution for section_10_2 Open up section_10_2 Modify the drawtree function to draw a PNG tree image 15

16 Images The PImage variable type is a kind of Object Also, String We are not going to learn much about Objects in this class - save that for 110! 16

17 Images The PImage variable type is a kind of Object Also, String We are not going to learn much about Objects in this class - save that for 110! Let s revisit the section 10: Use actual images of a tree, bush, and bird 17

18 Video In processing, we can also display video feeds For example, webcam! In order to do so, we need to import a library of code A library of code is a set of code that contains additional code, often specifying additional functions and types that can be used in your program 18

19 Importing libraries All of the features we ve been using so far are built-in to Processing There are some features that are add-ons Need to be downloaded and then imported into the program to use 19

20 Importing libraries All of the features we ve been using so far are built-in to Processing There are some features that are add-ons Need to be downloaded and then imported into the program to use 20

21 Importing libraries Each library has a particular name The video library is named processing.video To import in our program put the following at the top: import processing.video.*; 21

22 The Capture type The processing video libraries has the custom type Capture Capture is use to store a connection to a feed that can repeatedly capture images, as the name suggests This is typically a video feed (webcam, external cam, security cam, etc) Once we connect to the webcam, can repeatedly request the current video frame, and display it! 22

23 Video Capture First step: create a Capture variable Capture cam; 23

24 Video Capture First step: create a Capture variable Then, initialize the camera by getting a connection to the webcam Capture cam; void setup() { size(640, 480); framerate(24); cam = getwebcamifavailable(); 24

25 Video Capture First step: create a Capture variable Then, initialize the camera by getting a connection to the webcam Draw will repeat at 24fps If the next video frame is available, read it and then display it with the image() function! Capture cam; void setup() { size(640, 480); framerate(24); cam = getwebcamifavailable(); void draw() { if (cam.available()) { cam.read(); image(cam, 0, 0, width, height); 25

26 Video Capture First step: create a Capture variable Then, initialize the camera by getting a connection to the webcam Draw will repeat at 24fps If the next video frame is available, read it and then display it with the image() function! What is this getwebcamifavailable() function? Capture cam; void setup() { size(640, 480); framerate(24); cam = getwebcamifavailable(); void draw() { if (cam.available()) { cam.read(); image(cam, 0, 0, width, height); 26

27 /** * If a camera is available, will return the related Capture object. * If not, this function will exit the program. */ Capture getwebcamifavailable() { Capture cam = null; String[] cameras = Capture.list(); if (cameras.length == 0) { println("there are no cameras available for capture."); exit(); else { println("available cameras:"); for (int i = 0; i < cameras.length; i++) { println(cameras[i]); // The camera can be initialized directly using an // element from the array returned by list(): cam = new Capture(this, cameras[0]); cam.start(); return cam; 27

28 /** * If a camera is available, will return the related Capture object. * If not, this function will exit the program. */ Capture getwebcamifavailable() { Capture cam = null; String[] cameras = Capture.list(); if (cameras.length == 0) { println("there are no cameras available for capture."); exit(); else { println("available cameras:"); for (int i = 0; i < cameras.length; i++) { println(cameras[i]); // The camera can be initialized directly using an // element from the array returned by list(): cam = new Capture(this, cameras[0]); cam.start(); return cam; Don t worry about memorizing this function! It s provided, because it uses features we have not discussed. 28

29 Video Capture Programs

30 Materials Required Materials GSWP Chapter 7 30

31 Using png images ICA Go to the page for section 10 Download the solutions Open up section_10_6 Modify the the tree, bush, and bird drawing functions to all use PNGs instead of shapes 31