Spring Semester 2003

Lab Notes Eleven: Drawing Lines
The only HTML we'll need is here:
```<html>
<title>Lab 11 Applets</title>

<body bgcolor=white>
<applet code="Lab11.class" width=300 height=300>

</applet>
</body>
</html>```
The rest is applets' code.

Here's a startint point (or, rather, framework).

```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet implements MouseListener {
public void init() {
}
public void mouseClicked(MouseEvent e) {

}
public void mouseEntered(MouseEvent e) {

}
public void mouseExited(MouseEvent e) {

}
public void mousePressed(MouseEvent e) {

}
public void mouseReleased(MouseEvent e) {

}
}```
Verify this framework is operational.

```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet implements MouseListener {
public void init() {
}
public void mouseClicked(MouseEvent e) {
System.out.println("Mouse clicked.");
}
public void mouseEntered(MouseEvent e) {

}
public void mouseExited(MouseEvent e) {

}
public void mousePressed(MouseEvent e) {
System.out.println("Mouse pressed.");
}
public void mouseReleased(MouseEvent e) {

}
}
```
Can you notice the difference between a click and a press?

Now let's draw lines. The equations we will be using are these:

```x = x0 + t * (x1 - x0)
y = y0 + t * (y1 - y0) ```
When `t` goes from `0` to `1`, the point `(x, y)` follows a straight line from `(x0, y0)` to `(x1, y1)`.

Can we illustrate that?

Let's choose an `(x0, y0)`, an `(x1, y1)` and let's draw some intermediary points `(x, y)`.

For this we have a choice of where we start `t`, where it ends, and how it varies.

```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet {
public void paint(Graphics g) {
int x0 = 50, y0 = 50, x1 = 100, y1 = 150;
g.setColor(Color.blue);
for (double t = 0; t <= 1; t += 0.1) {
int x = (int) (x0 + t * (x1 - x0));
int y = (int) (y0 + t * (y1 - y0));
g.fillOval(x, y, 3, 3);
}
g.setColor(Color.red);
g.fillOval(x0, y0, 3, 3);
g.fillOval(x1, y1, 3, 3);
}
}```
One should study this carefully. Experiment with it a bit, for example change
• the width of the line (the radius of the ovals), and
• the step with which `t` is increased (`0.01`, `0.001`, etc.)
So one could try this for a better line.

```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet {
public void paint(Graphics g) {
int x0 = 50, y0 = 50, x1 = 100, y1 = 150;
g.setColor(Color.blue);
for (double t = 0; t <= 1; t += 0.01) {
int x = (int) (x0 + t * (x1 - x0));
int y = (int) (y0 + t * (y1 - y0));
g.fillOval(x, y, 3, 3);
}
g.setColor(Color.red);
g.fillOval(x0, y0, 3, 3);
g.fillOval(x1, y1, 3, 3);
}
}```
To make it easier later one could make this a method (recipe).

```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet {
public void paint(Graphics g) {
this.drawLine(g, 50, 50, 100, 150);
}
void drawLine(Graphics g, int x0, int y0, int x1, int y1) {
g.setColor(Color.blue);
for (double t = 0; t <= 1; t += 0.01) {
int x = (int) (x0 + t * (x1 - x0));
int y = (int) (y0 + t * (y1 - y0));
g.fillOval(x, y, 3, 3);
}
g.setColor(Color.red);
g.fillOval(x0, y0, 3, 3);
g.fillOval(x1, y1, 3, 3);
}
}```
Now let's get `(x0, y0)` and `(x1, y1)` from the mouse.

```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet implements MouseListener {
public void init() {
}
public void mouseClicked(MouseEvent e) {

}
public void mouseEntered(MouseEvent e) {

}
public void mouseExited(MouseEvent e) {

}
public void mousePressed(MouseEvent e) {
System.out.println("Mouse pressed at: (" +
e.getX() + ", " + e.getY() + ")" );
}
public void mouseReleased(MouseEvent e) {
System.out.println("Mouse released at: (" +
e.getX() + ", " + e.getY() + ")" );
}
}```
Let's make the press define `(x0, y0)` and the release define `(x1, y1)`.
```import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class Lab11 extends Applet implements MouseListener {
int x0, y0, x1, y1;
public void init() {
}
public void mouseClicked(MouseEvent e) { }
public void mouseEntered(MouseEvent e) { }
public void mouseExited (MouseEvent e) { }
public void mousePressed(MouseEvent e) {
x0 = e.getX();
y0 = e.getY();
System.out.println("Mouse pressed at: (" +
x0 + ", " + y0 + ")" );
}
public void mouseReleased(MouseEvent e) {
x1 = e.getX();
y1 = e.getY();
System.out.println("Mouse released at: (" +
x1 + ", " + y1 + ")" );
this.repaint();
}
public void paint(Graphics g) {
g.drawLine(x0, y0, x1, y1);
}
}```
Notice the new additions, and that the applet has a specific interface.

A201/A597 LAB ASSIGNMENT ELEVEN

You need to
• change the applet above so that
• the line follows the mouse pointer
• as if it were a rubber band.

Press and drag for a new line! (Ignore the flicker).

Optional: change it to use your own line drawing routine.

Question: How do you get rid of the flicker?

Last updated: Apr 10, 2003 by Adrian German for A201