p5.js 연습 007. 장미 곡선(Rose curve)

이번에는 장미 곡선(Rose curve)으로 불리는 곡선족을 그려 보았다. 장미 곡선은 다음가 같은 매개변수 방정식으로 나타낼 수 있다.

$$\begin{array}{rl}x& =R\cos \left(\frac{n}{d}t\right)\cos (t)\\ y& =R\sin \left(\frac{n}{d}t\right)\sin (t)\end{array}$$

$k=\frac{n}{d}$라 할 때, $k$가 짝수이면 $2k$개의 꽃잎이, $k$가 홀수이면 $k$개의 꽃잎이 그려지는 모습을 확인할 수 있다. 또한 $k$가 유리수이면 이 곡선은 닫힌 곡선이 되고, $k$가 무리수이면 이 곡선은 절대 다시 시작점으로 돌아가지 않아 원 $x^2+y^2=R^2$을 가득 채우게 된다.

^[각주:1] 슬라이더를 움직인 후에는 꼭 왼쪽 아래에 Refresh 버튼을 눌러야 제대로 된 스파이로그래프를 볼 수 있다.

p5.js 코드 보기

var x, y; 
var t;
var n, d, k;
var Rose = [];
var nslider, dslider, button;

function setup() {
  createCanvas(640, 600);
  
  nslider = createSlider(1, 10, 3, 1);
  nslider.position(20, 20);
  dslider = createSlider(1, 10, 5, 1);
  dslider.position(20, 45);
  button = createButton("Refresh")
    button.position(20, 560);
  button.mousePressed(Refresh);
  t = 0;
}

function draw() {
  background(255);
  
  stroke(220);
  for (var i = 20; i < width; i += 40) {
    line(0, i, width, i);
    line(i, 0, i, height);
  }
  
  n = nslider.value();
  d = dslider.value();
  k = n/d;
  x = 240 * sin(k * t) * cos(t);
  y = 240 * sin(k * t) * sin(t);
  Rose.push(createVector(x,y));
  t += 0.1 / max(abs(k), 1);
  
  noStroke();
  fill(0);
  textSize(15);
  text("n = " + n, 28 + nslider.width, 17 + nslider.y);
  text("d = " + d, 28 + dslider.width, 17 + dslider.y);
  text("k = n/d = " + k, 30 + dslider.width, 41 + dslider.y);
  
  translate(width/2 + 20, height/2 + 40);  
  stroke(255, 0, 0);
  noFill();
  beginShape();
  for (var i = 0; i < Rose.length; i += 1) {
    vertex(Rose[i].x, Rose[i].y);
  }
  endShape();
}

function Refresh() {
  background(255);
  Rose = [];
  t = 0;
}

1. 아쉽게도 p5.js 상에서는 무리수 $k$값에 대한 곡선의 모습을 확인하는 건 불가능하다. [본문으로]