Silverback9

#야생으로

Creative Coding 독학 제040일 2024년05월06일(월)

오늘은 드디어 Levy Flight를 프로그램으로 만들어 보겠습니다. 주요한 점은

하나. 이동 후 상태를 나타내는 pos 벡터가 이동 전 상태를 나타내는 prev 벡터에게 상태정보를 물려준 후 이동을 하는 거예요.

둘. 이동 후 상태를 나타내는 pos 벡터와 이동 후 상태를 나타내는 prev 벡터의 x, y 좌표를 연결하여 이동거리와 방향을 시각적으로 표현해요.

셋. 이동할 거리와 방향을 나타내는 step 벡터는 0.01 확률로 먼 거리를 그리고 99.99 확률로 짧은 거리를 이동하기 위한 무작위 값을 받아요.

넷. 이동할 거리와 방향을 나타내는 step 벡터를 이동 후 상태를 나타내는 pos 벡터에 더해서, 실제적인 이동을 이루어 내어요.

아래 동영상을 클릭하시면 오늘 공부내용을 시작(10:39)하실 수 있어요~^^* 자세한 내용은 코드 안의 주석을 살펴 보셔도 좋겠지요~^^*

var pos;
// 새의 이동 후 상태를 표현하게 될 것입니다.

var prev;
// 새의 이동 전 상태를 표현하게 될 것입니다.
// 프로그램 맨 처음에는 pos와 prev가 같은 상태값을 가집니다. 그러나, 새가 앞으로 지속적으로 이동함에 따라, pos 벡터는 이동 후의 상태값을 새롭게 표현하게 되고,  prev 벡터는 새의 이동 전 단계의 pos 벡터의 상태값을 물려받게 될 것입니다. 
// 벡터 pos의 x, y 좌표와 벡터 prev의 x, y 좌표를 연결하면 단계별 새의 이동방향과 거리를 시각적으로 표현할 수 있습니다. 

function setup() {
  createCanvas(400, 400);
  background(51);
  pos = createVector(200,200);
  
  prev = pos.copy();
  //벡터 pos를 복사하여 변수 prev에 저장합니다. 
  
  console.log(pos);
}

function draw() {
  stroke(255);
  strokeWeight(2);
  
  line(pos.x, pos.y, prev.x, prev.y);
  //새의 이동 후 상태를 표현하는 벡터 pos의 x,y좌표와 이동 전 상태를 표현하는 벡터 prev의 x,y 좌표를 선으로 연결합니다.얼마의 거리만큼 어느 방향으로 이동했는지 시각적으로 표현합니다. 
  
  prev.set(pos);
  //새의 이동 후 상태를 표현하는 벡터 pos를 새의 이동 전 상태를 표현하는 벡터 prev에 저장합니다. 현재 시점의 벡터 pos의 정보를 벡터 prev가 물려받게 되는 것입니다.  
 
  
  var step = p5.Vector.random2D();
 //무작위 방향의 단위 벡터(길이값 1)를 생성하여 변수 step에 저장합니다. 벡터 step은 다음 단계 이동방향과 이동거리를 나타내게 될 것 입니다.  
  
  var r = random(100);
  //0에서 99.999999....사이의 무작위 수를 생성하여 변수 r에 저장합니다.
  
  if(r < 1){
  //0에서 99.99999...사이의 실수들이 무작위로 나오는데, 그 값이 0에서 0.99999... 사이일 확률은 1/100 즉 0.01입니다. 새들이 현재위치 근처에서 주로 시간을 보내다 아주 아주 가끔 먼 곳으로 날아가는 것을 표현하기 위해, 먼 곳으로 날아갈 확률을 0.01로 설정하여 봅시다.  
  
    step.mult(random(25,100));
  //25에서 100 사이의 이동할 거리값을 무작위로 받아 단위 벡터인 step의 길이값에 곱합니다.좀처럼 멀리 안날지만 일단 한 번 멀리 날게 되면 25에서 100 사이의 거리만큼이나 훨훨 날게 되겠지요.    
 
  } else{
  //확률  0.99는, 즉, 대부분의 경우는 
    
    step.setMag(2);
  //이동할 거리 2를 단위 벡터인 step의 길이값에 곱합니다. 있던 곳 근처를 맴돌게 됩니다.      
  }
  
  pos.add(step);
  //이동할 거리와 방향을 나타내는 벡터 step을 벡터 pos에 더하여 실제적으로 새가 캔버스 위 좌표 이동을 합니다. 
   
}

이것을 클릭하여 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행하고 사각형을 눌러 종료해 보셔요. 실행과 종료를 반복해 보시면, Levy Flight의 다양한 모습을 보실 수도 있겠죠~^^* 갑자기 훨훨 날아가나요?

저는 만유인력의 법칙을 다루면서 왜 갑자기 새의 이동을 공부하게 되는 지 아리송했어요. 근데, 위치에 관한 단순 좌표 사용과 길이값과 뱡향값을 가진 벡터의 사용이 같은 효과를 가지는데, 왜 우리는 벡터를 사용하게 될까?를 생각하게 되었어요.

가만히 있는 물체도 사실은, 그것에 작용하는 수 많은 힘들의 균형에 의해서 가만히 있는 것이라서, 가만히 있는 물체도 잠재적 이동거리값과 방향값을 가진 벡터로 표현하게 되는 것인가? 나름 생각해 보았어요.

서로 끌어당기는 힘의 균형으로 서로 가만히 있는 것이라서, 모든 물체는 벡터 정보로 표현할 필요가 있는 것 같아요. 그래서, 만유인력을 공부하기에 앞서서, 같은 효과를 단순 좌표값으로 표현하기에 익숙했던 우리가 점차 벡터값으로 표현하는 것에 숙달되어 가기를 바라며, 이 과정을 중간에 넣으신 것일까? ‘만유벡터값’을 다시 한 번 상기하는 과정인가? 싶네요^^*

서로 떨어져 있어도 서로를 끌어당기는 힘찬 사랑의 힘으로 내일 우리 본격적으로 만유인력의 법칙을 공부해 볼까요~^^* 새처럼 알처럼 씩씩한 하루 보내요, 우리~^^*

오늘도 함께 공부해 주셔서 감사합니다~^^*

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

댓글 남기기