Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Laboratory 5 PowerPoint Presentation
Download Presentation
Laboratory 5

Laboratory 5

101 Vues Download Presentation
Télécharger la présentation

Laboratory 5

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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/