Silverback9

오늘은~~^^* Weighted Selection 코드 공부를 이어나가 보겠습니다~~^^*

일요일 공부하다가 좀 헷갈렸다가 colorMode()의 역할을 알게 되어 신기하기도 했었는데요~~^^*

네~^^* colorMode(RGB, 1); 작업문 덕분에, color 값 범위를 0에서 1 사이 실수 범위로 유지해도 된다는 것을 알게 되었었지요~~^^*

안될 것 같은데, 왜 작동이 잘 되는 것이지? 작동이 잘 되는 이유를 결국 찾아내어 참 신기하고 감사한 경험이었어요~^^*

그런데~~^^*

어머~~^^* 크리스마스가 1일 남았네요!!!

숫자 1은 시작을 의미한다고 하네요~~^^*

진짜 크리스마스가 시작된다는 것을 실감하는 Christmas Eve예요~~^^* 우리 Live로 Christmas Eve를 축하할까요~~^^*

크리스마스가 시작하는 날인 오늘! 크리스마스가 1일 남은 오늘!

행복한 시간을 선물받는 날~^^* 행복한 시간을 선물하는 날~^^* 감사한 마음~^^* 보람찬 마음~^^* 가득한 오늘이 될거예요~~^^* Yeah~~^^*

네~~^^* 저는 코딩공부 정리해서 곧 돌아올게요~~^^* 음악과 함께 즐거운 시간 보내고 계셔요~~^^*

class DNA {
  constructor() {

    this.genes = [];
    for (let i = 0; i < 14; i++) {
      this.genes[i] = random(0, 1);
    }
  }
  //0에서 1사이 무작위 실수를 genes[i]에 저장합니다. 

  crossover(partner) {
    let child = new DNA();


    let midpoint = floor(random(this.genes.length));
    for (let i = 0; i < this.genes.length; i++) {
   
      if (i < midpoint) {
        child.genes[i] = this.genes[i];
      
      } else {
        child.genes[i] = partner.genes[i];
      }
    }
    return child;
  }
  //0에서 genes[] 구성요소 총 갯수 사이 무작위 수를 교차 기준점으로 하여 child.genes[i]의 앞부분은 this.genes[i]의 데이터를, 뒷부분은 partner.genes[i] 데이터를 저장하여, 교차 작업을 합니다. 

  mutate(mutationRate) {
    for (let i = 0; i < this.genes.length; i++) {

      if (random(1) < mutationRate) {
        this.genes[i] = random(1);
      }
    }
  }
  //돌연변이최대확률보다 작은 수의 무작위 값이 나왔을 경우, this.genes[i]에 0에서 1 사이의 무작위 값을 저장하여 돌연변이 시킵니다. 
}

