在科赫分形中存储点

时间:2013-12-04 10:46:35

标签: javascript html5 canvas

我今天要问的是帮助Koch算法,不断增加线上的迭代次数,而不必一次又一次地手动重新执行该过程。这就是我到目前为止所做的。

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);

目前正在做的是将一个矢量分成三段,然后将它们中的两个旋转60度,在一条简单的直线上创建一个三角形'凹凸'。

这是我绘制线条的方式:

KochStar.prototype.draw = function(context) {

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

        //iteration 1, left side
        context.lineTo(StartPoint.getX(), StartPoint.getY());
        context.lineTo(P1.getX(), P1.getY());
        context.lineTo(P2.getX(), P2.getY());
        context.lineTo(P3.getX(), P3.getY());  
        context.lineTo(MiddlePoint.getX(), MiddlePoint.getY());
        context.stroke(); 
        context.fill();
        context.restore();
    }
} 

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

-------------- ---------------- UPDATE

好的,到目前为止我所做的是,它正在通过数组并完成每一点。然而,我真的需要它为迭代部分例如。从A到B之间的A转到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())

0 个答案:

没有答案