OOP&M - laboratory lectures1 OOP&M – LAB3 LABtres: drawing

OOP&M - laboratory lectures2 OOP&M – LAB3 Objectives The basic aim of this laboratory session is to learn how to draw basic forms and how to animate them In a first set of exercises the students should learn how to draw lines directly and taking the data from an array The students should learn the use of some mathematical functions like sin(), cos(), random(), round() and others After the lines, the students will learn how to make simple animation processes by moving forms throw the applet surface Two different movements are presented: linear and circular

OOP&M - laboratory lectures3 OOP&M – LAB3 LABtres: drawing Lines

OOP&M - laboratory lectures4 OOP&M – LAB3 – lines EXERCISE A.1 – Just a line According to the slides of the theory class try to write a simple applet that shows a line [Hint: use *.drawLine(), *.setColor() … ]

OOP&M - laboratory lectures5 OOP&M – LAB3 – lines EXERCISE A.2 – A line ‘n’ friends Using an array and a loop draw four lines on the screen [Hint: use an array of integers in the init() method, and a loop in the paint() method] [Note: arrays of integers are declared like this: int[] my_array = new int[number_of_elements] ]

OOP&M - laboratory lectures6 OOP&M – LAB3 – lines EXERCISE A.3 – Random Lines Draw a set of four lines whose positions are random [Hint: use Math.random(), Math.round() and create the array of the exercise A.2 within a loop  for() ] [Note: java is very restrictive with type conversions use the following line data[i]= (int) Math.round(300*Math.random()) ] Type conversion of long to int

OOP&M - laboratory lectures7 OOP&M – LAB3 – lines EXERCISE A.4 – Lots of lines Now make random the number of lines on the screen and, after implementing the program, answer to the following questions: A. what happens if you restart the applet? B. what happens if you reload the applet? [Hint: declare the number of lines as a random variable outside the init() method and outside the paint() method]

OOP&M - laboratory lectures8 OOP&M – LAB3 LABtres: drawing Circles

OOP&M - laboratory lectures9 OOP&M – LAB3 – circles EXERCISE B.1 – The Oval and the circle Now try to draw another form, this time let’s try with a circle. Could you explain what the following program is doing? import java.applet.*; import java.awt.*; public class circles extends Applet { public void paint(Graphics g) { for(int i=0; i<10; i+=2) g.drawOval(30-i/2, 30-i/2, 10+i, 10+i); } [Hint: too easy]

OOP&M - laboratory lectures10 OOP&M – LAB3 – circles EXERCISE B.2 – Moving the circle Draw a white rectangle as a background as big as the applet, use: getSize().width and getSize().height Try now to draw a red circle with *.fillOval() and move it from position (30,30) to position (30,100) following a straight line [Hint: for moving the circle you have to paint it, show it during a period of time, delete it and repaint it again in another position] [Use the following, it stops the program during a little period of time allowing you to see the whole process try { Thread.sleep(500);} catch (InterruptedException e) {} ] Time that the program stops in miliseconds

OOP&M - laboratory lectures11 EXERCISE B.2 – Moving the circle The process of moving a form looks like the following To delete an object is the same thing than to paint it with the background color!!! Calculate coordinates Place form Show for a while Delete form OOP&M – LAB3 – circles

OOP&M - laboratory lectures12 OOP&M – LAB3 – circles EXERCISE B.3 – Moving the circle Take B.2 and do the following: 1 st write a method called “ pause() ” where the special code for stopping the program is contained 2 nd declare a global variable called “ speed ” that represents the number of miliseconds that the method *.sleep() should take as parameter Experiment with different values for the “ speed ” variable and check how it works [Note: now your code should look more clear and ready for being used in the next exercises]

OOP&M - laboratory lectures13 OOP&M – LAB3 LABtres: drawing Spirals

OOP&M - laboratory lectures14 OOP&M – LAB3 – spirals EXERCISE C.1 – Spinning around Now we will try to describe a more complex movement with the circle … we are going to make it move in circles!! Adapt B.3 for making your circle move in a circle with a radius of 100 pixels and make 10 rounds [Note: attend to the explanation]  x y x = R*sin() y = R*cos() R

OOP&M - laboratory lectures15 OOP&M – LAB3 – spirals EXERCISE C.1 – Spinning around If we want to make an object move in circles, we need to consider the characteristics of the movement We localize objects on the applet by its coordinates x and y This means that we need a relationship between the coordinates x,y and the form of a circle It is quite easy to see this relationship if we attend to the picture in the previous slide So, the process is the same as before, but with more complicated operations in phase one: Calculate coordinates Place circle Show for a while Delete circle

OOP&M - laboratory lectures16 OOP&M – LAB3 – spirals EXERCISE C.1 – Spinning around The code for describing the circular movement looks like: double phase = j*Math.PI/100; int x = x0 + (int) Math.round(radius * Math.sin(phase)); int y = y0 + (int) Math.round(radius * Math.cos(phase)); x0 and y0 are the initial position of the circle on the screen, it should be the center (150,150), radius should be 100, j is the variable that counts the number of times that the drawing process must be repeated

OOP&M - laboratory lectures17 OOP&M – LAB3 – spirals EXERCISE C.2 – To the center in ten rounds Modify the code of C.1 and make the circle spin into an spiral It must reach the center in the same 10 rounds Extra question: Why does the circle not maintain the velocity? How would you change it? [HINT: the trick here is to change the radius of the movement]

OOP&M - laboratory lectures18 OOP&M – LAB3 – spirals EXERCISE C.3 – Drawing the Spiral Use the *.drawLine() method and let the circle of C.2 draw an spiral while it moves [HINT: you need to save the previous position of the circle in some variables]