Teachers open the door but You must enter by yourself.

Open Media Lab.
オープンメディアラボ

【事前学習】 前回までの内容を再確認しておきましょう。

媒介変数表示(演習)
Prametric Representation Ex

曲線の $x$ 座標および $y$ 座標がパラメータ変数で表される曲線はプログラムを用いれば容易に描画することができます。

サイクロイド

$\begin{eqnarray} \left\{ \begin{array}{l} x=t- \sin t \\ y=1- \cos t \end{array} \right. \end{eqnarray}$


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

function setup(){
	createCanvas(400, 400, WEBGL); //描画キャンパスを横400px,縦400px
}

let tEnd=-6.3;

function draw(){
	const s=7;
	ortho(-s, s, s, -s); //2次元座標系を上下反転してx,y共に(-7~7)に設定
	background(234); //背景を薄いグレーで塗りつぶし
	
	noFill(); //塗りつぶしなし
	stroke(0); //線の色を黒に設定
	strokeWeight(1); //線の太さを1に設定
	line(-s,0, s,0); //(-7,0)~(7,0)に線分を描画
	line(0,-s, 0,s);
	
	stroke(0,0,255); //線の色を青に設定
	strokeWeight(3); //線の太さを3に設定
	
	beginShape();
	for(let t=-6.3; t<=tEnd; t+=0.1){ //tが角度(ー2π~2πラジアン)
		vertex(t-sin(t),1-cos(t));
	}
	endShape();

	tEnd+=0.1;
	if(tEnd>6.3) tEnd=-6.3;
}

Lesson

以下の方程式で表される図形を描画せよ。


  1. $\begin{eqnarray} \left\{ \begin{array}{l} x=t- 0.7\sin t \\ y=1- 0.7\cos t \end{array} \right. \end{eqnarray}$
  2. $\begin{eqnarray} \left\{ \begin{array}{l} x=4 \cos t - \cos{4t} \\ y=4 \sin t - \sin{4t} \end{array} \right. \end{eqnarray}$
  3. $\begin{eqnarray} \left\{ \begin{array}{l} x=\frac{5 \cos t}{1+\sin^2 t} \\ y=\frac{5 \sin t \cos t}{1+\sin^2 t} \end{array} \right. \end{eqnarray}$

※ 描画領域、 $t$ の範囲、間隔は適当となるよう設定してください。

極座標

横方向および縦方向の位置を $x$ 座標および $y$ 座標を使って表す直交座標に対して、原点からの距離 $r$ および $x$ 軸からの偏角 $\theta$ を使って表す(平面上の)極座標について学びます。極座標での方程式は直感的にその図形をイメージするのが困難なものもありますが、プログラムで容易に描画することができます。

直交座標と極座標の変換

$\begin{eqnarray} \left\{ \begin{array}{l} x=r \cos \theta \\ y=r \sin \theta \end{array} \right. \end{eqnarray}$   $\begin{eqnarray} \left\{ \begin{array}{l} r=\sqrt{x^2+y^2} \\ \theta =\arctan \frac{y}{x}\ (\tan \theta=\frac{y}{x}) \end{array} \right. \end{eqnarray}$

極座標で表された円

$\begin{eqnarray} \left\{ \begin{array}{l} r=5 \\ 0 \leq \theta \leq 2\pi \end{array} \right. \end{eqnarray}$

function setup(){
	createCanvas(400, 400, WEBGL);
}

let tEnd=0;

function draw(){
	const s=7;
	ortho(-s, s, s, -s);
	background(234);
	
	noFill();
	stroke(0);
	strokeWeight(1);
	line(-s,0, s,0);
	line(0,-s, 0,s);
	
	stroke(0,0,255);
	strokeWeight(3);

	beginShape();
	for(let t=0;t<=tEnd;t+=0.1){//tが角度(0~2πラジアン)
		const r=5;
		vertex(r*cos(t),r*sin(t));
	}
	endShape();

	tEnd+=0.05;
	if(tEnd>6.3) tEnd=0;
}

Lesson

以下の極座標の方程式で表される図形を描画せよ。


  1. $r=\frac{2}{1-\sin\theta}\ (\frac{\pi}{2}<\theta<\frac{5\pi}{2})$
    $(r=r\sin\theta+2,\quad r=y+2)$
  2. $r=\frac{5}{2-\cos\theta}$
  3. $r=\theta$
  4. $r=5\sin{3\theta}$
  5. $r=3(1+\cos\theta)$

※ 描画領域、 $\theta$ の範囲、間隔は適当となるよう設定してください。

Answer


1.放物線
for(let t=0; t<=6.3; t+=0.1){
	const r=2/(1-sin(t));
	vertex(r*cos(t),r*sin(t));
}

2.
for(let t=0; t<=6.3; t+=0.1){
	const r=5/(2-cos(t));
	vertex(r*cos(t),r*sin(t));
}
  
3.
for(let t=0; t<=6.3; t+=0.1){
	const r=t;
	vertex(r*cos(t),r*sin(t));
}

4.正葉曲線(バラ曲線)
for(let t=0; t<=6.3; t+=0.1){
	const r=5*sin(3*t);
	vertex(r*cos(t),r*sin(t));
}

5.カージオイド(心臓形)
for(let t=0; t<=6.3; t+=0.1){
	const r=3*(1+cos(t));
	vertex(r*cos(t),r*sin(t));
}

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

This site is powered by Powered by MathJax