COMP1610/DGC1330
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

Laboratory 5 PowerPoint PPT Presentation


  • 78 Views
  • Uploaded on
  • Presentation posted in: General

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:.

Download Presentation

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Laboratory 5

COMP1610/DGC1330

Laboratory 5


Learning objective

COMP1610/DGC1330

Learning Objective

In this laboratory session, you will

Learn how to display text;

Practice the concept of condition.


Display text

COMP1610/DGC1330

Display text

To place text on screen, we have to follow a series of simple steps:


Display text1

COMP1610/DGC1330

Display text

Step 1

Choose a font by selecting “Tools”  “Create Font..”


Display text2

COMP1610/DGC1330

Display text

Step 1

Select a font

Select a size

Copy the file name

Click “OK”


Display text3

COMP1610/DGC1330

Display text

Step 1

A new .vlw file will be added to the “data” folder.


Display text4

COMP1610/DGC1330

Display text

Step 2

Declare a variable of type PFont


Display text5

COMP1610/DGC1330

Display text

Step 3

Load the font by using loadFont(), similar to “load image” and put it inside setup().


Display text6

COMP1610/DGC1330

Display text

Step 4

Specify the font by using textFont(),

Font variable name

Font size, optional.


Display text7

COMP1610/DGC1330

Display text

Step 5

Specify the font by using fill().


Display text8

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.


Display text9

COMP1610/DGC1330

Display text

Result:

Step2

Step3

Step4

Step5

Step6


Trace the program

COMP1610/DGC1330

Trace the program

You can get information here.


Trace the program1

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);

}


Example

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);

}

}


Tasks

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.


Download file

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


Open file

COMP1610/DGC1330

Open file

There are many tabs, you have to edit the first tab, “lab5” only.

Tab “lab5”


Open file1

COMP1610/DGC1330

Open file

In this lab, same as lab3, you are asked to fill it the missing codes.


Task 1

COMP1610/DGC1330

Task 1

Put the provided balloon and aeroplane images in assigned area.

Aeroplane

Balloon.


Task 11

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!


Task 2

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.


Task 21

COMP1610/DGC1330

Task 2

How to do:

Inside mousePressed()

Remove “//”

Put the conditions inside if( ).

Remove “//”

Put the conditions inside if( ).


Task 22

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.


Task 23

COMP1610/DGC1330

Task 2

How to do:

360,470

440,570


Task 24

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;

}


Task 3

COMP1610/DGC1330

Task 3

Reset the balloon and aeroplane if they are off the screen.


Task 31

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”


Task 4

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


Hand in

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


More information

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/


  • Login