JavaFX Example Code | FractalTree

재귀적 Graphic들을 이용하여 프렉탈 트리 만들기

By Josh Marinacci, September 22, 2008

JavaFx 안의 Graphic들은 CustomNode와 그룹 클래스들 덕분에 고도로 중첩되어 있습니다. 이 풍부한 중첩(nesting)은 재귀적 알고리즘을 만들기 매우 쉽게 해줍니다.

코드 이해하기

이 예제는 재귀적인 그래픽들을 이용하여 어떻게 프렉탈 트리를 만드는지 보여줍니다. RecursiveTree 클래스는 CustomNode를 상속하기 때문에 이 클래스는 create():Node 함수를 정의해야만 합니다. 그러나 이경우는 중첩된 선들의 그룹을 생성하는 재귀적 버전에 위임하는 것을 생성합니다. 각각의 단계에서 create 함수는 경미하게 왼쪽이나 오른쪽으로 순환하고 오래된 선의 끝에서 새로운 선이 시작하기 위해서 변화합니다. 그것은 또한 트리의 각 레벨을 위해서 경미하게 색상을 변화시킵니다.

RecursiveTree.fx Class

Source Code

package fractaltree;

import javafx.gui.*;

public class RecursiveTree extends CustomNode {
    public attribute x = 0;
    public attribute y = 100;
    public attribute startDepth: Number = 3;
    public attribute leftFactor = 1.12;
    public attribute rightFactor = 1.6;
    public attribute leftAngle = 20;
    public attribute rightAngle = -45;

    public function create():Node {
        return Group {
            translateX: bind x
            translateY: bind y
            content: [
                create(startDepth, 0)
            ]
        }
    }
    
    private function create(depth:Number, angle:Number):Node {
        var color = (depth*255/startDepth);
        var g = Group {
            transform:  Transform.rotate(angle, 0, 0),
            content: Line { 
                x1:0 y1:0 x2:0 y2:-depth*7 
                stroke: Color.rgb(color,color,0) 
            }
        };
        
        // recurse
        if(depth >= 1) {
            insert Group {
                transform: Transform.translate(0,-depth*7)
                content: [
                    create(depth/leftFactor,leftAngle),
                    create(depth/rightFactor,rightAngle)
                ]
            } into g.content;
        }
        
        return g;
    }
}

만약 여러분이 기본값으로 RecursiveTree를 생성한다면 그것은 Figure 1처럼 보입니다.

Source Code

RecursiveTree { x: 50 y: 100 }

Figure 1: Default Fractal Tree

하지만 매개변수를 변경함으로서 여러분은 figures 2에서 4까지 보이는것과 같은 다른 효과들을 얻을수 있습니다.

Source Code

RecursiveTree { 
    x: 100 y: 100
    leftAngle: 30
    rightAngle: -30
    leftFactor: 1.25
    rightFactor: 1.25
}

Figure 2: Symmetric Tree

Source Code

RecursiveTree { 
    x: 100 y: 100
    leftAngle: 0
    rightAngle: -45
    leftFactor: 1.3
    rightFactor: 1.5
}

Figure 3: Flat Tree

Source Code

RecursiveTree { 
    x: 100 y: 100
    leftAngle: 45
    rightAngle: -45
    leftFactor: 1.3
    rightFactor: 1.3
}

Figure 4: 45-Degree Tree

FX

Profile

재귀적 Graphic들을 이용하여 프렉탈 트리 만들기

코드 이해하기