Creative Coding 독학 제270일 2024년12월22일(일)

2024년 12월 22일

오늘은~~^^*

Interactive Selection 상호작용 선택 알고리즘 기반의 Interactive Media 상호작용 미디어 작품의 코드를 살펴 보는 날이예요~~^^*

YEAH~~^^*

그런데요~~^^* 크리스마스가 되기까지 3일 남았네요~^^*

숫자 3은 음(1)과 양(2)이 서로 조화를 이루어 화합하고 새로운 것을 창조한다는 의미를 가지고 있다고 하네요~^^*

네~^^*

피아노 듀오 + 오케스트라 + 합창단

피아노 솔로 + 오케스트라 + 사람 테너 + 인형 중창

여성 트리오 + 바이올린 + 오케스트라 + 합창단

여성 아이돌 솔로 + 남성 아이돌 중창

나와 너가 만나 우리를 넘어선 그 무언가를 창조하는 멋진 날~^^*

크리스마스 되기 3일 남은 날이예요~^^*

우리도~~^^* 크리스마스 3일 남은 날답게~^^*

멋진 창작품인 Interactive Media 상호작용 미디어 작품의~^^*

상호작용 선택 Interactive Selection의 핵심 코드를 함께 살펴 볼까요~^^*

YEAH~^^*

노래 듣고 계시면~^^* 코드 정리해서 바로 돌아올게요~~^^* 쓩~^^*

이 꽃들의 genotype 유전형을 살펴 보겠습니다~^^*

이 꽃들의 DNA인 배열 genes[]는 genes[0]에서 genes[13]까지 14개의 구성요소를 가지고 있습니다.

그리고 구성요소 genes[i]에 기록된 DATA 정보는 0과 1 사이의 무작위 실수입니다~^^*

class DNA {
  constructor() {
    this.genes = [];
    for (let i = 0; i < 14; i++) {
      this.genes[i] = random(0, 1);
    }
  }
 .
 .
 .
}

2. 이 꽃들의 phenotype 표현형을 살펴 보겠습니다~^^*

class Flower {
    .
    .
    .

