Laboratory 3

1. COMP1610/DGC1330 Laboratory 3

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

3. COMP1610/DGC1330 Draw primitives You will learn the following primitives: Line Rectangle Circle Quadrilateral

4. COMP1610/DGC1330 Draw primitives Line line ( 180 , 10 , 300 , 80 ); Starting point (180,10) starting point coordinates ending point coordinates Ending point (300,80)

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

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

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

8. COMP1610/DGC1330 Work it out! Now try to draw the camera by using the primitives:

9. 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 )

10. COMP1610/DGC1330 Apply colors Here are some examples: (255,0,0) Many red No green and blue (0,0,255) (0,255,0)

11. COMP1610/DGC1330 Apply colors You can pick a color from “Color Selector” Pick a color Values of RGB

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

13. 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); }

14. 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); }

15. COMP1610/DGC1330 Drawing order Processing will run the codes inside draw() one by one. Can you predict the result of the two squares? OR

16. COMP1610/DGC1330 Drawing order The result will be this.

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

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

19. COMP1610/DGC1330 Open file There are three tabs, you have to edit the first tab, “lab3”, only. Tab “lab3”

20. COMP1610/DGC1330 Open file In this lab, same as lab2, you are asked to fill it the missing codes.

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

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

23. 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?

24. COMP1610/DGC1330 Task Task1: How to do it? You have to fill in the missing parts, which are the different images.

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

26. COMP1610/DGC1330 Task Task2: Define the size and color of the tongue; Hint: They are in different data types.

27. COMP1610/DGC1330 Task Task 3: The mosquito is behind the frog, can you bring it in front of the frog?

28. 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() { }

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

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

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/