JavaScript圖形實例：Levy曲線及其變形

時間 2020-07-05

標籤 javascript 圖形實例 levy 曲線及其變形欄目 JavaScript 简体版

原文原文鏈接

Levy曲線是將一條線段不停地分造成兩條長度相等且相互垂直的線段而生成的。Levy分形的最後很像一個英文字母C，因此也稱它爲C曲線。 Levy曲線的生成示意如圖1所示。javascript

圖1 Levy曲線的生成html

1．Levy曲線

Levy曲線採用遞歸過程易於實現，編寫以下的HTML代碼。java

<!DOCTYPE html>canvas

<head>瀏覽器

<title>Levy曲線</title>spa

</head>3d

<body>htm

<canvas id="myCanvas" width="600" height="400" style="border:3px double #996633;">blog

</canvas>遞歸

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var depth=12;

ctx.lineWidth = 2;

fractal_c(depth,{x:150,y:100},{x:450,y:100});

function fractal_c(n,p1,p2)

{

if (n>0)

{

var x3=(p1.x+p1.y+p2.x-p2.y)/2;

var y3=(p2.x+p2.y+p1.y-p1.x)/2;

fractal_c(n-1,p1,{x:x3,y:y3});

fractal_c(n-1,{x:x3,y:y3},p2);

}

if (n==0)

{

ctx.strokeStyle = "red";

ctx.beginPath();

ctx.moveTo(p1.x,p1.y);

ctx.lineTo(p2.x,p2.y);

ctx.closePath();

ctx.stroke();

}

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出的Levy曲線，如圖2所示。

圖2 遞歸深度depth =12的Levy曲線

將上面HTML文件中的調用語句「fractal_c(depth,{x:150,y:100},{x:450,y:100}); 」修改成「fractal_c(depth,{x:350,y:100},{x:350,y:300});」，則可在瀏覽器窗口中繪製出如圖3所示的Levy曲線，它很像字母C。

圖3 C曲線

2．龍形曲線

Levy曲線是將一條線段不停地分造成兩條長度相等且相互垂直的線段而生成的，分形是對摺方向都是沿着同一個方向。若是將分形對摺方向進行交替切換會如何呢？繪製出的曲線像龍形，稱爲龍形曲線。

龍形曲線的生成方式與Levy曲線類似，也是將線段不停地分造成兩條長度相等且相互垂直的線段，不一樣之處是其對摺的方向是一個左一個右，而levy曲線則是始終朝着一邊對摺。龍形曲線的生成示意如圖4所示。

圖4 龍形曲線的生成

龍形曲線採用遞歸過程易於實現，編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

</head>

<body>

</canvas>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var depth=10;

ctx.lineWidth = 2;

fractal_c(depth,{x:150,y:150},{x:450,y:150},true);

function fractal_c(n,p1,p2,left)

{

if (n>0)

{

if (left)

{

var x3=(p1.x+p1.y+p2.x-p2.y)/2;

var y3=(p2.x+p2.y+p1.y-p1.x)/2;

}

else

{

var x3=(p1.x+p2.y+p2.x-p1.y)/2;

var y3=(p1.x+p2.y+p1.y-p2.x)/2;

}

fractal_c(n-1,p1,{x:x3,y:y3},true);

fractal_c(n-1,{x:x3,y:y3},p2,false);

}

if (n==0)

{

ctx.strokeStyle = "red";

ctx.beginPath();

ctx.moveTo(p1.x,p1.y);

ctx.lineTo(p2.x,p2.y);

ctx.closePath();

ctx.stroke();

}

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出的龍形曲線，如圖5所示。

圖5 遞歸深度depth =10的龍形曲線

3．變形的Levy曲線

爲了繪製Levy曲線，還能夠編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>變形的Levy曲線</title>

</head>

<body>

</canvas>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var d=45;

ctx.lineWidth = 2;

ctx.strokeStyle = "red";

ctx.beginPath();

ctx.moveTo(400,100);

drawC(400,100,150,90+45);

ctx.stroke();

function drawC(x,y,L,angle)

{

if (L>=5)

{

var x1=x+L*Math.cos(angle*Math.PI/180);

var y1=y+L*Math.sin(angle*Math.PI/180);

drawC(x,y,L*0.707,angle-d);

drawC(x1,y1,L*0.707,angle+d);

}

else

{

ctx.lineTo(x,y);

}

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出的Levy曲線，如圖6所示。

圖6 d=45時的Levy曲線

上面程序中的d取不一樣值時，所繪製的曲線會變化。下圖7~9分別是d值取7五、90和150時繪製的曲線。

圖7 d=75時的Levy曲線

圖8 d=90時的Levy曲線

圖9 d=150時的Levy曲線

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。