Example JavaScript pattern: pattern conversion and an annular sector transformation

1.1 sector transform

The upper pattern shown in FIG. 1 is converted into a rectangular pattern of the lower sector is called a sector transformation transform.

Provided a rectangular pattern in any point P _{. 1} (X- _{. 1} , the Y _{. 1} ) is converted into a point on the fan pattern P ₂ (X- ₂ , the Y ₂ ), rectangular length X, sector center coordinates (X- ₀ , the Y ₀ ), sector radius L, the minimum angle of the fan-shaped X-axis as B, corresponding to the arc angle of the sector C, P the point ₂ is calculated as coordinates:

X ₂ = (L + Y ₁ ) * COS (i) + X ₀

Y ₂ = - (L + Y ₁ ) * SIN (i) + Y ₀

Where: [theta] = C * (XX _{. 1} ) / X- _{. 1} + B

FIG converting sector 1

Generating a basic six flower pattern data, the six of the eight rectangular pattern as the basic pattern, for converting the specified number of sectors.

Write HTML code below.

<!DOCTYPE html>

<head>

<Title> sector transformation </ title>

function drawBase(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,700,100);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath ();

were you = Math.PI / 64;

var x=new Array();

var y=new Array();

w = 80;

// generates a Data six flower pattern

for (var i=0;i<=128;i++)

{

d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;

t=d*(0.5+Math.sin(6*i*dig)/2);

x[i]=t*Math.cos(i*dig);

y[i]=t*Math.sin(i*dig);

}

// Draw eight six flower pattern in the horizontal row

for (n=1;n<=8;n++)

