【事前学習】モデリングの単元の復習をしてきてください。

パラメトリック曲線
Parametric Curve

ベジェ曲線（H16前期３級１問）

p5.js Web Editor で実行してみましょう。

function setup() {
	const canvas=createCanvas(400, 400, WEBGL);
	noLoop();
}

p5.Vector.prototype.vertex=function(){vertex(this.x,this.y);}
p5.Vector.prototype.circle=function(){circle(this.x,this.y, 0.1);}

const p=[
	new p5.Vector(0.7, 1.3),
	new p5.Vector(0, 4.6),
	new p5.Vector(2.5, 5),
	new p5.Vector(2.5, 3.3),
	new p5.Vector(2.5, 0.3),
	new p5.Vector(3.5, 0),
	new p5.Vector(3.8, 1.4)
];

function draw() {
	ortho(-0.1, 5, 0.1, -5);
	background(255);
	
	stroke(0);//座標軸を黒で描く
	line(-5,0, 5,0);
	line(0,-5, 0,5);
	
	stroke(255, 127, 127);//制御点を赤の線分で描く
	beginShape();
	p.forEach(pi => pi.vertex());
	//for(let i=0; i pi.circle());
	
	stroke(0);//ベジェ曲線を描く
    noFill();
  	beginShape();
	for(let t=0; t< 1.01; t+=0.2){
      const s=1-t;
      p5.Vector.mult(p[0],s*s*s)
        .add(p5.Vector.mult(p[1],3*s*s*t))
        .add(p5.Vector.mult(p[2],3*s*t*t))
        .add(p5.Vector.mult(p[3],t*t*t))
        .vertex();
 	}
	endShape();
	
	/*以下と同じ*/
	beginShape();
	for(let t=0; t< 1.01; t+=0.2){
		const s=1-t;
		vertex(
			s*s*s*p[0].x+3*s*s*t*p[1].x+3*s*t*t*p[2].x+t*t*t*p[3].x,
			s*s*s*p[0].y+3*s*s*t*p[1].y+3*s*t*t*p[2].y+t*t*t*p[3].y
		);
	}
	endShape();
}

function mouseDragged() {
	const m=new p5.Vector(mouseX/80, (400-mouseY)/80);
	p[0]=m;
	redraw();
}

Lesson

ベジェ曲線の左下の部分（２セグメント目）も描いてみましょう。

【事後学習課題】
マウスポインターから最も近い頂点（制御点）をドラッグ操作で移動できるようにしてみましょう。

【事後学習】

This site is powered by