 | |
|
생명체
우리가 만들 생명체는 매우 간단하다. 하지만 그것들의 행동과 속성은 매우 잘 정의되어 있다. 그 행동들과 속성들을 살펴보자.
생명체가 진화하는 방법
생명체는 각각 자신만의 크기, 색, 속도를 갖고 있다. 맨 처음 두 개는 환경의 무작위 위치에 하나, 그리고 나머지는 정 중앙에 위치한다.
두 생명체가 "교배"를 할 만큼 가까운 위치(정의 하자면 하나의 정 중앙이 다른 것의 외각에 접하는 위치)에 있게 되면, 그들은 새로운 생명체를 만들어낸다. 새 생명체의 속성을 정하기 위해, 원래 두 개의 값의 하단과 상단에 15%를 추가한 범위 내에서 무작위 값을 취하게 된다. 이런 방법으로 우리는 예전 것들과 비슷하지만 같지는 않은 생명체를 탄생시킨다. 또한 기존 두 개의 값을 벗어나는 값을 가질 수 있도록 함으로써 새로운 생명체가 전혀 다른 방향으로 진화할 수 있는 가능성을 열어 두었다.
흥미롭게도, 자연 선택의 기본을 살펴볼 것이다. 일정 시간이 지난 다음에 생명체를 "죽여서 없앨" 것이기 때문에, 다른 것들보다 우월한 속성을 가진 개체들을 파악할 수 있다.
그런데 이 모든 것을 어떻게 코드로 표현할까?
뒤에서 벌어지는 일
프로그래밍 측면에서, 우리는 고려해야 할 몇 가지 이슈에 대해 생각해 봐야 한다.
먼저 우리는 생명체와 그것들 자신에 대해 생각해야 한다. 모든 생명체가 기본 템플릿을 따르기 때문에 객체 지향 프로그래밍을 사용하기에 완벽한 기회다. 그것들은 모두 Creature 클래스의 인스턴스지만 각자 속성 값이 다르다. 따라서 Creature 클래스를 만들고 그것의 move() 와 breed() 같은 메서드와 size와 color 같은 속성을 정의하는 것부터 시작하겠다.
생명체를 갖고 있다면, 그들을 어떻게 추적할 지 생각해야 한다. 모든 생명체를 갖고 있는 간단한 배열을 만들 수도 있지만, 생명체가 움직일 때마다 다른 생명체와 가까이 있는지 확인해야 한다. 우리는 어떤 것이 다른 것과 교배를 할 만큼 가까이에 있는지 알고 싶다. 이것들은 인지할 수 있는 감각적인 생명체들이 아니기 때문에 그들의 좌표를 편리한 방법으로 관리해야 한다. 우리는 2차 배열을 사용해 그렇게 하겠다.
생명체 하나를 만들면서 시작해 보자.
생명체 하나 만들기
클래스나 그 밖의 것을 생각하기 전에 클래스에 포함되어야 할 속성으로 알고 있는 것들을 사용해 하나의 생명체를 직접 만들어 보는 것이 많은 도움이 된다. 아래 코드를 environment.html 파일에 추가한다.
Listing 4. 생명체 하나 만들기
...
<div id="environment" style="float: right; width: 600px;
height: 500px; border: 3px solid black;position:
relative;">
<div id="creature1" style="position: absolute;
left: 200px; top: 300px;
border: 2px solid red;
height: 100px; width: 100px;
background-color: rgb(0, 0, 255);"></div>
</div>
|
하나의 div를 <200, 300> 좌표에 빨간색 테두리로 만들었다. 이 사각형은 100픽셀 사각형이고 중앙은 파란색으로 되어 있다. 페이지를 저장하고 브라우저를 다시 읽어 들이면, 그림 14와 같은 것을 보게 될 것이다.
그림 14. 직접 만든 생명체
이제 우리의 생명체가 어떤 속성들을 갖고 있을지 알게 됐다. 테두리와 절대 좌표와 같은 속성은 변하지 않겠지만 우리는 그들을 추적하기 위한 클래스가 필요하다.
기본 자바스크립트 클래스
새로운 클래스 파일을 만들려면 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 New > File를 클릭한다. 파일 이름을 Creature.js라고 하고 Finish를 클릭한다. 그리고 아래 코드를 추가한다.
Listing 5. 기본적인 생명체 클래스
function Creature(){
this.x = 30;
this.y = 50;
this.colorRed=0;
this.colorGreen=0;
this.colorBlue=0;
this.xspeed = 2;
this.yspeed = 3;
this.size = 20;
this.status = 1;
this.maxage = 500;
this.currentAge = 0;
this.id = "thisId";
this.bouncex = function(){ alert("Bounce X!"); };
this.bouncey = function(){ alert("Bounce Y!"); };
this.die = function(){ alert("Killing this creature."); }
this.move = function (){ alert("Moving..."); };
this.renderAt = function(xpos, ypos){ alert("Rendering..." };
this.createAt = function(idString, gridIdx, xpos, ypos, theSize,
redLevel, greenLevel, blueLevel,
xspeedLevel, yspeedLevel){
alert("Creating creature.");
}
this.breedWith = function(otherCreature){
alert("Making new creature.");
}
this.checkForPartner = function(){ alert("Checking..."); }
}
|
이 코드는 상당히 간단한 자바스크립트 클래스다. 크기와 현재 속도 같은 개별 객체에 대한 정보를 저장하기 위한 속성들을 포함하고 있다. 색을 세 개의 컴포넌트로 나눠 객체가 교배를 할 때 새로운 색을 판단하기 쉽도록 하였다.
메서드 역시 갖고 있다. 자바스크립트 안에 함수라고 부르지만 동적으로 메서드를 정의할 수 있는 이런 방법은 매우 유용할 수 있다. 앞으로 사용할 메서드를 위해 임시 구현을 추가했다.
하지만 이것은 독자들에게 넘겨주기에는 상당히 많은 코드이고 여기에는 숨어있는 문제가 몇 가지 있다.
JSEclipse 코드 확인
바로 확인해 보자. 코드에 에러가 있다면, JSEclipse는 그것을 아래에 보이는 것처럼 알려줄 것이다.
그림 15. JSEclipse에서 에러 확인
일반적인 이클립스 프로그래밍처럼 에러, 에러 메시지 그리고 에러가 발생한 위치에서 빠른 보기를 확인할 수 있다. 브라우저에서 찾으려고 고생하는 일은 더 이상 벌어지지 않을 것이다.
에러가 일단 검출되면, 함수를 접거나 정의 부분을 그냥 펼쳐 모든 코드를 볼 수 있다. 이 기능 덕분에 긴 프로그램을 디버깅하기가 쉬워졌다.
계속해서 이 클래스를 갖고 새로운 생명체를 만들어 보자.
콘텐츠 어시스트와 정의 찾기 사용하기
JSEclipse가 빛을 발하는 기능은 가용한 메서드와 속성을 보여주는 도움말 보여주기다. 예를 들어, Listing 6의 코드를 타이핑하기 원한다면 JSEclipse가 가용한 옵션을 자동으로 제공한다.
Listing 6. JSEcliipse는 가용한 메서드와 옵션을 보여준다.
theCreature1 = new Creature();
theCreature1.
|
그림 16. 콘텐츠 어시스트 사용하기
이 메뉴는 자동으로 뜨거나, Ctrl+Space를 사용해 "강제"로 사용할 수 있다..
JSEclipse는 또한 다른 방향으로 이동하여 특정 클래스나 메서드의 구현 부분을 찾기 쉽도록 도와준다. 예를 들어, Listing 7을 타이핑한 뒤에, 커서를 createAt() 위에 올려놓고, 아래 보이는 것처럼 마우스 오른쪽 버튼으로 클릭을 하여 Open Declaration을 선택할 수 있다.
Listing 7. 특정 클래스나 메서드의 구현부를 찾는 것을 보여줄 코드를 타이핑하기.
theCreature1 = new Creature();
theCreature1.createAt()
|
그림 17. 선언부 열기
이 경우에는 Creature.js 같이 클래스 이름과 동일한 이름의 파일이 있다는 가정 하에, 클래스의 정의 부분을 열었고, 개별 메서드의 경우에는 커서를 메서드에 두면 된다.
이런 이동을 계속하는 것은, 클래스 정의 내부(또는 어떤 정의 부분이든 상관없이)에서는 무의미할 수 있다. 오른쪽 컬럼에 있는 코드 아웃라인을 사용해 바로 이동할 수 있기 때문이다.
그림 18. 파일 내부에서 이동하기
이제 원하는 것을 어떻게 찾을지 알았을 것이므로 계속해서 그 정보를 이용해 보자.
자바스크립트로 생명체 만들기
지금 단지 우리가 속성 꾸러미를 갖고 있다고 해서 모든 것을 볼 수 있지는 않다. 생명체를 진짜로 만들려면 div를 그 속성들로 만든 다음에 환경에 추가해야 한다. 다음 코드를 Creature.js 파일에 추가하기 바란다.
Listing 8. 생명체 만들기
...
this.createAt = function(idString, gridIdx, xpos, ypos, theSize,
redLevel, greenLevel, blueLevel,
xspeedLevel, yspeedLevel){
this.id = idString;
this.gridIndex = gridIdx;
this.x = xpos;
this.y = ypos;
this.size = theSize;
this.colorRed = redLevel;
this.colorGreen = greenLevel;
this.colorBlue = blueLevel;
this.xspeed = xspeedLevel;
this.yspeed = yspeedLevel;
theDiv = document.createElement('div');
theDiv.setAttribute('id',this.id);
theEnv = document.getElementById("environment");
theEnv.appendChild(theDiv);
theDiv = document.getElementById(this.id);
theDiv.style.position="absolute";
theDiv.style.left= this.x+"px";
theDiv.style.top= this.y+"px";
theDiv.style.border="2px solid red";
theDiv.style.height=this.size;
theDiv.style.width=this.size;
theDiv.style.backgroundColor=
"rgb("+this.colorRed+", "+this.colorGreen+", "
+this.colorBlue+")";
}
...
|
제어 스크립트 안에 실제 객체를 생성했다. 따라서 제일 먼저 할 일은 키워드를 사용해 속성들을 설정하는 것이다. 그러나 이것을 모두 하더라도 우리가 실제로 볼 수 있는 것을 만들어내지는 않는다. 그렇게 하려면, 새로운 div를 만들어야 한다.
Document 객체를 사용해 새로운 div 엘리먼트를 만들고 그것의 ID 속성을 설정한다. 그렇게 해야 이 값을 참조하여 그것의 스타일을 설정할 수 있을 것이다. 다음으로, 이전에 정적인 HTML 페이지에 만들어 두었던 환경에 해당하는 div 참조를 얻어 낸다. 이것을 사용하여 새로운 div를 하위 엘리먼트로 추가할 수 있다.
그곳에서 현재 div에 대한 새로운 참조를 얻어낸 다음 이것을 사용하여 그 속성을 설정한다. 몇몇 문법이 이전에 사용했던 CSS 속성과 조금 다르다는 것을 알 수 있을 것이다. 특히 background-color 가 backgroundColor로 바뀌었다.
이제 속성을 갖고 있는 div를 만들어낼 수 있는 능력을 갖게 되었다. 다음으로 해야 할 일은 페이지가 그것을 하도록 하는 것이다. Environment.js를 더블 클릭하고 다음 코드를 추가한다. 이때 우리가 기본 편집기로 설정해둔, JSEclipse 편집기가 나타나야 한다.
Listing 9. 새 생명체 만들기
function createNewEnvironment(){
size = 100;
theCreature1 = new Creature();
theCreature1.createAt("thisId1", 0, 100,
100, size, 150, 150, 150, 0, 0);
}
|
먼저 크기를 설정한다, 왜 그러는지는 금방 알 수 있을 것이다. 다음으로 Creature 클래스의 새로운 객체 theCreature1을 만든다. 이 객체를 만든 다음 createAt() 메서드를 사용해 새로운 생명체를 페이지에 추가할 수 있다.
파일을 저장하고 정적인 div를 environment.html에서 제거한다. 이제 페이지를 다시 읽어 들이면(refresh), 그림 19처럼 새로 만들어진 생명체를 볼 수 있을 것이다.
그림 19. 새 생명체
이제 자바스크립트를 통해 생명체를 창조할 수 있다. 지금까지 한 일들을 서로 엮어 보자.
임의의 생명체 두 개 만들기
이제 임의의 두 개의 생명체 Adam과 Eve를 만들 준비가 되었다. 해야 할 일은 간단하게 createAt() 메서드를 사용하면 된다. 이 때, Listing 10의 environment.js 파일에 보이는 것처럼 임의의 값을 설정해 두어야 한다.
Listing 10. 임의의 생명체 두 개 만들기
var maxSize = 100;
var maxWidth = 600;
var maxHeight = 500;
var theCreature;
var theCreature2;
var interval = 100;
function rand(maxNum){
return Math.round(maxNum*Math.random());
}
function createNewEnvironment(){
size = rand(maxSize);
theCreature1 = new Creature();
theCreature1.createAt("thisId1", 0, rand(maxWidth-size),
rand(maxHeight-size), size,
rand(255), rand(255), rand(255),
-10 + rand(20), -10 + rand(20));
size = rand(maxSize);
theCreature2 = new Creature();
theCreature2.createAt("thisId2", 1, rand(maxWidth-size),
rand(maxHeight-size), size,
rand(255), rand(255), rand(255),
-10 + rand(20), -10 + rand(20));
}
|
좋다. 이 코드를 처음부터 끝까지 살펴보자. 먼저 임의의 수를 얻기 위한 편의성 함수를 만든다. Math.random()은 0과 1 사이의 임의의 수를 반환해준다. 그러면 그 수를 받아 10으로 곱하면 0부터 10 사이의 수를 받을 수 있다. 그 뒤에 소수점 이하를 반올림하여 우리가 원하는 정수 값으로 만든다.
다음은 첫 번째 생명체의 크기를 설정한다. 이것으로 위치를 정할 것이기 때문에 가장 먼저 설정해야 한다. 생명체가 환경의 가장자리에 걸쳐있는 것을 원하지 않기 때문에 위치를 요청하기 전에 환경의 높이와 넓이에서 생명체 크기를 뺀 값이 필요하다.
다시 임의의 수 세 개를 사용해 색을 설정했다. 그리고 마지막으로 속도를 설정했다. 속도는 10(위나 왼쪽으로 움직인다)에서 10(아래나 오른쪽으로 움직인다) 사이의 값을 설정하고 싶다. 따라서 범위를 20으로 만들고 얻은 결과값에서 10을 뺐다. 새로운 id 속성을 준 것 빼고는 위와 똑같은 과정으로 두 번째 생명체도 만들었다.
페이지를 다시 읽어 들이면, 두 개의 임의의 블록을 확인할 수 있다.
그림 20. 임의로 만든 블록 두 개
페이지를 다시 읽어 들일 때마다 두 개의 새로운 생명체를 얻을 수 있다. 다음에는 이 기능을 사용해 여러분이 원하는 대로 시도를 하고 다시 시작할 수 있다.
| |
