Silverback9

오늘은 random walk을 벡터로 표현하는 것을 다시 살펴 보도록 할게요. 토요일 공부내용은 좌표값을 나타내는 변수를 사용하였고, 오늘 공부내용은 동일한 작용을 벡터로 표현하는 것이예요. 아래 동영상 강의를 클릭하셔서 10:35까지 보시면 되어요~^^*

먼저, 좌표값 변수를 사용했던 토요일 코드 부분을 모두 벡터 표현으로 바꾸어 볼게요~^^*

var pos;


function setup() {
  createCanvas(400, 400);
  background(51);
  
  pos = createVector(200,200);
  //x,y 좌표 (200,200)에 벡터를 생성하여 변수 pos에 저장합니다.
  console.log(pos);
  //벡터 pos의 좌표값을 console 창에 보여줍니다. 
}

function draw() {
  stroke(255);
  strokeWeight(2);
  point(pos.x, pos.y);
  //벡터 pos의 x,y 좌표를 점으로 표현합니다.
  
  var r = floor(random(4));
  
  switch (r){
    case 0:
      pos.x = pos.x + 1; //벡터 pos의 x좌표값을 1 증가시켜 오른쪽으로 한 픽셀 이동합니다.
      break;
      
  case 1:
      pos.x = pos.x - 1; //벡터 pos의 x좌표값을 1 감소시켜 왼쪽으로 한 픽셀 이동합니다. 
      break;
      
  case 2:
      pos.y = pos.y + 1;  //벡터 pos의 y좌표값을 1 증가시켜 아래쪽으로 한 픽셀 이동합니다.
      break;
      
  case 3:
      pos.y = pos.y - 1;  //벡터 pos의 y좌표값을 1 감소시켜 위쪽으로 한 픽셀 이동합니다.
      break;
  }
}

이것을 클릭하여 코드를 살펴 보셔요~ 삼각형을 눌러 프로그램을 실행시키고 콘솔창과 캔버스를 관찰해 보셔요. 종료는 사각형~^^*

이번에는 random()와 switch 구문의 조합 대신에, 무작위 좌표값을 가진 벡터를 생성하여 벡터 pos에 더하는 방법을 사용해 보도록 할게요.

var pos;


function setup() {
  createCanvas(400, 400);
  background(51);
  pos = createVector(200,200);
  console.log(pos);
}

function draw() {
  stroke(255);
  strokeWeight(2);
  point(pos.x, pos.y);
  
  var step = p5.Vector.random2D();
  pos.add(step);
  //무작위 좌표값을 가진 벡터를 생성하여 변수 step에 저장하고, 벡터 pos에 벡터 step을 더합니다.   
 
}

이것을 클릭하여 코드를 살펴 보시고, 삼각형을 눌러 프로그램 실행하고 사각형을 눌러 종료해 보셔요~^^* 코드는 훨씬 짧아졌지만 같은 효과를 내고 있는 것이 보이나요^^*?

와우! 단 두 줄의 문장으로 같은 효과를 내는 것이 신기하네요. 작은 배우는 있어도 작은 역할은 없다고 하시며, 아주 짧은 대사이지만 표현하고자 하는 상황을 진실되게 드러내는 배우는 그 영화에 큰 임팩트를 남기게 된다고 연기 지도를 해 주시는 톰 행크스 배우님의 말씀과도 일맥상통하는 프로그램인 것 같아요! 근데 이 연기 수업 마지막에 깜짝 선물이 있어요! Guess what~~~^^*!

깜짝 선물도 반가우셨나요~^^* 어린이날 선물이예요~^^*

내일은 이제 Levi Flight를 프로그램으로 표현해 보도록 해요, 우리~^^*

태풍이 멈추었네요~^^* 잔잔하고 편안한 오후 보내시구요~^^* 내일 또 우리 만나요~^^*

넵, 꿈은 이루어 집니다~~!!!