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

フラクタル
Fractal

コッホ曲線

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

function setup() {
	const canvas=createCanvas(400, 400);
	frameRate(30);
}

let alpha=0;
p5.Vector.prototype.vertex=function(){vertex(this.x,this.y);}

function draw() {
	//グラデーション付背景の生成
	const c=[
		color(0,0,0),
		color(0,0,127)
	];
	const gradient=drawingContext.createLinearGradient(400,0,0,400);
	gradient.addColorStop(0.0, c[0]);
	gradient.addColorStop(0.5, c[1]);
	gradient.addColorStop(1.0, c[0]);
	drawingContext.fillStyle=gradient;
	noStroke();
	rect(0,0,400,400);

	//コッホ曲線の生成と描画
	const p=[
		new p5.Vector(80, 200-120/1.7),
		new p5.Vector(320, 200-120/1.7),
		new p5.Vector(200, 200+80*1.7)
	];
	stroke(255,255,255,alpha);
	strokeWeight(2);
	koch(p[0],p[1],0); //p[0],p[1]を端点とする線分に対して

	alpha=alpha>255?0:alpha+7;//曲線の不透明度を変更
}

function koch(p0, p4, level){
	const p1=p5.Vector.add(p5.Vector.mult(p0,0.67), p5.Vector.mult(p4,0.33));//1:2
	const p3=p5.Vector.add(p5.Vector.mult(p0,0.33), p5.Vector.mult(p4,0.67));//2:1
	const p2=p5.Vector.add(p1, p5.Vector.sub(p3,p1).rotate(-1.05));//p1にベクトルp3-p1を60°回転して加算
  
	if(level>0){
		koch(p0,p1, level-1);
		koch(p1,p2, level-1);
		koch(p2,p3, level-1);
		koch(p3,p4, level-1);
	}else{
		beginShape();
		p0.vertex();
		p1.vertex();
		p2.vertex();
		p3.vertex();
		p4.vertex();
		endShape();
	}
}

Lesson

プログラムを修正してコッホ雪片を作成してみましょう。

【事後学習】本日学んだ内容を再確認しておきましょう。

This site is powered by