正三角形運算規則下的圖形編程

之前我們講了使用一些數字,配上+和-,可以表示更多的數字。

正三角形運算規則下的圖形編程

但是+和-只是2種運算規則,如果我們使用3種運算規則,會有什麼情況發生呢?


下面,我定義了一個正三角形運算規則。


大家可以想象一個正三角形,或者一個三叉星(奔馳車LOGO)


①0代表什麼都沒發生


②-1代表向左下


③1代表向右下


④2代表向上


現在我們隨便輸入一些數字,讓它們使用上面的任一規則,看最後會發生什麼?


OK,我們預設了這幾組數字。

第一組:1、2、3、4

第二組:2、2、5、5

第三組:1、2、4、6

第四組:3、3、4、4

第五組:3、4、5、6


現在開始:


第一組:

正三角形運算規則下的圖形編程

第二組:

正三角形運算規則下的圖形編程

第三組:

正三角形運算規則下的圖形編程

第四組:

正三角形運算規則下的圖形編程

第五組:

正三角形運算規則下的圖形編程

你們一會兒可以複製代碼,自己玩,理論上可以有無限多的組合。


(新建一個文本文檔,複製下面的代碼,然後保存退出,把文件名後綴改成.html,用瀏覽器打開,就可以執行程序了)


代碼如下:



輸入數字:


<button>確定/<button>


<canvas>



function p(a,b,c,d){


var i=1;

var r=20;

var s=20;

var x0=700;

var y0=800;


var br=document.createElement("br");

document.body.appendChild(br);


var v=document.getElementById("myCanvas");

var cxt=v.getContext("2d");


cxt.arc(x0, y0, r, 0, Math.PI * 2, true);

cxt.fill();


for(x1=-1;x1<3;x1++){

for(x2=-1;x2<3;x2++){

for(x3=-1;x3<3;x3++){

for(x4=-1;x4<3;x4++){


var x=x0

+(

(x1%2)*Math.sqrt(3)*a+

(x2%2)*Math.sqrt(3)*b+

(x3%2)*Math.sqrt(3)*c+

(x4%2)*Math.sqrt(3)*d

)*s;


var y=y0

+(

(Math.abs(x1)-parseInt(x1/2)*4)*a+

(Math.abs(x2)-parseInt(x2/2)*4)*b+

(Math.abs(x3)-parseInt(x3/2)*4)*c+

(Math.abs(x4)-parseInt(x4/2)*4)*d

)*s;


cxt.beginPath();

cxt.fillStyle ="#000000";

cxt.arc(x, y, r, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

}

}

}

}

}



分享到:


相關文章: