Monday, June 28, 2010

Draw cartesian coordinate system in java

Hi.
In this example, I will draw in java Cartesian two-dimensional coordinate system with positive x-axis (abscissa), and positive y-axis (ordinate).
I will draw x-axis, y-axis, arrows for x-axis and y-axis, start coordinate, names of axis, and numbers.

In this example we have to do some calculations so best way to write this program is with using constants in java.
Advantage of using constants is that we can easily read the code, and change design of coordinate system very fast and easily.



import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class Cartesian {
 public static void main(String[] args) {
  SwingUtilities.invokeLater(new Runnable() {
   
   @Override
   public void run() {
    CartesianFrame frame = new CartesianFrame();
    frame.showUI();
   }
  });
 }

}

class CartesianFrame extends JFrame {
 CartesianPanel panel;
 
 public CartesianFrame() {
  panel = new CartesianPanel();
  add(panel);
 }
 
 public void showUI() {
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  setTitle("Cartesian");
  setSize(700, 700);
  setVisible(true);
 }
}

class CartesianPanel extends JPanel {
 // x-axis coord constants
 public static final int X_AXIS_FIRST_X_COORD = 50;
 public static final int X_AXIS_SECOND_X_COORD = 600;
 public static final int X_AXIS_Y_COORD = 600;
 
 // y-axis coord constants
 public static final int Y_AXIS_FIRST_Y_COORD = 50;
 public static final int Y_AXIS_SECOND_Y_COORD = 600;
 public static final int Y_AXIS_X_COORD = 50;
 
 //arrows of axis are represented with "hipotenuse" of 
 //triangle
 // now we are define length of cathetas of that triangle
 public static final int FIRST_LENGHT = 10;
 public static final int SECOND_LENGHT = 5;
 
 // size of start coordinate lenght
 public static final int ORIGIN_COORDINATE_LENGHT = 6;
 
 // distance of coordinate strings from axis
 public static final int AXIS_STRING_DISTANCE = 20;
 
 
 public void paintComponent(Graphics g) {
  
  super.paintComponent(g);
  
  Graphics2D g2 = (Graphics2D) g;
  
  g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
    RenderingHints.VALUE_ANTIALIAS_ON);
  
  // x-axis
  g2.drawLine(X_AXIS_FIRST_X_COORD, X_AXIS_Y_COORD,
     X_AXIS_SECOND_X_COORD, X_AXIS_Y_COORD);
  // y-axis
  g2.drawLine(Y_AXIS_X_COORD, Y_AXIS_FIRST_Y_COORD,
     Y_AXIS_X_COORD, Y_AXIS_SECOND_Y_COORD);
  
  // x-axis arrow
  g2.drawLine(X_AXIS_SECOND_X_COORD - FIRST_LENGHT,
     X_AXIS_Y_COORD - SECOND_LENGHT,
     X_AXIS_SECOND_X_COORD, X_AXIS_Y_COORD);
  g2.drawLine(X_AXIS_SECOND_X_COORD - FIRST_LENGHT,
    X_AXIS_Y_COORD + SECOND_LENGHT,
    X_AXIS_SECOND_X_COORD, X_AXIS_Y_COORD);
  
  // y-axis arrow
  g2.drawLine(Y_AXIS_X_COORD - SECOND_LENGHT,
     Y_AXIS_FIRST_Y_COORD + FIRST_LENGHT,
     Y_AXIS_X_COORD, Y_AXIS_FIRST_Y_COORD);
  g2.drawLine(Y_AXIS_X_COORD + SECOND_LENGHT, 
     Y_AXIS_FIRST_Y_COORD + FIRST_LENGHT,
     Y_AXIS_X_COORD, Y_AXIS_FIRST_Y_COORD);
  
  // draw origin Point
  g2.fillOval(
    X_AXIS_FIRST_X_COORD - (ORIGIN_COORDINATE_LENGHT / 2), 
    Y_AXIS_SECOND_Y_COORD - (ORIGIN_COORDINATE_LENGHT / 2),
    ORIGIN_COORDINATE_LENGHT, ORIGIN_COORDINATE_LENGHT);
  
  // draw text "X" and draw text "Y"
  g2.drawString("X", X_AXIS_SECOND_X_COORD - AXIS_STRING_DISTANCE / 2,
     X_AXIS_Y_COORD + AXIS_STRING_DISTANCE);
  g2.drawString("Y", Y_AXIS_X_COORD - AXIS_STRING_DISTANCE,
     Y_AXIS_FIRST_Y_COORD + AXIS_STRING_DISTANCE / 2);
  g2.drawString("(0, 0)", X_AXIS_FIRST_X_COORD - AXIS_STRING_DISTANCE,
     Y_AXIS_SECOND_Y_COORD + AXIS_STRING_DISTANCE);
  
