Creative Coding 독학 제319일 2025년02월09일(일)

2025년 2월 9일

하얗게 쌓인 눈, 나뭇가지에 앉은 눈들은~^^*

새하얀 소금처럼 눈이 부시기도 하지요~^^*

겨울의 눈 온 풍경은 소금 사막의 사계절 풍경~^^* 눈이 깔린 겨울같이 큰 거울을 깔고 그 위에서 편안한 음악을 함께 들을까요~^^* 아침을 덥히고 계셔요~^^* 공부 정리해서 돌아올게요~^^* 쓩우웅~^^*

네~^^* 우리들의 태초의 vehicle은 food과 poison 구별 없이 -5에서 5사이의 무작위적인 기억을 가지고 있는데요. 그래서 플레이할 때마다 이 기억의 weight 가중치가 달라지는데요. 우리는 vehicle의 행동을 관찰하면서 food와 poison에 대한 weight가 각각 얼마일지 유추할 수 밖에 없었지요…

food를 먼저 열심히 먹는 것을 보면…음…food에 대한 기억 가중치가 positive 긍정적이구나…

poison을 우선적으로 먹는 것을 보면 …음..poison 가중치가 더 높은 것 같은데…

캔버스를 벗어나 돌아오지 않는 것을 보면…food와 poison에 대한 기억 가중치가 모두 negative 부정적이어서 아예 캔버스를 벗어나 버리는 구나…. 등등요~^^*

오늘은 이 dna에 심겨진 food와 poison에 대한 기억 가중치 dna[0]와 dna[1]의 값을 시각적으로 표현해 보겠습니다~^^*

(1) food에 대한 유전적 기억 가중치 값 dna[0]을 녹색 선으로 표현해 보겠습니다. vehicle의 몸의 중점에서 몸의 앞 쪽으로 뻗어 나오면 가중치 값이 positive 한 것으로 할 게요. 그리고 몸의 뒤 쪽으로 뻗어 나오면 가중치 값이 negative 한 것으로 하겠습니다.

(2) poison에 대한 유전적 기억 가중치 값 dna[1]을 빨간 선으로 표현해 보겠습니다. 가중치 값이 positive하면 몸의 중심으로부터 몸의 앞 쪽으로 뻗어나오고, negative하면 몸의 뒤 쪽으로 뻗어 나오겠네요.

(3) p5.js graphic 환경에서 y축의 positive 값은 아래를 향하게 되지요? 그래서, 유전적 기억 가중치의 positive 값이 위쪽을 향하는 ( 몸 앞으로 향하는) 선으로 표현될 수 있도록, 기억 가중치 값 앞에 “–“를 덧붙이겠습니다.

(4) 가중치 값을 이 선들의 길이값으로 사용해 보려고 하니, 가중치 값 범위가 -5에서 +5 사이라서 최대 5 pixel이면 눈에 잘 보이지 않겠어요…음…그래서 *20을 해 볼게요…그러면 몸 뒤 쪽으로 최대 100 pixel 또는 몸 앞 쪽으로 최대 100 pixel 길이의 선이 생길 수 있겠네요.

stroke(0, 255, 0);
line(0, 0, 0,-this.dna[0] * 20);
stroke(255, 0, 0);
line(0, 0, 0,-this.dna[1] * 20);

그러면 이제, vehicle을 시각적으로 표현하는 class Vehicle의 내장 함수 display()를 개선해 보겠습니다~^^*

class Vehicle {
     .
     .
     .
  display() {
    let angle = this.velocity.heading() + PI / 2;
    
    push();

    translate(this.position.x, this.position.y);
    rotate(angle);
    
    
    stroke(0, 255, 0);
    line(0, 0, 0,-this.dna[0] * 20);
    stroke(255, 0, 0);
    line(0, 0, 0,-this.dna[1] * 20);
    
    fill(127);
    stroke(200);
    strokeWeight(1);
    
    beginShape();
    vertex(0, -this.r * 2);
    vertex(-this.r, this.r * 2);
    vertex(this.r, this.r * 2);
    endShape(CLOSE);

    pop();
    
  }

//dna[0]와  dna[1]의 값이 모두 positive: vehicle의 몸 앞으로 녹색 선과 빨간 선이 겹쳐져 그려집니다. 초록색 선이 더 길면, food를 우선적으로 먹으며 poison을 천천히 먹겠네요. 빨간선이 더 길면, poison을 더 열심히 먹습니다.  
//dna[0]와 dna[1]의 값이 모두 negative: vehicle의 몸 뒤로 녹색 선과 빨간 선이 겹쳐져 그려집니다. food와 poison을 피하기 위해 캔버스 밖으로 나가버릴 것 같네요. 
//dna[0] positive dna[1] negative: vehicle의 몸 앞으로 녹색 선 vehicle의 몸 뒤로 빨간 선이 그려집니다. food만 먹고 poison을 피할 것 같네요. 
//dna[0] negative dna[1] positive: vehicle의 몸 앞으로 빨간 선 vehicle의 몸 뒤로 녹색 선이 그려집니다. poison만 먹고 food를 피할 것 같네요.  
    .
    .
    .
}

이제 태초의 vehicle의 food와 poison에 대한 기억 가중치를 시각적으로 표현한 선을 보면서, vehicle의 행동 모습을 이해해 볼까요~^^* 여러 번 플레이를 해보면 다양한 경우의 행동들을 관찰할 수 있을 것 같아요~~^^*

네~^^* 오늘 저와 함께 food와 poison에 대한 태초의 vehicle의 기억 가중치를 시각적으로 표현해 주셔서 감사합니다~^^* 선명하게 잘 보여주셔서 감사합니다~^^*