javascript - HTMl5 Canvas 科赫分形

Question

我今天要求的是帮助使用科赫算法，不断增加线路上的迭代，而不必一次又一次手动重新执行该过程。这就是我到目前为止所得到的。

KochStar.prototype.draw = function (context) {

    var StartPoint = new Vector(this.getStart().getX(), this.getStart().getY());
    var MiddlePoint = new Vector(this.getMiddle().getX(), this.getMiddle().getY());
    var EndPoint = new Vector(this.getEnd().getX(), this.getEnd().getY());


    //iteration 1, left side
    var v1 = MiddlePoint.copy();
    v1.subtract(StartPoint);
    v1.divide(3);
    var P1 = StartPoint.copy();
    P1.add(v1);


    var v1R = v1.copy();
    v1R.rotate(-Math.PI/3);
    var P2 = P1.copy();
    P2.add(v1R);

    var v1R2 = v1.copy();
    v1R2.rotate(Math.PI/3);
    var P3 = P2.copy();
    P3.add(v1R2);

当前所做的是将一个向量分为三段，并将其中 2 段旋转 60 度，以在一条简单的直线上创建一个三 Angular 形“凹凸”。

我要问的是，每次调用起点和终点时，应用之前的数学来自动创建曲线，并继续执行“x”次迭代。

--------------更新----------------

好吧，到目前为止我所做的是，遍历数组并完成每一点。然而，例如，我真正需要它的迭代部分。从 A 开始，在 A 和 B 之间到达 B 这样做:A[C-D-E]B 像这样。

接下来我需要的是从该数组中取出 C-D 并将这两点作为我的开始和结束，并在两者之间进行之前的数学计算。

    KochStar.prototype.draw = function (context) {
        var pArrayX = new Array(P1.getX(), P2.getX(), P3.getX());
        var pArrayY = new Array(P1.getY(), P2.getY(), P3.getY());

        var p1ArrayX = new Array(P1a.getX(), P2a.getX(), P3a.getX());
        var p1ArrayY = new Array(P1a.getY(), P2a.getX(), P3a.getY());

        var p2ArrayX = new Array(P1b.getX(), P2b.getX(), P3b.getX());
        var p2ArrayY = new Array(P1b.getY(), P2b.getX(), P3b.getY());

        var iterat;

        context.save()
        context.beginPath();
        context.lineWidth = "5";
        context.strokeStyle = "red";
        context.fillStyle = "Yellow";


    context.lineTo(StartPoint.getX(),StartPoint.getY());
              for (var i = 0; i < pArrayX.length; i++) {
                 var x = pArrayX[i];
                 var y = pArrayY[i];
                 context.lineTo(x, y); 
             }  

        context.lineTo(MiddlePoint.getX(),MiddlePoint.getY()); 
             for (var p = 0; p < p1ArrayX.length; p++) {
                var x1 = p1ArrayX[p];
                var y1 = p1ArrayY[p];
                context.lineTo(x1, y1); 
            }     

        context.lineTo(EndPoint.getX(),EndPoint.getY())
            for (var z = 0; z < p2ArrayX.length; z++) {
                var x2 = p2ArrayX[z];
                var y2 = p2ArrayY[z];
                context.lineTo(x2, y2); 
            } 
    context.lineTo(StartPoint.getX(),StartPoint.getY())

这之前已经提到过，这就是我想要实现的目标! 任何帮助都会很棒!

Is there a reason you need the points, other than drawing them? You can get the canvas context to do all the math for you in transformations, if all you need is to draw it. If you need the points, have the KochStar constructor do all the math with a function that recursively "Koch-ifies" each successive pair of points in an array into an array of 4 points and concatenates them. Keep the resulting array, iterate over it in draw with a call to lineTo. – sqykly

Answer 1

对一种方法的建议:

• 将科赫分形中的每条线保留为单个对象。
• 保留分形的中心点，以便您知道新线将指向哪个方向(中间分割)
• 迭代前三行并将它们分为三个部分(这样就有了点)，在中间插入新点。
• 使用新点创建新的单独线对象，其中两条新线位于中间并删除中间基线。
• 迭代完成后，将主数组替换为临时数组，然后根据需要重复多次迭代。

对于每次迭代，单行都会生成 3 条额外的行，但由于您只处理行对象，所以这并不重要(就复杂性而言)。

中心点将决定两条新线的方向，您可以使用 1/3 作为两条新线长度的基础。所有线都连接在相同的端点。

希望这有帮助。