class Flower {
  constructor(dna, x, y) {
    this.rolloverOn = false; 
    this.dna = dna;
    this.x = x; 
    this.y = y;
    this.w = 70; 
    this.h = 140; 
    this.fitness = 1;
    this.boundingBox = new Rectangle(
      this.x - this.w / 2,
      this.y - this.h / 2,
      this.w,
      this.h
    );
  }
  //꽃의 dna와 화면 위치좌표와 크기, 적합성 수치, 그리고 사각형 틀 위치좌표과 크기 에 대한 값을 구성요소로 가지고 있습니다.
  //this.boundingBox는 Class Rectangle을 생성하여 저장한 변수입니다. 

  
  show() {
    let genes = this.dna.genes;
    let c = color(genes[0], genes[1], genes[2], genes[3]); // 꽃잎 색상
    let size = map(genes[4], 0, 1, 4, 24); // 꽃잎 크기
    let count = floor(map(genes[5], 0, 1, 2, 16)); // 꽃잎 갯수
    let centerColor = color(genes[6], genes[7], genes[8]); // 중심 색상
    let centerSize = map(genes[9], 0, 1, 24, 48); // 중심 크기
    let stemColor = color(genes[10], genes[11], genes[12]); // 줄기 색상
    let stemLength = map(genes[13], 0, 1, 50, 100); // 줄기 길이 

    push(); 꽃 하나를 그리기 시작합니다. 

    translate(this.x, this.y);
    // 꽃의 위치좌표를 중심으로 한 상대좌표 체계로 바꿉니다. 

    if (this.rolloverOn) fill(0, 0.25);
    else noFill();
    stroke(0);
    strokeWeight(0.5);
    rectMode(CENTER);
    rect(0, 0, this.w, this.h);
    //사각형 틀을 그립니다. 
    //마우스가 사각형 틀 내부에 있을 때 사각형을 회색으로 채웁니다. 

    translate(0, this.h / 2 - stemLength);
    //사각의 중심에서, 줄기 길이 차만큼 올라가거나 내려간 위치을 중점으로 한 상대좌표체계로 바꿉니다. 
    //줄기의 윗부분 끝점이 중점이 됩니다. 

    stroke(stemColor);
    strokeWeight(4);
    line(0, 0, 0, stemLength);
    //줄기 길이만큼 아래로 선을 그립니다. 

    noStroke();
    fill(c);
    for (let i = 0; i < count; i++) {
      let angle = map(i, 0, count, 0, TWO_PI);
      let x = size * cos(angle);
      let y = size * sin(angle);
      ellipse(x, y, size, size);
    }
    //꽃잎을 그립니다. 

    fill(centerColor);
    ellipse(0, 0, centerSize, centerSize);
    //중심을 그립니다. 

    pop(); //꽃 하나 그리기를 마무리합니다. 

    textAlign(CENTER);
    if (this.rolloverOn) fill(0);
    else fill(0.25);
    text("" + floor(this.fitness), this.x, this.y + 90);
  }
    //적합성 수치를 보여줍니다. 

 
  rollover(mx, my) {
    if (this.boundingBox.contains(mx, my)) {
      this.rolloverOn = true;
      this.fitness += 0.25;
    } else {
      this.rolloverOn = false;
    }
  //마우스가 사각형 틀 영역 안에 있을 동안 fitness 적합성 수치를 계속 증가시킵니다. 
  }

 //꽃과 사각틀의 시각적 표현, 마우스가 사각틀 안에 머물고 있는 상태 표현, 적합성 수치값 증가 및 적합성 수치값 표시 등의 일을 합니다. 
  
}

class Rectangle {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
  }

  contains(px, py) {
    return (
      px > this.x &&
      px < this.x + this.width &&
      py > this.y &&
      py < this.y + this.height
    );
  }
}
//this.boundingBox가 될 class Rectangle입니다. 

네~^^* 오늘은

(1) 꽃의 dna (= genotype 유전형),

(2) 꽃의 시각적 묘사 (= phenotype 표현형),

(3) 꽃을 둘러싼 상자와

(4) 그 안에 마우스가 위치할 때의 시각적 표현과 꽃의 fitness 적합성 수치 증가

에 대해 보다 상세하게 살펴 보았습니다~^^*

오늘 저와 함께 핵심 코드 내용 들여다 봐주셔서 감사합니다~^^*

핵심코드를 살펴보았으니, 프로그램 플레이도 한 번 더 해 볼까요~~^^* 좀 더 친숙한 느낌이 들 것 같아요~~^^*

우리 내일은~~^^* 이렇게 증가된 fitness 값이 다음 세대 꽃들의 전반적 특성에 어떻게 영향을 주는지 그 작용방법을 함께 살펴 볼까요~~^^*

성탄 전날은 성탄 시작이기도 해서요~^^*

많이 설레고 기쁜 것 같아요~^^*

오늘도 멋진 하루 보내시며~^^*

기쁨 선사하는 보람~^^*

기쁨 나누는 감사함~^^*

만끽하시기 바래요~^^*

그리고 우리 내일 또 만나면 좋겠어요~~^^*

네~~^^* 꿈은 이루어 집니다~~^^*