오늘부터 본격적으로 Unfolding Dragon Curve 코드를 만들어 보겠습니다~^^*
용의 멋진 자태를 천천히 펼쳐 보이는 멋진 광경을 우리 손으로~^^* YEAH~^^*
오늘은 첫 삽을 뜨는 날이네요~^^*
그래서! Dragon Curve의 기본 단위를 준비해 보는 공부를 해 보겠습니다~^^*
한 번 그려진 선을 다음 번에 회전을 해서 그대로 다시 그리고…그렇게 각진 선을 또 회전을 해서 그 전체를 다시 그리고….
선 하나씩 배열로 저장해서 처음부터 차례대로 다시 꺼내어 그리면 될 것 같기도 하네요^^*
(1) 시작점와 끝점을 가진 선을 클래스로 정의해 보겠습니다!
class Segment {
constructor(a, b) {
this.a = a;
this.b = b;
}
show(){
stroke(0);
strokeWeight(2);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
} (2) 클래스 Segment를 정의한 파일을 인덱스 파일에 포함시키겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
http://mark
http://sketch.js
</body>
</html>(3) 그리고 이 클래스 Segment를 구성요소로 가지는 배열을 준비해 보겠습니다!
let segments = [ ];(4) 클래스 Segment를 하나 생성해 보겠습니다!
function setup(){
createCanvas(400, 400);
let a = createVector(200, 100);
let b = createVector(200, 300);
segments.push(new Segment(a, b));
}
//벡터 a와 b을 생성하여, 클래스 Segment의 시작점과 끝점으로 삼습니다.
//생성된 클래스 Segment를 배열 segments의 구성요소로 넣습니다. (5) 생성된 클래스 Segment를 그려 보겠습니다!
function draw(){
background(220);
for (let s of segments) {
s.show();
}
}
//클래스 Segment를 저장한 배열 segments의 구성요소인 모든 s들을 보여줍니다.
//오늘은 벡터 a와 b를 시작점과 끝점으로 가진 segments[0]만 보여주겠네요^^* 클래스 만들기와 벡터 만들기 그리고 배열 만들어 사용하기 등을 새롭게 복습하며 Dragon Curve의 첫 선을 그려 보았습니다~^^*
뭔가 익숙하면서도 뭔가 많이 새로울…다시 시작하기 느낌~~^^* 편안하면서도 설레는 느낌~^^*
오늘 저와 함께 새로운 도전 첫 삽 뜨기를 함께 해 주셔서 감사합니다~~^^*
우리 내일은 회전과 클래스 Segment의 생성이 반복되며 신기한 모습을 보여주는 코드를 만들어 볼까요~~^^*
오늘도 멋진 아침! 멋진 하루 보내시고요!
내일 또 만나요~~^^*
네~~^^* 꿈은 이루어 집니다~~^^*
Silverback9 
댓글 남기기