  // numerate axis
  int xCoordNumbers = 10;
  int yCoordNumbers = 10;
  int xLength = (X_AXIS_SECOND_X_COORD - X_AXIS_FIRST_X_COORD)
      / xCoordNumbers;
  int yLength = (Y_AXIS_SECOND_Y_COORD - Y_AXIS_FIRST_Y_COORD)
      / yCoordNumbers;
  
  // draw x-axis numbers
  for(int i = 1; i < xCoordNumbers; i++) {
   g2.drawLine(X_AXIS_FIRST_X_COORD + (i * xLength),
     X_AXIS_Y_COORD - SECOND_LENGHT,
     X_AXIS_FIRST_X_COORD + (i * xLength),
     X_AXIS_Y_COORD + SECOND_LENGHT);
   g2.drawString(Integer.toString(i), 
     X_AXIS_FIRST_X_COORD + (i * xLength) - 3,
     X_AXIS_Y_COORD + AXIS_STRING_DISTANCE);
  }
  
  //draw y-axis numbers
  for(int i = 1; i < yCoordNumbers; i++) {
   g2.drawLine(Y_AXIS_X_COORD - SECOND_LENGHT,
     Y_AXIS_SECOND_Y_COORD - (i * yLength), 
     Y_AXIS_X_COORD + SECOND_LENGHT,
     Y_AXIS_SECOND_Y_COORD - (i * yLength));
   g2.drawString(Integer.toString(i), 
     Y_AXIS_X_COORD - AXIS_STRING_DISTANCE, 
     Y_AXIS_SECOND_Y_COORD - (i * yLength));
  }
 }
}




x-axis is in pixels starting from (50, 600) and ending at (600, 600). So we define constants:
public static final int X_AXIS_FIRST_X_COORD = 50;
public static final int X_AXIS_SECOND_X_COORD = 600;
public static final int X_AXIS_Y_COORD = 600;

So we draw line from (50, 600) to (600, 600):
g2.drawLine(X_AXIS_FIRST_X_COORD, X_AXIS_Y_COORD,
X_AXIS_SECOND_X_COORD, X_AXIS_Y_COORD);

Same thinks is with drawing y-axis.

Constant AXIS_STRING_DISTANCE represents distance of numbers from axis.
// distance of coordinate strings from axis
public static final int AXIS_STRING_DISTANCE = 20;

We choose to have numbers on x-axis from 0 to 9.
int xCoordNumbers = 10;
If we want to have numbers from 0 to 22 we will write:
int xCoordNumbers = 23;



With this code we are drawing numbers for x-axis
// draw x-axis numbers
for(int i = 1; i < xCoordNumbers; i++) {
g2.drawLine(X_AXIS_FIRST_X_COORD + (i * xLength),
X_AXIS_Y_COORD - SECOND_LENGHT,
X_AXIS_FIRST_X_COORD + (i * xLength),
X_AXIS_Y_COORD + SECOND_LENGHT);
g2.drawString(Integer.toString(i),
X_AXIS_FIRST_X_COORD + (i * xLength) - 3,
X_AXIS_Y_COORD + AXIS_STRING_DISTANCE);
}


With this code we write names of axis. If we want to have Y and Z axis then we will write strings "Y" and "Z".
// draw text "X" and draw text "Y"
g2.drawString("X", X_AXIS_SECOND_X_COORD - AXIS_STRING_DISTANCE / 2,
X_AXIS_Y_COORD + AXIS_STRING_DISTANCE);
g2.drawString("Y", Y_AXIS_X_COORD - AXIS_STRING_DISTANCE,
Y_AXIS_FIRST_Y_COORD + AXIS_STRING_DISTANCE / 2);
g2.drawString("(0, 0)", X_AXIS_FIRST_X_COORD - AXIS_STRING_DISTANCE,
Y_AXIS_SECOND_Y_COORD + AXIS_STRING_DISTANCE);

14 comments:

  1. what about the negative x and y axis

    ReplyDelete
  2. how can we add a point with its cartesien coordinates to this ?

    ReplyDelete
  3. it is easy,
    look to my code


    import org.eclipse.swt.SWT;
    import org.eclipse.swt.events.PaintEvent;
    import org.eclipse.swt.events.PaintListener;
    import org.eclipse.swt.layout.FillLayout;
    import org.eclipse.swt.widgets.Canvas;
    import org.eclipse.swt.widgets.Display;
    import org.eclipse.swt.widgets.Shell;

    public class DrawXYScale {

    private static int convertXY(int x) {

    return x + 50;
    }

    static int z = 0;

    public static void main(String[] a) {
    final Display display = new Display();
    final Shell shell = new Shell(display);
    shell.setSize(250, 200);

    shell.setLayout(new FillLayout());
    // Create a canvas
    Canvas canvas = new Canvas(shell, SWT.NONE);
    canvas.addPaintListener(new PaintListener() {
    @Override
    public void paintControl(PaintEvent e) {
    Canvas canvas = (Canvas) e.widget;
    int maxX = canvas.getSize().x - 20;
    int maxY = canvas.getSize().y - 20;

    e.gc.setForeground(e.display.getSystemColor(SWT.COLOR_BLUE));
    int h = 0;
    int pixelCount = 4;
    e.gc.drawLine(50, maxY, maxX, maxY);

    e.gc.drawLine(50, maxY, 50, 0 + 20);

    e.gc.drawLine(50, maxY, convertXY(maxX), maxY - maxX);
    System.out.println(maxY);
    // maxX = 1580;
    int x = 10;
    int y = 10;
    for (int i = 10; i < maxX - 50;) {
    x = x + 10;

    i = scaleXaxis(e, maxX, maxY, x, i);
    e.gc.drawLine(50 + i, maxY, 50 + i, 20);
    e.gc.drawString("" + x, 50 + i, maxY + 3);

    }

    for (int i = 10; i < maxY - 20;) {
    y = y + 10;
    i = scaleYaxis(maxY, i);

    e.gc.drawLine(50, maxY - i, maxX, maxY - i);
    e.gc.drawString("" + y, 30, (maxY - i) - 6);

    }

    }

    private int scaleYaxis(int maxY, int i) {
    if (maxY > 214 && maxY < 300) {
    i = i + 20;

    } else if (maxY > 300 && maxY < 400) {
    i = i + 30;
    } else if (maxY > 400 && maxY < 500) {
    i = i + 40;
    } else if (maxY > 500 && maxY < 1000) {
    i = i + 50;
    } else {
    i = i + 10;
    }
    return i;
    }

    private int scaleXaxis(PaintEvent e, int maxX, int maxY, int x,
    int i) {
    if (maxX >= 214 && maxX < 400) {
    i = i + 20;
    }

    else if (maxX >= 400 && maxX < 600) {
    i = i + 30;
    }

    else if (maxX >= 600 && maxX < 800) {
    i = i + 40;

    }

    else if (maxX >= 800 && maxX < 2000) {
    i = i + 60;
    }

    else {
    i = i + 10;

    }
    return i;
    }

    });

    shell.open();
    while (!shell.isDisposed()) {
    if (!display.readAndDispatch())
    display.sleep();
    }
    display.dispose();
    }
    }

    ReplyDelete
  4. to draw a point

    for (int i = 0; i < pixelCount; i++) {
    for (int j = 0; j < pixelCount; j++) {
    e.gc.drawPoint(x + j, y + i);
    // e.gc.drawPoint(x1 + j, y + i);
    }

    }

    ReplyDelete
  5. http://s7.directupload.net/images/130624/tmgskjlx.jpg

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. package cartesiansystemjava;
    import java.util.Scanner;
    /**
    *
    * @author 123
    */
    public class CartesianSystemJava {

    public int x, y, answer;
    public static void main(String[] args) {
    int x,y;

    Scanner in = new Scanner(System.in);
    System.out.print("Enter the value of x:");
    x = in.nextInt();

    System.out.print("Enter the value of y:");
    y = in.nextInt();

    //

    if(x > 0 && y > 0)
    {
    System.out.println("Your value("+x+","+y+") is in Quadrant 1");
    }
    else if(x < 0 && y > 0)
    {
    System.out.println("Your value("+x+","+y+") is in Quadrant 2");
    }
    else if(x < 0 && y < 0)
    {
    System.out.println("Your value("+x+","+y+") is in Quadrant 3");
    }
    else if(x > 0 && y < 0)
    {
    System.out.println("Your value("+x+","+y+") is in Quadrant 4");
    }
    }

    }

    ReplyDelete
  8. How can I draw a rectangle with this code?

    ReplyDelete
  9. plot 3 vector points on cartesian plane?

    ReplyDelete
  10. To draw line segments add this at the end of the paintComponent method:

    g2.drawLine(X_AXIS_FIRST_X_COORD + (yourX1 * xLength), X_AXIS_Y_COORD - (yourY1 * yLength),
    X_AXIS_FIRST_X_COORD + (yourX2 * xLength), X_AXIS_Y_COORD - (yourY2 * yLength));

    ReplyDelete