Swing/PerspectiveCube のバックアップ(No.4)

  • category: swing folder: PerspectiveCube title: JPanelに正六面体ワイヤーフレームを投影変換して描画し、マウスドラッグして空間内で回転する tags: [JPanel, Path2D, MouseListener, MouseMotionListener, Animation] author: aterai pubdate: 2023-01-02T03:10:52+09:00 description: JPanelに正六面体ワイヤーフレームを投影変換で描画し、マウスドラッグして各頂点を変換して空間内で回転します。 image: https://drive.google.com/uc?id=1akdvf9FZNwNey03l7ZI-DW9ZTtgAvtdY hreflang: 
       href: https://java-swing-tips.blogspot.com/2023/02/draw-projection-transformed-regular.html
   lang: en

概要

JPanelに正六面体ワイヤーフレームを投影変換で描画し、マウスドラッグして各頂点を変換して空間内で回転します。

Screenshot

screenshot

Download

サンプルコード

class Vertex {
  private double dx;
  private double dy;
  private double dz;
  public double vx;
  public double vy;

  protected Vertex(double dx, double dy, double dz) {
    this.dx = dx;
    this.dy = dy;
    this.dz = dz;
    projectionTransformation();
  }

  private void projectionTransformation() {
    double screenDistance = 500d;
    double depth = 1000d;
    double gz = dz + depth;
    this.vx = screenDistance * dx / gz;
    this.vy = screenDistance * dy / gz;
  }

  public void rotateTransformation(double kx, double ky, double kz) {
    double x0 = dx * Math.cos(ky) - dz * Math.sin(ky);
    double y0 = dy;
    double z0 = dx * Math.sin(ky) + dz * Math.cos(ky);
    double y1 = y0 * Math.cos(kx) - z0 * Math.sin(kx);
    double z1 = y0 * Math.sin(kx) + z0 * Math.cos(kx);
    this.dx = x0 * Math.cos(kz) - y1 * Math.sin(kz);
    this.dy = x0 * Math.sin(kz) + y1 * Math.cos(kz);
    this.dz = z1;
    projectionTransformation();
  }
}
View in GitHub: Java, Kotlin

解説

  • 頂点を表すVertexクラスを8個使用して辺の長さが100の正六面体ワイヤーフレームを作成 
    List<Vertex> cube = new ArrayList<>(8);
double sideLength = 100;
cube.add(new Vertex(sideLength, sideLength, sideLength));
cube.add(new Vertex(sideLength, sideLength, -sideLength));
cube.add(new Vertex(-sideLength, sideLength, -sideLength));
cube.add(new Vertex(-sideLength, sideLength, sideLength));
cube.add(new Vertex(sideLength, -sideLength, sideLength));
cube.add(new Vertex(sideLength, -sideLength, -sideLength));
cube.add(new Vertex(-sideLength, -sideLength, -sideLength));
cube.add(new Vertex(-sideLength, -sideLength, sideLength));
  • 視点を原点、スクリーンまでの距離を500、z軸座標値をスクリーンの奥へ1000移動して正六面体の各頂点を投影変換
  • 変換した頂点座標をPath2Dで繋いでワイヤーフレームをJPanel中央に描画 
    @Override protected void paintComponent(Graphics g) {
  super.paintComponent(g);
  Graphics2D g2 = (Graphics2D) g.create();
  g2.setRenderingHint(
    RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
  Path2D path = new Path2D.Double();
  path.moveTo(cube.get(0).vx, cube.get(0).vy);
  path.lineTo(cube.get(1).vx, cube.get(1).vy);
  path.lineTo(cube.get(2).vx, cube.get(2).vy);
  path.lineTo(cube.get(3).vx, cube.get(3).vy);
  path.lineTo(cube.get(0).vx, cube.get(0).vy);
  path.lineTo(cube.get(4).vx, cube.get(4).vy);
  path.lineTo(cube.get(5).vx, cube.get(5).vy);
  path.lineTo(cube.get(6).vx, cube.get(6).vy);
  path.lineTo(cube.get(7).vx, cube.get(7).vy);
  path.lineTo(cube.get(4).vx, cube.get(4).vy);
  path.moveTo(cube.get(1).vx, cube.get(1).vy);
  path.lineTo(cube.get(5).vx, cube.get(5).vy);
  path.moveTo(cube.get(2).vx, cube.get(2).vy);
  path.lineTo(cube.get(6).vx, cube.get(6).vy);
  path.moveTo(cube.get(3).vx, cube.get(3).vy);
  path.lineTo(cube.get(7).vx, cube.get(7).vy);
  Rectangle r = SwingUtilities.calculateInnerArea(this, null);
  g2.setPaint(Color.WHITE);
  g2.fill(r);
  g2.translate(r.getCenterX(), r.getCenterY());
  g2.setPaint(Color.BLACK);
  g2.draw(path);
  g2.dispose();
}
  • 正六面体を投影変換して描画するJPanelに以下のようなMouseAdapterを追加して各頂点を空間内で回転 
    private class DragRotateHandler extends MouseAdapter {
  private final Cursor defCursor = Cursor.getDefaultCursor();
  private final Cursor hndCursor = Cursor.getPredefinedCursor(Cursor.HAND_CURSOR);
  private final Point pp = new Point();

  @Override public void mouseDragged(MouseEvent e) {
    Point pt = e.getPoint();
    double rotY = (pt.x - pp.x) * .03;
    double rotX = (pt.y - pp.y) * .03;
    double rotZ = 0d;
    for (Vertex v : cube) {
      v.rotateTransformation(rotX, rotY, rotZ);
    }
    pp.setLocation(pt);
    e.getComponent().repaint();
  }

  @Override public void mousePressed(MouseEvent e) {
    e.getComponent().setCursor(hndCursor);
    pp.setLocation(e.getPoint());
  }

  @Override public void mouseReleased(MouseEvent e) {
    e.getComponent().setCursor(defCursor);
  }
}

参考リンク

コメント