Laboratory 3

1 / 31

# Laboratory 3 - PowerPoint PPT Presentation

COMP1610/DGC1330. Laboratory 3. COMP1610/DGC1330. Learning Outcomes. In this laboratory session, you will Learn to draw primitives; Apply colors on drawings; Realize the drawing order; Apply the principles of variables and data types. COMP1610/DGC1330. Draw primitives.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about 'Laboratory 3' - senona

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

COMP1610/DGC1330

Laboratory 3

COMP1610/DGC1330

Learning Outcomes

In this laboratory session, you will

Learn to draw primitives;

Apply colors on drawings;

Realize the drawing order;

Apply the principles of variables and data types

COMP1610/DGC1330

Draw primitives

You will learn the following primitives:

Line

Rectangle

Circle

COMP1610/DGC1330

Draw primitives

Line

line ( 180 , 10 , 300 , 80 );

Starting point

(180,10)

starting point coordinates

ending point coordinates

Ending point

(300,80)

COMP1610/DGC1330

Draw primitives

Rectangle, use short form ”rect”, in Processing.

Top left (80,80)

height= 220

rect ( 80 , 80 , 300 , 220 );

Top left coordinates

width

height

Width = 300

COMP1610/DGC1330

Draw primitives

Circle, we call it ellipse in Processing.

Center (230,190)

height = 170

ellipse( 230 , 190 , 170 , 170 );

Center coordinates

width

height

Width = 170

COMP1610/DGC1330

Draw primitives

Second point

(180,10)

Third point

(280,10)

1st point coordinates

2nd point coordinates

3rd point coordinates

4th point coordinates

First point

(160,80)

Last point

(300,80)

COMP1610/DGC1330

Work it out!

Now try to draw the camera by using the primitives:

COMP1610/DGC1330

Apply colors

Processing uses RGB color model:

The range of each color is from 0 to 255.

( RED ,GREEN, BLUE )

( 0-255 ,0-255, 0-255 )

COMP1610/DGC1330

Apply colors

Here are some examples:

(255,0,0)

Many red

No green and blue

(0,0,255)

(0,255,0)

COMP1610/DGC1330

Apply colors

You can pick a color from “Color Selector”

Pick a color

Values of RGB

COMP1610/DGC1330

Apply colors

Where you can use color:

Set the background color

background(RED,GREEN,BLUE);

Fill shapes with color

fill(RED,GREEN,BLUE);

Set the line color

stroke(RED,GREEN,BLUE);

COMP1610/DGC1330

Apply colors

Simple example:

void setup() {

size(500, 500);

}

void draw() {

background(92, 212, 234);

fill(255, 10, 20);

stroke(250, 210, 49);

rect(50, 50, 300, 350);

}

COMP1610/DGC1330

Apply colors

Make use of variables:

colorbg_color = color(22, 212, 4);

colorrect_color = color(211, 10, 220);

colorstroke_color = color(250, 210, 49);

intrect_height=150;

intrect_width=370;

void setup() {

size(500, 500);

}

void draw() {

background(bg_color);

fill(rect_color);

stroke(stroke_color);

rect(50, 50, rect_width, rect_height);

}

COMP1610/DGC1330

Drawing order

Processing will run the codes inside draw() one by one.

Can you predict the result of the two squares?

OR

COMP1610/DGC1330

Drawing order

The result will be this.

COMP1610/DGC1330

In this laboratory session, you are given a non finished program, and you have to complete the following tasks:

Load different state images of frog into the program;

Define the size and color of the tongue.

Bring the mosquito in front of the frog.

Make use of different mouse functions to create something new.

COMP1610/DGC1330

http://www.comp.hkbu.edu.hk/~comp1610/lab/lab3.zip

Extract the Zip file and open “lab3.pde”.

Extract the zip file

Open lab3.ped

COMP1610/DGC1330

Open file

There are three tabs, you have to edit the first tab, “lab3”, only.

Tab “lab3”

COMP1610/DGC1330

Open file

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

COMP1610/DGC1330

Load different state images of frog into the program.

When the mosquito approaches to the frog in different areas, the frog has to give different reactions as follow,

Far away

Eating

Left leg

Right leg

COMP1610/DGC1330

How to do it?

We use a integer variable, ”state”, to represent different states:

Far away

Eating

Left leg

Right leg

State

0

1

2

3

4

COMP1610/DGC1330

These codes can check where the mosquito is. You do no need to understand them now as you will learn more about them in the next lecture.

How to do it?

COMP1610/DGC1330

How to do it?

You have to fill in the missing parts, which are the different images.

COMP1610/DGC1330

How to do it?

You have to fill in the missing parts, which are the different images according to different states.

COMP1610/DGC1330

Define the size and color of the tongue;

Hint:

They are in different data types.

COMP1610/DGC1330

The mosquito is behind the frog, can you bring it in front of the frog?

COMP1610/DGC1330

Make use of different mouse functions to create something new.

You can create a combination more than one function.

void mousePressed() {

}

void mouseReleased() {

}

void mouseClicked() {

}

void mouseMoved() {

}

void mouseDragged() {

}

COMP1610/DGC1330

Example:

When the mouse is pressed, it becomes a bee.

When the mouse is released, it returns to a mosquito.

COMP1610/DGC1330

Hand-in

Submission steps:

Save your files and zip all of them, including “data” folder

Rename the zip file into “xxxxxxxx-lab3.zip”

(where xxxxxxxx is your Student ID.)

28/09/2011 23:59

COMP1610/DGC1330