bezier()：3次ベジェ曲線を描く

説明

3次ベジェ曲線を描画します。パラメーターは「開始点(x1,y1)」「制御点1(x2,y2)」「制御点2(x3,y3)」「終了点(x4,y4)」と色を指定します。精度を落としても速く描画させたい場合はt=t+1;をt=t+2;にしてください。

[以下のJavaScriptプログラムをダウンロード]

[もう1つのサンプルプログラムをダウンロード]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 3-Bezier(x1,y1,x2,y2,x3,y3,x4,y4,color)
function bezier(x1,y1,x2,y2,x3,y3,x4,y4,c){
  var t=0,ox=x1,oy=y1,x,y;
  while(t<=10){
    var tt=10-t;
    x=tt*tt*tt*x1+3*tt*tt*t*x2+3*tt*t*t*x3+t*t*t*x4;
    y=tt*tt*tt*y1+3*tt*tt*t*y2+3*tt*t*t*y3+t*t*t*y4;
    x=x/1000;
    y=y/1000;
    uart(128,8,1,ox,oy,x,y,c);
    ox=x;oy=y;
    t=t+1;
  }
}
// Sample Code
uart("\nPC CLEAR 00\n");
bezier(0,0, 20,40, 60,40, 79,0, 2);
bezier(0,44, 40,0, 50,40, 79,0, 8);
bezier(79,44, 30,40, 10,30,50,0, 15);

目次に戻る