Laboratory 5

1. COMP1610/DGC1330 Laboratory 5

2. COMP1610/DGC1330 Learning Objective In this laboratory session, you will Learn how to display text; Practice the concept of condition.

3. COMP1610/DGC1330 Display text To place text on screen, we have to follow a series of simple steps:

4. COMP1610/DGC1330 Display text Step 1 Choose a font by selecting “Tools”  “Create Font..”

5. COMP1610/DGC1330 Display text Step 1 Select a font Select a size Copy the file name Click “OK”

6. COMP1610/DGC1330 Display text Step 1 A new .vlw file will be added to the “data” folder.

7. COMP1610/DGC1330 Display text Step 2 Declare a variable of type PFont

8. COMP1610/DGC1330 Display text Step 3 Load the font by using loadFont(), similar to “load image” and put it inside setup().

9. COMP1610/DGC1330 Display text Step 4 Specify the font by using textFont(), Font variable name Font size, optional.

10. COMP1610/DGC1330 Display text Step 5 Specify the font by using fill().

11. COMP1610/DGC1330 Display text Step 6 To display text by using text(). The text to be displayed. x and y coordinates. Remarks: this it the coordinate of the text.

12. COMP1610/DGC1330 Display text Result: Step2 Step3 Step4 Step5 Step6

13. COMP1610/DGC1330 Trace the program You can get information here.

14. COMP1610/DGC1330 Trace the program Try to run this program, to see what happen if you click on the output window. void setup() { size(400, 400); } void draw() { } void mousePressed() { print("x= "+mouseX); println(" y= "+mouseY); }

15. COMP1610/DGC1330 Example Try to run this program, find the result after you click on the output window. void setup() { size(400, 400); } void draw() { } void mousePressed() { if (mouseX>200) { background(0,0,0); } else { background(255,255,255); } }

16. COMP1610/DGC1330 Tasks In this laboratory section, you are given some images, and you have to complete the following tasks: Put the provided balloon and aeroplane images in assigned area; When we click the mouse on the balloon or aeroplane, it can react to the click; Reset the balloon and aeroplane if they are off the screen; Decorate the provided image with appropriate text and put them in proper positions and different text size.

17. COMP1610/DGC1330 Download file Download file from: http://www.comp.hkbu.edu.hk/~comp1610/lab/lab5.zip Extract the Zip file and open “lab5.pde”. Extract the zip file Open lab5.ped

18. COMP1610/DGC1330 Open file There are many tabs, you have to edit the first tab, “lab5” only. Tab “lab5”

19. COMP1610/DGC1330 Open file In this lab, same as lab3, you are asked to fill it the missing codes.

20. COMP1610/DGC1330 Task 1 Put the provided balloon and aeroplane images in assigned area. Aeroplane Balloon.

21. COMP1610/DGC1330 Task 1 How to do: Fill in the x and y coordinates of balloon. Fill in the x and y coordinates of plane. Very easy!

22. COMP1610/DGC1330 Task 2 When we click the mouse on the balloon or aeroplane, it can react to the click: When mouse clicks within this area, the aeroplane goes up and right. When mouse clicks within this area, the balloon goes up.

23. COMP1610/DGC1330 Task 2 How to do: Inside mousePressed() Remove “//” Put the conditions inside if( ). Remove “//” Put the conditions inside if( ).

24. COMP1610/DGC1330 Task 2 How to do: Need to know the coordinates of this area Which points do we need to know? Can use “println(mouseX);” and “println(mouseY);” inside mousePressed() to get the values when press the mouse.

25. COMP1610/DGC1330 Task 2 How to do: 360,470 440,570

26. COMP1610/DGC1330 Task 2 How to do: 360, 470 Therefore, mouseX has to be within 360 and 440, and mouseY has to be within 470 and 570. 440, 570 if (mouseX>360 && mouseX<440 && mouseY>470 && mouseY<570) { balloon_go = true; }

27. COMP1610/DGC1330 Task 3 Reset the balloon and aeroplane if they are off the screen.

28. COMP1610/DGC1330 Task 3 How to do: I have done the balloon part. You should try the aeroplane part. Hint: Check the value of “plane_x”

29. COMP1610/DGC1330 Task 4 Decorate the provided images with appropriate text and put them in proper positions with different font size. I have done this as example. Subtitle with descriptions. Original image Your ID. Date. Red bar

30. COMP1610/DGC1330 Hand-in Submission steps: Save your files and zip all of them, including “data” folder Rename the zip file into “xxxxxxxx-lab5.zip” (where xxxxxxxx is your Student ID.) Upload to BU e-Learning. Deadline: 12/10/2011 23:59

31. COMP1610/DGC1330 More information Some useful website about Processing: Reference of functions: http://www.processing.org/reference/ Online tutorial: http://www.learningprocessing.com/ Others work: http://www.openprocessing.org/