1 / 31

Laboratory 5

COMP1610/DGC1330. Laboratory 5. COMP1610/DGC1330. Learning Objective. In this laboratory session, you will Learn how to display text; Practice the concept of condition. COMP1610/DGC1330. Display text. To place text on screen, we have to follow a series of simple steps:.

gunnar
Télécharger la présentation

Laboratory 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/

More Related