{

px=(2*n-1)/2*w+30;

for (i=0;i<=128;i++)

{

x1=px+x[i];

y1 = w / 2-y [i];

if (i==0)

{

context.moveTo(x1,y1);

bx=x1; by=y1;

}

else

context.lineTo(x1,y1);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

function drawSector(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,700,500);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath ();

were you = Math.PI / 64;

w=80;

var x=new Array();

var y=new Array();

// generates a Data six flower pattern

for (var i=0;i<=128;i++)

{

d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;

t=d*(0.5+Math.sin(6*i*dig)/2);

x[i]=t*Math.cos(i*dig);

y[i]=t*Math.sin(i*dig);

}

var k=eval(document.myForm.levelNum.value);

if (k<1 || k>=6) {

alert ( "fan needs to set the number of layers is one of 1 to 5!");

return;

}

// multiplex sector transformation

l=100; b=Math.PI/3; c=Math.PI/3; x0=350; y0=500;

for (m=1;m<=k;m++)

for (n=1;n<=8;n++)

for (var i=0;i<=128;i++)

{

px=(2*n-1)/2*w;

py=(2*m-1)/2*w;

x1=px+x[i];

y1=py-y[i];

th=c*(w*8-x1)/(w*8)+b;

x2=(l+y1)*Math.cos(th)+x0;

y2=-(l+y1)*Math.sin(th)+y0;

if (i==0)

{

context.moveTo(x2,y2);

bx=x2; by=y2;

}

else

context.lineTo(x2,y2);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

Basic pattern <br/>

<Canvas id = "myCanvas1" width = "700" height = "100"> Your browser does not support the canvas! </ Canvas>

The number of the basic pattern in the sector level <input type = number name = "levelNum" value = 4 size = 3>

</form><br>

<Canvas id = "myCanvas2" width = "700" height = "500"> Your browser does not support the canvas! </ Canvas>

</body>

</html>

To store the HTML code to an html text file, and then open this HTML code comprising html file in the browser, at the input "in sector number of the basic pattern level" value box "5" click "OK" button , you can see the basic six flower pattern in a browser window layer 5 converting sector, as shown in FIG.

FIG converting sector 2

1.2 Transformation annular

The upper side shown in FIG. 3 is converted into a rectangular stripe pattern of the lower annular ring-shaped pattern called transformation transform. The circularly permuted together left and right ends of the strip chart, and thus the upper portion of FIG ribbon is stretched, the lower portion is compressed.

Stripe pattern provided in any point P _{. 1} (X- _{. 1} , the Y _{. 1} ) is converted into an annular pattern on the point P ₂ (X- ₂ , the Y ₂ ), a rectangular strip length X, the cyclic pattern is center coordinates ( PX, PY), L is the inner annular radius (L value, the larger the deformation of the pattern after conversion), the point P ₂ is calculated as coordinates:

X₂=(L+Y₁)*COS(θ)+PX

Y₂=-(L+Y₁)*SIN(θ)+PY

Where: [theta] = 2 [pi] * (XX _{. 1} ) / X-

FIG 3 annular transform

According to the method of converting substantially annular pattern as shown in FIG. 4 would be annular transformation.

FIG 4 is the basic pattern for the ring transform

Write HTML code below.

<!DOCTYPE html>

<head>

<Title> annular transform </ title>

function draw1(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,800,500);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

var dig=Math.PI/64;

var x=new Array();

var y=new Array();

var w=100;

// 生成一个六瓣花型图案的数据

for (var i=0;i<=128;i++)

{

d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;

t=d*(0.5+Math.sin(6*i*dig)/2);

x[i]=t*Math.cos(i*dig);

y[i]=t*Math.sin(i*dig);

}

// 在水平一行中绘制8个六瓣花型图案

for (n=1;n<=8;n++)

{

px=(2*n-1)/2*w;

for (i=0;i<=128;i++)

{

x1=px+x[i];

y1=w/2-y[i];

if (i==0)

{

context.moveTo(x1,y1);

bx=x1; by=y1;

}

else

context.lineTo(x1,y1);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

function draw2(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,800,500);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath();

var dig=Math.PI/64;

var x=new Array();

var y=new Array();

var w=100;

var l=80;

// 生成一个六瓣花型图案的数据

for (var i=0;i<=128;i++)

{

d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;

t=d*(0.5+Math.sin(6*i*dig)/2);

x[i]=t*Math.cos(i*dig);

y[i]=t*Math.sin(i*dig);

}

// 进行一重环形变换

for (n=1;n<=8;n++)

for (var i=0;i<=128;i++)

{

px=(2*n-1)/2*w;

x1=px+x[i];

y1=w/2+y[i];

th=2*Math.PI*(w*8-x1)/(w*8);

x2=(l+y1)*Math.cos(th)+400;

y2=(l+y1)*Math.sin(th)+250;

if (i==0)

{

context.moveTo(x2,y2);

bx=x2; by=y2;

}

else

context.lineTo(x2,y2);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

function draw3(id,k)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,800,500);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath();

var dig=Math.PI/64;

w=200/k; l=0;

var x=new Array();

var y=new Array();

// 生成一个六瓣花型图案的数据

for (var i=0;i<=128;i++)

{

d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;

t=d*(0.5+Math.sin(6*i*dig)/2);

x[i]=t*Math.cos(i*dig);

y[i]=t*Math.sin(i*dig);

}

// 进行多重环形变换

for (m=1;m<=k;m++)

for (n=1;n<=8;n++)

for (var i=0;i<=128;i++)

{

px=(2*n-1)/2*w;

py=(2*m-1)/2*w;

x1=px+x[i];

y1=py-y[i];

th=2*Math.PI*(w*8-x1)/(w*8);

x2=(l+y1)*Math.cos(th)+400;

y2=(l+y1)*Math.sin(th)+250;

if (i==0)

{

context.moveTo(x2,y2);

bx=x2; by=y2;

}

else

context.lineTo(x2,y2);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<body>

<button onClick="draw3('myCanvas',2);">二重环形变换</button>  

<button onClick="draw3('myCanvas',3);">三重环形变换</button>

<canvas id="myCanvas" width="800" height="500">您的浏览器不支持canvas！</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“基本图案”、“环形变换”、“二重环形变换”、“三重环形变换”这四个按钮，单击“基本图案”按钮，绘制出如图4所示的基本图案，单击“环形变换”，绘制出如图5所示的环形变换图案，单击“二重环形变换”，绘制出如图6所示的二重环形变换图案，单击“三重环形变换”，绘制出如图7所示的三重环形变换图案。

图5 环形变换图案

图6 二重环形变换图案

图7 三重环形变换图案

下面我们将上面的例子进行扩充，提供多种基本图案的选择，选择好基本图案后，进行环形变换。编写的HTML文件内容如下。

<!DOCTYPE html>

<head>

<title>可选择图案的环形变换</title>

// 定义保存基本图案数据的二维数组

var x=new Array(10);

var y=new Array(10);

for (var i=0;i<10;i++)

{

x[i]=new Array(129);

y[i]=new Array(129);

}

var sele=0;

function initGraph()

{

var dig=Math.PI/64;

var w=100;

// 生成一个六瓣花型图案的数据

for (var i=0;i<=128;i++)

{

d=10*Math.sin(8*(i*dig+Math.PI/16));

x[0][i]=d*Math.cos(i*dig)+30*Math.cos(i*dig)*Math.cos(i*dig)*Math.cos(i*dig);

y[0][i]=d*Math.sin(i*dig)+30*Math.sin(i*dig)*Math.sin(i*dig)*Math.sin(i*dig);

}

// 生成一个六瓣花型图案的数据

for (var i=0;i<=128;i++)

{

d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;

t=d*(0.5+Math.sin(6*i*dig)/2);

x[1][i]=t*Math.cos(i*dig);

y[1][i]=t*Math.sin(i*dig);

}

// 生成一个六瓣花型图案的数据

for (var i=0;i<=128;i++)

{

d=35*Math.sqrt(Math.abs(Math.cos(3*i*dig)));

t=d+10*Math.sqrt(Math.abs(Math.cos(9*i*dig)));

x[2][i]=t*Math.cos(i*dig)*1.2;

y[2][i]=t*Math.sin(i*dig);

}

initGraph();

function seleShape()

{

sele=document.frm.shape.selectedIndex-1;

drawBase('myCanvas');

}

function drawBase(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,800,500);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

var dig=Math.PI/64;

var w=100;

// 在水平一行中绘制8个基本花型图案

for (n=1;n<=8;n++)

{

px=(2*n-1)/2*w;

for (i=0;i<=128;i++)

{

x1=px+x[sele][i];

y1=w/2-y[sele][i];

if (i==0)

{

context.moveTo(x1,y1);

bx=x1; by=y1;

}

else

context.lineTo(x1,y1);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

function drawRound(id,k)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

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

context.fillStyle="#EEEEFF";

context.fillRect(0,0,800,500);

context.fillStyle="yellow";

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath();

var dig=Math.PI/64;

w=80; l=10;

// 进行多重环形变换

for (m=1;m<=k;m++)

for (n=1;n<=10;n++)

for (var i=0;i<=128;i++)

{

px=(2*n-1)/2*w;

py=(2*m-1)/2*w;

x1=px+x[sele][i];

y1=py-y[sele][i];

th=2*Math.PI*(w*10-x1)/(w*10);

x2=(l+y1)*Math.cos(th)+400;

y2=(l+y1)*Math.sin(th)+250;

if (i==0)

{

context.moveTo(x2,y2);

bx=x2; by=y2;

}

else

context.lineTo(x2,y2);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<body>

<form name="frm">基本图案选择：

</select>

</form>

<button onClick="drawRound('myCanvas',2);">二重环形变换</button>  

<button onClick="drawRound('myCanvas',3);">三重环形变换</button>

<canvas id="myCanvas" width="800" height="500">您的浏览器不支持canvas！</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“基本图案选择”下拉列表框，提供三种基本图案的选择，还有“环形变换”、“二重环形变换”、“三重环形变换”这三个命令按钮。选定“基本图案”后，单击某个按钮，绘制出基本图案的相应环形变换图案。整个演示过程录屏后展示如图8所示。

图8 可选择图案的环形变换