IMAGE & TEXT. Workshop 5

Transcription

1 IMAGE & TEXT Workshop 5

2 RESOURCE Image (.png,.jpg,.svg, etc.) Font (.ttf,.otf, etc.) Audio (.mp3,.wav,.aiff, etc.) Video (.mov,.avi, etc.) Data (.js,.json,.xml, etc.) Why is loading an image, different than, say drawing a rectangle on screen?

3 var img; function preload() { img = loadimage("1.jpg"); function setup() { createcanvas(300, 300); LOADING IMAGE Declare a variable named img Load an image file, named 1.jpg, to main memory Enclose image file with double quotes Refer the image to the img variable function draw() { background(225); image(img, image(img, 50, 50, 80); 80); Display the image at canvas location (50, 80) (50,80)

4 var img; function preload() { img = loadimage("1.jpg"); function setup() { createcanvas(300, 300); function draw() { background(225); image(img, 50, 80); LOADING IMAGE preload() is a function to load resources guaranteed to finish before setup() starts var img = loadimage(imagepath); - Input: specify the path to the image file (50,80) - Output: an image object

5 RETURN var img = loadimage(imagepath); We load the image file, then store it, as a variable, to use in our program later.

6 var img; function preload() { img = loadimage("1.jpg"); function setup() { createcanvas(300, 300); function draw() { background(225); image(img, Image(img, 50, 50, 80); 80); DISPLAYING IMAGE image(img, x, y, [width, height]); - draw a image on the canvas - img is what was returned by loadimage() - x, y are the position and are optional (for scaling) (50,80)

7 MORE ABOUT IMAGES function draw() { background(225); imagemode(center); image(img, width/2, height/2, 100, 100); text("image size: " + img.width + "x" + img.height, 10, height-10); imagemode(center); - interprets the second and third parameters of image() as the image's center point image(img, x, y,, ); - the fourth and fifth parameters of image() are the size that you want to scale for display img.width, img.height -.width and.height tells the size of the image object. It is equal to the image size as stored in image file. (not the displayed size that might have been scaled) * Learn more commands for mode setting, e.g. ellipsemode, rectmode [

8 DISPLAYING IN DIFFERENT SIZES function draw() { background(225); imagemode(center); image(img, width/2, height/2, framecount%width, framecount%height); What will be the result?

9 APPLYING FILTER TO CANVAS

10 var img1, img2, img3, img4; function preload() { img1 = loadimage("1.jpg"); img2 = loadimage("1.jpg"); img3 = loadimage("1.jpg"); img4 = loadimage("1.jpg"); function setup() { createcanvas(300, 1300); background(225); function draw() { image(img1,50,50); image(img2,50,250); img2.filter(gray); image(img3,50,450); img3.filter(threshold); image(img4,50,650); img4.filter(blur,5); APPLYING FILTER TO IMAGE OBJECTS Other than applying filter to the Canvas, we can apply filters to individual images. Given img1, img2, etc., Write img1.filter(gray); Write img2.filter(threshold); Write img3.filter(blur, 5); BLUR Executes a blurring effect with the blurring level that specifies the extent of the blurring.

11 Job 1: Display nine images Job 2: Use loop to repeatedly display one image EXERCISE Job 3: Use loop and modulus to repeatedly display three images

12 EXERCISE Job 4: Use two loops and modulo to display the pattern

13 EXERCISE Job 5: Display two images on canvas. When the mouse moves over an image: (1) apply blurring effect to other image, (2) restore the focused image by loading the image file again.

14 var font1, font2; var font1, font2; function preload() { font1 = loadfont("greatvibes-regular.otf"); font2 = loadfont("pacifico.ttf"); font2 = loadifont( Pacifico.ttf ); function setup() { createcanvas(250, 150); background(225); textsize(40); LOADING FONT Declare variables Load a font to main memory Display text with the specify font textfont(font1); text("hello", width / 2, 50); textfont(font2); text("hello", width / 2, 100); Popular fonts here:

15 CAUTION Display the image and apply filter Set the font and display text

16 var font1, font2; function preload() { font1 = loadfont("greatvibes-regular.otf"); font2 = loadfont("pacifico.ttf"); font2 = loadifont( Pacifico.ttf ); function setup() { createcanvas(250, 150); background(225); textsize(40); LOADING FONT var myfont = loadfont([fontfile]); - loads the font - [fontfile] is the path to the font file - returns a font object textfont(font1); text("hello", width / 2, 50); textfont(font2); text("hello", width / 2, 100);

17 var font1, font2; function preload() { font1 = loadfont("greatvibes-regular.otf"); font2 = loadfont("pacifico.ttf"); function setup() { createcanvas(250, 150); background(225); textsize(40); textfont(font1); textfont(font1); text( hello, text("hello", 20, width 60); / 2, 50); LOADING FONT textfont(font, fontsize); Set the font (and, optionally, the font size) text(str, x, y); - draw text onto the canvas - str is the text to draw - x and y are the position textfont(font2); text("hello", width / 2, 100);

18 MORE COMMANDS textsize(size); - set the font size textalign(alignmode); - alignmode -> LEFT, RIGHT, or CENTER text(str, x, y, [width, height]); - optionally, and specify the bounding box Hint for coloring: Use fill(); to choose writing color. Call nostroke(); to make text clear and sharp (avoid extra outline for the text). Job 6: Try the commands listed above. In the workshop handout, complete the blanks in the sample programs.

19 var inputbox; var font; function preload() { font = loadfont("pacifico.ttf"); READING USER TEXT INPUT function setup() { createcanvas(250,200); framerate(2); inputbox = createinput(); inputbox.position(40, 60); inputbox = createinput(); inputbox.position(40,60); function draw() { background(200); textfont(font, 20); //set text size here text("input a magic number: ", 40, 40); textsize(15); //change text size if (inputbox.value() == "") { text("no number is input", 40,110); else { if (inputbox.value() == "") { text(inputbox.value(), 60, 150); text(inputbox.value(), 30, 110); Declare variable Create an input box and place it at position (40, 60) Obtain the value that the user input in the box In addition, we need to add the p5.dom.js library in order to use the html textbox element: <script src="

20 EXERCISE Job 7: Type in a magic number and show a lucky number and the corresponding digit image! Lucky image number = (magic number) % 9 + 1

21 Assignment of this lesson: This time please finish 2 out of the 3 questions and submit them in a zip on Canvas. The zip should contain html files and image files for the questions. Due: Before the start of your next lesson. Assignment Question 1 (2.5 marks out of 5 marks) Fly an image from the 4 corners to the center of the canvas, in decreasing size, as shown in the animation. Note: Apply the lerp and dist commands that you learnt in last week. Details: Set the initial position of the image to (0,0). Use the lerp command to update the location of the image so that it moves towards the center of the canvas. While it moves, its size should be reduced according to its distance to the center. When the location is close to the center, reset the location to the top-right of the canvas and move to the center again. Also reset the size of the displayed image. Then repeat to fly from bottom-right, and bottom-left, and then back to top-left again and so on. Animation:

22 Assignment of this lesson: This time please finish 2 out of the 3 questions and submit them in a zip on Canvas. The zip should contain html files and image files for the questions. Due: Before the start of your next lesson. Assignment Question 2 (2.5 marks out of 5 marks) Display 3 images (1.jpg, 2.jpg, 3.jpg) one by one with blurring effect as shown in the animation. Details: Use only one variable for the image object: Load 1.jpg at the beginning (img = loadimage( 1.jpg ); ). You will change it to other image files during animation. Show the image as small tiles in the background, and show it in its full size in the middle. BLUR the image object: img.filter(blur, 2). This will affect the middle one as well as all small checkers. Load another image after every 50 frames: e.g. img = loadimage( 2.jpg ); Note about preloading images: If we need more resources (more and bigger images) in our animation, we should first load the required objects in preload() to improve efficiency. So that during animation no loading is needed. However, since this question does not involve heavy resource loading, it is Okay to do it during animation when needed. Animation:

23 Assignment of this lesson: This time please finish 2 out of the 3 questions and submit them in a zip on Canvas. The zip should contain html files and image files for the questions. Due: Before the start of your next lesson. Assignment Question 3 (2.5 marks out of 5 marks) Show rows of images frame by frame as shown in the animation. Details: Set the framerate to 10. Show one row of images in every frame. The canvas has 10 rows. There are 9 images to show. In each frame, decide which row the frame should draw; e.g., frame #1 draws first row, frame #2 draws second row, frame #10 draws tenth row, frame #11 draws first row etc.. Use an image ID to control which picture to show: initially id is 1, then increment on every frame, restore to 1 when it becomes more than 9. Note: To produce the required animation, do not erase the background in draw(). Animation: