今更ながらCreateJSで、複数の点を滑らかな曲線でつなぐ
複数の点と点を、quadraticCurveToを使って単純につなぐと、つなぎ目が滑らかにならない。
線分の中点を取り、中点同士をつないでやるとなめらかな曲線が描ける。
■右に20ピクセル移動しながら、上下ランダムに10個の点を作成。
- 点同士を直接つながず、線の中点同士をつなぐ
- 各点はコントロールポイントとする
- 中点とコントロールポイントの点を分かりやすくするためCircleを描く
var stage = new createjs.Stage("mcanvas");
var shp = new createjs.Shape();
stage.addChild(shp);
shp.graphics.beginStroke('#555');
function curve01 (st_x, st_y, ct_x, ct_y, ed_x, ed_y) {
shp.graphics.beginStroke('#555');
shp.graphics.moveTo(st_x,st_y);
shp.graphics.quadraticCurveTo(ct_x,ct_y,ed_x,ed_y);
}
//変数初期化
var off_x = 20;
var off_y = 50;
var base_x = 50;
var base_y = 100;
var vec_y = -1;
var nx = 0;
var ny1 = 0;
var ny2 = 0;
//最初の開始点
var old_cx = 40;
var old_cy = 100;
//最初の終了点
var old_ex = nx + base_x;
var old_ey = base_y + ( off_y * vec_y ) + ( Math.random() * 60 );
for(var i = 0; i < 10; i++ ) {
//1点目
var sx = old_ex;
var sy = old_ey;
shp.graphics.beginStroke('#00FF00');
shp.graphics.drawCircle(sx, sy, 5);
//2点目
nx += off_x; //ｘを増加
var ex = nx + base_x;
vec_y *= -1; //反転
var ey = base_y + ( off_y * vec_y ) + ( Math.random() * 60 );
shp.graphics.beginStroke('#0000FF');
shp.graphics.drawCircle(ex, ey, 5);
//中点求める
var cx = (ex + sx) / 2;
var cy = (ey + sy) / 2;
shp.graphics.beginStroke('#FF0000');
shp.graphics.drawCircle(cx, cy, 5);
//曲線描画
curve01(old_cx, old_cy, sx, sy, cx, cy);
old_ex = ex;
old_ey = ey;
old_cx = cx;
old_cy = cy;
}
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}