  show() {
    let genes = this.dna.genes;
    let c = color(genes[0], genes[1], genes[2], genes[3]); 
    // 꽃잎 색을 변수 c에 저장합니다. genes[0],[1], [2], [3]이 각각 Red 빨강, Green 초록, Blue 파랑, Opacity 불투명도 값이 되어, 함수 color()가 색상값을 만들어 주는 것 같습니다. 
    //그런데....genes[i]의 값이 0에서 1사이의 실수인데...
    //그러면...color()의 값이 검은데 투명하여 눈에 안보일 것 같은데...
    //그래서...map(genes[i], 0, 1, 0, 255)를 사용하여
    //0에서 255까지 값 차이를 내어 주어야 할 것 같은데...
    //그런 작업 없이 바로 변수 c에 저장하는 것이 좀 의아합니다.
    //플레이를 해보면 색이 잘 나오고 있어서...
    //함수 color() 안에 mapping 기능이 내장되어 있나...싶기도 한데...
    //함수 color()만 따로 테스트 해보면..color(R, G, B) 무채색 color(R, G, B, O) 투명색으로 나와서 고개를 갸우뚱거리게 되어요.... 
  
     //테스트를 해 보시겠어요?  


    let size = map(genes[4], 0, 1, 4, 24); 
    //꽃잎 크기입니다. 수치는 0=> 4 1=> 24 비례관계로 mapping하여 조정합니다. 
    let count = floor(map(genes[5], 0, 1, 2, 16)); 
    //꽃잎 갯수입니다. 수치는 0=> 2 1=> 16 비례관계로 mapping하여 조정합니다.
    let centerColor = color(genes[6], genes[7], genes[8]); 
    //꽃 가운데 부분 색상입니다. 근데 mapping 작업은요????
    let centerSize = map(genes[9], 0, 1, 24, 48); 
    //꽃 가운데 부분 크기입니다. 수치는 수치는 0=> 24 1=> 48 비례관계로 mapping하여 조정합니다.
    let stemColor = color(genes[10], genes[11], genes[12]); 
    //줄기 색상입니다. 근데 mapping 작업은요? 
    let stemLength = map(genes[13], 0, 1, 50, 100); 
    //줄기 길이입니다.수치는 0=> 50 1=> 100 비례관계로 mapping하여 조정합니다. 

    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();

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

  // 마우스가 꽃 주변에 있으면 Fitness 적합성 수치를 올립니다.  
  rollover(mx, my) {
    if (this.boundingBox.contains(mx, my)) {
      this.rolloverOn = true;
      this.fitness += 0.25;
    } else {
      this.rolloverOn = false;
    }
  }
}

네~^^* 오늘 저와 함께 꽃들의 genotype 유전형과 phenotype 표현형에 대한 핵심코드를 살펴봐 주셔서 감사합니다~^^*

그리고~^^*

함수 color()의 0과 1 사이 실수 mapping 기능 내장 여부에 대해 함께 고민해 주셔서 감사합니다.

mapping 기능이 내장되어 있지 않은 것 같은데….

이 프로그램은 잘 작동이 되어서….

좀더 고민해 보겠습니다~~^^*

슬퍼하거나 괴로워하는 가사인데 왠지 신나게 되는 오묘한 박자라서 세월을 거슬러 여전히 흥미로운 노래처럼~^^* 0과 1 사이 수 => 0과 255 사이 수 mapping이 안되는 것 같은데 색상은 잘 나오고 있는 오묘한 프로그램인 것 같아요~^^* 신기하네요….^^* 숫자 3의 비밀을 담고 있는 함수 color()인가요~^^*?

내일은 우리 음악 함께 듣고요~^^*

화요일 다시 코딩 공부 이어갈까요~~^^*

화합과 창조의 수 3~~!!!

크리스마스 3일 전인 오늘도 멋진 하루! 보내시고요~!

내일 우리 다시 또 만나요~!

네~!! 꿈은 이루어 집니다~~!!

앗!!! 잠시만요!!!!

원인을 찾아 내었습니다~~!!!

원인은, setUp() 함수에서 함수 colorMode(RGB, 1); 사용을 안해서 입니다!!!

꽃 프로그램의 setUp() 파트를 보시면~~^^* colorMode()를 사용하고 있습니다!

function setup() {
  createCanvas(640, 240);
  colorMode(RGB, 1);
  // This is a very small population!
  let populationSize = 8;
  // A pretty high mutation rate here, our population is rather small we need to enforce variety
  let mutationRate = 0.05;
  // Create the population
  population = new Population(mutationRate, populationSize);
  // A p5.js button
  button = createButton("evolve new generation");
  button.mousePressed(nextGeneration);
  button.position(10, 10);
}

그래서~^^* 함수 color() 테스트 프로그램에 colorMode();를 덧붙였더니!!

function setup() {
  createCanvas(120, 100);
  colorMode(RGB, 1);

  background(200);

 
  let r = random(0,1);
  let g = random(0,1);
  let b = random(0,1);
  let o = random(0.1);
  let c1 = color(r, g, b);
  let c2 = color(r, g, b, o);
  

  fill(c1);
  noStroke();
  square(10, 25, 50);
  
  fill(c2);
  stroke(255);
  square(60, 25, 50)

}

프로그램을 플레이 할 때마다 무작위 색상으로 잘 표현되고 있습니다~~^^*

네~~^^* 화합과 창조의 숫자 3의 비밀은 바로 colorMode(); 였습니다~~!!!

  // Use RGB color with values in the range 0-100.
  colorMode(RGB, 100);
  //100으로 설정하면 0에서 100 사이 수의 범위로 RGB표현하고

  colroMode(RGB, 1);
  //1로 설정하면 0에서 1 사이의 수의 범위로 RGB를 표현하기 떄문에~ 

  //0에서 1 사이의 무작위 실수를 담고 있는 genes[i]의 값을 따로 다른 수치의 구간으로 mapping할 필요가 없는 것이었습니다!!!

네~^^*

고민이 해결되어 상쾌한 기분이 드네요~^^*

고민 해결을 함께 기뻐해 주셔서 감사합니다~!!!

우리 내일 또 만나요~^^*

네~~!!! 꿈은 이루어 집니다~!!!

Silverback9

Creative Coding 독학 제270일 2024년12월22일(일)

댓글 남기기 응답 취소

Creative Coding 독학 제270일 2024년12월22일(일)

이 글 공유하기:

댓글 남기기 응답 취소