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

Loading in 2 Seconds...

play fullscreen
1 / 31

Laboratory 3 - PowerPoint PPT Presentation


  • 60 Views
  • Uploaded on

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.

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

PowerPoint Slideshow about 'Laboratory 3' - senona


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
slide1

COMP1610/DGC1330

Laboratory 3

learning outcomes

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

draw primitives

COMP1610/DGC1330

Draw primitives

You will learn the following primitives:

Line

Rectangle

Circle

Quadrilateral

draw primitives1

COMP1610/DGC1330

Draw primitives

Line

line ( 180 , 10 , 300 , 80 );

Starting point

(180,10)

starting point coordinates

ending point coordinates

Ending point

(300,80)

draw primitives2

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

draw primitives3

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

draw primitives4

COMP1610/DGC1330

Draw primitives

Quadrilateral

Second point

(180,10)

Third point

(280,10)

quad(160,80,180,10,280,10,300,80);

1st point coordinates

2nd point coordinates

3rd point coordinates

4th point coordinates

First point

(160,80)

Last point

(300,80)

work it out

COMP1610/DGC1330

Work it out!

Now try to draw the camera by using the primitives:

apply colors

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 )

apply colors1

COMP1610/DGC1330

Apply colors

Here are some examples:

(255,0,0)

Many red

No green and blue

(0,0,255)

(0,255,0)

apply colors2

COMP1610/DGC1330

Apply colors

You can pick a color from “Color Selector”

Pick a color

Values of RGB

apply colors3

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

apply colors4

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

}

apply colors5

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

}

drawing order

COMP1610/DGC1330

Drawing order

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

Can you predict the result of the two squares?

OR

drawing order1

COMP1610/DGC1330

Drawing order

The result will be this.

tasks

COMP1610/DGC1330

Tasks

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.

download file

COMP1610/DGC1330

Download file

Download file from:

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

open file

COMP1610/DGC1330

Open file

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

Tab “lab3”

open file1

COMP1610/DGC1330

Open file

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

slide21

COMP1610/DGC1330

Task

Task1:

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

Top of the head

Left leg

Right leg

slide22

COMP1610/DGC1330

Task

Task1:

How to do it?

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

Far away

Eating

Top of the head

Left leg

Right leg

State

0

1

2

3

4

slide23

COMP1610/DGC1330

Task

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.

Task1:

How to do it?

slide24

COMP1610/DGC1330

Task

Task1:

How to do it?

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

slide25

COMP1610/DGC1330

Task

Task1:

How to do it?

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

slide26

COMP1610/DGC1330

Task

Task2:

Define the size and color of the tongue;

Hint:

They are in different data types.

slide27

COMP1610/DGC1330

Task

Task 3:

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

slide28

COMP1610/DGC1330

Task

Task 4:

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() {

}

slide29

COMP1610/DGC1330

Task

Task 4:

Example:

When the mouse is pressed, it becomes a bee.

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

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-lab3.zip”

(where xxxxxxxx is your Student ID.)

Upload to BU e-Learning.

Deadline:

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