Silverback9

오늘은 Dragon을 펼쳐 보겠습니다~~~!!! YEAH~~~!!!

할 수 있어요!!! 그럼요! 우린 할 수 있어요!!!

차근차근 한 발짝 한 발짝!!!

그래서!!! 오늘은~~^^*

태초에 첫 번째 segment가 있었는데~~^^*

우리가 마우스를 클릭하면~~^^*

90도 회전을 하면서~~^^*

segment가 하나 더 늘어나는~~^^*

첫 번째 펼침을 시도해 보겠습니다!

할 수 있어요!!! 그럼요! 우린 할 수 있어요!!!

벡터의 방향에 대해 다시 한 번 이해를 새롭게 하는 좋은 복습의 기회도 될 것 같아요~~^^*

벡터 A에서 벡터 B를 빼면 벡터 B에서 벡터 A로 향하는 방향이 생기고~~^^*

동일한 방향을 가진 두 벡터를 더하면 두 벡터의 길이의 합의 크기를 가진 새로운 벡터가 생기고~~^^*

네~~^^* 벡터 뺄셈과 벡터 덧셈을 이용하겠습니다~~^^*

그리고~~^^* 회전각은 90도로 해 보겠습니다.

먼저 우리 손그림을 함께 볼까요~~^^*

첫 segment는 벡터 A와 벡터 B를 잇는 선입니다. 벡터 B를 origin으로 하여 90도 회전하여 새로운 segment를 만들어 보겠습니다.

그럼 이 과정을 코드로 정리해 볼까요~~^^*

rotate(origin) {
    let va = p5.Vector.sub(this.a, origin);
    let vb = p5.Vector.sub(this.b, origin);
    va.rotate(-PI/2);
    vb.rotate(-PI/2);
    let newA = p5.Vector.add(origin, va);
    let newB = p5.Vector.add(origin, vb);
    let newS = new Segment(newA, newB);
    return newS;
  }

자 그럼 이제~^^*

플레이 버튼을 누르면, 태초에 벡터 A와 벡터 B을 잇는 첫 번째 segment가 보이고~^^*

마우스를 클릭하면, 벡터 B를 origin으로 삼아 90도 회전하여 두 번째 segment가 나타나는~^^*

Unfolding Dragon Curve 첫 단계의 전체 코드를 우리 함께 살펴 볼까요~~^^*

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);
  }
  
  rotate(origin) {
    let va = p5.Vector.sub(this.a, origin);
    //벡터 Origin에서 벡터 A로 향하는 벡터 va입니다.
    
    let vb = p5.Vector.sub(this.b, origin);
    //벡터 Origin에서 벡터 B향하는 벡터 vb입니다. 
    //이 프로그램에서 벡터 Origin은 벡터 B와 동일할 것입니다.
    //그래서 동일 벡터 뺄셈의 결과인 벡터 vb의 크기는 0가 될 것입니다.
    
    va.rotate(-PI/2);
    vb.rotate(-PI/2);
    //반시계방향 90도 회전하겠습니다.
    //두 벡터의 방향은 일치합니다.
    
    let newA = p5.Vector.add(origin, va);
    //크기(0 + va = va)인 새로운 벡터 newA입니다.
    
    let newB = p5.Vector.add(origin, vb);
    //크기(0 + 0 = 0)인 새로운 벡터 newB입니다. 
    //원래 B의 위치 그대로입니다. 
    
    let newS = new Segment(newA, newB);
    //newA와 newB를 잇는 선 newS입니다. 
    
    return newS;
  }
}

let segments = [ ];

function mousePressed() {
  let s = segments[0];
  let newS = s.rotate(s.b);
  segments.push(newS);
  //b를 origin으로 하여 90도 회전하여 생긴 새로운 segment를 배열 segments[]에 저장합니다. 
}

function setup(){

  createCanvas(400, 400);
  
  let a = createVector(200, 200);
  let b = createVector(200, 100);

  segments.push(new Segment(a, b));
}
//벡터 a와 b을 생성하여, 클래스 Segment의 시작점과 끝점으로 삼습니다. 
//생성된 클래스 Segment를 배열 segments의 구성요소로 넣습니다.

function draw(){

  background(220);

  for (let s of segments) {
    s.show();
  } 
} 
//클래스 Segment를 저장한 배열 segments의 구성요소인 모든 s들을 보여줍니다. 
//어제는 벡터 a와 b를 시작점과 끝점으로 가진 segments[0]만 보여주었는데요.
//오늘은 90도 회전하여 생긴 segments[1]도 보여줄 수 있게 되었어요!
//unfolding 첫 단계 성공!

마우스를 클릭하여 Drgon Curve를 한 단계 펼쳐 볼까요~~^^*

/https://editor.p5js.org/aralee470/sketches/d2rZ0dLli

오늘 저와 함께 용의 날개 깃털을 2개로 늘려 주셔서 감사합니다~^^*

오늘 날개 깃털 하나를 펼쳐 내었으니 내일은 먼 곳까지 우리 함께 날아오를까요~^^*

겨울 찬바람이 불고 있어요~^^* 따뜻한 가슴 뜨거운 희망으로 멋지게 우리 겨울을 즐겨볼까요~~^^*

우리가 지금 있는 곳에서 지구를 품으면, 그 곳이 어느 곳이든, 바로 그 곳에 여름 꽃 무궁화 꽃이 피어나는 멋진 겨울이 될 것 같아요~^^*

가슴 속 작은 촛불이 화톳불로 더욱 싱싱하게 자라나는 겨울이 왔습니다!

오늘 하루도 지구를 핫팩 삼아 가슴에 품고~^^*

점심 맛있게 드시고요!

멋진 하루 보내시고요!

따뜻하게 코~ 주무시고요!

내일은 우리 노래 편안하게 듣고요!

화요일엔 더 멀리 함께 날아보면 좋겠어요~~^^*

네~!!! 꿈은 이루어 집니다~!!!