Lab Notes Thirteen: Drawing Lines
The only HTML we'll need is here:
<html>
  <head>
    <title>Lab 13 Applets</title>
  </head>

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

    </applet>
  </body>
</html>
The rest is applets.

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

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

public class Lab13 extends Applet implements MouseListener {
    public void init() {
	addMouseListener(this); 
    }
    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 Lab13 extends Applet implements MouseListener {
    public void init() {
	addMouseListener(this); 
    }
    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 Lab13 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 So one could try this for a better line.

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

public class Lab13 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 Lab13 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 Lab13 extends Applet implements MouseListener {
    public void init() {
	addMouseListener(this); 
    }
    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 Lab13 extends Applet implements MouseListener {
    int x0, y0, x1, y1; 
    public void init() {
	addMouseListener(this); 
    }
    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.

What follows is

A201/A597 LAB ASSIGNMENT THIRTEEN

You need to

Here's a prototype.

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

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


Last updated: Jul 30, 2001 by Adrian German for A201